diff --git a/Notes On Spearmintv15.md b/Notes On Spearmintv15.md index ec99dc92..ac19e57e 100644 --- a/Notes On Spearmintv15.md +++ b/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), 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..bc3ab5b9 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..4fd83755 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, 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) => ( - - )); + 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 ( - <> -
-

React Testing

- -
-
- + const reactTestFileStateChildren = useMemo( + () => + Object.values(reactTestFileState.children).map((childObject) => ( + + )), + [reactTestFileState] + ); + + 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..4e4272da 100644 --- a/src/components/UpdatedReactTestComponent/Action/Action.tsx +++ b/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 }) => {
); -}; +}); export default Action; diff --git a/src/components/UpdatedReactTestComponent/Assertion/Assertion.tsx b/src/components/UpdatedReactTestComponent/Assertion/Assertion.tsx index f400339b..29d40368 100644 --- a/src/components/UpdatedReactTestComponent/Assertion/Assertion.tsx +++ b/src/components/UpdatedReactTestComponent/Assertion/Assertion.tsx @@ -12,7 +12,7 @@ import UpdatedAutoComplete from '../../AutoComplete/UpdatedAutoComplete'; 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'); @@ -29,11 +29,12 @@ type FieldTypes = | 'queryValue' | 'matcherValue'; -const Assertion = ({ blockObjectsState }) => { +const Assertion = React.memo(({ blockObjectsState }) => { const thisBlockObjectsState = blockObjectsState; const { handleAddBlock, handleChange, handleDeleteBlock, rTFDispatch } = - useContext(RTFsContexts); + // useContext(RTFsContexts); + useRTFsContexts(); const [{ theme }] = useContext(GlobalContext); /*const handleChangeAssertionFields = (e: EventTypes, field: FieldTypes) => { @@ -295,6 +296,6 @@ const Assertion = ({ blockObjectsState }) => {
); -}; +}); export default Assertion; diff --git a/src/components/UpdatedReactTestComponent/DescribeBlock/DescribeBlock.tsx b/src/components/UpdatedReactTestComponent/DescribeBlock/DescribeBlock.tsx index 329e3b76..0fc50c48 100644 --- a/src/components/UpdatedReactTestComponent/DescribeBlock/DescribeBlock.tsx +++ b/src/components/UpdatedReactTestComponent/DescribeBlock/DescribeBlock.tsx @@ -1,4 +1,4 @@ -import React, { useState, useEffect, useContext } from 'react'; +import React, { useContext, useMemo, useCallback } from 'react'; import cn from 'classnames'; import describeBlockStyles from './DescribeRenderer.module.scss'; import { AiOutlineCloseCircle } from 'react-icons/ai'; @@ -11,7 +11,7 @@ import { } from '@mui/material'; import { DescribeBlocks } from '../../../utils/reactTypes'; import { GlobalContext } from '../../../context/reducers/globalReducer'; -import { RTFsContexts } from '../../../context/RTFsContextsProvider'; +import { useRTFsContexts } from '../../../context/RTFsContextsProvider'; import styles from '../../Modals/Modal.module.scss'; @@ -24,7 +24,7 @@ interface DescribeBlockProps { theme: string; } -const DescribeBlock = ({ blockObjectsState }) => { +const DescribeBlock = React.memo(({ blockObjectsState }) => { const [{ theme }] = useContext(GlobalContext); const thisBlockObjectsState = blockObjectsState; @@ -34,8 +34,7 @@ const DescribeBlock = ({ blockObjectsState }) => { handleChange, handleDeleteBlock, setChildrenComponents, - } = useContext(RTFsContexts); - + } = useRTFsContexts(); // useEffect(() => { // setHasSetupTeardown(false); // }, []); @@ -46,9 +45,13 @@ const DescribeBlock = ({ blockObjectsState }) => { //} - const { setupTeardownBlock, arrayOfChildComponents } = setChildrenComponents( - blockObjectsState, - theme + const { setupTeardownBlock, arrayOfChildComponents } = useMemo( + () => + setChildrenComponents( + blockObjectsState + //theme + ), + [blockObjectsState] ); return ( @@ -150,6 +153,6 @@ const DescribeBlock = ({ blockObjectsState }) => { ); -}; +}); export default DescribeBlock; diff --git a/src/components/UpdatedReactTestComponent/Render/Prop.tsx b/src/components/UpdatedReactTestComponent/Render/Prop.tsx index 41d3f204..fb0b2299 100644 --- a/src/components/UpdatedReactTestComponent/Render/Prop.tsx +++ b/src/components/UpdatedReactTestComponent/Render/Prop.tsx @@ -2,14 +2,15 @@ * ? */ -import React from 'react'; +import React, { useContext } from 'react'; import styles from './Prop.module.scss'; import { deleteProp, updateProp, } from '../../../context/actions/frontendFrameworkTestCaseActions'; import { PropProps } from '../../../utils/reactTypes'; -import { RTFsContexts } from '../../../context/RTFsContextsProvider'; +import { useRTFsContexts } from '../../../context/RTFsContextsProvider'; +import { GlobalContext } from '../../../context/reducers/globalReducer'; const minusIcon = require('../../../assets/images/minus-box-outline.png'); @@ -18,33 +19,9 @@ const minusIcon = require('../../../assets/images/minus-box-outline.png'); const Prop = ({ blockObjectsState }): JSX.Element => { const thisBlockObjectsState = blockObjectsState; - const { handleAddBlock, handleChange, handleDeleteBlock } = - useContext(RTFsContexts); + const { handleAddBlock, handleChange, handleDeleteBlock } = useRTFsContexts(); const [{ theme }] = useContext(GlobalContext); - const handleClickDeleteProp = (e: React.MouseEvent): void => { - e.stopPropagation(); - dispatchToTestCase(deleteProp(statementId, propId)); - }; - - const handleChangeUpdatePropKey = ( - e: React.ChangeEvent - ): void => { - e.stopPropagation(); - dispatchToTestCase( - updateProp(statementId, propId, e.target.value, propValue) - ); - }; - - const handleChangeUpdatePropValue = ( - e: React.ChangeEvent - ): void => { - e.stopPropagation(); - dispatchToTestCase( - updateProp(statementId, propId, propKey, e.target.value) - ); - }; - return (
{ +const Render = React.memo(({ blockObjectsState }) => { const thisBlockObjectsState = blockObjectsState; const [{ theme }] = useContext(GlobalContext); const { handleAddBlock, handleChange, handleDeleteBlock } = - useContext(RTFsContexts); + //useContext(RTFsContexts); + useRTFsContexts(); return (
@@ -52,14 +53,14 @@ const Render = ({ blockObjectsState }) => {
- {Object.values(blockObjectsState.children).forEach((prop) => { - return ; - })} + {Object.values(blockObjectsState.children).map((prop) => ( + + ))}
)} ); -}; +}); export default Render; diff --git a/src/components/UpdatedReactTestComponent/TestBlock/TestBlock.tsx b/src/components/UpdatedReactTestComponent/TestBlock/TestBlock.tsx index cd4ec23e..2b3de3c4 100644 --- a/src/components/UpdatedReactTestComponent/TestBlock/TestBlock.tsx +++ b/src/components/UpdatedReactTestComponent/TestBlock/TestBlock.tsx @@ -1,4 +1,4 @@ -import React, { useContext } from 'react'; +import React, { useContext, useMemo } from 'react'; import cn from 'classnames'; import ReactTestStatements from '../../TestCase/UpdatedReactTestStatements'; import { @@ -8,7 +8,7 @@ import { } from '../../../context/actions/updatedFrontendFrameworkTestCaseActions'; import { GlobalContext } from '../../../context/reducers/globalReducer'; -import { RTFsContexts } from '../../../context/RTFsContextsProvider'; +import { useRTFsContexts } from '../../../context/RTFsContextsProvider'; import styles from './ItRenderer.module.scss'; import { Button, TextField } from '@mui/material'; import { AiOutlineClose } from 'react-icons/ai'; @@ -19,19 +19,19 @@ import { ItStatements, Statements } from '../../../utils/updatedReactTypes'; interface ItBlockProps {} -const TestBlock = ({ blockObjectsState }) => { +const TestBlock = React.memo(({ blockObjectsState }) => { const [{ theme }] = useContext(GlobalContext); const { handleAddBlock, handleChange, handleDeleteBlock, setChildrenComponents, - } = useContext(RTFsContexts); - + } = useRTFsContexts(); const thisBlockObjectsState = blockObjectsState; - const { setupTeardownBlock, arrayOfChildComponents } = setChildrenComponents( - blockObjectsState, - theme + + const { setupTeardownBlock, arrayOfChildComponents } = useMemo( + () => setChildrenComponents(blockObjectsState, theme), + [blockObjectsState] ); return ( @@ -117,6 +117,6 @@ const TestBlock = ({ blockObjectsState }) => { ); -}; +}); export default TestBlock; diff --git a/src/context/RTFsContextsProvider.tsx b/src/context/RTFsContextsProvider.tsx index e84a4b02..3521823b 100644 --- a/src/context/RTFsContextsProvider.tsx +++ b/src/context/RTFsContextsProvider.tsx @@ -1,9 +1,6 @@ -import React, { createContext, useReducer } from 'react'; +import React, { createContext, useContext, useCallback, useMemo } from 'react'; -import { - reactTestFileReducer, - initialReactTestFileState, -} from './reducers/updatedReactTestCaseReducer'; +import { useReactTestFileReducer } from './reducers/updatedReactTestCaseReducer'; import { styles as modalStyles } from '../Modals/Modal.module.scss'; import Accordion from '@mui/material/Accordion'; import AccordionSummary from '@mui/material/AccordionSummary'; @@ -30,10 +27,7 @@ import { uid } from 'uid'; export const RTFsContexts = createContext(); const RTFsContextsProvider = ({ children }) => { - const [reactTestFileState, rTFDispatch] = useReducer( - reactTestFileReducer, - initialReactTestFileState - ); + const [reactTestFileState, rTFDispatch] = useReactTestFileReducer(); const setChildrenComponents = ( parent @@ -42,6 +36,60 @@ const RTFsContextsProvider = ({ children }) => { let setupTeardownBlock = ''; const arrayOfChildComponents = []; Object.values(parent.children).forEach((childComponent: object) => { + switch (childComponent['objectType']) { + case 'describe': + arrayOfChildComponents.push( + + ); + break; + case 'setupTeardown': + setupTeardownBlock = ( + + ); + break; + case 'test': + arrayOfChildComponents.push( + + ); + break; + case 'statement': + if ( + childComponent['statementType'] === 'render' //&& + //(!extraClauses || !extraClauses['setupTeardownExist']) + ) { + arrayOfChildComponents.push( + + ); + //setHasSetupTeardown(true); + } else if (childComponent['statementType'] === 'action') { + arrayOfChildComponents.push( + + ); + } else if (childComponent['statementType'] === 'assertion') { + arrayOfChildComponents.push( + + ); + } + break; + } /* if (childComponent['objectType'] === 'describe') { arrayOfChildComponents.push( { /> ); } - } + }*/ }); return { setupTeardownBlock, arrayOfChildComponents }; }; @@ -114,37 +162,46 @@ const RTFsContextsProvider = ({ children }) => { }); }; - const handleAddBlock = ( - e: React.SyntheticEvent, - objectType: String, - addObjectToWhere: String //filepath - ) => { - const newObjectsKey = uid(8); - rTFDispatch( - addObjectToStateObject(objectType, addObjectToWhere, newObjectsKey) - ); - }; + const handleAddBlock = useCallback( + ( + e: React.SyntheticEvent, + objectType: String, + addObjectToWhere: String //filepath + ) => { + const newObjectsKey = uid(8); + rTFDispatch( + addObjectToStateObject(objectType, addObjectToWhere, newObjectsKey) + ); + }, + [] + ); - const handleChange = ( - pathToTargetStateObject: String, - propertyToUpdate: String, - updatedValue: String - ): void => { - rTFDispatch( - updateObjectInStateObject( - pathToTargetStateObject, - propertyToUpdate, - updatedValue - ) - ); - }; + const handleChange = useCallback( + ( + pathToTargetStateObject: String, + propertyToUpdate: String, + updatedValue: String + ): void => { + rTFDispatch( + updateObjectInStateObject( + pathToTargetStateObject, + propertyToUpdate, + updatedValue + ) + ); + }, + [] + ); - const handleDeleteBlock = ( - parentsFilepath: String, //filepath - targetsKey: String //parentsFilepath - ) => { - rTFDispatch(deleteObjectFromStateObject(parentsFilepath, targetsKey)); - }; + const handleDeleteBlock = useCallback( + ( + parentsFilepath: String, //filepath + targetsKey: String //parentsFilepath + ) => { + rTFDispatch(deleteObjectFromStateObject(parentsFilepath, targetsKey)); + }, + [] + ); return ( { ); }; +export const useRTFsContexts = () => { + return useContext(RTFsContexts); +}; + export default RTFsContextsProvider; diff --git a/src/context/actions/updatedFrontendFrameworkTestCaseActions.ts b/src/context/actions/updatedFrontendFrameworkTestCaseActions.ts index d1f52b59..73f6a234 100644 --- a/src/context/actions/updatedFrontendFrameworkTestCaseActions.ts +++ b/src/context/actions/updatedFrontendFrameworkTestCaseActions.ts @@ -17,22 +17,6 @@ export const actionTypes = { UPDATE_ITSTATEMENT_ORDER: 'UPDATE_ITSTATEMENT_ORDER', - ADD_ACTION: 'ADD_ACTION', - DELETE_ACTION: 'DELETE_ACTION', - UPDATE_ACTION: 'UPDATE_ACTION', - - ADD_ASSERTION: 'ADD_ASSERTION', - DELETE_ASSERTION: 'DELETE_ASSERTION', - UPDATE_ASSERTION: 'UPDATE_ASSERTION', - - ADD_RENDER: 'ADD_RENDER', - DELETE_RENDER: 'DELETE_RENDER', - UPDATE_RENDER_COMPONENT: 'UPDATE_RENDER_COMPONENT', - - ADD_PROP: 'ADD_PROP', - DELETE_PROP: 'DELETE_PROP', - UPDATE_PROP: 'UPDATE_PROP', - CREATE_NEW_TEST: 'CREATE_NEW_TEST', OPEN_INFO_MODAL: 'OPEN_INFO_MODAL', CLOSE_INFO_MODAL: 'CLOSE_INFO_MODAL', @@ -90,43 +74,6 @@ export const resetTests = () => ({ type: actionTypes.RESET_TESTS, }); -export function makeDeepCopyOfObject(objectToCopy) { - if (typeof objectToCopy !== 'object') return objectToCopy; // return element if not an object - let deepCopy; - //logic for deep copy for copying contents of Arrays vs Objects - if (Array.isArray(objectToCopy)) { - deepCopy = objectToCopy.map((element) => { - if (typeof element === 'object') return makeDeepCopyOfObject(element); - else return element; - }); - } else { - //handle an object that's not an array - deepCopy = {}; - for (const key in objectToCopy) { - if (typeof objectToCopy[key] === 'object') - deepCopy[key] = makeDeepCopyOfObject(objectToCopy[key]); - else deepCopy[key] = objectToCopy[key]; - } - } - return deepCopy; -} - -export function traverseObject(objectToTraverse, filePath) { - if (!filePath) return objectToTraverse; //currently, a filepath will only not exist if you're starting at top level state object - const filePathFolders = filePath.split('/'); //The delimiter is removed and the keys that lead to your target object in the state are stored in array indexes, order kept - let curObject = objectToTraverse; //let's us track how deep we've looked following path - filePathFolders.forEach((folderToEnter) => { - curObject = curObject.children[folderToEnter]; - }); //needs to be curObject.children bc every objects child blocks are found in that children property - return curObject; //return the object we're targeting -} - -export function updateObjectsKeyValuePairs(objectToUpdate, keyValuePairs) { - for (let key in keyValuePairs) { - objectToUpdate[key] = keyValuePairs[key]; - } -} - export function addObjectToStateObject( objectType, addObjectToWhere, //filepath for its parent object in state diff --git a/src/context/reducers/updatedReactTestCaseReducer.ts b/src/context/reducers/updatedReactTestCaseReducer.ts index 0ed3f5d1..2af30c64 100644 --- a/src/context/reducers/updatedReactTestCaseReducer.ts +++ b/src/context/reducers/updatedReactTestCaseReducer.ts @@ -1,12 +1,7 @@ -import React, { createContext, useReducer } from 'react'; +import { useReducer } from 'react'; +import { actionTypes } from '../actions/updatedFrontendFrameworkTestCaseActions'; import { - actionTypes, - makeDeepCopyOfObject, - traverseObject, - updateObjectsKeyValuePairs, -} from '../actions/updatedFrontendFrameworkTestCaseActions'; -import { - ReactTestCaseTypes, + UpdatedReactTestFileState, Action, ItStatements, DescribeBlocks, @@ -18,7 +13,7 @@ import { // similar to globalReducer, but instead of dealing with global items, this is specific to React, // this holds state for things like describe and it statements, basically what your React test looks like -export const initialReactTestFileState = { +const initialReactTestFileState: UpdatedReactTestFileState = { //below is the initial state of the reactTestFile State modalOpen: false, filepath: 'root', @@ -92,7 +87,25 @@ export const initialReactTestFileState = { /* ---------------------------- Helper Functions ---------------------------- */ -const createDescribeObject = (key, filepath: string, parentsFilepath) => { +type DescribeObject = { + key: string; + filepath: string; + parentsFilepath: string; + objectType: string; + comment: string; + text: string; + children: + | {} + | { + [key: string]: DescribeObject | TestObject | SetupTeardownObject; + }; +}; + +const createDescribeObject = ( + key: string, + filepath: string, + parentsFilepath: string +): DescribeObject => { return { key, filepath, @@ -104,7 +117,21 @@ const createDescribeObject = (key, filepath: string, parentsFilepath) => { }; }; -const createTestObject = (key, filepath, parentsFilepath) => ({ +type TestObject = { + key: string; + filepath: string; + parentsFilepath: string; + objectType: string; + comment: string; + text: string; + children: {} | {}; +}; + +const createTestObject = ( + key: string, + filepath: string, + parentsFilepath: string +): TestObject => ({ key, filepath, parentsFilepath, @@ -113,9 +140,19 @@ const createTestObject = (key, filepath, parentsFilepath) => ({ text: '', children: {}, }); -const createStatementBlock = (key, filepath, parentsFilepath) => ({}); +const createStatementBlock = ( + key: string, + filepath: string, + parentsFilepath: string +) => ({}); -const createSetupTeardownObject = (key, filepath, parentsFilepath) => ({ +type SetupTeardownObject = {}; + +const createSetupTeardownObject = ( + key: string, + filepath: string, + parentsFilepath: string +): SetupTeardownObject => ({ key, filepath, parentsFilepath, @@ -128,7 +165,26 @@ const createSetupTeardownObject = (key, filepath, parentsFilepath) => ({ }, }); -const createAction = (key, filepath, parentsFilepath) => ({ +type ActionObject = { + key: string; + filepath: string; + parentsFilepath: string; + objectType: string; + statementType: string; + comment: string; + eventType: string; + eventValue: null | string; + queryVariant: string; + querySelector: string; + queryValue: string; + suggestions: string[]; +}; + +const createAction = ( + key: string, + filepath: string, + parentsFilepath: string +): ActionObject => ({ key, filepath, parentsFilepath, @@ -143,7 +199,27 @@ const createAction = (key, filepath, parentsFilepath) => ({ suggestions: [], }); -const createAssertion = (key, filepath, parentsFilepath) => ({ +type AssertionObject = { + key: string; + filepath: string; + parentsFilepath: string; + objectType: string; + statementType: string; + comment: string; + queryVariant: string; + querySelector: string; + queryValue: string; + isNot: boolean; + matcherType: string; + matcherValue: string; + suggestions: string[]; +}; + +const createAssertion = ( + key: string, + filepath: string, + parentsFilepath: string +): AssertionObject => ({ key, filepath, parentsFilepath, @@ -159,7 +235,21 @@ const createAssertion = (key, filepath, parentsFilepath) => ({ suggestions: [], }); -const createRender = (key, filepath, parentsFilepath) => ({ +type RenderObject = { + key: string; + filepath: string; + parentsFilepath: string; + objectType: string; + statementType: string; + comment: string; + children: {}; +}; + +const createRender = ( + key: string, + filepath: string, + parentsFilepath: string +): RenderObject => ({ key, filepath, parentsFilepath, @@ -170,7 +260,11 @@ const createRender = (key, filepath, parentsFilepath) => ({ //props: [], }); -const createProp = (key, filepath, parentsFilepath) => ({ +const createProp = ( + key: string, + filepath: string, + parentsFilepath: string +) => ({ key, filepath, objectType: 'prop', @@ -181,10 +275,10 @@ const createProp = (key, filepath, parentsFilepath) => ({ }); const pickAndCreateObjectToAdd = ( - objectType, - newObjectsKey, - newObjectsFilepath, - addObjectToWhere + objectType: string, + newObjectsKey: string, + newObjectsFilepath: string, + addObjectToWhere: string ) => { switch (objectType) { case 'describe': { @@ -226,6 +320,44 @@ const pickAndCreateObjectToAdd = ( } } }; + +function makeDeepCopyOfObject(objectToCopy) { + if (typeof objectToCopy !== 'object') return objectToCopy; // return element if not an object + let deepCopy; + //logic for deep copy for copying contents of Arrays vs Objects + if (Array.isArray(objectToCopy)) { + deepCopy = objectToCopy.map((element) => { + if (typeof element === 'object') return makeDeepCopyOfObject(element); + else return element; + }); + } else { + //handle an object that's not an array + deepCopy = {}; + for (const key in objectToCopy) { + if (typeof objectToCopy[key] === 'object') + deepCopy[key] = makeDeepCopyOfObject(objectToCopy[key]); + else deepCopy[key] = objectToCopy[key]; + } + } + return deepCopy; +} + +function traverseObject(objectToTraverse, filePath: string) { + if (!filePath) return objectToTraverse; //currently, a filepath will only not exist if you're starting at top level state object + const filePathFolders = filePath.split('/'); //The delimiter is removed and the keys that lead to your target object in the state are stored in array indexes, order kept + let curObject = objectToTraverse; //let's us track how deep we've looked following path + filePathFolders.forEach((folderToEnter) => { + curObject = curObject.children[folderToEnter]; + }); //needs to be curObject.children bc every objects child blocks are found in that children property + return curObject; //return the object we're targeting +} + +function updateObjectsKeyValuePairs(objectToUpdate, keyValuePairs) { + for (let key in keyValuePairs) { + objectToUpdate[key] = keyValuePairs[key]; + } +} + /* ------------------------- React Test Case Reducer ------------------------ */ /* If you have reached this comment in search of trying to resolve type errors of passed in actions of dispatch @@ -236,7 +368,9 @@ I would encourage you to look at ./hooksTestCaseReducer, which seems to have a w be extended to the other reducers. I hope this comment can save you the hours of confusion I experienced when trying to parse this code. Good luck! */ -export const reactTestFileReducer = (state: ReactTestCaseTypes, action) => { +const reactTestFileReducer = (state: ReactTestCaseTypes, action) => { + console.log('state', state); + switch (action.type) { case actionTypes.ADD_OBJECT_TO_STATE_OBJECT: { const { objectType, addObjectToWhere, newObjectsKey } = action.payload; @@ -252,7 +386,6 @@ export const reactTestFileReducer = (state: ReactTestCaseTypes, action) => { newFilepath, addObjectToWhere ); - return deepCopyOfObject; } @@ -313,3 +446,6 @@ export const reactTestFileReducer = (state: ReactTestCaseTypes, action) => { return state; } }; + +export const useReactTestFileReducer = () => + useReducer(reactTestFileReducer, initialReactTestFileState); diff --git a/src/context/updatedUseGenerateTest.jsx b/src/context/updatedUseGenerateTest.jsx index 483fd8ed..f11103a3 100644 --- a/src/context/updatedUseGenerateTest.jsx +++ b/src/context/updatedUseGenerateTest.jsx @@ -1751,7 +1751,7 @@ function useGenerateTest(test, projectFilePath) { e4x: true, })) ); - //---------------------------------------------------React switch statement--------------------------------------------- + //---------------------------------------------------Updated React switch statement--------------------------------------------- case 'updatedReact': var reactTestCase = testState; var mockData = mockDataState; diff --git a/src/utils/updatedReactTypes.ts b/src/utils/updatedReactTypes.ts index 595fa824..77f5e3d3 100644 --- a/src/utils/updatedReactTypes.ts +++ b/src/utils/updatedReactTypes.ts @@ -3,58 +3,88 @@ export interface ReactStatements { type: string; [key: string]: any; } -export interface ReactTestCaseTypes { +export interface UpdatedReactTestFileState { modalOpen: boolean; - describeId: number; // - itId: number; - statementId: number; - propId: number; - describeBlocks: DescribeBlocks; - itStatements: ItStatements; - statements: Statements; -} -export interface DescribeBlocks { - byId: DescribeById; - allIds: Array; -} - -export interface ItById { - [key: string]: { - id: string; - describeId: string; - text: string; + filepath: string; + children: {} | { [key: string]: DescribeObject }; +} +export interface DescribeObject { + key: string; + filepath: string; + parentsFilepath: string; + objectType: string; + comment: string; + text: string; + children: + | {} + | { + [key: string]: DescribeObject | TestObject | SetupTeardownObject; + }; +} + +export interface SetupTeardownObject { + key: string; + filepath: string; + parentsFilepath: string; + objectType: string; + children: { + beforeAll: {} | { [key: string]: any }; + beforeEach: {} | { [key: string]: any }; + afterAll: {} | { [key: string]: any }; + afterEach: {} | { [key: string]: any }; }; } -export interface ItStatements { - byId: ItById; - allIds: allIdsType; +export interface TestObject { + key: string; + filepath: string; + parentsFilepath: string; + objectType: string; + comment: string; + text: string; + children: {} | {}; } + type allIdsType = { [key: string]: Array; }; -export interface Action { - type: string; - id?: number; - serverFileName?: string; - serverFilePath?: string; - draggableStatements?: Array; - index?: number; - text?: string; - assertion?: Assertion; - db?: string | boolean; - dbFilePath?: string; - dbFileName?: string; - testState?: object; +export interface ActionObject { + key: string; + filepath: string; + parentsFilepath: string; + objectType: string; + statementType: string; + comment: string; + eventType: string; + eventValue: null | string; + queryVariant: string; + querySelector: string; + queryValue: string; + suggestions: string[]; } -export interface Assertion { +/*export interface Assertion { id: number; expectedResponse: string; value: string; matcher: string; not: boolean; +}*/ +export interface Assertion { + key: string; + filepath: string; + parentsFilepath: string; + objectType: string; + statementType: string; + comment: string; + queryVariant: string; + querySelector: string; + queryValue: string; + isNot: boolean; + matcherType: string; + matcherValue: string; + suggestions: string[]; } export interface Statements {