Hook Updates

Notes On Spearmintv15.md

@@ -14,8 +14,14 @@ Existed Since We've Started:
 -Some Accessibility Test existed only in name, not in functionality
 -Debugging. Error messages point to bundle. Also, unable to get Electrons "devtools" to
 run react DevTools
--No Error Handler for Components
+-No Error Handler for Components(Look into Error Boundary and componentDidCatch)
 -No Confirmation Dialogue before X'ing out of blocks
+-No way to import a test file and make modifications on it using the UI
+-No way to use the application as a functioning desktop app. Only as a github download
+-Working Backend(MongoDB connection and CRUD functionality) can't be confirmed
+-Mock Data functionality is tied between all testing widgets
+
+-
 
 Changes Implemented:
 For Accessibility Tool
@@ -39,9 +45,15 @@ should look)
 
 Additinoal fixes/considerations needed needed
 For the React(Beta)
+-File system structure: maybe grouping all files related to only 1 widget into 1 folder makes more sense then keeping them seperate(e.g., the 'ReactTestCase' and 'Reducer' files should be put inside a folder that contains the other files related to only the React tool widget)
 -Decide for yourself which state structure makes the the most sense for you, and lends itself to implementing full jest testing capabilities
 -AutoFill for options of Action and Assert Components needs to be updated wot work with
 new state structure and re-enabled
