-
-
+ return (
+ <>
+
+
React Testing
+
+
+
+
+
+
-
-
- {mockData
- ? mockData.length > 0 && (
-
- )
- : null}
-
-
- {reactTestFileStateChildren}
+ {mockData
+ ? mockData.length > 0 && (
+
+ )
+ : null}
+
+
+ {reactTestFileStateChildren}
+
+
+
+
-
-
-
-
-
- );
-};
+
+ );
+ }
+);
export default UpdatedReactTestCase;
diff --git a/src/components/UpdatedReactTestComponent/DescribeBlock/DescribeBlock.tsx b/src/components/UpdatedReactTestComponent/DescribeBlock/DescribeBlock.tsx
index e7d7a9b9..0fc50c48 100644
--- a/src/components/UpdatedReactTestComponent/DescribeBlock/DescribeBlock.tsx
+++ b/src/components/UpdatedReactTestComponent/DescribeBlock/DescribeBlock.tsx
@@ -24,7 +24,7 @@ interface DescribeBlockProps {
theme: string;
}
-const DescribeBlock = ({ blockObjectsState }) => {
+const DescribeBlock = React.memo(({ blockObjectsState }) => {
const [{ theme }] = useContext(GlobalContext);
const thisBlockObjectsState = blockObjectsState;
@@ -54,7 +54,6 @@ const DescribeBlock = ({ blockObjectsState }) => {
[blockObjectsState]
);
- console.log('describe rerendered', thisBlockObjectsState.key);
return (
<>
{
);
-};
+});
-export default React.memo(DescribeBlock);
+export default DescribeBlock;
diff --git a/src/components/UpdatedReactTestComponent/TestBlock/TestBlock.tsx b/src/components/UpdatedReactTestComponent/TestBlock/TestBlock.tsx
index 2d7537a0..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 {
@@ -19,7 +19,7 @@ import { ItStatements, Statements } from '../../../utils/updatedReactTypes';
interface ItBlockProps {}
-const TestBlock = ({ blockObjectsState }) => {
+const TestBlock = React.memo(({ blockObjectsState }) => {
const [{ theme }] = useContext(GlobalContext);
const {
handleAddBlock,
@@ -28,11 +28,10 @@ const TestBlock = ({ blockObjectsState }) => {
setChildrenComponents,
} = useRTFsContexts();
const thisBlockObjectsState = blockObjectsState;
- console.log(`Test Block ${thisBlockObjectsState.key} rerendered`);
- const { setupTeardownBlock, arrayOfChildComponents } = setChildrenComponents(
- blockObjectsState,
- theme
+ const { setupTeardownBlock, arrayOfChildComponents } = useMemo(
+ () => setChildrenComponents(blockObjectsState, theme),
+ [blockObjectsState]
);
return (
@@ -118,6 +117,6 @@ const TestBlock = ({ blockObjectsState }) => {
);
-};
+});
export default TestBlock;
diff --git a/src/context/RTFsContextsProvider.tsx b/src/context/RTFsContextsProvider.tsx
index 4b1a6fbf..3521823b 100644
--- a/src/context/RTFsContextsProvider.tsx
+++ b/src/context/RTFsContextsProvider.tsx
@@ -162,30 +162,36 @@ 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 = useCallback(
(
From c8e302903b7ce366dfba4f88a8b5f570cb35fe74 Mon Sep 17 00:00:00 2001
From: DonoCodePeriod <135299863+DonoCodePeriod@users.noreply.github.com>
Date: Mon, 18 Mar 2024 20:00:57 -0400
Subject: [PATCH 4/5] updated Spearmint v.15 notes, increased typescript
coverage
---
Notes On Spearmintv15.md | 7 +-
.../reducers/updatedReactTestCaseReducer.ts | 125 ++++++++++++++++--
2 files changed, 118 insertions(+), 14 deletions(-)
diff --git a/Notes On Spearmintv15.md b/Notes On Spearmintv15.md
index d515534a..ac19e57e 100644
--- a/Notes On Spearmintv15.md
+++ b/Notes On Spearmintv15.md
@@ -28,11 +28,15 @@ 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)
@@ -59,6 +63,7 @@ React useMemo
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/src/context/reducers/updatedReactTestCaseReducer.ts b/src/context/reducers/updatedReactTestCaseReducer.ts
index d02bd848..0ada811c 100644
--- a/src/context/reducers/updatedReactTestCaseReducer.ts
+++ b/src/context/reducers/updatedReactTestCaseReducer.ts
@@ -87,7 +87,25 @@ 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,
@@ -99,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,
@@ -108,9 +140,19 @@ const createTestObject = (key, filepath, parentsFilepath) => ({
text: '',
children: {},
});
-const createStatementBlock = (key, filepath, parentsFilepath) => ({});
+const createStatementBlock = (
+ key: string,
+ filepath: string,
+ parentsFilepath: string
+) => ({});
+
+type SetupTeardownObject = {};
-const createSetupTeardownObject = (key, filepath, parentsFilepath) => ({
+const createSetupTeardownObject = (
+ key: string,
+ filepath: string,
+ parentsFilepath: string
+): SetupTeardownObject => ({
key,
filepath,
parentsFilepath,
@@ -123,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,
@@ -138,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,
@@ -154,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,
@@ -165,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',
@@ -176,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': {
@@ -243,7 +342,7 @@ function makeDeepCopyOfObject(objectToCopy) {
return deepCopy;
}
-function traverseObject(objectToTraverse, filePath) {
+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
From f15d36774ae6cafb816c8df4f735d3db16813049 Mon Sep 17 00:00:00 2001
From: DonoCodePeriod <135299863+DonoCodePeriod@users.noreply.github.com>
Date: Tue, 4 Jun 2024 02:56:13 -0400
Subject: [PATCH 5/5] Props file updated to work with new state management.
Rendering Props reenabled.
---
.../UpdatedReactTestComponent/Render/Prop.tsx | 31 +-----
.../Render/Render.tsx | 6 +-
.../reducers/updatedReactTestCaseReducer.ts | 7 +-
src/utils/updatedReactTypes.ts | 102 +++++++++++-------
4 files changed, 77 insertions(+), 69 deletions(-)
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 (
{
- {Object.values(blockObjectsState.children).forEach((prop) => {
- return ;
- })}
+ {Object.values(blockObjectsState.children).map((prop) => (
+
+ ))}