Skip to content

Commit 58875ca

Browse files
astaiglesiaastaiglesia
committed
merge new PR
2 parents 5bfc0b6 + 39760b4 commit 58875ca

File tree

15 files changed

+427
-118
lines changed

15 files changed

+427
-118
lines changed

‎deprecated files/todoDemo.mov‎

8.89 MB
Binary file not shown.

‎src/components/AccTestComponent/AccTestTypes/AccTestTypes.module.scss‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
#AccTestTypesComponent{
2+
margin-right: 35px;
3+
}
4+
5+
#AccTestTypesLabel {
6+
display: block;
7+
margin-bottom: 6px;
8+
}
9+
10+
.AccTestTypesInput{
11+
margin-top: 4px;
12+
min-height: 35px;
13+
}

‎src/components/AccTestComponent/AccTestTypes/AccTestTypes.tsx‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import React from 'react';
2+
import styles from './AccTestTypes.module.scss';
3+
4+
const AccTestTypes = ({ dispatch, action, currTypes }) => {
5+
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
6+
dispatch(action(e.target.value));
7+
};
8+
9+
return (
10+
<div id={styles.AccTestTypesComponent}>
11+
<label id={styles.AccTestTypesLabel} for='accTestTypes'>
12+
Choose Type of Accessibility Test
13+
</label>
14+
<select value={currTypes} id='accTestTypes' className={styles.AccTestTypesInput} onChange={handleChange}>
15+
<option value='html'>HTML</option>
16+
<option value='react'>React</option>
17+
<option value='puppeteer'>Puppeteer</option>
18+
</select>
19+
</div>
20+
);
21+
};
22+
23+
export default AccTestTypes;

‎src/components/AccTestComponent/PuppeteerUrl/PuppeteerUrl.tsx‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import React from 'react';
2+
// import styles used in AccTestTypes for input labels et al.
3+
import styles from '../AccTestTypes/AccTestTypes.module.scss';
4+
5+
const AccTestTypes = ({ dispatch, action }) => {
6+
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
7+
dispatch(action(e.target.value));
8+
};
9+
10+
return (
11+
<div id={styles.AccTestTypesComponent}>
12+
<label id={styles.AccTestTypesLabel}>URL to be Tested:</label>
13+
<input onChange = { handleChange } placeholder='https://sample.io'>
14+
</input>
15+
</div>
16+
);
17+
};
18+
19+
export default AccTestTypes;

