merge changes from PR #29 for acc-react and acc-puppeteer

Author: annieshinn

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

@@ -0,0 +1,13 @@
+#AccTestTypesComponent{
+  margin-right: 35px;
+}
+
+#AccTestTypesLabel {
+  display: block;
+  margin-bottom: 6px;
+}
+
+.AccTestTypesInput{
+  margin-top: 4px;
+  min-height: 35px;
+}

src/components/AccTestComponent/AccTestTypes/AccTestTypes.tsx

@@ -1,14 +1,17 @@
 import React from 'react';
+import styles from './AccTestTypes.module.scss';
 
 const AccTestTypes = ({ dispatch, action, currTypes }) => {
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     dispatch(action(e.target.value));
   };
 
   return (
-    <div id='sampleAccTest'>
-      <label for='accTestTypes'>Choose Type of Accessibility Test:  </label>
-      <select value={currTypes} id='accTestTypes' onChange={handleChange}>
+    <div id={styles.AccTestTypesComponent}>
+      <label id={styles.AccTestTypesLabel} for='accTestTypes'>
+        Choose Type of Accessibility Test
+      </label>
+      <select value={currTypes} id='accTestTypes' className={styles.AccTestTypesInput} onChange={handleChange}>
         <option value='html'>HTML</option>
         <option value='react'>React</option>
         <option value='puppeteer'>Puppeteer</option>

src/components/AccTestComponent/PuppeteerUrl/PuppeteerUrl.tsx

@@ -1,14 +1,16 @@
 import React from 'react';
+// import styles used in AccTestTypes for input labels et al.
+import styles from '../AccTestTypes/AccTestTypes.module.scss';
 
 const AccTestTypes = ({ dispatch, action }) => {
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     dispatch(action(e.target.value));
   };
 
   return (
-    <div>
-      <label>URL to be Tested:</label>
-      <input onChange = { handleChange }>
+    <div id={styles.AccTestTypesComponent}>
+      <label id={styles.AccTestTypesLabel}>URL to be Tested:</label>
+      <input onChange = { handleChange } placeholder='https://sample.io'>
       </input>
     </div>
   );

src/components/Modals/modalHooks.js

@@ -57,7 +57,7 @@ export function useGenerateScript(test, testType = null, puppeteerUrl = 'sample.
         return (
           `cd ${projectFilePath}
           npm i -D axe-core puppeteer
-          node <YOUR_TEST_FILE_NAME.JS> ${puppeteerUrl}
+          node <YOUR_DIR_PATH/TEST_FILE.JS> ${puppeteerUrl}
           `
         );
 

src/components/SearchInput/SearchInput.scss

@@ -48,7 +48,7 @@ ul.react-test-options li.option-active {
 }
 
 .flex-item {
-  width: 50%;
+  width: 200px;
   margin-right: 7%;
   input {
     margin-top: 6px;

src/components/TestCase/AccTestCase.tsx

@@ -59,27 +59,29 @@ const AccTestCase = () => {
       </div>
 
       <section id={styles.testCaseHeader}>
-        <AccTestTypes
-          dispatch={dispatchToAccTestCase}
-          action={updateTestType}
-          currType={testType}
-        />
+        <div id={styles.accTestDiv}>
+          <AccTestTypes
+            dispatch={dispatchToAccTestCase}
+            action={updateTestType}
+            currType={testType}
+          />
 
-        {testType === 'puppeteer' ? (
-          <PuppeteerUrl dispatch={dispatchToAccTestCase} action={createPuppeteerUrl} />
-        ) : (
-          <div>
-            <label htmlFor="fileImport">Import File From</label>
-              <div id={styles.labelInput} style={{ width: '80%' }}>
-                <SearchInput
-                  options={Object.keys(filePathMap)}
-                  dispatch={dispatchToAccTestCase}
-                  action={updateFilePath}
-                  filePathMap={filePathMap}
-                />
+          {testType === 'puppeteer' ? (
+            <PuppeteerUrl dispatch={dispatchToAccTestCase} action={createPuppeteerUrl} />
+          ) : (
+            <div>
+              <label htmlFor="fileImport">Import File From</label>
+                <div id={styles.labelInput} style={{ width: '80%' }}>
+                  <SearchInput
+                    options={Object.keys(filePathMap)}
+                    dispatch={dispatchToAccTestCase}
+                    action={updateFilePath}
+                    filePathMap={filePathMap}
+                  />
+                </div>
               </div>
-            </div>
-          )}
+            )}
+        </div>
 
         <DragDropContext onDragEnd={onDragEnd}>
           <Droppable

src/components/TestCase/TestCase.module.scss

@@ -149,3 +149,8 @@ div {
   align-items: center;
   margin-top: 6px;
 }
+
+#accTestDiv {
+  display: flex;
+  justify-content: flex-start;
+}

src/context/useGenerateTest.jsx

@@ -836,6 +836,7 @@ function useGenerateTest(test, projectFilePath) {
           } else {
             violations.forEach(axeViolation => {
               const whereItFailed = axeViolation.nodes.map(node => node.html);
+              // uncomment the line(s) below to see suggestions on how to fix accessibility issues
               // const failureSummary = axeViolation.nodes.map(node => node.failureSummary);
         
               const { description, help, helpUrl } = axeViolation;
@@ -845,7 +846,7 @@ function useGenerateTest(test, projectFilePath) {
                 '\\nISSUE: ', help,
                 '\\nMORE INFO: ', helpUrl,
                 '\\nWHERE IT FAILED: ', whereItFailed,
-                // '\\nhow to fix: ', failureSummary
+                // '\\nHOW TO FIX: ', failureSummary
               );
             });
           }
@@ -1023,6 +1024,7 @@ function useGenerateTest(test, projectFilePath) {
             const violations = results;
             violations.forEach(axeViolation => {
               const whereItFailed = axeViolation.nodes.map(node => node.html);
+              // uncomment the line(s) below to see suggestions on how to fix accessibility issues
               // const failureSummary = axeViolation.nodes.map(node => node.failureSummary);
 
               const { description, help, helpUrl } = axeViolation;
@@ -1037,7 +1039,7 @@ function useGenerateTest(test, projectFilePath) {
                 helpUrl,
                 '\\nWHERE IT FAILED: ',
                 whereItFailed
-                // '\\nhow to fix: ', failureSummary
+                // '\\nHOW TO FIX: ', failureSummary
               );
             });
           })
@@ -1048,8 +1050,6 @@ function useGenerateTest(test, projectFilePath) {
         `
     };
 
-     //const generatePuppeteerScriptTag = () => {`"node <replaceWithJavascriptTestFileName.js> ${url}"`}
-
     switch (test) {
       case 'acc':
         var accTestCase = testState;

src/pages/TestFile/TestFile.jsx

@@ -110,23 +110,23 @@ const TestFile = () => {
         <div id={styles.body}>
           <p id={styles.text}>What would you like to test?</p>
           <span id={styles.newTestButtons}>
-            <button id={styles.save} autoFocus onClick={() => handleToggle('react')}>
-              React
+            <button id={styles.save} autoFocus onClick={() => handleToggle('acc')}>
+              Accessibility
             </button>
-            <button id={styles.save} onClick={() => handleToggle('redux')}>
-              Redux
+            <button id={styles.save} onClick={() => handleToggle('endpoint')}>
+              Endpoint
             </button>
             <button id={styles.save} onClick={() => handleToggle('hooks')}>
               Hooks
             </button>
-            <button id={styles.save} onClick={() => handleToggle('endpoint')}>
-              Endpoint
-            </button>
             <button id={styles.save} onClick={() => handleToggle('puppeteer')}>
               Puppeteer
             </button>
-            <button id={styles.save} onClick={() => handleToggle('acc')}>
-              Accessibility
+            <button id={styles.save} onClick={() => handleToggle('react')}>
+              React
+            </button>
+            <button id={styles.save} onClick={() => handleToggle('redux')}>
+              Redux
             </button>
           </span>
         </div>