feat & docs: Update of Spearmint v15 notes and Expanded custom hook, React.memo ,useMemo, useCallback, and Typescript coverage

Notes On Spearmintv15.md

@@ -14,19 +14,29 @@ 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
 -Dependencies updated
 -A Accessibility Test
 
-For React Testing Tool:
+For React(Beta) Testing Tool:
 -new State Structure for UI to work with(found in 'updatedTestCaseReducer' file)
 -abstracted add, update, delete methods and workflow(Can be traced from the component, to 'RTFsContextsProvider' file, to the
 'updatedFrontendFrameworkTestCaseActions' file, to the 'updatedTestCaseReducer' file)
 -functions already created for deep copying, adding, changing, and deleting (from)the state object
+-designed components to work with new central state object
+-custom hooks
+-React.memo, useMemo, useCallback
+-MongoDB migration
 
 -Jest Abilities Not Fully Fleshed Out
 -Old testing workflow(look into FireEvent, vs Screen for jest testing)
@@ -39,14 +49,21 @@ 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
 to create the setups and teardowns)
 -add more jest testing capabilities that don't exist yet
+-refactor 'Render' component as aspect of tests to be more flexible. It only allows 1 component selection at a time for any given test file being created. Current setup allows creation of only singularly focused component test files, but not end to end testing.
 -Props and Statements are not handled correctly yet by "useGenerateTest.jsx"
 -in 'useGenerateTest', use visual Studios 'search' tool to find the code snippets related to 'Updated React'. there should be at least 2, 1 being 'import', the other being 'switch'. There is no need for 2 versions of 'useGenerateTest', but there exists two because of our creating a playground to be safe. the second is called 'updatedUseGenerateTest. decide how u best want to merge them, or if every Tool should have its own 'useGenerateTest' for just its switchcase.
 -for the switch case 'updatedReact' found in 'useGenerateTest'(or more specifically 'updatedUseGenerateTest' if you haven't moved),

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, useMemo } from 'react';
 import styles from './TestCase.module.scss';
 import { updateRenderComponent } from '../../context/actions/updatedFrontendFrameworkTestCaseActions';
 import { GlobalContext } from '../../context/reducers/globalReducer';
@@ -8,94 +8,106 @@ 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();
 
-  const handleAddMockData = () => {
-    dispatchToMockData(createMockData());
-  };
+    const [{ mockData }, dispatchToMockData] = useContext(MockDataContext);
+    const [{ filePathMap, theme }] = useContext(GlobalContext);
 
-  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 handleAddMockData = () => {
+      dispatchToMockData(createMockData());
+    };
 
-  const reactTestFileStateChildren = Object.values(
-    reactTestFileState.children
-  ).map((childObject) => (
-    <DescribeBlock blockObjectsState={childObject} key={childObject.filepath} />
-  ));
+    const reorder = useMemo(
+      () => (list: string[], startIndex: number, endIndex: number) => {
+        const result = Array.from(list);
+        const [removed] = result.splice(startIndex, 1);
+        result.splice(endIndex, 0, removed);
+        return result;
+      },
+      [reactTestFileState]
+    );
 
-  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"
-            />
+    const reactTestFileStateChildren = useMemo(
+      () =>
+        Object.values(reactTestFileState.children).map((childObject) => (
+          <DescribeBlock
+            blockObjectsState={childObject}
+            key={childObject.filepath}
+          />
+        )),
+      [reactTestFileState]
+    );
+
+    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,7 +6,7 @@ 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');
 
@@ -25,13 +25,14 @@ type FieldTypes =
   | '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 };
@@ -199,6 +200,6 @@ const Action = ({ blockObjectsState }) => {
       </div>
     </div>
   );
-};
+});
 
 export default Action;