+-Steps toward reduced Component rerenders
+-Custom Hooks
+-React.Memo
+React useMemo
+-React useCallback
 -debug the Props Component so it will render properly
 -Setup Teardowns need to be quanitfied in a way that can be represented
 by a form like setup(e.g. user either fills out inputs or uses drags and drops
@@ -52,4 +64,4 @@ to create the setups and teardowns)
 -for the switch case 'updatedReact' found in 'useGenerateTest'(or more specifically 'updatedUseGenerateTest' if you haven't moved),
 -complete the test file generating needed for the 'updated react' switch case. Needs support for statements.
 
--lastly,typescript
+-lastly,typescript

public/electron.jsx

@@ -74,7 +74,7 @@ function createWindow() {
   // });
 
   mainWindow.loadFile(path.join(__dirname, 'index.html')); // unsure why we need the path.join, but index.html not found without it
-  //mainWindow.webContents.openDevTools();
+  // mainWindow.webContents.openDevTools();
   //////////////////////////////////////////////////
   //Creates terminal, specifies dimensions based on columns and rows
   //////////////////////////////////////////////////

src/components/TestCase/UpdatedReactTestCase.tsx

@@ -1,4 +1,4 @@
-import React, { createContext, useContext, useReducer } from 'react';
+import React, { useContext } from 'react';
 import styles from './TestCase.module.scss';
 import { updateRenderComponent } from '../../context/actions/updatedFrontendFrameworkTestCaseActions';
 import { GlobalContext } from '../../context/reducers/globalReducer';
@@ -8,94 +8,101 @@ import { createMockData } from '../../context/actions/mockDataActions';
 import UpdatedReactTestMenu from '../TestMenu/UpdatedReactTestMenu';
 import MockData from '../UpdatedReactTestComponent/MockData/MockData';
 import { Button } from '@mui/material';
-import { RTFsContexts } from '../../context/RTFsContextsProvider';
+import { useRTFsContexts } from '../../context/RTFsContextsProvider';
 import DescribeBlock from '../UpdatedReactTestComponent/DescribeBlock/DescribeBlock';
 
-const UpdatedReactTestCase = ({
-  filterFileType,
-}: {
-  filterFileType: Function;
-}) => {
-  const { reactTestFileState, rTFDispatch, handleAddBlock } =
-    useContext(RTFsContexts);
-  const [{ mockData }, dispatchToMockData] = useContext(MockDataContext);
-  const [{ filePathMap, theme }] = useContext(GlobalContext);
+const UpdatedReactTestCase = React.memo(
+  ({ filterFileType }: { filterFileType: Function }) => {
+    const { reactTestFileState, rTFDispatch, handleAddBlock } =
+      //  useContext(RTFsContexts);
+      useRTFsContexts();
+    console.log('updatereact rerendered');
+    const [{ mockData }, dispatchToMockData] = useContext(MockDataContext);
+    const [{ filePathMap, theme }] = useContext(GlobalContext);
 
-  const handleAddMockData = () => {
-    dispatchToMockData(createMockData());
-  };
+    const handleAddMockData = () => {
+      dispatchToMockData(createMockData());
+    };
 
-  const reorder = (list: string[], startIndex: number, endIndex: number) => {
-    const result = Array.from(list);
-    const [removed] = result.splice(startIndex, 1);
-    result.splice(endIndex, 0, removed);
-    return result;
-  };
+    const reorder = (list: string[], startIndex: number, endIndex: number) => {
+      const result = Array.from(list);
+      const [removed] = result.splice(startIndex, 1);
+      result.splice(endIndex, 0, removed);
+      return result;
+    };
 
-  const reactTestFileStateChildren = Object.values(
-    reactTestFileState.children
-  ).map((childObject) => (
-    <DescribeBlock blockObjectsState={childObject} key={childObject.filepath} />
-  ));
+    const reactTestFileStateChildren = Object.values(
+      reactTestFileState.children
+    ).map((childObject) => (
+      <DescribeBlock
+        blockObjectsState={childObject}
+        key={childObject.filepath}
+      />
+    ));
 
-  return (
-    <>
-      <div id={styles[`ReactTestCase${theme}`]}>
-        <h2 id={styles[`testName${theme}`]}>React Testing</h2>
-        <UpdatedReactTestMenu />
-        <div className={styles.header}>
-          <div className={styles.searchInput}>
-            <SearchInput
-              dispatch={rTFDispatch}
-              action={updateRenderComponent}
-              filePathMap={filePathMap}
-              options={filterFileType(Object.keys(filePathMap), [
-                'js',
-                'jsx',
-                'ts',
-                'tsx',
-              ])}
-              label="Search Component"
-            />
+    return (
+      <>
+        <div id={styles[`ReactTestCase${theme}`]}>
+          <h2 id={styles[`testName${theme}`]}>React Testing</h2>
+          <UpdatedReactTestMenu />
+          <div className={styles.header}>
+            <div className={styles.searchInput}>
+              <SearchInput
+                dispatch={rTFDispatch}
+                action={updateRenderComponent}
+                filePathMap={filePathMap}
+                options={filterFileType(Object.keys(filePathMap), [
+                  'js',
+                  'jsx',
+                  'ts',
+                  'tsx',
+                ])}
+                label="Search Component"
+              />
+            </div>
+            <Button
+              variant="outlined"
+              onClick={handleAddMockData}
+              size="medium"
+            >
+              Add Mock Data
+            </Button>
           </div>
-          <Button variant="outlined" onClick={handleAddMockData} size="medium">
-            Add Mock Data
-          </Button>
-        </div>
 
-        {mockData
-          ? mockData.length > 0 && (
-              <section id={styles.mockDataHeader}>
-                {mockData.map((data) => {
-                  return (
-                    <MockData
-                      key={data.id}
-                      mockDatumId={data.id}
-                      dispatchToMockData={dispatchToMockData}
-                      fieldKeys={data.fieldKeys}
-                    />
-                  );
-                })}
-              </section>
-            )
-          : null}
-        <div id={styles.describeContainer}>
-          <div /*droppableId='droppableReactDescribe'*/ type="describe">
-            {reactTestFileStateChildren}
+          {mockData
+            ? mockData.length > 0 && (
+                <section id={styles.mockDataHeader}>
+                  {mockData.map((data) => {
+                    return (
+                      <MockData
+                        key={data.id}
+                        mockDatumId={data.id}
+                        dispatchToMockData={dispatchToMockData}
+                        fieldKeys={data.fieldKeys}
+                      />
+                    );
+                  })}
+                </section>
+              )
+            : null}
+          <div id={styles.describeContainer}>
+            <div /*droppableId='droppableReactDescribe'*/ type="describe">
+              {reactTestFileStateChildren}
+            </div>
+          </div>
+          <div id={styles.addDescribeButton}>
+            <Button
+              data-testid="addDescribeButton"
+              onClick={(e) => handleAddBlock(e, 'describe', '')}
+              variant="outlined"
+            >
+              Add Describe Block
+            </Button>
           </div>
         </div>
-        <div id={styles.addDescribeButton}>
-          <Button
-            data-testid="addDescribeButton"
-            onClick={(e) => handleAddBlock(e, 'describe', '')}
-            variant="outlined"
-          >
-            Add Describe Block
-          </Button>
-        </div>
-      </div>
-    </>
-  );
-};
+      </>
+    );
+  }
+);
 
 export default UpdatedReactTestCase;

src/components/UpdatedReactTestComponent/Action/Action.tsx

@@ -6,39 +6,32 @@ import { MockDataContext } from '../../../context/reducers/updatedMockDataReduce
 import { GlobalContext } from '../../../context/reducers/globalReducer';
 import { AiOutlineClose } from 'react-icons/ai';
 import { ReactTestComponentAssertion } from '../../../utils/updatedReactTypes';
-import { RTFsContexts } from '../../../context/RTFsContextsProvider';
-
+import { useRTFsContexts } from '../../../context/RTFsContextsProvider';
 const questionIcon = require('../../../assets/images/help-circle.png');
-
 // This is tracking the actions that you have in a specific test, following the flow of data will
 // help you better understand exactly how this is working
-
 type EventTypes =
   | React.ChangeEvent<HTMLSelectElement>
   | React.ChangeEvent<HTMLInputElement>;
-
 type FieldTypes =
   | 'eventType'
   | 'eventValue'
   | 'queryVariant'
   | 'querySelector'
   | 'queryValue';
-
 // Action box in middle panel (testCase.jsx)
-const Action = ({ blockObjectsState }) => {
+const Action = React.memo(({ blockObjectsState }) => {
   const thisBlockObjectsState = blockObjectsState;
-
   const [{ mockData }] = useContext(MockDataContext);
   const [{ theme }] = useContext(GlobalContext);
   const { handleAddBlock, handleChange, handleDeleteBlock, rTFDispatch } =
-    useContext(RTFsContexts);
-
+    //useContext(RTFsContexts);
+    useRTFsContexts();
   /*const handleChangeActionFields = (e: EventTypes, field: FieldTypes) => {
     let updatedAction = { ...statement };
     updatedAction[field] = e.target.value;
     rTFDispatch(updateAction(updatedAction));
   };*/
-
   //conditional rendering for events with values
   const needsEventValue = (eventType: string) => {
     const eventsWithValues = [
@@ -143,7 +136,6 @@ const Action = ({ blockObjectsState }) => {
                 <ToolTip toolTipType={blockObjectsState.queryVariant} />
               </span>
             </span>
-
             <select
               id="querySelector"
               value={blockObjectsState.querySelector}
@@ -199,6 +191,5 @@ const Action = ({ blockObjectsState }) => {
       </div>
     </div>
   );
-};
-
-export default Action;
+});
+export default Action;