Skip to content

Commit 100ed6c

Browse files
taoantaoantaoantaoan
authored
Merge pull request #34 from oslabs-beta/revert-31-revert-29-acc-add-tests
Revert "Update Branch"
2 parents 7f07521 + cd90c82 commit 100ed6c

File tree

14 files changed

+427
-118
lines changed

14 files changed

+427
-118
lines changed

‎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

‎src/context/actions/accTestCaseActions.ts‎

Lines changed: 35 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -16,37 +16,33 @@ export const actionTypes = {
1616
CLOSE_INFO_MODAL: 'CLOSE_INFO_MODAL',
1717

1818
UPDATE_FILE_PATH: 'UPDATE_FILE_PATH',
19+
UPDATE_TEST_TYPE: 'UPDATE_TEST_TYPE',
20+
CREATE_PUPPETEER_URL: 'CREATE_PUPPETEER_URL',
1921

2022
TOGGLE_ACC: 'TOGGLE_ACC',
2123
};
2224

2325
/* --------------------------------- Actions -------------------------------- */
2426

25-
export const addDescribeBlock = () => {
26-
return {
27-
type: actionTypes.ADD_DESCRIBE_BLOCK,
28-
};
29-
};
27+
export const addDescribeBlock = () => ({
28+
type: actionTypes.ADD_DESCRIBE_BLOCK,
29+
});
3030

31-
export const deleteDescribeBlock = (describeId: string) => {
32-
return {
33-
type: actionTypes.DELETE_DESCRIBE_BLOCK,
34-
describeId,
35-
};
36-
};
31+
export const deleteDescribeBlock = (describeId: string) => ({
32+
type: actionTypes.DELETE_DESCRIBE_BLOCK,
33+
describeId,
34+
});
3735

3836
export const updateDescribeText = (text: string, describeId: string) => ({
3937
type: actionTypes.UPDATE_DESCRIBE_TEXT,
4038
text,
4139
describeId,
4240
});
4341

44-
export const updateDescribeOrder = (reorderedDescribe: Array<string>) => {
45-
return {
46-
type: actionTypes.UPDATE_DESCRIBE_ORDER,
47-
reorderedDescribe,
48-
};
49-
};
42+
export const updateDescribeOrder = (reorderedDescribe: Array<string>) => ({
43+
type: actionTypes.UPDATE_DESCRIBE_ORDER,
44+
reorderedDescribe,
45+
});
5046

5147
export const addItStatement = (describeId: string) => ({
5248
type: actionTypes.ADD_ITSTATEMENT,
@@ -65,28 +61,36 @@ export const updateItStatementText = (text: string, itId: string) => ({
6561
text,
6662
});
6763

68-
export const updateItStatementOrder = (reorderedIt: Array<string>, describeId: string) => {
69-
return {
70-
type: actionTypes.UPDATE_ITSTATEMENT_ORDER,
71-
reorderedIt,
72-
describeId,
73-
};
74-
};
64+
export const updateItStatementOrder = (reorderedIt: Array<string>, describeId: string) => ({
65+
type: actionTypes.UPDATE_ITSTATEMENT_ORDER,
66+
reorderedIt,
67+
describeId,
68+
});
7569

7670
export const createNewTest = () => ({
7771
type: actionTypes.CREATE_NEW_TEST,
7872
});
7973

80-
export const openInfoModal = () => {
81-
return { type: actionTypes.OPEN_INFO_MODAL };
82-
};
74+
export const openInfoModal = () => ({
75+
type: actionTypes.OPEN_INFO_MODAL,
76+
});
8377

84-
export const closeInfoModal = () => {
85-
return { type: actionTypes.CLOSE_INFO_MODAL };
86-
};
78+
export const closeInfoModal = () => ({
79+
type: actionTypes.CLOSE_INFO_MODAL,
80+
});
8781

88-
export const updateImportFilePath = (fileName: string, filePath: string) => ({
82+
export const updateFilePath = (fileName: string, filePath: string) => ({
8983
type: actionTypes.UPDATE_FILE_PATH,
9084
fileName,
9185
filePath,
9286
});
87+
88+
export const updateTestType = (testType: string) => ({
89+
type: actionTypes.UPDATE_TEST_TYPE,
90+
testType,
91+
});
92+
93+
export const createPuppeteerUrl = (puppeteerUrl: string) => ({
94+
type: actionTypes.CREATE_PUPPETEER_URL,
95+
puppeteerUrl,
96+
});

0 commit comments

Comments
 (0)