From a52a6fededd07f8973b69b4442e50950e100c8ba Mon Sep 17 00:00:00 2001 From: Timothy Evans Date: Sun, 10 Mar 2024 20:27:42 -0400 Subject: [PATCH] Hook Updates --- Notes On Spearmintv15.md | 16 +- package-lock.json | 11 -- public/electron.jsx | 2 +- .../TestCase/UpdatedReactTestCase.tsx | 167 +++++++++--------- .../Action/Action.tsx | 21 +-- .../Assertion/Assertion.tsx | 24 +-- .../DescribeBlock/DescribeBlock.tsx | 23 ++- .../Render/Render.tsx | 11 +- .../TestBlock/TestBlock.tsx | 13 +- src/context/RTFsContextsProvider.tsx | 135 ++++++++++---- ...updatedFrontendFrameworkTestCaseActions.ts | 18 +- src/context/updatedUseGenerateTest.jsx | 2 +- 12 files changed, 245 insertions(+), 198 deletions(-) diff --git a/Notes On Spearmintv15.md b/Notes On Spearmintv15.md index ec99dc92..d12a0eac 100644 --- a/Notes On Spearmintv15.md +++ b/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 \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 08f75217..d087d471 100644 --- a/package-lock.json +++ b/package-lock.json @@ -120,7 +120,6 @@ "version": "2.2.0", "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.2.0.tgz", "integrity": "sha512-qRmjj8nj9qmLTQXXmaR1cck3UXSRMPrbsLJAasZpF+t3riI71BXed5ebIOYwQntykeZuhjsdweEc9BxH5Jc26w==", - "dev": true, "dependencies": { "@jridgewell/gen-mapping": "^0.1.0", "@jridgewell/trace-mapping": "^0.3.9" @@ -764,7 +763,6 @@ "version": "7.20.12", "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.20.12.tgz", "integrity": "sha512-XsMfHovsUYHFMdrIHkZphTN/2Hzzi78R08NuHfDBehym2VsPDL6Zn/JAD/JQdnRvbSsbQc4mVaU1m6JgtTEElg==", - "dev": true, "dependencies": { "@ampproject/remapping": "^2.1.0", "@babel/code-frame": "^7.18.6", @@ -1118,7 +1116,6 @@ "version": "7.20.13", "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.20.13.tgz", "integrity": "sha512-nzJ0DWCL3gB5RCXbUO3KIMMsBY2Eqbx8mBpKGE/02PgyRQFcPQLbkQ1vyy596mZLaP+dAfD+R4ckASzNVmW3jg==", - "dev": true, "dependencies": { "@babel/template": "^7.20.7", "@babel/traverse": "^7.20.13", @@ -3236,7 +3233,6 @@ "version": "2.0.2", "resolved": "https://registry.npmjs.org/@electron/get/-/get-2.0.2.tgz", "integrity": "sha512-eFZVFoRXb3GFGd7Ak7W4+6jBl9wBtiZ4AaYOse97ej6mKj5tkyO0dUnUChs1IhJZtx1BENo4/p4WUTXpi6vT+g==", - "dev": true, "dependencies": { "debug": "^4.1.1", "env-paths": "^2.2.0", @@ -3257,7 +3253,6 @@ "version": "8.1.0", "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-8.1.0.tgz", "integrity": "sha512-yhlQgA6mnOJUKOsRUFsgJdQCvkKhcz8tlZG5HBQfReYZy46OwLcY+Zia0mtdHsOo9y/hP+CxMN0TU9QxoOtG4g==", - "dev": true, "dependencies": { "graceful-fs": "^4.2.0", "jsonfile": "^4.0.0", @@ -3271,7 +3266,6 @@ "version": "4.0.0", "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz", "integrity": "sha512-m6F1R3z8jjlf2imQHS2Qez5sjKWQzbuuhuJ/FKYFRZvPE3PuHcSMVZzfsLhGVOkfd20obL5SWEBew5ShlquNxg==", - "dev": true, "optionalDependencies": { "graceful-fs": "^4.1.6" } @@ -3280,7 +3274,6 @@ "version": "0.1.2", "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.1.2.tgz", "integrity": "sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==", - "dev": true, "engines": { "node": ">= 4.0.0" } @@ -4528,7 +4521,6 @@ "version": "0.1.1", "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.1.1.tgz", "integrity": "sha512-sQXCasFk+U8lWYEe66WxRDOE9PjVz4vSM51fTu3Hw+ClTpUSQb718772vH3pyS5pShp6lvQM7SxgIDXXXmOX7w==", - "dev": true, "dependencies": { "@jridgewell/set-array": "^1.0.0", "@jridgewell/sourcemap-codec": "^1.4.10" @@ -10563,7 +10555,6 @@ "version": "24.8.3", "resolved": "https://registry.npmjs.org/electron/-/electron-24.8.3.tgz", "integrity": "sha512-6YTsEOIMIQNnOz0Fj5gAWtwCuDd66iYKkuRJGyc80jKKYI49jBeH+R7ZZry9uiVu4T4bZgBN2FAN24XfCioQZA==", - "dev": true, "hasInstallScript": true, "dependencies": { "@electron/get": "^2.0.0", @@ -11952,7 +11943,6 @@ "version": "0.1.13", "resolved": "https://registry.npmjs.org/encoding/-/encoding-0.1.13.tgz", "integrity": "sha512-ETBauow1T35Y/WZMkio9jiM0Z5xjHHmJ4XmjZOq1l/dXz3lr2sRn87nJy20RupqSh1F2m3HHPSp8ShIPQJrJ3A==", - "dev": true, "optional": true, "dependencies": { "iconv-lite": "^0.6.2" @@ -13637,7 +13627,6 @@ "version": "1.0.0-beta.2", "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz", "integrity": "sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==", - "dev": true, "engines": { "node": ">=6.9.0" } diff --git a/public/electron.jsx b/public/electron.jsx index 01c65c97..aff47121 100644 --- a/public/electron.jsx +++ b/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 ////////////////////////////////////////////////// diff --git a/src/components/TestCase/UpdatedReactTestCase.tsx b/src/components/TestCase/UpdatedReactTestCase.tsx index 9057933a..90da16b8 100644 --- a/src/components/TestCase/UpdatedReactTestCase.tsx +++ b/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) => ( - - )); + const reactTestFileStateChildren = Object.values( + reactTestFileState.children + ).map((childObject) => ( + + )); - return ( - <> -
-

React Testing

- -
-
- + return ( + <> +
+

React Testing

+ +
+
+ +
+
- -
- {mockData - ? mockData.length > 0 && ( -
- {mockData.map((data) => { - return ( - - ); - })} -
- ) - : null} -
-
- {reactTestFileStateChildren} + {mockData + ? mockData.length > 0 && ( +
+ {mockData.map((data) => { + return ( + + ); + })} +
+ ) + : null} +
+
+ {reactTestFileStateChildren} +
+
+
+
-
- -
-
- - ); -}; + + ); + } +); export default UpdatedReactTestCase; diff --git a/src/components/UpdatedReactTestComponent/Action/Action.tsx b/src/components/UpdatedReactTestComponent/Action/Action.tsx index b592ecdb..e863e88f 100644 --- a/src/components/UpdatedReactTestComponent/Action/Action.tsx +++ b/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 | React.ChangeEvent; - 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 }) => { -