‎src/components/Modals/Modal.jsx‎

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,8 @@ const Modal = ({
1515
dispatchToMockData,
1616
dispatchTestCase,
1717
createTest,
18+
testType = null,
19+
puppeteerUrl = 'sample.io',
1820
}) => {
1921
const { copySuccess, codeRef, handleCopy } = useCopy();
2022
const { handleNewTest } = useNewTest(
@@ -24,7 +26,7 @@ const Modal = ({
2426
closeModal,
2527
);
2628

27-
const script = useGenerateScript(title);
29+
const script = useGenerateScript(title, testType, puppeteerUrl);
2830

2931
const modalStyles = {
3032
overlay: {
@@ -61,6 +63,15 @@ const Modal = ({
6163
<code ref={codeRef}>
6264
{script}
6365
</code>
66+
67+
{testType === 'react'
68+
?
69+
<p id={styles.endpoint}>
70+
Requires React version 16 or less.
71+
</p>
72+
: null
73+
}
74+
6475
<p id={styles.endpoint}>
6576
Note if you are using Create React App do not install jest
6677
</p>

‎src/components/Modals/modalHooks.js‎

Lines changed: 25 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -35,15 +35,34 @@ export function useNewTest(dispatchToMockData, dispatchTestCase, createTest, clo
3535
return { handleNewTest };
3636
}
3737

38-
export function useGenerateScript(test) {
38+
export function useGenerateScript(test, testType = null, puppeteerUrl = 'sample.io') {
3939
const [{ projectFilePath }] = useContext(GlobalContext);
4040
switch (test) {
4141
case 'acc':
42-
return (
43-
`cd ${projectFilePath}\n` +
44-
'npm i -D axe-core regenerator-runtime jest\n' +
45-
'jest'
46-
);
42+
if (testType === 'html') {
43+
return (
44+
`cd ${projectFilePath}
45+
npm i -D axe-core regenerator-runtime jest
46+
jest`
47+
);
48+
}
49+
if (testType === 'react') {
50+
return (
51+
`cd ${projectFilePath}
52+
npm i -D axe-core regenerator-runtime jest enzyme enzyme-adapter-react-16
53+
jest`
54+
);
55+
}
56+
if (testType === 'puppeteer') {
57+
return (
58+
`cd ${projectFilePath}
59+
npm i -D axe-core puppeteer
60+
node <YOUR_DIR_PATH/TEST_FILE.JS> ${puppeteerUrl}
61+
`
62+
);
63+
64+
}
65+
return 'error';
4766
case 'react':
4867
return (
4968
`cd ${projectFilePath}\n` +

‎src/components/SearchInput/SearchInput.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@ ul.react-test-options li.option-active {
4848
}
4949

5050
.flex-item {
51-
width: 50%;
51+
width: 200px;
5252
margin-right: 7%;
5353
input {
5454
margin-top: 6px;

‎src/components/TestCase/AccTestCase.tsx‎

Lines changed: 32 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,31 @@
11
import React, { useContext, ChangeEvent } from 'react';
22
import cn from 'classnames';
33
import { DragDropContext, Droppable, DropResult } from 'react-beautiful-dnd';
4-
import styles from './TestCase.module.scss';
54
import {
65
updateDescribeText,
76
updateItStatementText,
87
updateDescribeOrder,
98
updateItStatementOrder,
9+
updateFilePath,
10+
updateTestType,
11+
createPuppeteerUrl,
1012
} from '../../context/actions/accTestCaseActions';
13+
import {
14+
AccTestCaseContext,
15+
} from '../../context/reducers/accTestCaseReducer';
1116
import { GlobalContext } from '../../context/reducers/globalReducer';
12-
import SearchInput from '../SearchInput/SearchInput';
1317

18+
import styles from './TestCase.module.scss';
1419
import AccTestMenu from '../TestMenu/AccTestMenu';
15-
20+
import AccTestTypes from '../AccTestComponent/AccTestTypes/AccTestTypes';
21+
import PuppeteerUrl from '../AccTestComponent/PuppeteerUrl/PuppeteerUrl';
22+
import SearchInput from '../SearchInput/SearchInput';
1623
import DecribeRenderer from '../AccTestComponent/DescribeRenderer/DescribeRenderer';
17-
import { updateImportFilePath } from '../../context/actions/accTestCaseActions';
18-
import {
19-
AccTestCaseContext,
20-
} from '../../context/reducers/accTestCaseReducer';
2124

2225
const AccTestCase = () => {
23-
const [accTestCase, dispatchToAccTestCase] = useContext(
24-
AccTestCaseContext,
25-
);
26+
const [accTestCase, dispatchToAccTestCase] = useContext(AccTestCaseContext);
2627

27-
const { describeBlocks, itStatements } = accTestCase;
28+
const { describeBlocks, itStatements, testType } = accTestCase;
2829

2930
const [{ filePathMap }] = useContext<any>(GlobalContext);
3031

@@ -62,20 +63,33 @@ const AccTestCase = () => {
6263

6364
return (
6465
<div id={styles.AccTestCase}>
65-
6666
<div id="head">
6767
<AccTestMenu />
6868
</div>
6969

7070
<section id={styles.testCaseHeader}>
71-
<label htmlFor="fileImport">Import File From</label>
72-
<div id={styles.labelInput} style={{ width: '80%' }}>
73-
<SearchInput
74-
options={Object.keys(filePathMap)}
71+
<div id={styles.accTestDiv}>
72+
<AccTestTypes
7573
dispatch={dispatchToAccTestCase}
76-
action={updateImportFilePath}
77-
filePathMap={filePathMap}
74+
action={updateTestType}
75+
currType={testType}
7876
/>
77+
78+
{testType === 'puppeteer' ? (
79+
<PuppeteerUrl dispatch={dispatchToAccTestCase} action={createPuppeteerUrl} />
80+
) : (
81+
<div>
82+
<label htmlFor="fileImport">Import File From</label>
83+
<div id={styles.labelInput} style={{ width: '80%' }}>
84+
<SearchInput
85+
options={Object.keys(filePathMap)}
86+
dispatch={dispatchToAccTestCase}
87+
action={updateFilePath}
88+
filePathMap={filePathMap}
89+
/>
90+
</div>
91+
</div>
92+
)}
7993
</div>
8094

8195
<DragDropContext onDragEnd={onDragEnd}>
@@ -102,7 +116,6 @@ const AccTestCase = () => {
102116
</Droppable>
103117
</DragDropContext>
104118
</section>
105-
106119
</div>
107120
);
108121
};

‎src/components/TestCase/TestCase.module.scss‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -149,3 +149,8 @@ div {
149149
align-items: center;
150150
margin-top: 6px;
151151
}
152+
153+
#accTestDiv {
154+
display: flex;
155+
justify-content: flex-start;
156+
}

‎src/components/TestMenu/AccTestMenu.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,6 @@ import {
1414
import { AccTestCaseContext } from '../../context/reducers/accTestCaseReducer';
1515
import { useToggleModal } from './testMenuHooks';
1616

17-
1817
const AccTestMenu = () => {
1918
// link to accessibility testing docs url
2019
const accUrl = 'https://www.deque.com/axe/core-documentation/api-documentation/';
@@ -25,7 +24,7 @@ const AccTestMenu = () => {
2524
const [{ projectFilePath, file, exportBool }, dispatchToGlobal] = useContext<any>(GlobalContext);
2625
const generateTest = useGenerateTest('acc', projectFilePath);
2726

28-
// setValidCode to true on load.
27+
// setValidCode to true on load.
2928
useEffect(() => {
3029
dispatchToGlobal(setValidCode(true));
3130
}, []);
@@ -68,6 +67,8 @@ const AccTestMenu = () => {
6867
dispatchToMockData={null}
6968
dispatchTestCase={dispatchToAccTestCase}
7069
createTest={createNewTest}
70+
testType={accTestCase.testType}
71+
puppeteerUrl={accTestCase.puppeteerUrl}
7172
/>
7273
{/* Just send user to docs on button click */}
7374
</div>
@@ -81,8 +82,7 @@ const AccTestMenu = () => {
8182
</button>
8283
</div>
8384
</div>
84-
</div>
85-
85+
</div>
8686
);
8787
}
8888

0 commit comments

Comments
 (0)