Merge pull request #31 from oslabs-beta/revert-29-acc-add-tests

Revert

Author: annieshinn

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

@@ -15,8 +15,6 @@ const Modal = ({
   dispatchToMockData,
   dispatchTestCase,
   createTest,
-  testType = null,
-  puppeteerUrl = 'sample.io',
 }) => {
   const { copySuccess, codeRef, handleCopy } = useCopy();
   const { handleNewTest } = useNewTest(
@@ -26,7 +24,7 @@ const Modal = ({
     closeModal,
   );
 
-  const script = useGenerateScript(title, testType, puppeteerUrl);
+  const script = useGenerateScript(title);
 
   const modalStyles = {
     overlay: {
@@ -63,15 +61,6 @@ const Modal = ({
                 <code ref={codeRef}>
                   {script}
                 </code>
-
-                {testType === 'react'
-                  ?
-                    <p id={styles.endpoint}>
-                    Requires React version 16 or less.
-                    </p>
-                  : null
-                }
-
                 <p id={styles.endpoint}>
                   Note if you are using Create React App do not install jest
                 </p>

src/components/AccTestComponent/AccTestTypes/AccTestTypes.tsx

@@ -35,34 +35,15 @@ export function useNewTest(dispatchToMockData, dispatchTestCase, createTest, clo
   return { handleNewTest };
 }
 
-export function useGenerateScript(test, testType = null, puppeteerUrl = 'sample.io') {
+export function useGenerateScript(test) {
   const [{ projectFilePath }] = useContext(GlobalContext);
   switch (test) {
     case 'acc':
-      if (testType === 'html') {
-        return (
-          `cd ${projectFilePath}
-          npm i -D axe-core regenerator-runtime jest
-          jest`
-        );
-      }
-      if (testType === 'react') {
-        return (
-          `cd ${projectFilePath}
-          npm i -D axe-core regenerator-runtime jest enzyme enzyme-adapter-react-16
-          jest`
-        );
-      }
-      if (testType === 'puppeteer') {
-        return (
-          `cd ${projectFilePath}
-          npm i -D axe-core puppeteer
-          node <YOUR_DIR_PATH/TEST_FILE.JS> ${puppeteerUrl}
-          `
-        );
-        
-      }
-      return 'error';
+      return (
+        `cd ${projectFilePath}\n` +
+        'npm i -D axe-core regenerator-runtime jest\n' +
+        'jest'
+      );
     case 'react':
       return (
         `cd ${projectFilePath}\n` +

src/components/AccTestComponent/PuppeteerUrl/PuppeteerUrl.tsx

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

src/components/Modals/Modal.jsx

@@ -1,31 +1,30 @@
 import React, { useContext, ChangeEvent } from 'react';
 import cn from 'classnames';
 import { DragDropContext, Droppable, DropResult } from 'react-beautiful-dnd';
+import styles from './TestCase.module.scss';
 import {
   updateDescribeText,
   updateItStatementText,
   updateDescribeOrder,
   updateItStatementOrder,
-  updateFilePath,
-  updateTestType,
-  createPuppeteerUrl,
 } from '../../context/actions/accTestCaseActions';
-import {
-  AccTestCaseContext,
-} from '../../context/reducers/accTestCaseReducer';
 import { GlobalContext } from '../../context/reducers/globalReducer';
+import SearchInput from '../SearchInput/SearchInput';
 
-import styles from './TestCase.module.scss';
 import AccTestMenu from '../TestMenu/AccTestMenu';
-import AccTestTypes from '../AccTestComponent/AccTestTypes/AccTestTypes';
-import PuppeteerUrl from '../AccTestComponent/PuppeteerUrl/PuppeteerUrl';
-import SearchInput from '../SearchInput/SearchInput';
+
 import DecribeRenderer from '../AccTestComponent/DescribeRenderer/DescribeRenderer';
+import { updateImportFilePath } from '../../context/actions/accTestCaseActions';
+import {
+  AccTestCaseContext,
+} from '../../context/reducers/accTestCaseReducer';
 
 const AccTestCase = () => {
-  const [accTestCase, dispatchToAccTestCase] = useContext(AccTestCaseContext);
+  const [accTestCase, dispatchToAccTestCase] = useContext(
+    AccTestCaseContext,
+  );
 
-  const { describeBlocks, itStatements, testType } = accTestCase;
+  const { describeBlocks, itStatements } = accTestCase;
 
   const [{ filePathMap }] = useContext<any>(GlobalContext);
 
@@ -63,33 +62,20 @@ const AccTestCase = () => {
 
   return (
     <div id={styles.AccTestCase}>
+
       <div id="head">
         <AccTestMenu />
       </div>
 
       <section id={styles.testCaseHeader}>
-        <div id={styles.accTestDiv}>
-          <AccTestTypes
+        <label htmlFor="fileImport">Import File From</label>
+        <div id={styles.labelInput} style={{ width: '80%' }}>
+          <SearchInput
+            options={Object.keys(filePathMap)}
             dispatch={dispatchToAccTestCase}
-            action={updateTestType}
-            currType={testType}
+            action={updateImportFilePath}
+            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>
 
         <DragDropContext onDragEnd={onDragEnd}>
@@ -116,6 +102,7 @@ const AccTestCase = () => {
           </Droppable>
         </DragDropContext>
       </section>
+
     </div>
   );
 };

src/components/Modals/modalHooks.js

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

src/components/SearchInput/SearchInput.scss

@@ -14,6 +14,7 @@ import {
 import { AccTestCaseContext } from '../../context/reducers/accTestCaseReducer';
 import { useToggleModal } from './testMenuHooks';
 
+
 const AccTestMenu = () => {
   // link to accessibility testing docs url
   const accUrl = 'https://www.deque.com/axe/core-documentation/api-documentation/'; 
@@ -24,7 +25,7 @@ const AccTestMenu = () => {
   const [{ projectFilePath, file, exportBool }, dispatchToGlobal] = useContext<any>(GlobalContext);
   const generateTest = useGenerateTest('acc', projectFilePath);
 
-  // setValidCode to true on load.
+  // setValidCode to true on load. 
   useEffect(() => {
     dispatchToGlobal(setValidCode(true));
   }, []);
@@ -67,8 +68,6 @@ const AccTestMenu = () => {
             dispatchToMockData={null}
             dispatchTestCase={dispatchToAccTestCase}
             createTest={createNewTest}
-            testType={accTestCase.testType}
-            puppeteerUrl={accTestCase.puppeteerUrl}
           />
           {/* Just send user to docs on button click */}
         </div>
@@ -82,7 +81,8 @@ const AccTestMenu = () => {
           </button>
         </div>
       </div>
-    </div> 
+    </div>
+    
   );
 }
 

src/components/TestCase/AccTestCase.tsx

@@ -16,33 +16,37 @@ export const actionTypes = {
   CLOSE_INFO_MODAL: 'CLOSE_INFO_MODAL',
 
   UPDATE_FILE_PATH: 'UPDATE_FILE_PATH',
-  UPDATE_TEST_TYPE: 'UPDATE_TEST_TYPE',
-  CREATE_PUPPETEER_URL: 'CREATE_PUPPETEER_URL',
 
   TOGGLE_ACC: 'TOGGLE_ACC',
 };
 
 /* --------------------------------- Actions -------------------------------- */
 
-export const addDescribeBlock = () => ({
-  type: actionTypes.ADD_DESCRIBE_BLOCK,
-});
+export const addDescribeBlock = () => {
+  return {
+    type: actionTypes.ADD_DESCRIBE_BLOCK,
+  };
+};
 
-export const deleteDescribeBlock = (describeId: string) => ({
-  type: actionTypes.DELETE_DESCRIBE_BLOCK,
-  describeId,
-});
+export const deleteDescribeBlock = (describeId: string) => {
+  return {
+    type: actionTypes.DELETE_DESCRIBE_BLOCK,
+    describeId,
+  };
+};
 
 export const updateDescribeText = (text: string, describeId: string) => ({
   type: actionTypes.UPDATE_DESCRIBE_TEXT,
   text,
   describeId,
 });
 
-export const updateDescribeOrder = (reorderedDescribe: Array<string>) => ({
-  type: actionTypes.UPDATE_DESCRIBE_ORDER,
-  reorderedDescribe,
-});
+export const updateDescribeOrder = (reorderedDescribe: Array<string>) => {
+  return {
+    type: actionTypes.UPDATE_DESCRIBE_ORDER,
+    reorderedDescribe,
+  };
+};
 
 export const addItStatement = (describeId: string) => ({
   type: actionTypes.ADD_ITSTATEMENT,
@@ -61,36 +65,28 @@ export const updateItStatementText = (text: string, itId: string) => ({
   text,
 });
 
-export const updateItStatementOrder = (reorderedIt: Array<string>, describeId: string) => ({
-  type: actionTypes.UPDATE_ITSTATEMENT_ORDER,
-  reorderedIt,
-  describeId,
-});
+export const updateItStatementOrder = (reorderedIt: Array<string>, describeId: string) => {
+  return {
+    type: actionTypes.UPDATE_ITSTATEMENT_ORDER,
+    reorderedIt,
+    describeId,
+  };
+};
 
 export const createNewTest = () => ({
   type: actionTypes.CREATE_NEW_TEST,
 });
 
-export const openInfoModal = () => ({
-  type: actionTypes.OPEN_INFO_MODAL,
-});
+export const openInfoModal = () => {
+  return { type: actionTypes.OPEN_INFO_MODAL };
+};
 
-export const closeInfoModal = () => ({
-  type: actionTypes.CLOSE_INFO_MODAL,
-});
+export const closeInfoModal = () => {
+  return { type: actionTypes.CLOSE_INFO_MODAL };
+};
 
-export const updateFilePath = (fileName: string, filePath: string) => ({
+export const updateImportFilePath = (fileName: string, filePath: string) => ({
   type: actionTypes.UPDATE_FILE_PATH,
   fileName,
   filePath,
 });
-
-export const updateTestType = (testType: string) => ({
-  type: actionTypes.UPDATE_TEST_TYPE,
-  testType,
-});
-
-export const createPuppeteerUrl = (puppeteerUrl: string) => ({
-  type: actionTypes.CREATE_PUPPETEER_URL,
-  puppeteerUrl,
-});