hooks validation complete

Author: bkwak

src/components/EditorView/EditorView.module.scss

@@ -28,4 +28,5 @@
   line-height: 1.5;
   position: relative;
   top: -18px;
+  color: rgb(90, 90, 90);
 }

src/components/ReactHooksTestComponent/HookUpdates/HookUpdates.jsx

@@ -61,15 +61,6 @@ const HookUpdates = ({ hookUpdates, index }) => {
             <h3>Hooks</h3>
           </div>
           <div id={styles.hooksFlexBox}>
-            {/* <div id={styles.hooks}>
-              <label htmlFor='hookFile'>Import Hook From</label>
-              <SearchInput
-                options={Object.keys(filePathMap)}
-                dispatch={dispatchToHooksTestCase}
-                action={updateHooksFilePath}
-                filePathMap={filePathMap}
-              />
-            </div> */}
             <div id={styles.serverInput}>
               <label htmlFor='test-statement'>Test description</label>
               <div
@@ -111,44 +102,26 @@ const HookUpdates = ({ hookUpdates, index }) => {
               />
             </div>
           </div>
-          {/* <div id={styles.cb}>
-              <label htmlFor='callbackFunc'>Callback Function</label>
-              <input
-                type='text'
-                id='callbackFunc'
-                onChange={(e) => handleChangeHookUpdatesFields(e, 'callbackFunc')}
-                placeholder='e.g. incrementCount'
-              />
-            </div> */}
           {hookUpdates.callbackFunc.map((callbackFunc, i) => {
             return (
               <div id={styles.cbFlexBox}>
                 <HooksCallback callbackFunc={callbackFunc} index={index} id={i} />{' '}
               </div>
             );
           })}{' '}
-          <div className={styles.buttonsContainer}>
-            <button
-              // id={id}
-              onClick={addCallbackHandleClick}
-              className={styles.assertionButton}
-            >
-              <i className='fas fa-plus'></i>
-              Callback
-            </button>
-          </div>
+          <div className={styles.buttonsContainer}></div>
           {hookUpdates.assertions.map((assertion, i) => {
             return <HooksAssertion assertion={assertion} index={index} id={i} />;
           })}{' '}
           <div className={styles.buttonsContainer} id={styles.stateFlexBox}>
-            <button
-              // id={id}
-              onClick={addAssertionHandleClick}
-              className={styles.assertionButton}
-            >
+            <button onClick={addAssertionHandleClick} className={styles.assertionButton}>
               <i className='fas fa-plus'></i>
               Assertion
             </button>
+            <button onClick={addCallbackHandleClick} className={styles.assertionButton}>
+              <i className='fas fa-plus'></i>
+              Callback
+            </button>
           </div>
         </div>
       )}

src/components/TestMenu/EndpointTestMenu.tsx

@@ -6,6 +6,7 @@ import {
   updateFile,
   setFilePath,
   setValidCode,
+  toggleExportBool,
 } from '../../context/actions/globalActions';
 import styles from './TestMenu.module.scss';
 import Modal from '../Modals/Modal';
@@ -26,7 +27,7 @@ const EndpointTestMenu = () => {
   const [{ projectFilePath, file, exportBool }, dispatchToGlobal] = useContext<any>(GlobalContext);
   const { title, isModalOpen, openModal, openScriptModal, closeModal } = useToggleModal('endpoint');
   const generateTest = useGenerateTest('endpoint', projectFilePath);
-
+  let valid;
   // Endpoint testing docs url
   const endpointUrl = 'https://www.npmjs.com/package/supertest';
 
@@ -57,11 +58,11 @@ const EndpointTestMenu = () => {
     } else dispatchToEndpointTestCase(toggleDB('PostgreSQL'));
   };
 
-  if (!file && exportBool) {
-    validateInputs('endpoint', endpointTestCase)
-      ? dispatchToGlobal(setValidCode(true))
-      : dispatchToGlobal(setValidCode(false));
-    dispatchToGlobal(updateFile(generateTest(endpointTestCase)));
+  if (exportBool) {
+    valid = validateInputs('endpoint', endpointTestCase);
+    valid ? dispatchToGlobal(setValidCode(true)) : dispatchToGlobal(setValidCode(false));
+    dispatchToGlobal(toggleExportBool());
+    if (valid && !file) dispatchToGlobal(updateFile(generateTest(endpointTestCase)));
   }
 
   return (

src/components/TestMenu/HooksTestMenu.tsx

@@ -6,6 +6,7 @@ import {
   setFilePath,
   toggleRightPanel,
   setValidCode,
+  toggleExportBool,
 } from '../../context/actions/globalActions';
 import styles from './TestMenu.module.scss';
 import {
@@ -16,12 +17,12 @@ import {
 import Modal from '../Modals/Modal';
 import useGenerateTest from '../../context/useGenerateTest';
 import { HooksTestCaseContext } from '../../context/reducers/hooksTestCaseReducer';
-import { useToggleModal } from './testMenuHooks';
+import { useToggleModal, validateInputs } from './testMenuHooks';
 
 const HooksTestMenu = () => {
   // Hooks testing docs url
   const hooksUrl = 'https://react-hooks-testing-library.com/usage/basic-hooks';
-
+  let valid;
   const [{ hooksTestStatement, hooksStatements }, dispatchToHooksTestCase] = useContext(
     HooksTestCaseContext
   );
@@ -30,7 +31,7 @@ const HooksTestMenu = () => {
   const generateTest = useGenerateTest('hooks', projectFilePath);
 
   useEffect(() => {
-    dispatchToGlobal(setValidCode(true));
+    dispatchToGlobal(setValidCode(false));
   }, []);
 
   const handleAddContexts = () => {
@@ -51,9 +52,19 @@ const HooksTestMenu = () => {
     dispatchToGlobal(setFilePath(''));
   };
 
-  if (!file && exportBool)
-    dispatchToGlobal(updateFile(generateTest({ hooksTestStatement, hooksStatements })));
+  if (exportBool) {
+    valid = validateInputs('hooks', hooksStatements);
+    valid ? dispatchToGlobal(setValidCode(true)) : dispatchToGlobal(setValidCode(false));
+    dispatchToGlobal(toggleExportBool());
+    if (valid && !file) dispatchToGlobal(updateFile(generateTest(hooksStatements)));
+  }
 
+  if (!file && exportBool) {
+    validateInputs('hooks', hooksStatements)
+      ? dispatchToGlobal(setValidCode(true))
+      : dispatchToGlobal(setValidCode(false));
+    dispatchToGlobal(updateFile(generateTest({ hooksTestStatement, hooksStatements })));
+  }
   return (
     <div id='test'>
       <div id={styles.testMenu}>

src/components/TestMenu/ReduxTestMenu.tsx

@@ -5,6 +5,7 @@ import {
   setFilePath,
   toggleRightPanel,
   setValidCode,
+  toggleExportBool,
 } from '../../context/actions/globalActions';
 import {
   addAsync,
@@ -18,7 +19,7 @@ import useGenerateTest from '../../context/useGenerateTest.jsx';
 import { GlobalContext } from '../../context/reducers/globalReducer';
 import { openBrowserDocs } from '../../context/actions/globalActions';
 import { ReduxTestCaseContext } from '../../context/reducers/reduxTestCaseReducer';
-import { useToggleModal } from './testMenuHooks';
+import { useToggleModal, validateInputs } from './testMenuHooks';
 
 const ReduxTestMenu = () => {
   const [{ reduxTestStatement, reduxStatements }, dispatchToReduxTestCase] = useContext(
@@ -61,7 +62,7 @@ const ReduxTestMenu = () => {
   };
 
   if (!file && exportBool)
-    dispatchToGlobal(updateFile(generateTest({ reduxStatements, reduxTestStatement })));
+    dispatchToGlobal(updateFile(generateTest({ reduxTestStatement, reduxStatements })));
 
   return (
     <div id='test'>

src/components/TestMenu/testMenuHooks.js

@@ -35,6 +35,25 @@ export const validateInputs = (testSuite, testCaseState) => {
         }
       }
       return true;
+    case 'hooks':
+      let hookTest, callback;
+      for (hookTest of testCaseState) {
+        console.log(hookTest);
+        if (!hookTest.hookFilePath || !hookTest.hook) return false;
+        for (callback of hookTest.callbackFunc) {
+          if (!callback.callbackFunc) {
+            console.log('hi');
+            return false;
+          }
+        }
+        for (assertion of hookTest.assertions) {
+          if (!assertion.expectedState || !assertion.expectedValue || !assertion.matcher)
+            return false;
+        }
+      }
+      return true;
+    // case 'react':
+
     default:
   }
 };