From 84a720714aa5f9afeb69b287917f895c0e9ccf9e Mon Sep 17 00:00:00 2001 From: James McCollough <100531603+j-mccoll@users.noreply.github.com> Date: Mon, 5 Jun 2023 10:39:54 -0400 Subject: [PATCH 01/70] Debug data clone error --- src/backend/routers/snapShot.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/backend/routers/snapShot.ts b/src/backend/routers/snapShot.ts index b50d17e8e..41a5cb7f7 100644 --- a/src/backend/routers/snapShot.ts +++ b/src/backend/routers/snapShot.ts @@ -28,10 +28,12 @@ export default function updateAndSendSnapShotTree(fiberRoot: FiberRoot): void { // this postMessage will be sending the most up-to-date snapshot of the current React Fiber Tree // the postMessage action will be received on the content script to later update the tabsObj // this will fire off everytime there is a change in test application + // convert the payload from a fiber tree to an object to avoid a data clone error when postMessage processes the argument + const obj = JSON.parse(JSON.stringify(payload)); window.postMessage( { action: 'recordSnap', - payload, + payload: obj, }, '*', ); From 79affde0e4e0c710132e18dddb3666659d1d4c28 Mon Sep 17 00:00:00 2001 From: mikebednarz Date: Mon, 5 Jun 2023 15:43:54 -0400 Subject: [PATCH 02/70] added text decoder to jest config file to resolve textEncoder error in Jest testing environment --- jest.config.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/jest.config.js b/jest.config.js index 1b83e875f..3982bcf86 100644 --- a/jest.config.js +++ b/jest.config.js @@ -1,7 +1,8 @@ -const { TextEncoder } = require('util'); +const { TextEncoder, TextDecoder } = require('util'); module.exports = { globals: { TextEncoder: TextEncoder, + TextDecoder: TextDecoder }, transform: { '^.+\\.(js|ts|tsx)$': 'ts-jest', From d004fc9a5e35b2a1d520641431b900285e0099a7 Mon Sep 17 00:00:00 2001 From: mikebednarz Date: Tue, 6 Jun 2023 11:37:15 -0400 Subject: [PATCH 03/70] fixed textEncoder is not defined error --- jest.config.js | 3 +-- src/backend/__tests__/linkFiber.test.ts | 3 +++ src/backend/__tests__/routes.test.ts | 3 +++ 3 files changed, 7 insertions(+), 2 deletions(-) diff --git a/jest.config.js b/jest.config.js index 3982bcf86..1b83e875f 100644 --- a/jest.config.js +++ b/jest.config.js @@ -1,8 +1,7 @@ -const { TextEncoder, TextDecoder } = require('util'); +const { TextEncoder } = require('util'); module.exports = { globals: { TextEncoder: TextEncoder, - TextDecoder: TextDecoder }, transform: { '^.+\\.(js|ts|tsx)$': 'ts-jest', diff --git a/src/backend/__tests__/linkFiber.test.ts b/src/backend/__tests__/linkFiber.test.ts index 59ba605fe..f2dcf7028 100644 --- a/src/backend/__tests__/linkFiber.test.ts +++ b/src/backend/__tests__/linkFiber.test.ts @@ -1,3 +1,6 @@ +/** + * @jest-environment node + */ import linkFiberInitialization from '../routers/linkFiber'; import timeJumpInitialization from '../controllers/timeJump'; import componentActionsRecord from '../models/masterState'; diff --git a/src/backend/__tests__/routes.test.ts b/src/backend/__tests__/routes.test.ts index 80801f97f..cacde2df9 100644 --- a/src/backend/__tests__/routes.test.ts +++ b/src/backend/__tests__/routes.test.ts @@ -1,3 +1,6 @@ +/** + * @jest-environment node + */ import { JSDOM } from 'jsdom'; import { Routes, Route } from '../models/routes'; From 2269425ad8fbb0a3e3cc92febf0349f4e57cfc94 Mon Sep 17 00:00:00 2001 From: James McCollough <100531603+j-mccoll@users.noreply.github.com> Date: Tue, 6 Jun 2023 15:46:01 -0400 Subject: [PATCH 04/70] Remove @emotion library from Reactime --- .babelrc | 3 +-- package.json | 3 --- src/app/components/Loader.tsx | 8 +------- 3 files changed, 2 insertions(+), 12 deletions(-) diff --git a/.babelrc b/.babelrc index 585e6f0a4..8567e4e87 100644 --- a/.babelrc +++ b/.babelrc @@ -1,4 +1,3 @@ { - "presets": ["airbnb", "@babel/preset-typescript"], - "plugins": ["@emotion"] + "presets": ["airbnb", "@babel/preset-typescript"] } \ No newline at end of file diff --git a/package.json b/package.json index fe1acc643..9a8bbc104 100644 --- a/package.json +++ b/package.json @@ -95,7 +95,6 @@ "@babel/preset-env": "^7.12.7", "@babel/preset-react": "^7.12.7", "@babel/preset-typescript": "^7.21.5", - "@emotion/babel-plugin": "^11.7.2", "@inrupt/jest-jsdom-polyfills": "^1.6.2", "@testing-library/jest-dom": "^4.2.4", "@testing-library/react": "^13.4.0", @@ -152,8 +151,6 @@ "webpack-cli": "^3.3.12" }, "dependencies": { - "@emotion/react": "^11.9.0", - "@emotion/styled": "^11.8.1", "@fortawesome/fontawesome-free": "^5.15.1", "@fortawesome/fontawesome-svg-core": "^1.2.32", "@fortawesome/free-regular-svg-icons": "^5.15.1", diff --git a/src/app/components/Loader.tsx b/src/app/components/Loader.tsx index 9577166c9..96aceaaa9 100644 --- a/src/app/components/Loader.tsx +++ b/src/app/components/Loader.tsx @@ -1,16 +1,10 @@ // /* eslint-disable react/prop-types */ import React from 'react'; -import { css, SerializedStyles } from '@emotion/react'; import { ClipLoader } from 'react-spinners'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { faCheck, faExclamationCircle } from '@fortawesome/free-solid-svg-icons'; -const override: SerializedStyles = css` - display: inline; - margin: 0 auto; -`; - // Displays the result of the check when loading is done const handleResult = (result: boolean): JSX.Element => result ? ( @@ -23,7 +17,7 @@ const handleResult = (result: boolean): JSX.Element => // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types const Loader = ({ loading, result }): JSX.Element => loading ? ( - + ) : ( handleResult(result) ); From 2f1ebb1273feaf3aa693b9a626c62d3b62d01dc5 Mon Sep 17 00:00:00 2001 From: James McCollough <100531603+j-mccoll@users.noreply.github.com> Date: Wed, 7 Jun 2023 11:16:49 -0400 Subject: [PATCH 05/70] Updated inline styles to replace @emotion styling --- src/app/components/Loader.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/components/Loader.tsx b/src/app/components/Loader.tsx index 96aceaaa9..bdb14b2a0 100644 --- a/src/app/components/Loader.tsx +++ b/src/app/components/Loader.tsx @@ -17,7 +17,7 @@ const handleResult = (result: boolean): JSX.Element => // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types const Loader = ({ loading, result }): JSX.Element => loading ? ( - + ) : ( handleResult(result) ); From 1f853c70787677fe0e6ee324ae00bc353f0e4dcb Mon Sep 17 00:00:00 2001 From: elduke717 Date: Wed, 7 Jun 2023 14:54:22 -0400 Subject: [PATCH 06/70] add some tests --- .babelrc | 2 +- src/backend/routers/snapShot.ts | 46 ++++++ test_output1 | 280 ++++++++++++++++++++++++++++++++ 3 files changed, 327 insertions(+), 1 deletion(-) create mode 100644 test_output1 diff --git a/.babelrc b/.babelrc index 585e6f0a4..59b315553 100644 --- a/.babelrc +++ b/.babelrc @@ -1,4 +1,4 @@ { "presets": ["airbnb", "@babel/preset-typescript"], - "plugins": ["@emotion"] + // "plugins": ["@emotion"] } \ No newline at end of file diff --git a/src/backend/routers/snapShot.ts b/src/backend/routers/snapShot.ts index 41a5cb7f7..783e54f86 100644 --- a/src/backend/routers/snapShot.ts +++ b/src/backend/routers/snapShot.ts @@ -2,6 +2,7 @@ import { Snapshot, FiberRoot } from '../types/backendTypes'; import componentActionsRecord from '../models/masterState'; import routes from '../models/routes'; import createTree from '../controllers/createTree'; +const _ = require('lodash'); // -------------------------UPDATE & SEND TREE SNAP SHOT------------------------ /** @@ -13,6 +14,42 @@ import createTree from '../controllers/createTree'; */ // updating tree depending on current mode on the panel (pause, etc) export default function updateAndSendSnapShotTree(fiberRoot: FiberRoot): void { + + // This function compares trees with one another + function isIdentical(tree1, tree2) { + // Check if both are null + if (!tree1 && !tree2) return true; + + // Check if either of them is null + if (!tree1 || !tree2) return false; + + // Get the keys + const tree1Keys = Object.keys(tree1); + const tree2Keys = Object.keys(tree2); + + // Check if length of keys is different + if (tree1Keys.length !== tree2Keys.length) return false; + + // Check keys and values + for (let key of tree1Keys) { + const val1 = tree1[key]; + const val2 = tree2[key]; + + const areObjects = isObject(val1) && isObject(val2); + if ( + (areObjects && !isIdentical(val1, val2)) || + (!areObjects && val1 !== val2) + ) { + return false; + } + } + return true; + } + + function isObject(object) { + return object != null && typeof object === 'object'; + } + // This is the currently active root fiber(the mutable root of the tree) const { current } = fiberRoot; // Clear all of the legacy actions from old fiber tree because we are about to create a new one @@ -29,7 +66,16 @@ export default function updateAndSendSnapShotTree(fiberRoot: FiberRoot): void { // the postMessage action will be received on the content script to later update the tabsObj // this will fire off everytime there is a change in test application // convert the payload from a fiber tree to an object to avoid a data clone error when postMessage processes the argument + console.log('This is the payload, baby: ', payload); + const clonedDeepPayload = _.cloneDeep(payload); + console.log('cloneDeepPayload tree', clonedDeepPayload); + // compare payload and clonedDeepPayload with isIdentical + // console.log('are they identical?', isIdentical(payload, clonedDeepPayload)); + // console.log('typeof payload', typeof payload); const obj = JSON.parse(JSON.stringify(payload)); + // console.log('righton, this is the obj: ', obj) + // console.log('typeof obj', typeof obj); + console.log('passing in obj'); window.postMessage( { action: 'recordSnap', diff --git a/test_output1 b/test_output1 new file mode 100644 index 000000000..a7ccc8a50 --- /dev/null +++ b/test_output1 @@ -0,0 +1,280 @@ +nickhuemmer@Nicks-Mac-mini reactime % npm run test + +> test +> jest --verbose --coverage + + PASS src/backend/__tests__/masterState.test.ts (6.145 s) + Master State unit tests + componentActionRecord unit tests + clear + ✓ should clear componentActionsRecord (1 ms) + saveNew + ✓ should add a new component to componentActionRecord and return its index (1 ms) + getComponentByIndex + ✓ should return the component at the specified index + ✓ should return undefined when passed an index that does not exist + getComponentByIndexHooks + ✓ should return the components at the specified indices (1 ms) + ✓ should return undefined when passed an empty array (1 ms) + ✓ should return undefined when passed an index that does not exist + getAllComponents + ✓ should return all components in componentActionRecord (1 ms) + + FAIL src/backend/__tests__/routes.test.ts + ● Test suite failed to run + + ReferenceError: TextEncoder is not defined + + > 1 | import { JSDOM } from 'jsdom'; + | ^ + 2 | + 3 | import { Routes, Route } from '../models/routes'; + 4 | + + at Object. (node_modules/whatwg-url/lib/encoding.js:3:21) + at Object. (node_modules/whatwg-url/lib/url-state-machine.js:7:5) + at Object. (node_modules/whatwg-url/lib/URL-impl.js:3:13) + at Object. (node_modules/whatwg-url/lib/URL.js:372:14) + at Object. (node_modules/whatwg-url/webidl2js-wrapper.js:3:13) + at Object. (node_modules/whatwg-url/index.js:6:5) + at Object. (node_modules/jsdom/lib/api.js:8:19) + at Object. (src/backend/__tests__/routes.test.ts:1:1) + +[BABEL] Note: The code generator has deoptimised the styling of /Users/nickhuemmer/projects/reactime/node_modules/react-dom/cjs/react-dom.development.js as it exceeds the max of 500KB. +[BABEL] Note: The code generator has deoptimised the styling of /Users/nickhuemmer/projects/reactime/node_modules/react-dom/cjs/react-dom.development.js as it exceeds the max of 500KB. +[BABEL] Note: The code generator has deoptimised the styling of /Users/nickhuemmer/projects/reactime/node_modules/react-dom/cjs/react-dom.development.js as it exceeds the max of 500KB. +[BABEL] Note: The code generator has deoptimised the styling of /Users/nickhuemmer/projects/reactime/node_modules/react-dom/cjs/react-dom.development.js as it exceeds the max of 500KB. +[BABEL] Note: The code generator has deoptimised the styling of /Users/nickhuemmer/projects/reactime/node_modules/react-dom/cjs/react-dom.development.js as it exceeds the max of 500KB. +[BABEL] Note: The code generator has deoptimised the styling of /Users/nickhuemmer/projects/reactime/node_modules/react-dom/cjs/react-dom.development.js as it exceeds the max of 500KB. + PASS src/backend/__tests__/masterTree.test.tsx (7.83 s) + master tree tests + createTree Unit test + Filter components that are from NextJS, Remix or not from allowed component types + ✓ should return a Tree if we pass in a empty fiber node (1 ms) + ✓ should filter out NextJS default components with no children or siblings (2 ms) + ✓ should filter out remix default components with no children or siblings (2 ms) + ✓ should only traverse allowed components (3 ms) + ✓ should filter out NextJS & Remix default components with children and/or siblings (71 ms) + Display component props information + ✓ should display functional props information + ✓ should display class props information (1 ms) + ✓ should display React router props information (3 ms) + ✓ should exclude reserved props name (14 ms) + ✓ should skip circular props (4 ms) + ✓ should display props information of multiple components (1 ms) + Display component states information + ✓ should display stateless if functional state empty + ✓ should display class state information + ✓ should keep track of class state index + ✓ should display stateless if functional state empty + ✓ should display functional state information (2 ms) + ✓ should keep track of functional state index (1 ms) + Replace fromLinkFiber class value + ○ skipped NEED UNDERSTANDING THE PURPOSE OF FROMLINKFIBER FOR FRONTEND, currently unable to replicate DOMTokenList instance + Tree unit test + Serialize state unit test + ✓ should create a deep copy of state + ✓ should detect circular state + Constructing a default tree + ✓ should be able to create a newTree + ✓ should have 6 properties (1 ms) + ✓ should have default name, componentData, isExpanded and rtid + ✓ should have no children + Constructing a tree root + ✓ should have name as 'root' and state as 'root' + Adding children + ✓ should return a new tree child (1 ms) + ✓ should have the child be in the children's array property + ✓ should have unique name + ○ skipped should be able to add multiple children and sibilings + createComponentActionsRecord unit test + ✓ should save a new component action record if the Fiber node is a stateful class component (1 ms) + ✓ should save a new component action record if the Fiber node is a stateful class component with props + ✓ should save a new component action record if the Fiber node is a functional component with state + ✓ should return the correct hooks array for a given component index + ✓ should not save a new component action record if the Fiber node is not a relevant component type + + FAIL src/backend/__tests__/linkFiber.test.ts + ● Test suite failed to run + + ReferenceError: TextEncoder is not defined + + 16 | import Tree from '../models/tree'; + 17 | import { DevTools } from '../types/linkFiberTypes'; + > 18 | import { JSDOM } from 'jsdom'; + | ^ + 19 | import path from 'path'; + 20 | import fs from 'fs'; + 21 | + + at Object. (node_modules/whatwg-url/lib/encoding.js:3:21) + at Object. (node_modules/whatwg-url/lib/url-state-machine.js:7:5) + at Object. (node_modules/whatwg-url/lib/URL-impl.js:3:13) + at Object. (node_modules/whatwg-url/lib/URL.js:372:14) + at Object. (node_modules/whatwg-url/webidl2js-wrapper.js:3:13) + at Object. (node_modules/whatwg-url/index.js:6:5) + at Object. (node_modules/jsdom/lib/api.js:8:19) + at Object. (src/backend/__tests__/linkFiber.test.ts:18:1) + + PASS src/backend/__tests__/throttle.test.ts + throttle unit tests + ✓ should return a function (3 ms) + ✓ throttled function should be called with the correct arguments (2 ms) + ✓ should invoke the callback immediately on the first call + ✓ should invoke the callback only once if called multiple times within the throttling interval (1 ms) + ✓ should invoke the callback multiple times if called outside of the throttling interval (1 ms) + + PASS src/app/__tests__/ErrorMsg.test.tsx (7.098 s) + unit testing for ErrorContainer.tsx + When there are no errors + ✓ Returns empty div (19 ms) + when there's a RDT Error + ✓ RDT error related text shows (14 ms) + when there's a Content Script Errorr + ✓ Content Script Error related text shows (8 ms) + ✓ launch button shows (55 ms) + when there's a Not React Error + ✓ Not React App text shows (2 ms) + + PASS src/app/__tests__/TravelContainer.test.tsx (13.599 s) + All elements appear in the TravelContainer module + ✓ first button contains text Play (71 ms) + ✓ MainSlider exists in document (5 ms) + ✓ Dropdown exists in document (5 ms) + ✓ Backward button exists in document (43 ms) + ✓ Foward button exists in document (21 ms) + Testing backward and forward button + ✓ Clicking < Button button will triger button (7 ms) + ✓ Clicking > Button button will triger button (5 ms) + Testing play/pause button + ✓ Play button is rendered (1 ms) + ✓ Play initially says Play (2 ms) + ✓ Clicking Play button will triger button (1 ms) + ✓ Play says Pause when `Playing` is set to False (1 ms) + ✓ Clicking Pause button will trigger button (1 ms) + +[BABEL] Note: The code generator has deoptimised the styling of /Users/nickhuemmer/projects/reactime/node_modules/lodash/lodash.js as it exceeds the max of 500KB. +[BABEL] Note: The code generator has deoptimised the styling of /Users/nickhuemmer/projects/reactime/node_modules/@fortawesome/free-solid-svg-icons/index.js as it exceeds the max of 500KB. + PASS src/app/__tests__/action.test.tsx (7.052 s) + unit testing for Action.tsx + When a component is shown on the page + ✓ Action snapshot should be shown as Snapshot: 3.0 (96 ms) + ✓ two buttons with time and Current when not at current snapshot (56 ms) + ✓ Action snapshot should be shown as Snapshot: 3.0 (6 ms) + ✓ when there's no have no duration data (13 ms) + +[BABEL] Note: The code generator has deoptimised the styling of /Users/nickhuemmer/projects/reactime/node_modules/@fortawesome/free-solid-svg-icons/index.js as it exceeds the max of 500KB. + PASS src/app/__tests__/WebMetrics.test.tsx + WebMetrics graph testing + ✓ should have 1 div with class name "metric" (19 ms) + + PASS src/app/__tests__/ActionContainer.test.tsx (14.611 s) + unit testing for ActionContainer + ✓ Expect top arrow to be rendered (94 ms) + ✓ Expect RouteDescription to be rendered (16 ms) + ✓ Expect SwitchApp to be rendered (4 ms) + ✓ Click works on clear button (24 ms) + + PASS src/app/__tests__/ButtonContainer.test.tsx (15.225 s) + Unit testing for ButtonContainer + When button container is loaded + ✓ should have 4 buttons (140 ms) + When view is unlock + ✓ Button should show as unlocked (22 ms) + Upload/Download + ✓ Clicking upload and download buttons (49 ms) + + PASS src/app/__tests__/Loader.test.tsx + unit testing for Loader.tsx + ✓ renders a loading icon (20 ms) + ✓ renders a fail icon (25 ms) + ✓ renders a check icon (1 ms) + + PASS src/app/__tests__/ErrorContainer.test.tsx (15.455 s) + unit testing for ErrorContainer.tsx + ✓ logo image renders as expected (46 ms) + ✓ ErrorMsg component renders as expected (6 ms) + ✓ Reactime website shows as expected (5 ms) + Loading Checks show up as expected + ✓ Content script launching check shows (3 ms) + ✓ React Dev Tool Install check shows (3 ms) + ✓ Compatible app check shows (3 ms) + Launching header shows correct tab info + ✓ When currentTitle has no target (2 ms) + ✓ When currentTitle has a target title (3 ms) + + PASS src/app/__tests__/Tutorial.test.tsx (7.317 s) + Before Tutorial is entered + ✓ How to use button exists (26 ms) + ✓ User clicking "How to use" while on map tab button starts map tutorial (55 ms) + ✓ User clicking "How to use" while on performance tab button starts performance tutorial (20 ms) + ✓ User clicking "How to use" while on performance comparison tab, no tutorial available (15 ms) + + PASS src/app/__tests__/dropdown.test.tsx + Dropdown test + ✓ renders Dropdown with correct info (36 ms) + +[BABEL] Note: The code generator has deoptimised the styling of /Users/nickhuemmer/projects/reactime/node_modules/@sinonjs/text-encoding/lib/encoding-indexes.js as it exceeds the max of 500KB. + PASS src/app/__tests__/MainSlider.test.tsx (9.551 s) + Unit testing for MainSlider.jsx + When user only has one snapshot to view + ✓ Component should have min, max, value with correct values to indicate slider position for correct tab (42 ms) + When there are multiple snapshots and we are looking in between + ✓ Component should have min, max, value with correct values to indicate slider position when there are multiple snapshots (8 ms) + + PASS src/app/__tests__/MainContainer.test.tsx (20.125 s) + With no snapshots, should not render any containers + ✓ With no snapshots, ErrorContainer should render (17 ms) + ✓ With no snapshots, ActionContainer should not render (2 ms) + ✓ With no snapshots, StateContainer should not render (2 ms) + ✓ With no snapshots, TravelContainer should not render (1 ms) + ✓ With no snapshots, ButtonsContainer should not render (2 ms) + With snapshots, should render all containers + ✓ With snapshots, ErrorContainer should not render (1 ms) + ✓ With snapshots, ActionContainer should not render (4 ms) + ✓ With snapshots, StateContainer should render (2 ms) + ✓ With snapshots, TravelContainer should render (2 ms) + ✓ With snapshots, ButtonsContainer should render (1 ms) + +----------------------------------|---------|----------|---------|---------|---------------------------------------- +File | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s +----------------------------------|---------|----------|---------|---------|---------------------------------------- +All files | 78.5 | 56.71 | 65.87 | 78.63 | + app | 80 | 100 | 0 | 100 | + store.tsx | 80 | 100 | 0 | 100 | + app/actions | 75.94 | 100 | 26.92 | 100 | + actions.ts | 75.94 | 100 | 26.92 | 100 | + app/components | 82.65 | 72.58 | 81.48 | 80.79 | + Action.tsx | 65.62 | 61.11 | 40 | 65.62 | 51-56,66,82-118 + Dropdown.tsx | 100 | 100 | 100 | 100 | + ErrorMsg.tsx | 95.65 | 88.88 | 100 | 100 | 11 + Loader.tsx | 100 | 100 | 100 | 100 | + MainSlider.tsx | 86.2 | 50 | 60 | 81.81 | 35,47-51 + Tutorial.tsx | 74.54 | 70.37 | 100 | 72.54 | 40-41,44,47-48,51-52,55,227-316 + WebMetrics.tsx | 100 | 100 | 100 | 100 | + app/constants | 100 | 100 | 100 | 100 | + actionTypes.ts | 100 | 100 | 100 | 100 | + app/containers | 67.14 | 38.55 | 61.53 | 62.66 | + ActionContainer.tsx | 75.32 | 56 | 72.72 | 72.13 | 16,63-80,121,126-131 + ButtonsContainer.tsx | 75.67 | 40 | 62.5 | 71.87 | 38-47,64 + ErrorContainer.tsx | 61.36 | 30.76 | 50 | 57.5 | 17,27,33-37,43-49,56-60,63,66 + MainContainer.tsx | 52.38 | 21.42 | 37.5 | 47.94 | 26-35,49-85,90,121,124,127,130,133-138 + TravelContainer.tsx | 82.85 | 57.14 | 83.33 | 77.77 | 39-40,43-47 + backend/controllers | 86.33 | 57.44 | 100 | 88.59 | + createComponentActionsRecord.ts | 81.48 | 70.9 | 100 | 91.3 | 64,96 + createTree.ts | 77.27 | 56.25 | 100 | 75.8 | 135-145,260-273 + statePropExtractors.ts | 95.65 | 51.14 | 100 | 100 | 105-107,117-123,128-137 + throttle.ts | 100 | 100 | 100 | 100 | + backend/models | 81.44 | 72.22 | 85 | 80.89 | + filterConditions.ts | 100 | 100 | 100 | 100 | + masterState.ts | 100 | 100 | 100 | 100 | + routes.ts | 58.13 | 16.66 | 57.14 | 56.41 | 54,66,76-84,99-117 + tree.ts | 100 | 100 | 100 | 100 | + backend/types | 100 | 100 | 100 | 100 | + backendTypes.ts | 100 | 100 | 100 | 100 | +----------------------------------|---------|----------|---------|---------|---------------------------------------- +Test Suites: 2 failed, 15 passed, 17 total +Tests: 2 skipped, 102 passed, 104 total +Snapshots: 0 total +Time: 20.897 s +Ran all test suites. \ No newline at end of file From e829e19ece7bb55aae469a7b9d1e9b307f985a1d Mon Sep 17 00:00:00 2001 From: elduke717 Date: Wed, 7 Jun 2023 14:57:41 -0400 Subject: [PATCH 07/70] remove unnecessary tests, parse methods in snapShots maintained --- src/backend/routers/snapShot.ts | 40 +-------------------------------- 1 file changed, 1 insertion(+), 39 deletions(-) diff --git a/src/backend/routers/snapShot.ts b/src/backend/routers/snapShot.ts index 783e54f86..faf439bd4 100644 --- a/src/backend/routers/snapShot.ts +++ b/src/backend/routers/snapShot.ts @@ -14,42 +14,7 @@ const _ = require('lodash'); */ // updating tree depending on current mode on the panel (pause, etc) export default function updateAndSendSnapShotTree(fiberRoot: FiberRoot): void { - - // This function compares trees with one another - function isIdentical(tree1, tree2) { - // Check if both are null - if (!tree1 && !tree2) return true; - - // Check if either of them is null - if (!tree1 || !tree2) return false; - - // Get the keys - const tree1Keys = Object.keys(tree1); - const tree2Keys = Object.keys(tree2); - - // Check if length of keys is different - if (tree1Keys.length !== tree2Keys.length) return false; - - // Check keys and values - for (let key of tree1Keys) { - const val1 = tree1[key]; - const val2 = tree2[key]; - - const areObjects = isObject(val1) && isObject(val2); - if ( - (areObjects && !isIdentical(val1, val2)) || - (!areObjects && val1 !== val2) - ) { - return false; - } - } - return true; - } - - function isObject(object) { - return object != null && typeof object === 'object'; - } - + // This is the currently active root fiber(the mutable root of the tree) const { current } = fiberRoot; // Clear all of the legacy actions from old fiber tree because we are about to create a new one @@ -66,9 +31,6 @@ export default function updateAndSendSnapShotTree(fiberRoot: FiberRoot): void { // the postMessage action will be received on the content script to later update the tabsObj // this will fire off everytime there is a change in test application // convert the payload from a fiber tree to an object to avoid a data clone error when postMessage processes the argument - console.log('This is the payload, baby: ', payload); - const clonedDeepPayload = _.cloneDeep(payload); - console.log('cloneDeepPayload tree', clonedDeepPayload); // compare payload and clonedDeepPayload with isIdentical // console.log('are they identical?', isIdentical(payload, clonedDeepPayload)); // console.log('typeof payload', typeof payload); From 98f4ccdfc3268c97d9989534ef452866667ca81f Mon Sep 17 00:00:00 2001 From: sergeylvq Date: Fri, 9 Jun 2023 10:28:19 -0400 Subject: [PATCH 08/70] snapshots.ts --- src/app/components/{snapshots.js => snapshots.ts} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename src/app/components/{snapshots.js => snapshots.ts} (100%) diff --git a/src/app/components/snapshots.js b/src/app/components/snapshots.ts similarity index 100% rename from src/app/components/snapshots.js rename to src/app/components/snapshots.ts From 644f056a569331fbd7d13f0d96baa8b99ce9c3a5 Mon Sep 17 00:00:00 2001 From: sergeylvq Date: Fri, 9 Jun 2023 10:40:43 -0400 Subject: [PATCH 09/70] snapshot ts --- src/app/components/snapshots.ts | 292 ++++++++++++++++---------------- 1 file changed, 149 insertions(+), 143 deletions(-) diff --git a/src/app/components/snapshots.ts b/src/app/components/snapshots.ts index ef1463df7..3acd9f4d4 100644 --- a/src/app/components/snapshots.ts +++ b/src/app/components/snapshots.ts @@ -1,144 +1,150 @@ -const snapshots = [ - { - snapshot: 10, - component1: 32, - component2: 27, - component3: 12, - 'all others': 14, - }, - { - snapshot: 2, - component1: 73, - component2: 45, - component3: 23, - 'all others': 80, - }, - { - snapshot: 3, - component1: 84, - component2: 46, - component3: 15, - 'all others': 46, - }, - { - snapshot: 4, - component1: 78, - component2: 45, - component3: 36, - 'all others': 10, - }, - { - snapshot: 5, - component1: 59, - component2: 52, - component3: 49, - 'all others': 28, - }, - { - snapshot: 6, - component1: 36, - component2: 96, - component3: 1, - 'all others': 46, - }, - { - snapshot: 7, - component1: 6, - component2: 6, - component3: 42, - 'all others': 99, - }, - { - snapshot: 8, - component1: 76, - component2: 29, - component3: 44, - 'all others': 47, - }, - { - snapshot: 9, - component1: 43, - component2: 62, - component3: 5, - 'all others': 41, - }, - { - snapshot: 10, - component1: 10, - component2: 84, - component3: 54, - 'all others': 91, - }, - { - snapshot: 11, - component1: 5, - component2: 78, - component3: 38, - 'all others': 8, - }, - { - snapshot: 12, - component1: 67, - component2: 73, - component3: 31, - 'all others': 50, - }, - { - snapshot: 13, - component1: 43, - component2: 42, - component3: 7, - 'all others': 28, - }, - { - snapshot: 14, - component1: 48, - component2: 26, - component3: 1, - 'all others': 30, - }, - { - snapshot: 15, - component1: 60, - component2: 28, - component3: 64, - 'all others': 69, - }, - { - snapshot: 16, - component1: 70, - component2: 15, - component3: 32, - 'all others': 91, - }, - { - snapshot: 17, - component1: 34, - component2: 86, - component3: 46, - 'all others': 61, - }, - { - snapshot: 18, - component1: 7, - component2: 50, - component3: 26, - 'all others': 32, - }, - { - snapshot: 19, - component1: 70, - component2: 40, - component3: 74, - 'all others': 6, - }, - { - snapshot: 20, - component1: 33, - component2: 78, - component3: 59, - 'all others': 91, - }, -]; +const snapshots: { + snapshot: number; + component1: number; + component2: number; + component3: number; + [key: string]: number; +}[] = [ + { + snapshot: 10, + component1: 32, + component2: 27, + component3: 12, + 'all others': 14, + }, + { + snapshot: 2, + component1: 73, + component2: 45, + component3: 23, + 'all others': 80, + }, + { + snapshot: 3, + component1: 84, + component2: 46, + component3: 15, + 'all others': 46, + }, + { + snapshot: 4, + component1: 78, + component2: 45, + component3: 36, + 'all others': 10, + }, + { + snapshot: 5, + component1: 59, + component2: 52, + component3: 49, + 'all others': 28, + }, + { + snapshot: 6, + component1: 36, + component2: 96, + component3: 1, + 'all others': 46, + }, + { + snapshot: 7, + component1: 6, + component2: 6, + component3: 42, + 'all others': 99, + }, + { + snapshot: 8, + component1: 76, + component2: 29, + component3: 44, + 'all others': 47, + }, + { + snapshot: 9, + component1: 43, + component2: 62, + component3: 5, + 'all others': 41, + }, + { + snapshot: 10, + component1: 10, + component2: 84, + component3: 54, + 'all others': 91, + }, + { + snapshot: 11, + component1: 5, + component2: 78, + component3: 38, + 'all others': 8, + }, + { + snapshot: 12, + component1: 67, + component2: 73, + component3: 31, + 'all others': 50, + }, + { + snapshot: 13, + component1: 43, + component2: 42, + component3: 7, + 'all others': 28, + }, + { + snapshot: 14, + component1: 48, + component2: 26, + component3: 1, + 'all others': 30, + }, + { + snapshot: 15, + component1: 60, + component2: 28, + component3: 64, + 'all others': 69, + }, + { + snapshot: 16, + component1: 70, + component2: 15, + component3: 32, + 'all others': 91, + }, + { + snapshot: 17, + component1: 34, + component2: 86, + component3: 46, + 'all others': 61, + }, + { + snapshot: 18, + component1: 7, + component2: 50, + component3: 26, + 'all others': 32, + }, + { + snapshot: 19, + component1: 70, + component2: 40, + component3: 74, + 'all others': 6, + }, + { + snapshot: 20, + component1: 33, + component2: 78, + component3: 59, + 'all others': 91, + }, +]; -export default snapshots; +export default snapshots; \ No newline at end of file From dc4d3fdf46b06db84a57e3ba242847da4ffd774f Mon Sep 17 00:00:00 2001 From: elduke717 Date: Fri, 9 Jun 2023 10:45:09 -0400 Subject: [PATCH 10/70] update bablerc, not sure from where/when --- .babelrc | 4 ---- src/app/components/StateRoute/StateRoute.tsx | 8 ++++++++ 2 files changed, 8 insertions(+), 4 deletions(-) diff --git a/.babelrc b/.babelrc index 88e67d8f5..59b315553 100644 --- a/.babelrc +++ b/.babelrc @@ -1,8 +1,4 @@ { -<<<<<<< HEAD "presets": ["airbnb", "@babel/preset-typescript"], // "plugins": ["@emotion"] -======= - "presets": ["airbnb", "@babel/preset-typescript"] ->>>>>>> dev } \ No newline at end of file diff --git a/src/app/components/StateRoute/StateRoute.tsx b/src/app/components/StateRoute/StateRoute.tsx index 72b063cf1..f9ccf0519 100644 --- a/src/app/components/StateRoute/StateRoute.tsx +++ b/src/app/components/StateRoute/StateRoute.tsx @@ -23,8 +23,16 @@ const NO_STATE_MSG = 'No state change detected. Trigger an event to change state const StateRoute = (props: StateRouteProps) => { const { snapshot, hierarchy, snapshots, viewIndex, webMetrics, currLocation } = props; + console.log(props); + console.log('snapshot props', snapshot); + console.log('hierarchy props', hierarchy); + console.log('snapshots props', snapshots); + console.log('viewIndex props', viewIndex); + console.log('webMetrics props', webMetrics); + console.log('currentLocation props', currLocation) const [{ tabs, currentTab }, dispatch] = useStoreContext(); const { hierarchy, sliderIndex, viewIndex } = tabs[currentTab]; + console.log() // Map const renderComponentMap = () => { From 9d58eb3891c84cf40659097f3806b09c05289283 Mon Sep 17 00:00:00 2001 From: James McCollough <100531603+j-mccoll@users.noreply.github.com> Date: Sun, 11 Jun 2023 23:24:06 -0400 Subject: [PATCH 11/70] Debug test case for mixComponents --- src/backend/__tests__/ignore/stateComponents-testcases.ts | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/src/backend/__tests__/ignore/stateComponents-testcases.ts b/src/backend/__tests__/ignore/stateComponents-testcases.ts index 44988f5e6..401311b72 100644 --- a/src/backend/__tests__/ignore/stateComponents-testcases.ts +++ b/src/backend/__tests__/ignore/stateComponents-testcases.ts @@ -139,7 +139,7 @@ export const mixPayload = new Tree('root', 'root'); mixPayload.route = rootPayload.route; // Outer Func Comp -let funcPayloadMix = new Tree({ count: 0 }, 'IncrementFunc', functionalComponentData, null); +let funcPayloadMix = new Tree({ count: 0 }, 'IncrementFunc1', functionalComponentData, null); funcPayloadMix.componentData = { ...funcPayloadMix.componentData, hooksState: { count: 0 }, @@ -157,13 +157,12 @@ classPayloadMix.componentData = { mixPayload.children.push(deepCopy(classPayloadMix)); // Inner Func Comp -funcPayloadMix = new Tree({ count: 0 }, 'IncrementFunc', functionalComponentData, null); +funcPayloadMix = new Tree({ count: 0 }, 'IncrementFunc2', functionalComponentData, null); funcPayloadMix.componentData = { ...funcPayloadMix.componentData, hooksState: { count: 0 }, hooksIndex: [1], }; -funcPayloadMix.name = 'IncrementFunc1'; mixPayload.children[0].children.push(deepCopy(funcPayloadMix)); // Inner Class Comp From b3fcd050a80be92d840c3b15f1889fcb5131fbf1 Mon Sep 17 00:00:00 2001 From: James McCollough <100531603+j-mccoll@users.noreply.github.com> Date: Mon, 12 Jun 2023 09:44:06 -0400 Subject: [PATCH 12/70] Modify resetSlider to reset color on clear --- src/app/containers/ActionContainer.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/app/containers/ActionContainer.tsx b/src/app/containers/ActionContainer.tsx index fbdaa9601..32b31f715 100644 --- a/src/app/containers/ActionContainer.tsx +++ b/src/app/containers/ActionContainer.tsx @@ -12,8 +12,10 @@ import { Obj } from '../FrontendTypes'; const resetSlider = () => { const slider = document.querySelector('.rc-slider-handle'); + const sliderTrack = document.querySelector('.rc-slider-track'); if (slider) { slider.setAttribute('style', 'left: 0'); + sliderTrack.setAttribute('style', 'width: 0'); } }; From 7937739970b47cc2ffba059c0db5d45302e6a571 Mon Sep 17 00:00:00 2001 From: James McCollough <100531603+j-mccoll@users.noreply.github.com> Date: Mon, 12 Jun 2023 11:46:09 -0400 Subject: [PATCH 13/70] Write integration test for slider reset on clear --- src/app/__tests__/ActionContainer.test.tsx | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/src/app/__tests__/ActionContainer.test.tsx b/src/app/__tests__/ActionContainer.test.tsx index a4611db55..9e0cfde87 100644 --- a/src/app/__tests__/ActionContainer.test.tsx +++ b/src/app/__tests__/ActionContainer.test.tsx @@ -5,6 +5,7 @@ import { render, screen, fireEvent } from '@testing-library/react'; import '@testing-library/jest-dom/extend-expect'; import ActionContainer from '../containers/ActionContainer'; import { useStoreContext } from '../store'; +import TravelContainer from '../containers/TravelContainer'; const state = { tabs: { @@ -148,3 +149,17 @@ describe('unit testing for ActionContainer', () => { await expect(dispatch).toHaveBeenCalledTimes(1); }); }); + +describe('integration testing for ActionContainer', () => { + beforeEach(() => { + mockeduseStoreContext.mockClear(); + dispatch.mockClear(); + render(); + render(); + }); + + test('Slider resets on clear button', () => { + fireEvent.click(screen.getAllByRole('button')[0]); + expect(screen.getByRole('slider')).toHaveStyle('left: 0'); + }); +}); \ No newline at end of file From a4a8fe7d0406e9056a61253cbfb1decf5162a1b6 Mon Sep 17 00:00:00 2001 From: elduke717 Date: Mon, 12 Jun 2023 16:17:31 -0400 Subject: [PATCH 14/70] update styles in visx components - root and rectangles, increase font sizes, accessibility color changes --- .../StateRoute/ComponentMap/ComponentMap.tsx | 17 +++++++++-------- src/app/components/StateRoute/StateRoute.tsx | 10 +++++----- src/app/styles/components/_buttons.scss | 6 ++++-- src/app/styles/main.scss | 1 + 4 files changed, 19 insertions(+), 15 deletions(-) diff --git a/src/app/components/StateRoute/ComponentMap/ComponentMap.tsx b/src/app/components/StateRoute/ComponentMap/ComponentMap.tsx index 337008a49..eb8e1522f 100644 --- a/src/app/components/StateRoute/ComponentMap/ComponentMap.tsx +++ b/src/app/components/StateRoute/ComponentMap/ComponentMap.tsx @@ -165,7 +165,7 @@ export default function ComponentMap({ /> - + { hideTooltip(); @@ -188,7 +188,7 @@ export default function ComponentMap({ key={i} data={link} percent={stepPercent} - stroke='#ff6569' + stroke='#F00008' strokeWidth='1' fill='none' /> @@ -196,10 +196,11 @@ export default function ComponentMap({ {tree.descendants().map((node, key) => { const widthFunc:number = (name) => { + // is this the name of the component - so if it's longer it will make the box wider? const nodeLength = name.length; - if (nodeLength < 5) return nodeLength + 40; - if (nodeLength < 10) return nodeLength + 60; - return nodeLength + 70; + if (nodeLength < 5) return nodeLength + 80; // change from 40 to 80, to see what's affected + if (nodeLength < 10) return nodeLength + 120; // change from 60 to 120 to see what's affected + return nodeLength + 140; // change from 70 to 140 to see what happens }; const width:number = widthFunc(node.data.name); const height:number = 25; @@ -236,9 +237,9 @@ export default function ComponentMap({ {node.depth === 0 && ( { dispatch(toggleExpanded(node.data)); hideTooltip(); @@ -256,7 +257,7 @@ export default function ComponentMap({ fill={node.children ? '#161521' : '#62d6fb'} stroke={ node.data.isExpanded && node.data.children.length > 0 - ? '#ff6569' + ? '#F00008' // changed to #F00008 for higher contrast : '#4D4D4D' } strokeWidth={1.5} diff --git a/src/app/components/StateRoute/StateRoute.tsx b/src/app/components/StateRoute/StateRoute.tsx index f9ccf0519..faeeac3dd 100644 --- a/src/app/components/StateRoute/StateRoute.tsx +++ b/src/app/components/StateRoute/StateRoute.tsx @@ -23,13 +23,13 @@ const NO_STATE_MSG = 'No state change detected. Trigger an event to change state const StateRoute = (props: StateRouteProps) => { const { snapshot, hierarchy, snapshots, viewIndex, webMetrics, currLocation } = props; - console.log(props); + // console.log(props); console.log('snapshot props', snapshot); - console.log('hierarchy props', hierarchy); - console.log('snapshots props', snapshots); + // console.log('hierarchy props', hierarchy); + // console.log('snapshots props', snapshots); console.log('viewIndex props', viewIndex); - console.log('webMetrics props', webMetrics); - console.log('currentLocation props', currLocation) + // console.log('webMetrics props', webMetrics); + // console.log('currentLocation props', currLocation) const [{ tabs, currentTab }, dispatch] = useStoreContext(); const { hierarchy, sliderIndex, viewIndex } = tabs[currentTab]; console.log() diff --git a/src/app/styles/components/_buttons.scss b/src/app/styles/components/_buttons.scss index cd88b1eac..955eb2c27 100644 --- a/src/app/styles/components/_buttons.scss +++ b/src/app/styles/components/_buttons.scss @@ -12,7 +12,7 @@ border-radius: 5px; cursor: pointer; line-height: 1.5em; - font: 400 14px 'Roboto', sans-serif; + font: 400 16px 'Roboto', sans-serif; // font-size: $button-text-size; width: 120px; background: $red-color-gradient; @@ -107,7 +107,7 @@ border-radius: 3px; background-color: #565a61; font: normal 11px 'Roboto', sans-serif; - color: #b0b0b0; + color: #FFFFFF; transform: rotateX(90deg); transition: opacity 300ms, transform 0.15s linear; opacity: 0; @@ -143,6 +143,8 @@ border-color: transparent; background: $blue-color-gradient; border-radius: 5px; + font-weight: 500; + font-size: 16px; } .play-button:hover { diff --git a/src/app/styles/main.scss b/src/app/styles/main.scss index 1d6592463..eecfe1cc9 100644 --- a/src/app/styles/main.scss +++ b/src/app/styles/main.scss @@ -3,6 +3,7 @@ * { font-family: 'Roboto', sans-serif; + font-size: 16px; } /* width */ From e876a233084acb1045c3b1a5f7fe42d8f88c8ad7 Mon Sep 17 00:00:00 2001 From: elduke717 Date: Mon, 12 Jun 2023 16:55:21 -0400 Subject: [PATCH 15/70] add latest ui changes --- src/app/styles/components/_buttons.scss | 8 ++++---- src/app/styles/components/_renderingFrequency.scss | 2 +- src/app/styles/layout/_actionContainer.scss | 2 +- 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/src/app/styles/components/_buttons.scss b/src/app/styles/components/_buttons.scss index 955eb2c27..4107484bc 100644 --- a/src/app/styles/components/_buttons.scss +++ b/src/app/styles/components/_buttons.scss @@ -60,8 +60,8 @@ border-radius: 3px; cursor: pointer; line-height: 1.5em; - font: 300 14px 'Roboto', sans-serif; - font-size: $button-text-size; + font: 500 16px 'Roboto', sans-serif; + // font-size: $button-text-size; increase the font size and contrast for readability width: 120px; background: #62d6fb; } @@ -94,7 +94,7 @@ border: none; border-radius: 3px; background: $grey-color-gradient; - font: normal 11px 'Roboto', sans-serif; + font: normal 16px 'Roboto', sans-serif; color: #b0b0b0; } @@ -106,7 +106,7 @@ border: transparent; border-radius: 3px; background-color: #565a61; - font: normal 11px 'Roboto', sans-serif; + font: normal 16px 'Roboto', sans-serif; color: #FFFFFF; transform: rotateX(90deg); transition: opacity 300ms, transform 0.15s linear; diff --git a/src/app/styles/components/_renderingFrequency.scss b/src/app/styles/components/_renderingFrequency.scss index f0ed4f99f..deef47b84 100644 --- a/src/app/styles/components/_renderingFrequency.scss +++ b/src/app/styles/components/_renderingFrequency.scss @@ -40,7 +40,7 @@ font-family: 'Roboto', sans-serif; h3 { - color: $text-color; + color: #FFFFFF; margin-bottom: 5px; margin-top: 5px; text-transform: uppercase; diff --git a/src/app/styles/layout/_actionContainer.scss b/src/app/styles/layout/_actionContainer.scss index 09640eea2..a638739e4 100644 --- a/src/app/styles/layout/_actionContainer.scss +++ b/src/app/styles/layout/_actionContainer.scss @@ -27,7 +27,7 @@ } .route { - background-color: #ff6569; + background-color: #F00008; padding-left: 10px; padding-top: 5px; padding-bottom: 5px; From c1e980510eed85c08033845656d5ba2057ad34e8 Mon Sep 17 00:00:00 2001 From: elduke717 Date: Mon, 12 Jun 2023 18:29:16 -0400 Subject: [PATCH 16/70] remove comments etc. --- .babelrc | 3 +- src/app/components/StateRoute/StateRoute.tsx | 9 +- src/backend/controllers/createTree.ts | 37 +-- test_output1 | 280 ------------------- 4 files changed, 3 insertions(+), 326 deletions(-) delete mode 100644 test_output1 diff --git a/.babelrc b/.babelrc index 59b315553..8567e4e87 100644 --- a/.babelrc +++ b/.babelrc @@ -1,4 +1,3 @@ { - "presets": ["airbnb", "@babel/preset-typescript"], - // "plugins": ["@emotion"] + "presets": ["airbnb", "@babel/preset-typescript"] } \ No newline at end of file diff --git a/src/app/components/StateRoute/StateRoute.tsx b/src/app/components/StateRoute/StateRoute.tsx index faeeac3dd..321c2c0fa 100644 --- a/src/app/components/StateRoute/StateRoute.tsx +++ b/src/app/components/StateRoute/StateRoute.tsx @@ -22,14 +22,7 @@ const NO_STATE_MSG = 'No state change detected. Trigger an event to change state const StateRoute = (props: StateRouteProps) => { - const { snapshot, hierarchy, snapshots, viewIndex, webMetrics, currLocation } = props; - // console.log(props); - console.log('snapshot props', snapshot); - // console.log('hierarchy props', hierarchy); - // console.log('snapshots props', snapshots); - console.log('viewIndex props', viewIndex); - // console.log('webMetrics props', webMetrics); - // console.log('currentLocation props', currLocation) + const { snapshot, hierarchy, snapshots, viewIndex, webMetrics, currLocation } = props; const [{ tabs, currentTab }, dispatch] = useStoreContext(); const { hierarchy, sliderIndex, viewIndex } = tabs[currentTab]; console.log() diff --git a/src/backend/controllers/createTree.ts b/src/backend/controllers/createTree.ts index f0be0336b..96e0722d4 100644 --- a/src/backend/controllers/createTree.ts +++ b/src/backend/controllers/createTree.ts @@ -152,42 +152,7 @@ export default function createTree(currentFiberNode: Fiber): Tree { } } - // COMMENT OUT SINCE EXTRACTING CONTEXT IS STILL IN EXPERIMENT - // // ------------APPEND CONTEXT DATA FROM REACT DEV TOOL---------------- - // // memoizedState - // // Note: if user use ReactHook, memoizedState.memoizedState can be a falsy value such as null, false, ... => need to specify this data is not undefined - // if ( - // (tag === FunctionComponent || tag === ClassComponent || tag === IndeterminateComponent) && - // memoizedState?.memoizedState !== undefined - // ) { - // // If user uses Redux, context data will be stored in memoizedState of the Provider component => grab context object stored in the memoizedState - // if (elementType.name === 'Provider') { - // Object.assign( - // componentData.context, - // getStateAndContextData(memoizedState, elementType.name, _debugHookTypes), - // ); - // } - // // Else if user use ReactHook to define state => all states will be stored in memoizedState => grab all states stored in the memoizedState - // // else { - // // Object.assign( - // // componentData.state, - // // getStateAndContextData(memoizedState, elementType.name, _debugHookTypes), - // // ); - // // } - // } - // // if user uses useContext hook, context data will be stored in memoizedProps.value of the Context.Provider component => grab context object stored in memoizedprops - // // Different from other provider, such as Routes, BrowserRouter, ReactRedux, ..., Context.Provider does not have a displayName - // // TODO: need to render this context provider when user use useContext hook. - // - // - // if (tag === ContextProvider && !elementType._context.displayName) { - // let stateData = memoizedProps.value; - // if (stateData === null || typeof stateData !== 'object') { - // stateData = { CONTEXT: stateData }; - // } - // componentData.context = filterAndFormatData(stateData); - // componentName = 'Context'; - // } + // ---------OBTAIN STATE & SET STATE METHODS FROM CLASS COMPONENT----------- // Check if currentFiberNode is a stateful class component when user use setState. diff --git a/test_output1 b/test_output1 deleted file mode 100644 index a7ccc8a50..000000000 --- a/test_output1 +++ /dev/null @@ -1,280 +0,0 @@ -nickhuemmer@Nicks-Mac-mini reactime % npm run test - -> test -> jest --verbose --coverage - - PASS src/backend/__tests__/masterState.test.ts (6.145 s) - Master State unit tests - componentActionRecord unit tests - clear - ✓ should clear componentActionsRecord (1 ms) - saveNew - ✓ should add a new component to componentActionRecord and return its index (1 ms) - getComponentByIndex - ✓ should return the component at the specified index - ✓ should return undefined when passed an index that does not exist - getComponentByIndexHooks - ✓ should return the components at the specified indices (1 ms) - ✓ should return undefined when passed an empty array (1 ms) - ✓ should return undefined when passed an index that does not exist - getAllComponents - ✓ should return all components in componentActionRecord (1 ms) - - FAIL src/backend/__tests__/routes.test.ts - ● Test suite failed to run - - ReferenceError: TextEncoder is not defined - - > 1 | import { JSDOM } from 'jsdom'; - | ^ - 2 | - 3 | import { Routes, Route } from '../models/routes'; - 4 | - - at Object. (node_modules/whatwg-url/lib/encoding.js:3:21) - at Object. (node_modules/whatwg-url/lib/url-state-machine.js:7:5) - at Object. (node_modules/whatwg-url/lib/URL-impl.js:3:13) - at Object. (node_modules/whatwg-url/lib/URL.js:372:14) - at Object. (node_modules/whatwg-url/webidl2js-wrapper.js:3:13) - at Object. (node_modules/whatwg-url/index.js:6:5) - at Object. (node_modules/jsdom/lib/api.js:8:19) - at Object. (src/backend/__tests__/routes.test.ts:1:1) - -[BABEL] Note: The code generator has deoptimised the styling of /Users/nickhuemmer/projects/reactime/node_modules/react-dom/cjs/react-dom.development.js as it exceeds the max of 500KB. -[BABEL] Note: The code generator has deoptimised the styling of /Users/nickhuemmer/projects/reactime/node_modules/react-dom/cjs/react-dom.development.js as it exceeds the max of 500KB. -[BABEL] Note: The code generator has deoptimised the styling of /Users/nickhuemmer/projects/reactime/node_modules/react-dom/cjs/react-dom.development.js as it exceeds the max of 500KB. -[BABEL] Note: The code generator has deoptimised the styling of /Users/nickhuemmer/projects/reactime/node_modules/react-dom/cjs/react-dom.development.js as it exceeds the max of 500KB. -[BABEL] Note: The code generator has deoptimised the styling of /Users/nickhuemmer/projects/reactime/node_modules/react-dom/cjs/react-dom.development.js as it exceeds the max of 500KB. -[BABEL] Note: The code generator has deoptimised the styling of /Users/nickhuemmer/projects/reactime/node_modules/react-dom/cjs/react-dom.development.js as it exceeds the max of 500KB. - PASS src/backend/__tests__/masterTree.test.tsx (7.83 s) - master tree tests - createTree Unit test - Filter components that are from NextJS, Remix or not from allowed component types - ✓ should return a Tree if we pass in a empty fiber node (1 ms) - ✓ should filter out NextJS default components with no children or siblings (2 ms) - ✓ should filter out remix default components with no children or siblings (2 ms) - ✓ should only traverse allowed components (3 ms) - ✓ should filter out NextJS & Remix default components with children and/or siblings (71 ms) - Display component props information - ✓ should display functional props information - ✓ should display class props information (1 ms) - ✓ should display React router props information (3 ms) - ✓ should exclude reserved props name (14 ms) - ✓ should skip circular props (4 ms) - ✓ should display props information of multiple components (1 ms) - Display component states information - ✓ should display stateless if functional state empty - ✓ should display class state information - ✓ should keep track of class state index - ✓ should display stateless if functional state empty - ✓ should display functional state information (2 ms) - ✓ should keep track of functional state index (1 ms) - Replace fromLinkFiber class value - ○ skipped NEED UNDERSTANDING THE PURPOSE OF FROMLINKFIBER FOR FRONTEND, currently unable to replicate DOMTokenList instance - Tree unit test - Serialize state unit test - ✓ should create a deep copy of state - ✓ should detect circular state - Constructing a default tree - ✓ should be able to create a newTree - ✓ should have 6 properties (1 ms) - ✓ should have default name, componentData, isExpanded and rtid - ✓ should have no children - Constructing a tree root - ✓ should have name as 'root' and state as 'root' - Adding children - ✓ should return a new tree child (1 ms) - ✓ should have the child be in the children's array property - ✓ should have unique name - ○ skipped should be able to add multiple children and sibilings - createComponentActionsRecord unit test - ✓ should save a new component action record if the Fiber node is a stateful class component (1 ms) - ✓ should save a new component action record if the Fiber node is a stateful class component with props - ✓ should save a new component action record if the Fiber node is a functional component with state - ✓ should return the correct hooks array for a given component index - ✓ should not save a new component action record if the Fiber node is not a relevant component type - - FAIL src/backend/__tests__/linkFiber.test.ts - ● Test suite failed to run - - ReferenceError: TextEncoder is not defined - - 16 | import Tree from '../models/tree'; - 17 | import { DevTools } from '../types/linkFiberTypes'; - > 18 | import { JSDOM } from 'jsdom'; - | ^ - 19 | import path from 'path'; - 20 | import fs from 'fs'; - 21 | - - at Object. (node_modules/whatwg-url/lib/encoding.js:3:21) - at Object. (node_modules/whatwg-url/lib/url-state-machine.js:7:5) - at Object. (node_modules/whatwg-url/lib/URL-impl.js:3:13) - at Object. (node_modules/whatwg-url/lib/URL.js:372:14) - at Object. (node_modules/whatwg-url/webidl2js-wrapper.js:3:13) - at Object. (node_modules/whatwg-url/index.js:6:5) - at Object. (node_modules/jsdom/lib/api.js:8:19) - at Object. (src/backend/__tests__/linkFiber.test.ts:18:1) - - PASS src/backend/__tests__/throttle.test.ts - throttle unit tests - ✓ should return a function (3 ms) - ✓ throttled function should be called with the correct arguments (2 ms) - ✓ should invoke the callback immediately on the first call - ✓ should invoke the callback only once if called multiple times within the throttling interval (1 ms) - ✓ should invoke the callback multiple times if called outside of the throttling interval (1 ms) - - PASS src/app/__tests__/ErrorMsg.test.tsx (7.098 s) - unit testing for ErrorContainer.tsx - When there are no errors - ✓ Returns empty div (19 ms) - when there's a RDT Error - ✓ RDT error related text shows (14 ms) - when there's a Content Script Errorr - ✓ Content Script Error related text shows (8 ms) - ✓ launch button shows (55 ms) - when there's a Not React Error - ✓ Not React App text shows (2 ms) - - PASS src/app/__tests__/TravelContainer.test.tsx (13.599 s) - All elements appear in the TravelContainer module - ✓ first button contains text Play (71 ms) - ✓ MainSlider exists in document (5 ms) - ✓ Dropdown exists in document (5 ms) - ✓ Backward button exists in document (43 ms) - ✓ Foward button exists in document (21 ms) - Testing backward and forward button - ✓ Clicking < Button button will triger button (7 ms) - ✓ Clicking > Button button will triger button (5 ms) - Testing play/pause button - ✓ Play button is rendered (1 ms) - ✓ Play initially says Play (2 ms) - ✓ Clicking Play button will triger button (1 ms) - ✓ Play says Pause when `Playing` is set to False (1 ms) - ✓ Clicking Pause button will trigger button (1 ms) - -[BABEL] Note: The code generator has deoptimised the styling of /Users/nickhuemmer/projects/reactime/node_modules/lodash/lodash.js as it exceeds the max of 500KB. -[BABEL] Note: The code generator has deoptimised the styling of /Users/nickhuemmer/projects/reactime/node_modules/@fortawesome/free-solid-svg-icons/index.js as it exceeds the max of 500KB. - PASS src/app/__tests__/action.test.tsx (7.052 s) - unit testing for Action.tsx - When a component is shown on the page - ✓ Action snapshot should be shown as Snapshot: 3.0 (96 ms) - ✓ two buttons with time and Current when not at current snapshot (56 ms) - ✓ Action snapshot should be shown as Snapshot: 3.0 (6 ms) - ✓ when there's no have no duration data (13 ms) - -[BABEL] Note: The code generator has deoptimised the styling of /Users/nickhuemmer/projects/reactime/node_modules/@fortawesome/free-solid-svg-icons/index.js as it exceeds the max of 500KB. - PASS src/app/__tests__/WebMetrics.test.tsx - WebMetrics graph testing - ✓ should have 1 div with class name "metric" (19 ms) - - PASS src/app/__tests__/ActionContainer.test.tsx (14.611 s) - unit testing for ActionContainer - ✓ Expect top arrow to be rendered (94 ms) - ✓ Expect RouteDescription to be rendered (16 ms) - ✓ Expect SwitchApp to be rendered (4 ms) - ✓ Click works on clear button (24 ms) - - PASS src/app/__tests__/ButtonContainer.test.tsx (15.225 s) - Unit testing for ButtonContainer - When button container is loaded - ✓ should have 4 buttons (140 ms) - When view is unlock - ✓ Button should show as unlocked (22 ms) - Upload/Download - ✓ Clicking upload and download buttons (49 ms) - - PASS src/app/__tests__/Loader.test.tsx - unit testing for Loader.tsx - ✓ renders a loading icon (20 ms) - ✓ renders a fail icon (25 ms) - ✓ renders a check icon (1 ms) - - PASS src/app/__tests__/ErrorContainer.test.tsx (15.455 s) - unit testing for ErrorContainer.tsx - ✓ logo image renders as expected (46 ms) - ✓ ErrorMsg component renders as expected (6 ms) - ✓ Reactime website shows as expected (5 ms) - Loading Checks show up as expected - ✓ Content script launching check shows (3 ms) - ✓ React Dev Tool Install check shows (3 ms) - ✓ Compatible app check shows (3 ms) - Launching header shows correct tab info - ✓ When currentTitle has no target (2 ms) - ✓ When currentTitle has a target title (3 ms) - - PASS src/app/__tests__/Tutorial.test.tsx (7.317 s) - Before Tutorial is entered - ✓ How to use button exists (26 ms) - ✓ User clicking "How to use" while on map tab button starts map tutorial (55 ms) - ✓ User clicking "How to use" while on performance tab button starts performance tutorial (20 ms) - ✓ User clicking "How to use" while on performance comparison tab, no tutorial available (15 ms) - - PASS src/app/__tests__/dropdown.test.tsx - Dropdown test - ✓ renders Dropdown with correct info (36 ms) - -[BABEL] Note: The code generator has deoptimised the styling of /Users/nickhuemmer/projects/reactime/node_modules/@sinonjs/text-encoding/lib/encoding-indexes.js as it exceeds the max of 500KB. - PASS src/app/__tests__/MainSlider.test.tsx (9.551 s) - Unit testing for MainSlider.jsx - When user only has one snapshot to view - ✓ Component should have min, max, value with correct values to indicate slider position for correct tab (42 ms) - When there are multiple snapshots and we are looking in between - ✓ Component should have min, max, value with correct values to indicate slider position when there are multiple snapshots (8 ms) - - PASS src/app/__tests__/MainContainer.test.tsx (20.125 s) - With no snapshots, should not render any containers - ✓ With no snapshots, ErrorContainer should render (17 ms) - ✓ With no snapshots, ActionContainer should not render (2 ms) - ✓ With no snapshots, StateContainer should not render (2 ms) - ✓ With no snapshots, TravelContainer should not render (1 ms) - ✓ With no snapshots, ButtonsContainer should not render (2 ms) - With snapshots, should render all containers - ✓ With snapshots, ErrorContainer should not render (1 ms) - ✓ With snapshots, ActionContainer should not render (4 ms) - ✓ With snapshots, StateContainer should render (2 ms) - ✓ With snapshots, TravelContainer should render (2 ms) - ✓ With snapshots, ButtonsContainer should render (1 ms) - -----------------------------------|---------|----------|---------|---------|---------------------------------------- -File | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s -----------------------------------|---------|----------|---------|---------|---------------------------------------- -All files | 78.5 | 56.71 | 65.87 | 78.63 | - app | 80 | 100 | 0 | 100 | - store.tsx | 80 | 100 | 0 | 100 | - app/actions | 75.94 | 100 | 26.92 | 100 | - actions.ts | 75.94 | 100 | 26.92 | 100 | - app/components | 82.65 | 72.58 | 81.48 | 80.79 | - Action.tsx | 65.62 | 61.11 | 40 | 65.62 | 51-56,66,82-118 - Dropdown.tsx | 100 | 100 | 100 | 100 | - ErrorMsg.tsx | 95.65 | 88.88 | 100 | 100 | 11 - Loader.tsx | 100 | 100 | 100 | 100 | - MainSlider.tsx | 86.2 | 50 | 60 | 81.81 | 35,47-51 - Tutorial.tsx | 74.54 | 70.37 | 100 | 72.54 | 40-41,44,47-48,51-52,55,227-316 - WebMetrics.tsx | 100 | 100 | 100 | 100 | - app/constants | 100 | 100 | 100 | 100 | - actionTypes.ts | 100 | 100 | 100 | 100 | - app/containers | 67.14 | 38.55 | 61.53 | 62.66 | - ActionContainer.tsx | 75.32 | 56 | 72.72 | 72.13 | 16,63-80,121,126-131 - ButtonsContainer.tsx | 75.67 | 40 | 62.5 | 71.87 | 38-47,64 - ErrorContainer.tsx | 61.36 | 30.76 | 50 | 57.5 | 17,27,33-37,43-49,56-60,63,66 - MainContainer.tsx | 52.38 | 21.42 | 37.5 | 47.94 | 26-35,49-85,90,121,124,127,130,133-138 - TravelContainer.tsx | 82.85 | 57.14 | 83.33 | 77.77 | 39-40,43-47 - backend/controllers | 86.33 | 57.44 | 100 | 88.59 | - createComponentActionsRecord.ts | 81.48 | 70.9 | 100 | 91.3 | 64,96 - createTree.ts | 77.27 | 56.25 | 100 | 75.8 | 135-145,260-273 - statePropExtractors.ts | 95.65 | 51.14 | 100 | 100 | 105-107,117-123,128-137 - throttle.ts | 100 | 100 | 100 | 100 | - backend/models | 81.44 | 72.22 | 85 | 80.89 | - filterConditions.ts | 100 | 100 | 100 | 100 | - masterState.ts | 100 | 100 | 100 | 100 | - routes.ts | 58.13 | 16.66 | 57.14 | 56.41 | 54,66,76-84,99-117 - tree.ts | 100 | 100 | 100 | 100 | - backend/types | 100 | 100 | 100 | 100 | - backendTypes.ts | 100 | 100 | 100 | 100 | -----------------------------------|---------|----------|---------|---------|---------------------------------------- -Test Suites: 2 failed, 15 passed, 17 total -Tests: 2 skipped, 102 passed, 104 total -Snapshots: 0 total -Time: 20.897 s -Ran all test suites. \ No newline at end of file From 12fb56cfbf3ef58fcdd526d94b0173b95ca323ba Mon Sep 17 00:00:00 2001 From: elduke717 Date: Mon, 12 Jun 2023 18:56:30 -0400 Subject: [PATCH 17/70] remove comments and console logs --- src/backend/controllers/createTree.ts | 39 +++++++++++++++++++++++++-- src/backend/routers/snapShot.ts | 6 ----- 2 files changed, 37 insertions(+), 8 deletions(-) diff --git a/src/backend/controllers/createTree.ts b/src/backend/controllers/createTree.ts index 96e0722d4..4d9db3521 100644 --- a/src/backend/controllers/createTree.ts +++ b/src/backend/controllers/createTree.ts @@ -152,12 +152,47 @@ export default function createTree(currentFiberNode: Fiber): Tree { } } - + // COMMENT OUT SINCE EXTRACTING CONTEXT IS STILL IN EXPERIMENT + // // ------------APPEND CONTEXT DATA FROM REACT DEV TOOL---------------- + // // memoizedState + // // Note: if user use ReactHook, memoizedState.memoizedState can be a falsy value such as null, false, ... => need to specify this data is not undefined + // if ( + // (tag === FunctionComponent || tag === ClassComponent || tag === IndeterminateComponent) && + // memoizedState?.memoizedState !== undefined + // ) { + // // If user uses Redux, context data will be stored in memoizedState of the Provider component => grab context object stored in the memoizedState + // if (elementType.name === 'Provider') { + // Object.assign( + // componentData.context, + // getStateAndContextData(memoizedState, elementType.name, _debugHookTypes), + // ); + // } + // // Else if user use ReactHook to define state => all states will be stored in memoizedState => grab all states stored in the memoizedState + // // else { + // // Object.assign( + // // componentData.state, + // // getStateAndContextData(memoizedState, elementType.name, _debugHookTypes), + // // ); + // // } + // } + // // if user uses useContext hook, context data will be stored in memoizedProps.value of the Context.Provider component => grab context object stored in memoizedprops + // // Different from other provider, such as Routes, BrowserRouter, ReactRedux, ..., Context.Provider does not have a displayName + // // TODO: need to render this context provider when user use useContext hook. + // + // + // if (tag === ContextProvider && !elementType._context.displayName) { + // let stateData = memoizedProps.value; + // if (stateData === null || typeof stateData !== 'object') { + // stateData = { CONTEXT: stateData }; + // } + // componentData.context = filterAndFormatData(stateData); + // componentName = 'Context'; + // } // ---------OBTAIN STATE & SET STATE METHODS FROM CLASS COMPONENT----------- // Check if currentFiberNode is a stateful class component when user use setState. // If user use setState to define/manage state, the state object will be stored in stateNode.state => grab the state object stored in the stateNode.state - // Example: for tic-tac-toe demo-app: Board is a stateful component that use setState to store state data. + // Example: for tic-tac-toe demo-app: Board is a stateful component that use setState to store stat if ((tag === ClassComponent || tag === IndeterminateComponent) && stateNode?.state) { // Save component's state and setState() function to our record for future time-travel state changing. Add record index to snapshot so we can retrieve. componentData.index = componentActionsRecord.saveNew(stateNode); diff --git a/src/backend/routers/snapShot.ts b/src/backend/routers/snapShot.ts index faf439bd4..8a20fa17b 100644 --- a/src/backend/routers/snapShot.ts +++ b/src/backend/routers/snapShot.ts @@ -2,7 +2,6 @@ import { Snapshot, FiberRoot } from '../types/backendTypes'; import componentActionsRecord from '../models/masterState'; import routes from '../models/routes'; import createTree from '../controllers/createTree'; -const _ = require('lodash'); // -------------------------UPDATE & SEND TREE SNAP SHOT------------------------ /** @@ -32,12 +31,7 @@ export default function updateAndSendSnapShotTree(fiberRoot: FiberRoot): void { // this will fire off everytime there is a change in test application // convert the payload from a fiber tree to an object to avoid a data clone error when postMessage processes the argument // compare payload and clonedDeepPayload with isIdentical - // console.log('are they identical?', isIdentical(payload, clonedDeepPayload)); - // console.log('typeof payload', typeof payload); const obj = JSON.parse(JSON.stringify(payload)); - // console.log('righton, this is the obj: ', obj) - // console.log('typeof obj', typeof obj); - console.log('passing in obj'); window.postMessage( { action: 'recordSnap', From 4b08bc9ff369bac102c8455024b5e8d858279731 Mon Sep 17 00:00:00 2001 From: j-mccoll <100531603+j-mccoll@users.noreply.github.com> Date: Mon, 12 Jun 2023 18:58:54 -0400 Subject: [PATCH 18/70] Delete console log --- src/app/components/StateRoute/StateRoute.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/app/components/StateRoute/StateRoute.tsx b/src/app/components/StateRoute/StateRoute.tsx index 321c2c0fa..2b613c8f6 100644 --- a/src/app/components/StateRoute/StateRoute.tsx +++ b/src/app/components/StateRoute/StateRoute.tsx @@ -25,7 +25,6 @@ const StateRoute = (props: StateRouteProps) => { const { snapshot, hierarchy, snapshots, viewIndex, webMetrics, currLocation } = props; const [{ tabs, currentTab }, dispatch] = useStoreContext(); const { hierarchy, sliderIndex, viewIndex } = tabs[currentTab]; - console.log() // Map const renderComponentMap = () => { From b02dc1b2c6dac3aed5538a72da077ca300047d77 Mon Sep 17 00:00:00 2001 From: j-mccoll <100531603+j-mccoll@users.noreply.github.com> Date: Mon, 12 Jun 2023 18:59:17 -0400 Subject: [PATCH 19/70] Update StateRoute.tsx --- src/app/components/StateRoute/StateRoute.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/components/StateRoute/StateRoute.tsx b/src/app/components/StateRoute/StateRoute.tsx index 2b613c8f6..72b063cf1 100644 --- a/src/app/components/StateRoute/StateRoute.tsx +++ b/src/app/components/StateRoute/StateRoute.tsx @@ -22,7 +22,7 @@ const NO_STATE_MSG = 'No state change detected. Trigger an event to change state const StateRoute = (props: StateRouteProps) => { - const { snapshot, hierarchy, snapshots, viewIndex, webMetrics, currLocation } = props; + const { snapshot, hierarchy, snapshots, viewIndex, webMetrics, currLocation } = props; const [{ tabs, currentTab }, dispatch] = useStoreContext(); const { hierarchy, sliderIndex, viewIndex } = tabs[currentTab]; From 2eaf0609bb98af2c8eee98de691d8f4cf020e5b0 Mon Sep 17 00:00:00 2001 From: j-mccoll <100531603+j-mccoll@users.noreply.github.com> Date: Mon, 12 Jun 2023 19:00:20 -0400 Subject: [PATCH 20/70] Update createTree.ts --- src/backend/controllers/createTree.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/backend/controllers/createTree.ts b/src/backend/controllers/createTree.ts index 4d9db3521..6b245e95a 100644 --- a/src/backend/controllers/createTree.ts +++ b/src/backend/controllers/createTree.ts @@ -32,7 +32,7 @@ import { * @param currentFiberNode A Fiber object * @return An instance of a Tree object */ -// TODO: Not sure why the ritd need to be outside of the _createTree function. Want to put inside, but in case this need to be keep track for front end. +// TODO: Not sure why the ritd need to be outside of the _createTree function. Want to put inside, but in case this need to be keep track for front end. export default function createTree(currentFiberNode: Fiber): Tree { let rtidCounter: number = 0; return _createTree(currentFiberNode, new Tree('root', 'root')); @@ -192,7 +192,7 @@ export default function createTree(currentFiberNode: Fiber): Tree { // ---------OBTAIN STATE & SET STATE METHODS FROM CLASS COMPONENT----------- // Check if currentFiberNode is a stateful class component when user use setState. // If user use setState to define/manage state, the state object will be stored in stateNode.state => grab the state object stored in the stateNode.state - // Example: for tic-tac-toe demo-app: Board is a stateful component that use setState to store stat + // Example: for tic-tac-toe demo-app: Board is a stateful component that use setState to store state data. if ((tag === ClassComponent || tag === IndeterminateComponent) && stateNode?.state) { // Save component's state and setState() function to our record for future time-travel state changing. Add record index to snapshot so we can retrieve. componentData.index = componentActionsRecord.saveNew(stateNode); From 80348d64aa7d08ad437c85a527449851e8fc5a54 Mon Sep 17 00:00:00 2001 From: j-mccoll <100531603+j-mccoll@users.noreply.github.com> Date: Mon, 12 Jun 2023 19:01:04 -0400 Subject: [PATCH 21/70] Update snapShot.ts --- src/backend/routers/snapShot.ts | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/backend/routers/snapShot.ts b/src/backend/routers/snapShot.ts index 8a20fa17b..41a5cb7f7 100644 --- a/src/backend/routers/snapShot.ts +++ b/src/backend/routers/snapShot.ts @@ -13,7 +13,6 @@ import createTree from '../controllers/createTree'; */ // updating tree depending on current mode on the panel (pause, etc) export default function updateAndSendSnapShotTree(fiberRoot: FiberRoot): void { - // This is the currently active root fiber(the mutable root of the tree) const { current } = fiberRoot; // Clear all of the legacy actions from old fiber tree because we are about to create a new one @@ -30,7 +29,6 @@ export default function updateAndSendSnapShotTree(fiberRoot: FiberRoot): void { // the postMessage action will be received on the content script to later update the tabsObj // this will fire off everytime there is a change in test application // convert the payload from a fiber tree to an object to avoid a data clone error when postMessage processes the argument - // compare payload and clonedDeepPayload with isIdentical const obj = JSON.parse(JSON.stringify(payload)); window.postMessage( { From f9c1857d715fbf5b316d596e1e55d566ca54cd20 Mon Sep 17 00:00:00 2001 From: elduke717 Date: Thu, 15 Jun 2023 12:24:15 -0400 Subject: [PATCH 22/70] update all fonts to minimum of 16px for accessibility --- .../StateRoute/ComponentMap/ComponentMap.tsx | 2 +- .../StateRoute/ComponentMap/LinkControls.tsx | 4 ++-- src/app/styles/abstracts/_variables.scss | 9 +++++---- src/app/styles/base/_typography.scss | 2 +- src/app/styles/components/_actionComponent.scss | 1 + src/app/styles/components/_buttons.scss | 12 +++++++----- src/app/styles/components/_performanceVisx.scss | 10 +++++----- src/app/styles/components/_rc-slider.scss | 6 +++--- src/app/styles/components/_renderingFrequency.scss | 4 ++-- src/app/styles/components/_sliderHandle.scss | 2 +- src/app/styles/components/diff.css | 4 ++-- src/app/styles/layout/_actionContainer.scss | 2 +- src/app/styles/layout/_buttonsContainer.scss | 2 +- src/app/styles/layout/_travelContainer.scss | 2 +- 14 files changed, 33 insertions(+), 29 deletions(-) diff --git a/src/app/components/StateRoute/ComponentMap/ComponentMap.tsx b/src/app/components/StateRoute/ComponentMap/ComponentMap.tsx index eb8e1522f..3a1b2f8f4 100644 --- a/src/app/components/StateRoute/ComponentMap/ComponentMap.tsx +++ b/src/app/components/StateRoute/ComponentMap/ComponentMap.tsx @@ -96,7 +96,7 @@ export default function ComponentMap({ maxWidth: 300, backgroundColor: 'rgb(15,15,15)', color: 'white', - fontSize: '14px', + fontSize: '16px', lineHeight: '18px', fontFamily: 'Roboto', zIndex: 100, diff --git a/src/app/components/StateRoute/ComponentMap/LinkControls.tsx b/src/app/components/StateRoute/ComponentMap/LinkControls.tsx index 4dd4478db..a47f170ca 100644 --- a/src/app/components/StateRoute/ComponentMap/LinkControls.tsx +++ b/src/app/components/StateRoute/ComponentMap/LinkControls.tsx @@ -3,13 +3,13 @@ import React from 'react'; import { LinkControlProps, ControlStyles, DropDownStyle, Node } from '../../../FrontendTypes' // Font size of the Controls label and Dropdowns const controlStyles: ControlStyles = { - fontSize: '12px', + fontSize: '16px', padding: '10px', }; const dropDownStyle: DropDownStyle = { margin: '0.5em', - fontSize: '12px', + fontSize: '16px', fontFamily: 'Roboto, sans-serif', borderRadius: '4px', borderStyle: 'solid', diff --git a/src/app/styles/abstracts/_variables.scss b/src/app/styles/abstracts/_variables.scss index 543032fd3..976d57292 100644 --- a/src/app/styles/abstracts/_variables.scss +++ b/src/app/styles/abstracts/_variables.scss @@ -4,17 +4,18 @@ $text-font-stack: 'Roboto', sans-serif !default; /// @type Color -$fiery-rose: #ff6569; +/// fiery-rose changed from ff6569 to F00008 globally to improve contrast +$fiery-rose: #F00008; $blue-brand: #62d6fb; /// @type Color $blue-color-gradient: linear-gradient(145deg, #69e5ff, #58c1e2); -$red-color-gradient: linear-gradient(145deg, #ff6569, #e65558); +$red-color-gradient: linear-gradient(145deg, #f92f35, #f00008); $grey-color-gradient: linear-gradient(145deg, #5c6068, #4d5157); /// @type Color: $box-shadow-blue: inset 5px 5px 10px #53b6d5, inset -5px -5px 10px #71f6ff; -$box-shadow-red: inset 5px 5px 10px #d95053, inset -5px -5px 10px #ff6c71; +$box-shadow-red: inset 5px 5px 10px #ff0004, inset -5px -5px 10px #f9393f; /// @type Color $text-color: #e7e7e7; @@ -58,4 +59,4 @@ $background-rc-color: #e9e9e9 !default; $highlight-color: rgba(224, 224, 224, 0.5) !default; /// @type Font Size -$button-text-size: 12px; +$button-text-size: 16px; diff --git a/src/app/styles/base/_typography.scss b/src/app/styles/base/_typography.scss index 2d3a51326..047a661bf 100644 --- a/src/app/styles/base/_typography.scss +++ b/src/app/styles/base/_typography.scss @@ -1,4 +1,4 @@ body { color: $text-color; - font: normal 13px $text-font-stack; + font: normal 16px $text-font-stack; } diff --git a/src/app/styles/components/_actionComponent.scss b/src/app/styles/components/_actionComponent.scss index 4a16971bf..ff41f789c 100644 --- a/src/app/styles/components/_actionComponent.scss +++ b/src/app/styles/components/_actionComponent.scss @@ -20,6 +20,7 @@ } .action-component.selected { + font-size: 16px; background-color: $light-grey-one; } diff --git a/src/app/styles/components/_buttons.scss b/src/app/styles/components/_buttons.scss index 4107484bc..4753a5dee 100644 --- a/src/app/styles/components/_buttons.scss +++ b/src/app/styles/components/_buttons.scss @@ -4,6 +4,7 @@ padding: 3px; outline: transparent; color: white; + font-size: 16px; display: flex; justify-content: center; align-items: center; @@ -37,7 +38,7 @@ border-radius: 3px; cursor: pointer; line-height: 1.5em; - font: 300 14px 'Roboto', sans-serif; + font: 300 16px 'Roboto', sans-serif; font-size: $button-text-size; width: 120px; background: $red-color-gradient; @@ -95,7 +96,7 @@ border-radius: 3px; background: $grey-color-gradient; font: normal 16px 'Roboto', sans-serif; - color: #b0b0b0; + color: #FFFFFF; } .jump-button { @@ -105,7 +106,7 @@ width: 70px; border: transparent; border-radius: 3px; - background-color: #565a61; + background-color: #232529; font: normal 16px 'Roboto', sans-serif; color: #FFFFFF; transform: rotateX(90deg); @@ -127,7 +128,7 @@ width: 70px; border: transparent; border-radius: 3px; - font: normal 11px 'Roboto', sans-serif; + font: normal 16px 'Roboto', sans-serif; } .empty-button:hover { @@ -192,6 +193,7 @@ .export-button, .pause-button { @extend %button-shared; + font-size: 16px; color: white; border-color: transparent; background: $blue-color-gradient; @@ -225,7 +227,7 @@ align-items: center; cursor: pointer; line-height: 1.5em; - font: 300 14px 'Roboto', sans-serif; + font: 300 16px 'Roboto', sans-serif; font-size: $button-text-size; background: $brand-color; diff --git a/src/app/styles/components/_performanceVisx.scss b/src/app/styles/components/_performanceVisx.scss index e4496e1ad..6b4474671 100644 --- a/src/app/styles/components/_performanceVisx.scss +++ b/src/app/styles/components/_performanceVisx.scss @@ -10,7 +10,7 @@ } .MuiSwitch-switchBase { - color: #ff6569 !important; + color: #F00008 !important; } .MuiSwitch-track { @@ -24,7 +24,7 @@ #routes-formcontrol { padding: 3px; margin-left: 50px; - font: 400 14px 'Roboto', sans-serif; + font: 400 16px 'Roboto', sans-serif; text-align: left; // min-width: 10em; // max-height: 50%; @@ -33,19 +33,19 @@ #routes-dropdown { color: white !important; // background-color: #ff6569 !important; - font: 400 14px 'Roboto', sans-serif; + font: 400 16px 'Roboto', sans-serif; text-align: left; } .saveSeriesContainer { #routes-select, #snapshot-select { - background-color: #ff6569 !important; + background-color: #F00008 !important; } } #routes-select, #snapshot-select{ color: white !important; - font: 400 14px 'Roboto', sans-serif; + font: 400 16px 'Roboto', sans-serif; text-align: left; width: 120px; height: 30px; diff --git a/src/app/styles/components/_rc-slider.scss b/src/app/styles/components/_rc-slider.scss index 4df0d6579..b14bbbcad 100644 --- a/src/app/styles/components/_rc-slider.scss +++ b/src/app/styles/components/_rc-slider.scss @@ -52,7 +52,7 @@ border-color: $border-slider; } .rc-slider-handle:active { - background: #e4494b; + background: #f00004; border-color: $border-slider; cursor: -webkit-grabbing; cursor: grabbing; @@ -62,7 +62,7 @@ top: 18px; left: 0; width: 100%; - font-size: 12px; + font-size: 16px; } .rc-slider-mark-text { position: absolute; @@ -226,7 +226,7 @@ padding: 6px 2px; min-width: 24px; height: 24px; - font-size: 12px; + font-size: 16px; line-height: 1; color: #fff; text-align: center; diff --git a/src/app/styles/components/_renderingFrequency.scss b/src/app/styles/components/_renderingFrequency.scss index deef47b84..c8b182afb 100644 --- a/src/app/styles/components/_renderingFrequency.scss +++ b/src/app/styles/components/_renderingFrequency.scss @@ -44,7 +44,7 @@ margin-bottom: 5px; margin-top: 5px; text-transform: uppercase; - font-size: 14px; + font-size: 16px; font-weight: 500; } @@ -79,7 +79,7 @@ margin-bottom: 5px; margin-top: 5px; text-transform: uppercase; - font-size: 14px; + font-size: 16px; font-weight: 500; } diff --git a/src/app/styles/components/_sliderHandle.scss b/src/app/styles/components/_sliderHandle.scss index 207b16c80..3c1eeb725 100644 --- a/src/app/styles/components/_sliderHandle.scss +++ b/src/app/styles/components/_sliderHandle.scss @@ -54,7 +54,7 @@ z-index: 1070; display: block; visibility: visible; - font-size: 12px; + font-size: 16px; line-height: 1.5; opacity: 0.9; } diff --git a/src/app/styles/components/diff.css b/src/app/styles/components/diff.css index cb74dd16f..8e79bfe95 100644 --- a/src/app/styles/components/diff.css +++ b/src/app/styles/components/diff.css @@ -1,14 +1,14 @@ @import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap'); .jsondiffpatch-delta { font-family: 'Roboto', sans-serif; - font-size: 12px; + font-size: 16px; margin: 0; padding: 0 0 0 12px; display: inline-block; } .jsondiffpatch-delta pre { font-family: 'Roboto', sans-serif; - font-size: 12px; + font-size: 16px; margin: 0; padding: 0; display: inline-block; diff --git a/src/app/styles/layout/_actionContainer.scss b/src/app/styles/layout/_actionContainer.scss index a638739e4..a06410440 100644 --- a/src/app/styles/layout/_actionContainer.scss +++ b/src/app/styles/layout/_actionContainer.scss @@ -7,7 +7,7 @@ .actionname { background-color: inherit; - color: #fffeff; + color: #ffffff; } #recordBtn{ diff --git a/src/app/styles/layout/_buttonsContainer.scss b/src/app/styles/layout/_buttonsContainer.scss index b7e4d505a..bdbed060b 100644 --- a/src/app/styles/layout/_buttonsContainer.scss +++ b/src/app/styles/layout/_buttonsContainer.scss @@ -62,7 +62,7 @@ color: #d72828; border: 1px solid; margin-top: 2px; - font-size: 12px; + font-size: 16px; outline: none; } diff --git a/src/app/styles/layout/_travelContainer.scss b/src/app/styles/layout/_travelContainer.scss index 468be1df2..1f56e2453 100644 --- a/src/app/styles/layout/_travelContainer.scss +++ b/src/app/styles/layout/_travelContainer.scss @@ -25,7 +25,7 @@ .react-select-container { - font-size: 12px; + font-size: 16px; min-width: 90px; margin: 8px; .react-select__control { From c28e91e3506c7026f0ec94be1638eb0f12a30b3f Mon Sep 17 00:00:00 2001 From: elduke717 Date: Fri, 16 Jun 2023 16:04:04 -0400 Subject: [PATCH 23/70] add webmetric button style changes --- high-contrast-colors.md | 17 +++++++++++++++++ .../StateRoute/PerformanceVisx/BarGraph.tsx | 16 ++++++++-------- .../PerformanceVisx/BarGraphComparison.tsx | 4 ++-- src/app/components/StateRoute/StateRoute.tsx | 8 ++++---- src/app/components/StateRoute/Tree.tsx | 2 +- src/app/components/WebMetrics.tsx | 4 ++-- src/app/styles/components/_buttons.scss | 19 ++++++++++++++----- 7 files changed, 48 insertions(+), 22 deletions(-) create mode 100644 high-contrast-colors.md diff --git a/high-contrast-colors.md b/high-contrast-colors.md new file mode 100644 index 000000000..69eb3dd6b --- /dev/null +++ b/high-contrast-colors.md @@ -0,0 +1,17 @@ +## High Contrast Colors to Help with Color Blindness +- Dark Blue (#000080) +- Light Blue (#ADD8E6) +- Dark Green (#006400) +- Light Green (#90EE90) +- Dark Red (#8B0000) +- Light Red (#FFC0CB) +- Dark Purple (#800080) +- Light Purple (#BA55D3) +- Dark Yellow (#FFD700) +- Light Yellow (#FFFFE0) +- Dark Orange (#FF8C00) +- Light Orange (#FFA500) +- Dark Brown (#8B4513) +- Light Brown (#D2691E) +- Dark Gray (#A9A9A9) +- Light Gray (#D3D3D3) \ No newline at end of file diff --git a/src/app/components/StateRoute/PerformanceVisx/BarGraph.tsx b/src/app/components/StateRoute/PerformanceVisx/BarGraph.tsx index ca70d9765..cb69f3d57 100644 --- a/src/app/components/StateRoute/PerformanceVisx/BarGraph.tsx +++ b/src/app/components/StateRoute/PerformanceVisx/BarGraph.tsx @@ -7,7 +7,7 @@ import { AxisBottom, AxisLeft } from '@visx/axis'; import { scaleBand, scaleLinear, scaleOrdinal } from '@visx/scale'; import { useTooltip, useTooltipInPortal, defaultStyles } from '@visx/tooltip'; import { Text } from '@visx/text'; -import { schemeSet3 } from 'd3-scale-chromatic'; +import { schemeSet1 } from 'd3-scale-chromatic'; import { onHover, onHoverExit, save } from '../../../actions/actions'; import { useStoreContext } from '../../../store'; import { snapshot, TooltipData, Margin, BarGraphProps } from '../../../FrontendTypes'; @@ -19,14 +19,14 @@ const margin = { bottom: 0, left: 50, }; -const axisColor = '#FF6569'; +const axisColor = '#F00008'; const background = '#242529'; const tooltipStyles = { ...defaultStyles, minWidth: 60, backgroundColor: 'rgba(0,0,0,0.9)', color: 'white', - fontSize: '14px', + fontSize: '16px', lineHeight: '18px', fontFamily: 'Roboto', }; @@ -75,10 +75,10 @@ const BarGraph = (props: BarGraphProps): JSX.Element => { domain: [0, data.maxTotalRender], nice: true, }); - // Gives each bar on the graph a color using schemeSet3 imported from D3 + // Gives each bar on the graph a color using schemeSet1 imported from D3 const colorScale = scaleOrdinal({ domain: keys, - range: schemeSet3, + range: schemeSet1, }); // setting max dimensions and scale ranges @@ -268,16 +268,16 @@ const BarGraph = (props: BarGraphProps): JSX.Element => { textAnchor: 'middle', })} /> - + Rendering Time (ms)
{snapshot === 'All Snapshots' ? ( - + Snapshot ID ) : ( - + Components )} diff --git a/src/app/components/StateRoute/PerformanceVisx/BarGraphComparison.tsx b/src/app/components/StateRoute/PerformanceVisx/BarGraphComparison.tsx index 51cb6fa82..3ab5d3b4d 100644 --- a/src/app/components/StateRoute/PerformanceVisx/BarGraphComparison.tsx +++ b/src/app/components/StateRoute/PerformanceVisx/BarGraphComparison.tsx @@ -9,7 +9,7 @@ import { AxisBottom, AxisLeft } from '@visx/axis'; import { scaleBand, scaleLinear, scaleOrdinal } from '@visx/scale'; import { useTooltip, useTooltipInPortal, defaultStyles } from '@visx/tooltip'; import { Text } from '@visx/text'; -import { schemeSet3 } from 'd3-scale-chromatic'; +import { schemeTableau10 } from 'd3-scale-chromatic'; import { makeStyles } from '@material-ui/core/styles'; import Select from '@material-ui/core/Select'; import MenuItem from '@material-ui/core/MenuItem'; @@ -104,7 +104,7 @@ const BarGraphComparison = (props: BarGraphComparisonProps): JSX.Element => { }); // the domain array will assign each key a different color to make rectangle boxes // and use range to set the color scheme each bar - const duplicate = schemeSet3.slice(); + const duplicate = schemeTableau10.slice(); const colorScale = scaleOrdinal({ domain: keys, range: duplicate, diff --git a/src/app/components/StateRoute/StateRoute.tsx b/src/app/components/StateRoute/StateRoute.tsx index 72b063cf1..456ea4c89 100644 --- a/src/app/components/StateRoute/StateRoute.tsx +++ b/src/app/components/StateRoute/StateRoute.tsx @@ -107,7 +107,7 @@ const StateRoute = (props: StateRouteProps) => { formatted={(val) => Number.isNaN(val) ? '- ms' : `${((val / 100) * 2500).toFixed(2)} ms` } - label='LCP' + label='Largest Contentful Paint' name='Largest Contentful Paint' description='Measures loading performance. The benchmark is less than 2500 ms.' /> @@ -115,7 +115,7 @@ const StateRoute = (props: StateRouteProps) => { color={FIDColor} series={webMetrics.FID * 25} formatted={(val) => (Number.isNaN(val) ? '- ms' : `${(val / 25).toFixed(2)} ms`)} - label='FID' + label='First Input Delay' name='First Input Delay' description='Measures interactivity. The benchmark is less than 100 ms.' /> @@ -123,7 +123,7 @@ const StateRoute = (props: StateRouteProps) => { color={FCPColor} series={(webMetrics.FCP / 1000) * 100} formatted={(val) => `${((val / 100) * 1000).toFixed(2)} ms`} - label='FCP' + label='First Contentful Paint' name='First Contentful Paint' description='Measures the time it takes the browser to render the first piece of DOM content. No benchmark.' /> @@ -131,7 +131,7 @@ const StateRoute = (props: StateRouteProps) => { color={TTFBColor} series={(webMetrics.TTFB / 10) * 100} formatted={(val) => `${((val / 100) * 10).toFixed(2)} ms`} - label='TTFB' + label='Time To First Byte' name='Time to First Byte' description='Measures the time it takes for a browser to receive the first byte of page content. The benchmark is 600 ms.' /> diff --git a/src/app/components/StateRoute/Tree.tsx b/src/app/components/StateRoute/Tree.tsx index b59b2fc71..a3bb79f44 100644 --- a/src/app/components/StateRoute/Tree.tsx +++ b/src/app/components/StateRoute/Tree.tsx @@ -48,7 +48,7 @@ const Tree = (props: TreeProps) => { // @ts-ignore ({ className: 'json-tree' }) }} shouldExpandNode={() => true} getItemString={getItemString} diff --git a/src/app/components/WebMetrics.tsx b/src/app/components/WebMetrics.tsx index e83dec97d..d0024f82d 100644 --- a/src/app/components/WebMetrics.tsx +++ b/src/app/components/WebMetrics.tsx @@ -108,8 +108,8 @@ const radialGraph = (props) => { options={state.options} series={state.series} type='radialBar' - height={200} - width={200} + height={350} + width={350} /> diff --git a/src/app/styles/components/_buttons.scss b/src/app/styles/components/_buttons.scss index 4753a5dee..2acfc7585 100644 --- a/src/app/styles/components/_buttons.scss +++ b/src/app/styles/components/_buttons.scss @@ -91,12 +91,16 @@ outline: none; height: 20px; margin-bottom: 8px; - width: 70px; + width: 100px; border: none; - border-radius: 3px; - background: $grey-color-gradient; - font: normal 16px 'Roboto', sans-serif; + /* border-radius: 3px; */ + background: linear-gradient(145deg, #5c6068, #4d5157); + font: normal 16px "Roboto", sans-serif; color: #FFFFFF; + display: flex; + justify-content: center; + align-items: center; + padding: 5px; } .jump-button { @@ -107,11 +111,16 @@ border: transparent; border-radius: 3px; background-color: #232529; - font: normal 16px 'Roboto', sans-serif; + font: normal 16px "Roboto", sans-serif; color: #FFFFFF; transform: rotateX(90deg); transition: opacity 300ms, transform 0.15s linear; opacity: 0; + display: flex; + align-items: center; + justify-content: center; + padding: 2px; + padding-bottom: 5px; } .jump-button:hover { From e87efcdebdfd979f13b8bf9123757f4398b8c38d Mon Sep 17 00:00:00 2001 From: James McCollough <100531603+j-mccoll@users.noreply.github.com> Date: Fri, 16 Jun 2023 16:25:05 -0400 Subject: [PATCH 24/70] Update loader styles in error container --- src/app/__tests__/Loader.test.tsx | 2 +- src/app/components/Loader.tsx | 2 +- src/app/styles/layout/_errorContainer.scss | 4 ++++ 3 files changed, 6 insertions(+), 2 deletions(-) diff --git a/src/app/__tests__/Loader.test.tsx b/src/app/__tests__/Loader.test.tsx index 9db60b351..a60438323 100644 --- a/src/app/__tests__/Loader.test.tsx +++ b/src/app/__tests__/Loader.test.tsx @@ -6,7 +6,7 @@ import Loader from '../components/Loader'; describe('unit testing for Loader.tsx', () => { test('renders a loading icon', () => { const { container } = render(); - expect(container.firstChild).toHaveClass('css-xp4o0b'); + expect(container.firstChild).toHaveClass('css-1tm071a'); }); test('renders a fail icon', () => { diff --git a/src/app/components/Loader.tsx b/src/app/components/Loader.tsx index bdb14b2a0..96aceaaa9 100644 --- a/src/app/components/Loader.tsx +++ b/src/app/components/Loader.tsx @@ -17,7 +17,7 @@ const handleResult = (result: boolean): JSX.Element => // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types const Loader = ({ loading, result }): JSX.Element => loading ? ( - + ) : ( handleResult(result) ); diff --git a/src/app/styles/layout/_errorContainer.scss b/src/app/styles/layout/_errorContainer.scss index e789d5ae0..3e459478b 100644 --- a/src/app/styles/layout/_errorContainer.scss +++ b/src/app/styles/layout/_errorContainer.scss @@ -40,6 +40,10 @@ justify-content: center; align-items: center; } + .loaderChecks span { + margin: 0 auto; + display: inline; + } h2 { padding-left: 2%; padding-right: 2%; From 091e6a3cb592b17902ad45d657353ecbbca3f05f Mon Sep 17 00:00:00 2001 From: j-mccoll <100531603+j-mccoll@users.noreply.github.com> Date: Fri, 16 Jun 2023 16:30:37 -0400 Subject: [PATCH 25/70] Update Tree.tsx --- src/app/components/StateRoute/Tree.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/components/StateRoute/Tree.tsx b/src/app/components/StateRoute/Tree.tsx index a3bb79f44..b59b2fc71 100644 --- a/src/app/components/StateRoute/Tree.tsx +++ b/src/app/components/StateRoute/Tree.tsx @@ -48,7 +48,7 @@ const Tree = (props: TreeProps) => { // @ts-ignore ({ className: 'json-tree' }) }} shouldExpandNode={() => true} getItemString={getItemString} From c2acaac5fb3c46ce03c416ba5ece8a975c99367c Mon Sep 17 00:00:00 2001 From: James McCollough <100531603+j-mccoll@users.noreply.github.com> Date: Sun, 18 Jun 2023 15:40:49 -0400 Subject: [PATCH 26/70] Test access to reactime-website --- reactime-website | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/reactime-website b/reactime-website index da8391a58..c26af6f6f 160000 --- a/reactime-website +++ b/reactime-website @@ -1 +1 @@ -Subproject commit da8391a58578b2d6dbbdcd050642d8a145716515 +Subproject commit c26af6f6f3e4949e89c2036dd8cedafba8592756 From 72d0bad3b09d3cb1e96821a2d3ac3fb4899f3fdc Mon Sep 17 00:00:00 2001 From: James McCollough <100531603+j-mccoll@users.noreply.github.com> Date: Sun, 18 Jun 2023 16:05:07 -0400 Subject: [PATCH 27/70] Resetting to previous commit --- reactime-website | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/reactime-website b/reactime-website index da8391a58..c26af6f6f 160000 --- a/reactime-website +++ b/reactime-website @@ -1 +1 @@ -Subproject commit da8391a58578b2d6dbbdcd050642d8a145716515 +Subproject commit c26af6f6f3e4949e89c2036dd8cedafba8592756 From 05069b0b25294d86cdb357ecfa0a9e7da940b242 Mon Sep 17 00:00:00 2001 From: James McCollough <100531603+j-mccoll@users.noreply.github.com> Date: Sun, 18 Jun 2023 16:19:26 -0400 Subject: [PATCH 28/70] Remove persist from ButtonContainer test --- src/app/__tests__/ButtonContainer.test.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/app/__tests__/ButtonContainer.test.tsx b/src/app/__tests__/ButtonContainer.test.tsx index 0b13d6efb..860d21302 100644 --- a/src/app/__tests__/ButtonContainer.test.tsx +++ b/src/app/__tests__/ButtonContainer.test.tsx @@ -26,7 +26,6 @@ describe('Unit testing for ButtonContainer', () => { mode: { paused: false, locked: false, - persist: false, }, }, }, @@ -47,7 +46,6 @@ describe('Unit testing for ButtonContainer', () => { mockedUsedStoreContext.mockClear(); currentTab.mode = { paused: false, - persist: false, }; }); From 3244b623bd499298b95a48e29079ca92a78491cf Mon Sep 17 00:00:00 2001 From: James McCollough <100531603+j-mccoll@users.noreply.github.com> Date: Sun, 18 Jun 2023 17:33:49 -0400 Subject: [PATCH 29/70] Remove persist from ButtonsContainer tests --- .../ignore/ButtonsContainer.test.tsx | 22 ------------------- 1 file changed, 22 deletions(-) diff --git a/src/app/__tests__enzyme/ignore/ButtonsContainer.test.tsx b/src/app/__tests__enzyme/ignore/ButtonsContainer.test.tsx index f8675e26a..c547558ed 100644 --- a/src/app/__tests__enzyme/ignore/ButtonsContainer.test.tsx +++ b/src/app/__tests__enzyme/ignore/ButtonsContainer.test.tsx @@ -18,7 +18,6 @@ const state = { mode: { paused: false, locked: false, - persist: false, }, }, }, @@ -42,7 +41,6 @@ describe('testing the bottom buttons', () => { useStoreContext.mockClear(); currentTab.mode = { paused: false, - persist: false, }; }); @@ -66,24 +64,4 @@ describe('testing the bottom buttons', () => { }); }); - describe.skip('persist button testing', () => { - beforeEach(() => { - wrapper.find('.persist-button').simulate('click'); - }); - - test('persist button dispatches upon click', () => { - expect(dispatch.mock.calls.length).toBe(1); - }); - - test('persist button dispatches toggleMode action', () => { - expect(dispatch.mock.calls[0][0]).toEqual(toggleMode('persist')); - }); - - test('persist button displays state', () => { - expect(wrapper.find('.persist-button').text()).toBe('Persist'); - state.tabs[state.currentTab].mode.persist = true; - wrapper = shallow(); - expect(wrapper.find('.persist-button').text()).toBe('Unpersist'); - }); - }); }); From ac6ad52a14b478352de435b2a859baa5d01fbe1d Mon Sep 17 00:00:00 2001 From: James McCollough <100531603+j-mccoll@users.noreply.github.com> Date: Sun, 18 Jun 2023 17:37:32 -0400 Subject: [PATCH 30/70] Remove persist from mainReducer test --- src/app/__tests__enzyme/ignore/mainReducer.test.tsx | 12 ------------ 1 file changed, 12 deletions(-) diff --git a/src/app/__tests__enzyme/ignore/mainReducer.test.tsx b/src/app/__tests__enzyme/ignore/mainReducer.test.tsx index e220fb684..95c053d3a 100644 --- a/src/app/__tests__enzyme/ignore/mainReducer.test.tsx +++ b/src/app/__tests__enzyme/ignore/mainReducer.test.tsx @@ -32,7 +32,6 @@ describe('mainReducer testing', () => { mode: { paused: false, locked: false, - persist: false, }, intervalId: 87, playing: true, @@ -116,7 +115,6 @@ describe('mainReducer testing', () => { mode: { paused: false, locked: false, - persist: false, }, intervalId: 75, playing: false, @@ -279,25 +277,16 @@ describe('mainReducer testing', () => { const { mode } = mainReducer(state, toggleMode('paused')).tabs[currentTab]; expect(mode.paused).toBe(true); expect(mode.locked).toBe(false); - expect(mode.persist).toBe(false); }); it('clicking lock button should only change lock mode', () => { const { mode } = mainReducer(state, toggleMode('locked')).tabs[currentTab]; expect(mode.paused).toBe(false); expect(mode.locked).toBe(true); - expect(mode.persist).toBe(false); - }); - it('clicking persist button should only change persist mode', () => { - const { mode } = mainReducer(state, toggleMode('persist')).tabs[currentTab]; - expect(mode.paused).toBe(false); - expect(mode.locked).toBe(false); - expect(mode.persist).toBe(true); }); it('undefined payload does nothing', () => { const { mode } = mainReducer(state, toggleMode('undefined')).tabs[currentTab]; expect(mode.paused).toBe(false); expect(mode.locked).toBe(false); - expect(mode.persist).toBe(false); }); }); @@ -326,7 +315,6 @@ describe('mainReducer testing', () => { mode: { paused: false, locked: false, - persist: false, }, intervalId: 912, playing: true, From 69b30d9118a41cb8fdd54fbcffedf9d5f61b54a4 Mon Sep 17 00:00:00 2001 From: James McCollough <100531603+j-mccoll@users.noreply.github.com> Date: Sun, 18 Jun 2023 17:39:51 -0400 Subject: [PATCH 31/70] Remove persist from mainReducer --- src/app/reducers/mainReducer.js | 3 --- 1 file changed, 3 deletions(-) diff --git a/src/app/reducers/mainReducer.js b/src/app/reducers/mainReducer.js index ad95bea1f..003ac48eb 100644 --- a/src/app/reducers/mainReducer.js +++ b/src/app/reducers/mainReducer.js @@ -217,9 +217,6 @@ export default (state, action) => case 'paused': actionText = 'setPause'; break; - case 'persist': - actionText = 'setPersist'; - break; default: break; } From 4cb18a90dbeec80c36c3bc48a3bcc84568d85254 Mon Sep 17 00:00:00 2001 From: James McCollough <100531603+j-mccoll@users.noreply.github.com> Date: Sun, 18 Jun 2023 17:41:39 -0400 Subject: [PATCH 32/70] Remove persist from background --- src/extension/background.js | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/src/extension/background.js b/src/extension/background.js index 89d3402f6..25aec20c1 100644 --- a/src/extension/background.js +++ b/src/extension/background.js @@ -42,9 +42,8 @@ function createTabObj(title) { reactDevToolsInstalled: false, targetPageisaReactApp: false, }, - // Note: Persist is a now defunct feature. Paused = Locked + // Note: Paused = Locked mode: { - persist: false, paused: false, }, // stores web metrics calculated by the content script file @@ -204,10 +203,6 @@ chrome.runtime.onConnect.addListener((port) => { case 'setPause': tabsObj[tabId].mode.paused = payload; return true; - // persist is now depreacted - case 'setPersist': - tabsObj[tabId].mode.persist = payload; - return true; case 'launchContentScript': chrome.scripting.executeScript({ target: { tabId }, From 965cef08c231e10880190efc5049923d96875b2d Mon Sep 17 00:00:00 2001 From: James McCollough <100531603+j-mccoll@users.noreply.github.com> Date: Sun, 18 Jun 2023 19:33:24 -0400 Subject: [PATCH 33/70] Debug setState error in timeJump --- src/backend/controllers/timeJump.ts | 13 ++++++++----- 1 file changed, 8 insertions(+), 5 deletions(-) diff --git a/src/backend/controllers/timeJump.ts b/src/backend/controllers/timeJump.ts index 6f7fa3a00..fc14de56d 100644 --- a/src/backend/controllers/timeJump.ts +++ b/src/backend/controllers/timeJump.ts @@ -70,11 +70,14 @@ async function updateReactFiberTree( if (index !== null) { // Obtain the BOUND update method at the given index const classComponent = componentActionsRecord.getComponentByIndex(index); - // Update component state - await classComponent.setState( - // prevState contains the states of the snapshots we are jumping FROM, not jumping TO - (prevState) => state, - ); + // This conditional avoids the error that occurs when classComponent is undefined + if (classComponent !== undefined) { + // Update component state + await classComponent.setState( + // prevState contains the states of the snapshots we are jumping FROM, not jumping TO + (prevState) => state, + ); + } // Iterate through new children after state has been set targetSnapshot.children.forEach((child) => updateReactFiberTree(child, circularComponentTable)); return; From a5085d200c966f6723aa40bd9fd9831fdbfb1484 Mon Sep 17 00:00:00 2001 From: James McCollough <100531603+j-mccoll@users.noreply.github.com> Date: Sun, 18 Jun 2023 19:59:38 -0400 Subject: [PATCH 34/70] Change default setting of tab to "Locked" --- src/app/__tests__/ButtonContainer.test.tsx | 10 +++++----- src/extension/background.js | 2 +- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/src/app/__tests__/ButtonContainer.test.tsx b/src/app/__tests__/ButtonContainer.test.tsx index 0b13d6efb..7612356ad 100644 --- a/src/app/__tests__/ButtonContainer.test.tsx +++ b/src/app/__tests__/ButtonContainer.test.tsx @@ -24,7 +24,7 @@ describe('Unit testing for ButtonContainer', () => { sliderIndex: 0, viewIndex: -1, mode: { - paused: false, + paused: true, locked: false, persist: false, }, @@ -46,7 +46,7 @@ describe('Unit testing for ButtonContainer', () => { dispatch.mockClear(); mockedUsedStoreContext.mockClear(); currentTab.mode = { - paused: false, + paused: true, persist: false, }; }); @@ -55,7 +55,7 @@ describe('Unit testing for ButtonContainer', () => { test('should have 4 buttons ', () => { render(); expect(screen.getAllByRole('button')).toHaveLength(4); - expect(screen.getAllByRole('button')[0]).toHaveTextContent('Unlocked'); + expect(screen.getAllByRole('button')[0]).toHaveTextContent('Locked'); expect(screen.getAllByRole('button')[1]).toHaveTextContent('Download'); expect(screen.getAllByRole('button')[2]).toHaveTextContent('Upload'); expect(screen.getAllByRole('button')[3]).toHaveTextContent('Tutorial'); @@ -64,9 +64,9 @@ describe('Unit testing for ButtonContainer', () => { describe('When view is unlock', () => { test('Button should show as unlocked', () => { - state.tabs['87'].mode.paused = true; + state.tabs['87'].mode.paused = false; render(); - expect(screen.getAllByRole('button')[0]).toHaveTextContent('Locked'); + expect(screen.getAllByRole('button')[0]).toHaveTextContent('Unlocked'); }); }); diff --git a/src/extension/background.js b/src/extension/background.js index 89d3402f6..bde230eab 100644 --- a/src/extension/background.js +++ b/src/extension/background.js @@ -45,7 +45,7 @@ function createTabObj(title) { // Note: Persist is a now defunct feature. Paused = Locked mode: { persist: false, - paused: false, + paused: true, }, // stores web metrics calculated by the content script file webMetrics: {}, From 3f8075946ec8298c89c69e46eb1a00f51f695845 Mon Sep 17 00:00:00 2001 From: James McCollough <100531603+j-mccoll@users.noreply.github.com> Date: Sun, 18 Jun 2023 23:02:04 -0400 Subject: [PATCH 35/70] Clean up frontend tests --- src/app/__tests__/ActionContainer.test.tsx | 4 ++-- src/app/__tests__/ButtonContainer.test.tsx | 6 +++--- src/app/__tests__/ErrorMsg.test.tsx | 4 +--- src/app/__tests__/MainContainer.test.tsx | 2 ++ src/app/__tests__/MainSlider.test.tsx | 2 +- src/app/__tests__/TravelContainer.test.tsx | 23 +++++++++++----------- src/app/__tests__/Tutorial.test.tsx | 3 +-- src/app/__tests__/action.test.tsx | 3 +-- src/app/components/Tutorial.tsx | 2 +- 9 files changed, 24 insertions(+), 25 deletions(-) diff --git a/src/app/__tests__/ActionContainer.test.tsx b/src/app/__tests__/ActionContainer.test.tsx index a4611db55..e21c7e82a 100644 --- a/src/app/__tests__/ActionContainer.test.tsx +++ b/src/app/__tests__/ActionContainer.test.tsx @@ -143,8 +143,8 @@ describe('unit testing for ActionContainer', () => { expect(screen.getByText('MockSwitchApp')).toBeInTheDocument(); }); - test('Click works on clear button', async () => { + test('Click works on clear button', () => { fireEvent.click(screen.getAllByRole('button')[0]); - await expect(dispatch).toHaveBeenCalledTimes(1); + expect(dispatch).toHaveBeenCalledTimes(1); }); }); diff --git a/src/app/__tests__/ButtonContainer.test.tsx b/src/app/__tests__/ButtonContainer.test.tsx index 0b13d6efb..5b07544c8 100644 --- a/src/app/__tests__/ButtonContainer.test.tsx +++ b/src/app/__tests__/ButtonContainer.test.tsx @@ -52,7 +52,7 @@ describe('Unit testing for ButtonContainer', () => { }); describe('When button container is loaded', () => { - test('should have 4 buttons ', () => { + test('it should have 4 buttons', () => { render(); expect(screen.getAllByRole('button')).toHaveLength(4); expect(screen.getAllByRole('button')[0]).toHaveTextContent('Unlocked'); @@ -62,8 +62,8 @@ describe('Unit testing for ButtonContainer', () => { }); }); - describe('When view is unlock', () => { - test('Button should show as unlocked', () => { + describe('When view is locked', () => { + test('Button should show as locked', () => { state.tabs['87'].mode.paused = true; render(); expect(screen.getAllByRole('button')[0]).toHaveTextContent('Locked'); diff --git a/src/app/__tests__/ErrorMsg.test.tsx b/src/app/__tests__/ErrorMsg.test.tsx index 6cb6f76e0..c6c8177ad 100644 --- a/src/app/__tests__/ErrorMsg.test.tsx +++ b/src/app/__tests__/ErrorMsg.test.tsx @@ -13,8 +13,6 @@ const props = { launchContent: null, }; -const parseError = jest.fn(); - describe('unit testing for ErrorContainer.tsx', () => { describe('When there are no errors', () => { test('Returns empty div', () => { @@ -34,7 +32,7 @@ describe('unit testing for ErrorContainer.tsx', () => { }); }); - describe("when there's a Content Script Errorr", () => { + describe("when there's a Content Script Error", () => { test('Content Script Error related text shows', () => { props.status.contentScriptLaunched = false; render(); diff --git a/src/app/__tests__/MainContainer.test.tsx b/src/app/__tests__/MainContainer.test.tsx index f1ff56563..e5a4e0202 100644 --- a/src/app/__tests__/MainContainer.test.tsx +++ b/src/app/__tests__/MainContainer.test.tsx @@ -23,11 +23,13 @@ jest.mock('../containers/TravelContainer', () => (props) => { mockTravelContainer(props); return
mockTravelContainer
; }); + const mockButtonsContainer = jest.fn(); jest.mock('../containers/ButtonsContainer', () => (props) => { mockButtonsContainer(props); return
mockButtonsContainer
; }); + const mockErrorContainer = jest.fn(); jest.mock('../containers/ErrorContainer', () => (props) => { mockErrorContainer(props); diff --git a/src/app/__tests__/MainSlider.test.tsx b/src/app/__tests__/MainSlider.test.tsx index 81b4e3417..f5aadc77d 100644 --- a/src/app/__tests__/MainSlider.test.tsx +++ b/src/app/__tests__/MainSlider.test.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { render, screen, fireEvent } from '@testing-library/react'; +import { render, screen } from '@testing-library/react'; import '@testing-library/jest-dom/extend-expect'; import { TextEncoder } from 'util'; global.TextEncoder = TextEncoder; diff --git a/src/app/__tests__/TravelContainer.test.tsx b/src/app/__tests__/TravelContainer.test.tsx index a93b6c45d..729a981b5 100644 --- a/src/app/__tests__/TravelContainer.test.tsx +++ b/src/app/__tests__/TravelContainer.test.tsx @@ -15,7 +15,6 @@ const state = { currentTab: 87, }; -const play = jest.fn(); const dispatch = jest.fn(); jest.mock('../store'); @@ -48,6 +47,7 @@ describe('All elements appear in the TravelContainer module', () => { test('MainSlider exists in document', () => { expect(screen.getByText('MockSlider')).toBeInTheDocument(); }); + test('Dropdown exists in document', () => { expect(screen.getByText('mockDropDown')).toBeInTheDocument(); }); @@ -57,7 +57,7 @@ describe('All elements appear in the TravelContainer module', () => { expect(buttons[1]).toHaveTextContent('<'); }); - test('Foward button exists in document', () => { + test('Forward button exists in document', () => { let buttons = screen.getAllByRole('button'); expect(buttons[2]).toHaveTextContent('>'); }); @@ -69,18 +69,18 @@ describe('Testing backward and forward button', () => { render(); }); - test('Clicking < Button button will triger button', async () => { + test('Clicking < Button button will trigger button', () => { let buttons = screen.getAllByRole('button'); expect(buttons[1]).toHaveTextContent('<'); fireEvent.click(buttons[1]); - await expect(dispatch).toHaveBeenCalledTimes(1); + expect(dispatch).toHaveBeenCalledTimes(1); }); - test('Clicking > Button button will triger button', async () => { + test('Clicking > Button button will trigger button', () => { let buttons = screen.getAllByRole('button'); expect(buttons[2]).toHaveTextContent('>'); fireEvent.click(buttons[2]); - await expect(dispatch).toHaveBeenCalledTimes(1); + expect(dispatch).toHaveBeenCalledTimes(1); }); }); @@ -94,33 +94,34 @@ describe('Testing play/pause button', () => { const playButton = screen.getByTestId('play-button-test'); expect(playButton).toBeInTheDocument(); }); + test('Play initially says Play', () => { render(); const playButton = screen.getByTestId('play-button-test'); expect(playButton.textContent).toBe('Play'); }); - test('Clicking Play button will triger button', async () => { + test('Clicking Play button will trigger button', () => { render(); const playButton = screen.getByTestId('play-button-test'); expect(playButton.textContent).toBe('Play'); fireEvent.click(playButton); - await expect(dispatch).toHaveBeenCalledTimes(1); + expect(dispatch).toHaveBeenCalledTimes(1); }); - test('Play says Pause when `Playing` is set to False', () => { + test('Play says Pause when `Playing` is set to true', () => { state.tabs[87].playing = true; render(); const playButton = screen.getByTestId('play-button-test'); expect(playButton.textContent).toBe('Pause'); }); - test('Clicking Pause button will trigger button', async () => { + test('Clicking Pause button will trigger button', () => { render(); const playButton = screen.getByTestId('play-button-test'); expect(playButton.textContent).toBe('Pause'); fireEvent.click(playButton); - await expect(dispatch).toHaveBeenCalledTimes(1); + expect(dispatch).toHaveBeenCalledTimes(1); state.tabs[87].playing = false; }); }); diff --git a/src/app/__tests__/Tutorial.test.tsx b/src/app/__tests__/Tutorial.test.tsx index b6e6a3d12..effe7093f 100644 --- a/src/app/__tests__/Tutorial.test.tsx +++ b/src/app/__tests__/Tutorial.test.tsx @@ -23,11 +23,10 @@ describe('Before Tutorial is entered', () => { test('User clicking "How to use" while on map tab button starts map tutorial ', () => { props.currentTabInApp = 'map'; - render(); fireEvent.click(screen.getByRole('button')); expect( - screen.getByText('A performance and state managment tool for React apps.'), + screen.getByText('A performance and state management tool for React apps.'), ).toBeInTheDocument(); }); diff --git a/src/app/__tests__/action.test.tsx b/src/app/__tests__/action.test.tsx index 28a82eb62..753852b16 100644 --- a/src/app/__tests__/action.test.tsx +++ b/src/app/__tests__/action.test.tsx @@ -1,6 +1,5 @@ import React from 'react'; import { render, screen } from '@testing-library/react'; -import user from '@testing-library/user-event'; import '@testing-library/jest-dom/extend-expect'; // needed this to extend the jest-dom assertions (ex toHaveTextContent) import Action from '../components/Action'; @@ -53,7 +52,7 @@ describe('unit testing for Action.tsx', () => { expect(screen.getByPlaceholderText('Snapshot: 3.0')).toBeInTheDocument(); }); - test("when there's no have no duration data", () => { + test("when there's no duration data", () => { props.componentData = undefined; render(); expect(screen.getAllByRole('button')[0]).toHaveTextContent('NO TIME'); diff --git a/src/app/components/Tutorial.tsx b/src/app/components/Tutorial.tsx index 16edb4501..eb4d462c6 100644 --- a/src/app/components/Tutorial.tsx +++ b/src/app/components/Tutorial.tsx @@ -82,7 +82,7 @@ export default class Tutorial extends Component { steps = [ { title: 'Reactime Tutorial', - intro: 'A performance and state managment tool for React apps.', + intro: 'A performance and state management tool for React apps.', position: 'top', }, { From 9113d7add2d3afdc19081c091b886767fc6c703b Mon Sep 17 00:00:00 2001 From: James McCollough <100531603+j-mccoll@users.noreply.github.com> Date: Mon, 19 Jun 2023 00:13:09 -0400 Subject: [PATCH 36/70] Add tests for tutorials --- src/app/__tests__/Tutorial.test.tsx | 26 ++++++++++++++++++++------ 1 file changed, 20 insertions(+), 6 deletions(-) diff --git a/src/app/__tests__/Tutorial.test.tsx b/src/app/__tests__/Tutorial.test.tsx index b6e6a3d12..2d9f19976 100644 --- a/src/app/__tests__/Tutorial.test.tsx +++ b/src/app/__tests__/Tutorial.test.tsx @@ -16,12 +16,12 @@ const props = { let currentStepIndex = 5; describe('Before Tutorial is entered', () => { - test('How to use button exists', () => { + test('Tutorial button exists', () => { render(); expect(screen.getByText('Tutorial')).toBeInTheDocument(); }); - test('User clicking "How to use" while on map tab button starts map tutorial ', () => { + test('User clicking tutorial button while on map tab starts map tutorial ', () => { props.currentTabInApp = 'map'; render(); @@ -31,17 +31,31 @@ describe('Before Tutorial is entered', () => { ).toBeInTheDocument(); }); - test('User clicking "How to use" while on performance tab button starts performance tutorial ', () => { + test('User clicking tutorial button while on performance tab starts performance tutorial ', () => { props.currentTabInApp = 'performance'; render(); fireEvent.click(screen.getByRole('button')); expect(screen.getByText('Performance Tab')).toBeInTheDocument(); }); - test('User clicking "How to use" while on performance comparison tab, no tutorial available ', () => { - props.currentTabInApp = 'performance-comparison'; - currentStepIndex = 1; + test('User clicking tutorial button while on history tab starts history tutorial ', () => { + props.currentTabInApp = 'history'; render(); fireEvent.click(screen.getByRole('button')); + expect(screen.getByText('History Tab')).toBeInTheDocument(); + }); + + test('User clicking tutorial button while on web metrics tab starts web metrics tutorial ', () => { + props.currentTabInApp = 'webmetrics'; + render(); + fireEvent.click(screen.getByRole('button')); + expect(screen.getByText('Webmetrics Tab')).toBeInTheDocument(); + }); + + test('User clicking tutorial button while on tree tab starts tree tutorial ', () => { + props.currentTabInApp = 'tree'; + render(); + fireEvent.click(screen.getByRole('button')); + expect(screen.getByText('Tree Tab')).toBeInTheDocument(); }); }); From efd7b41cbc762426d9ce34d93adb0ef7dcb135bf Mon Sep 17 00:00:00 2001 From: James McCollough <100531603+j-mccoll@users.noreply.github.com> Date: Mon, 19 Jun 2023 00:18:35 -0400 Subject: [PATCH 37/70] Modify MainSlider test for multiple snapshots --- src/app/__tests__/MainSlider.test.tsx | 12 +----------- 1 file changed, 1 insertion(+), 11 deletions(-) diff --git a/src/app/__tests__/MainSlider.test.tsx b/src/app/__tests__/MainSlider.test.tsx index 81b4e3417..0c70f1e25 100644 --- a/src/app/__tests__/MainSlider.test.tsx +++ b/src/app/__tests__/MainSlider.test.tsx @@ -40,21 +40,11 @@ describe('Unit testing for MainSlider.jsx', () => { snapshotsLength: 3, }; - const state = { - tabs: { - 100: { - sliderIndex: 1, - }, - }, - currentTab: 100, - }; - - // currently not working :( likely needs to correctly handle understanding what tab it should currently be at test('Component should have min, max, value with correct values to indicate slider position when there are multiple snapshots', () => { render(); expect(screen.getByRole('slider')).toHaveAttribute('aria-valuemax', '2'); expect(screen.getByRole('slider')).toHaveAttribute('aria-valuemin', '0'); - // expect(screen.getByRole('slider')).toHaveAttribute('aria-valuenow','0') + expect(screen.getByRole('slider')).toHaveAttribute('aria-valuenow','0') }); }); }); From 415ca22c35c1e7bbfcce5b137f2f5c37501e4d13 Mon Sep 17 00:00:00 2001 From: James McCollough <100531603+j-mccoll@users.noreply.github.com> Date: Mon, 19 Jun 2023 10:22:40 -0400 Subject: [PATCH 38/70] Create test for formatting of snapshot time --- src/app/__tests__/action.test.tsx | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/src/app/__tests__/action.test.tsx b/src/app/__tests__/action.test.tsx index 28a82eb62..80554bef1 100644 --- a/src/app/__tests__/action.test.tsx +++ b/src/app/__tests__/action.test.tsx @@ -59,4 +59,12 @@ describe('unit testing for Action.tsx', () => { expect(screen.getAllByRole('button')[0]).toHaveTextContent('NO TIME'); }); }); + + describe('When actualDuration exceeds 60', () => { + test('Time should be formatted correctly', () => { + props.componentData.actualDuration = 75; + render(); + expect(screen.getAllByRole('button')[0]).toHaveTextContent('+01:15.00'); + }); + }); }); From c9e2311d3f40e82bdb10b70dc63ac1d90330dd2f Mon Sep 17 00:00:00 2001 From: James McCollough <100531603+j-mccoll@users.noreply.github.com> Date: Mon, 19 Jun 2023 11:03:01 -0400 Subject: [PATCH 39/70] Create test for handleOnKeyDown functionality --- src/app/__tests__/action.test.tsx | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/src/app/__tests__/action.test.tsx b/src/app/__tests__/action.test.tsx index 80554bef1..3b63b3a7a 100644 --- a/src/app/__tests__/action.test.tsx +++ b/src/app/__tests__/action.test.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { render, screen } from '@testing-library/react'; +import { render, screen, fireEvent } from '@testing-library/react'; import user from '@testing-library/user-event'; import '@testing-library/jest-dom/extend-expect'; // needed this to extend the jest-dom assertions (ex toHaveTextContent) import Action from '../components/Action'; @@ -58,13 +58,17 @@ describe('unit testing for Action.tsx', () => { render(); expect(screen.getAllByRole('button')[0]).toHaveTextContent('NO TIME'); }); - }); - describe('When actualDuration exceeds 60', () => { - test('Time should be formatted correctly', () => { + test('When actualDuration exceeds 60, time should be formatted correctly', () => { props.componentData.actualDuration = 75; render(); expect(screen.getAllByRole('button')[0]).toHaveTextContent('+01:15.00'); }); + + test('Using the ArrowUp key on Action snapshot should trigger handleOnKeyDown', () => { + render(); + fireEvent.keyDown(screen.getByRole('presentation'), {key: 'ArrowUp', code: 'ArrowUp', charCode: 38}); + expect(props.handleOnkeyDown).toHaveBeenCalled();; + }); }); }); From 5fa990ec1e2d48c0cb93a315b3501673ae33814c Mon Sep 17 00:00:00 2001 From: James McCollough <100531603+j-mccoll@users.noreply.github.com> Date: Mon, 19 Jun 2023 11:05:24 -0400 Subject: [PATCH 40/70] Create test for handleOnKeyDown functionality --- src/app/__tests__/action.test.tsx | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/src/app/__tests__/action.test.tsx b/src/app/__tests__/action.test.tsx index 3b63b3a7a..5cd7ab43f 100644 --- a/src/app/__tests__/action.test.tsx +++ b/src/app/__tests__/action.test.tsx @@ -70,5 +70,17 @@ describe('unit testing for Action.tsx', () => { fireEvent.keyDown(screen.getByRole('presentation'), {key: 'ArrowUp', code: 'ArrowUp', charCode: 38}); expect(props.handleOnkeyDown).toHaveBeenCalled();; }); + + test('Using the ArrowDown key on Action snapshot should trigger handleOnKeyDown', () => { + render(); + fireEvent.keyDown(screen.getByRole('presentation'), {key: 'ArrowDown', code: 'ArrowDown', charCode: 40}); + expect(props.handleOnkeyDown).toHaveBeenCalled();; + }); + + test('Using the Enter key on Action snapshot should trigger handleOnKeyDown', () => { + render(); + fireEvent.keyDown(screen.getByRole('presentation'), {key: 'Enter', code: 'Enter', charCode: 13}); + expect(props.handleOnkeyDown).toHaveBeenCalled();; + }); }); }); From 05d2032e99a510059a3b77026dce8721f8151548 Mon Sep 17 00:00:00 2001 From: James McCollough <100531603+j-mccoll@users.noreply.github.com> Date: Mon, 19 Jun 2023 11:11:47 -0400 Subject: [PATCH 41/70] Create test for Action snapshots onClick --- src/app/__tests__/action.test.tsx | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/src/app/__tests__/action.test.tsx b/src/app/__tests__/action.test.tsx index 5cd7ab43f..e3c36a0de 100644 --- a/src/app/__tests__/action.test.tsx +++ b/src/app/__tests__/action.test.tsx @@ -3,6 +3,7 @@ import { render, screen, fireEvent } from '@testing-library/react'; import user from '@testing-library/user-event'; import '@testing-library/jest-dom/extend-expect'; // needed this to extend the jest-dom assertions (ex toHaveTextContent) import Action from '../components/Action'; +import { changeView } from '../actions/actions'; // @ts-ignore Action.cleanTime = jest.fn().mockReturnValue(); @@ -82,5 +83,11 @@ describe('unit testing for Action.tsx', () => { fireEvent.keyDown(screen.getByRole('presentation'), {key: 'Enter', code: 'Enter', charCode: 13}); expect(props.handleOnkeyDown).toHaveBeenCalled();; }); + + test('Clicking the snapshot should trigger onClick', () => { + render(); + fireEvent.click(screen.getByRole('presentation')); + expect(props.dispatch).toHaveBeenCalledWith(changeView(2));; + }); }); }); From 727765ec0a6e0ca87efaaae854dcfbc531f055b9 Mon Sep 17 00:00:00 2001 From: James McCollough <100531603+j-mccoll@users.noreply.github.com> Date: Mon, 19 Jun 2023 11:22:08 -0400 Subject: [PATCH 42/70] Create test for clicking Jump button --- src/app/__tests__/action.test.tsx | 15 +++++++++++---- 1 file changed, 11 insertions(+), 4 deletions(-) diff --git a/src/app/__tests__/action.test.tsx b/src/app/__tests__/action.test.tsx index e3c36a0de..d13fb5152 100644 --- a/src/app/__tests__/action.test.tsx +++ b/src/app/__tests__/action.test.tsx @@ -3,7 +3,7 @@ import { render, screen, fireEvent } from '@testing-library/react'; import user from '@testing-library/user-event'; import '@testing-library/jest-dom/extend-expect'; // needed this to extend the jest-dom assertions (ex toHaveTextContent) import Action from '../components/Action'; -import { changeView } from '../actions/actions'; +import { changeView, changeSlider } from '../actions/actions'; // @ts-ignore Action.cleanTime = jest.fn().mockReturnValue(); @@ -69,19 +69,19 @@ describe('unit testing for Action.tsx', () => { test('Using the ArrowUp key on Action snapshot should trigger handleOnKeyDown', () => { render(); fireEvent.keyDown(screen.getByRole('presentation'), {key: 'ArrowUp', code: 'ArrowUp', charCode: 38}); - expect(props.handleOnkeyDown).toHaveBeenCalled();; + expect(props.handleOnkeyDown).toHaveBeenCalled(); }); test('Using the ArrowDown key on Action snapshot should trigger handleOnKeyDown', () => { render(); fireEvent.keyDown(screen.getByRole('presentation'), {key: 'ArrowDown', code: 'ArrowDown', charCode: 40}); - expect(props.handleOnkeyDown).toHaveBeenCalled();; + expect(props.handleOnkeyDown).toHaveBeenCalled(); }); test('Using the Enter key on Action snapshot should trigger handleOnKeyDown', () => { render(); fireEvent.keyDown(screen.getByRole('presentation'), {key: 'Enter', code: 'Enter', charCode: 13}); - expect(props.handleOnkeyDown).toHaveBeenCalled();; + expect(props.handleOnkeyDown).toHaveBeenCalled(); }); test('Clicking the snapshot should trigger onClick', () => { @@ -89,5 +89,12 @@ describe('unit testing for Action.tsx', () => { fireEvent.click(screen.getByRole('presentation')); expect(props.dispatch).toHaveBeenCalledWith(changeView(2));; }); + + test('Clicking Jump button should trigger changeSlider and changeView', () => { + render(); + fireEvent.click(screen.getAllByRole('button')[1]); + expect(props.dispatch).toHaveBeenCalledWith(changeSlider(2)); + expect(props.dispatch).toHaveBeenCalledWith(changeView(2)); + }); }); }); From a4b9935cca5c8097735619092ed378885fb66d3d Mon Sep 17 00:00:00 2001 From: James McCollough <100531603+j-mccoll@users.noreply.github.com> Date: Mon, 19 Jun 2023 11:26:51 -0400 Subject: [PATCH 43/70] Center snapshot Jump and Current buttons --- src/app/styles/components/_buttons.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/app/styles/components/_buttons.scss b/src/app/styles/components/_buttons.scss index 2acfc7585..34be4234c 100644 --- a/src/app/styles/components/_buttons.scss +++ b/src/app/styles/components/_buttons.scss @@ -107,7 +107,7 @@ outline: none; height: 20px; margin-bottom: 8px; - width: 70px; + width: 100px; border: transparent; border-radius: 3px; background-color: #232529; @@ -134,7 +134,7 @@ outline: none; height: 20px; margin-bottom: 8px; - width: 70px; + width: 100px; border: transparent; border-radius: 3px; font: normal 16px 'Roboto', sans-serif; From a8cd0eb6d49417ce12c5ffeeaf1418fc589c01ba Mon Sep 17 00:00:00 2001 From: sergeylvq Date: Mon, 19 Jun 2023 12:36:47 -0400 Subject: [PATCH 44/70] server ts and puppetterServer ts --- demo-app-remix/{server.js => server.ts} | 4 ++-- demo-app-remix/tsconfig.json | 2 +- src/README.md | 24 +++++++++---------- ...{puppeteerServer.js => puppeteerServer.ts} | 4 ++-- 4 files changed, 17 insertions(+), 17 deletions(-) rename demo-app-remix/{server.js => server.ts} (94%) rename src/backend/{puppeteerServer.js => puppeteerServer.ts} (82%) diff --git a/demo-app-remix/server.js b/demo-app-remix/server.ts similarity index 94% rename from demo-app-remix/server.js rename to demo-app-remix/server.ts index 0efad6abe..1d7ef3982 100644 --- a/demo-app-remix/server.js +++ b/demo-app-remix/server.ts @@ -28,7 +28,7 @@ app.use(morgan("tiny")); app.all( "*", process.env.NODE_ENV === "development" - ? (req, res, next) => { + ? (req: any, res: any, next: any) => { purgeRequireCache(); return createRequestHandler({ @@ -41,7 +41,7 @@ app.all( mode: process.env.NODE_ENV, }) ); -const port = process.env.PORT || 3003; +const port: number | string = process.env.PORT || 3003; app.listen(port, () => { console.log(`Express server listening on port ${port}`); diff --git a/demo-app-remix/tsconfig.json b/demo-app-remix/tsconfig.json index 20f8a386a..0de0b2ee4 100644 --- a/demo-app-remix/tsconfig.json +++ b/demo-app-remix/tsconfig.json @@ -1,5 +1,5 @@ { - "include": ["remix.env.d.ts", "**/*.ts", "**/*.tsx"], + "include": ["remix.env.d.ts", "**/*.ts", "**/*.tsx", "server.ts"], "compilerOptions": { "lib": ["DOM", "DOM.Iterable", "ES2019"], "isolatedModules": true, diff --git a/src/README.md b/src/README.md index 68381d283..dff19e1c2 100644 --- a/src/README.md +++ b/src/README.md @@ -47,17 +47,19 @@ Similar approach for Next.js and Remix demo apps ## Linting _Before_ beginning development, especially on teams, make sure to configure your linter and code formatting to conform to one unified setting (We recommend [the Airbnb style guide](https://github.com/airbnb/javascript)!) This will make reviewing PRs much more readable and less error-prone.   -  +  + +# Possible Avenues for Future Iterators -# Possible Avenues for Future Iterators Here are some notes on the current state of Reactime and considerations for future development. ## Testing -For Reactime unit tests, pre-v.19 there were tests built out in two places. Backend tests were in backend >\_\_tests\_\_. Frontend tests were in src > app >\_\_tests\_\_. In v19, we specifically focused on rebuilding front tests to use React Testing Library (RTL) + Jest. Previously, front end testing existed but utilized Enzyme + Jest . Our decision to move to RTL stemmed on the fact that Enzyme did not support React V17 (third party Enzyme adaptor libraries were created to provide support to previous React versions, but were still very much out of date) and that Enzyme is no longer industry standard. We began the process of creating new frontend tests but they are not complete and this is a great place for future iterators to build out more. Since the new suite of RTL tests are not fully complete, we have kept the older Enzyme tests within the codebase to be referenced (src > app > __tests__enzyme). However, these will not be included in the tests run in the testing scripts. +For Reactime unit tests, pre-v.19 there were tests built out in two places. Backend tests were in backend >\_\_tests\_\_. Frontend tests were in src > app >\_\_tests\_\_. In v19, we specifically focused on rebuilding front tests to use React Testing Library (RTL) + Jest. Previously, front end testing existed but utilized Enzyme + Jest . Our decision to move to RTL stemmed on the fact that Enzyme did not support React V17 (third party Enzyme adaptor libraries were created to provide support to previous React versions, but were still very much out of date) and that Enzyme is no longer industry standard. We began the process of creating new frontend tests but they are not complete and this is a great place for future iterators to build out more. Since the new suite of RTL tests are not fully complete, we have kept the older Enzyme tests within the codebase to be referenced (src > app > **tests**enzyme). However, these will not be included in the tests run in the testing scripts. ## Including Support for Hooks Beyond useState -Reactime currently shows data stored via useState, but does not show data stored via other hooks such as useContext or useReducer. While showing this data would be simple, maintaining the time travel functionality of Reactime with these hooks would not. *Please see file demo-app/src/client/Components/ButtonsWithMoreHooks.jsx for more details.* + +Reactime currently shows data stored via useState, but does not show data stored via other hooks such as useContext or useReducer. While showing this data would be simple, maintaining the time travel functionality of Reactime with these hooks would not. _Please see file demo-app/src/client/Components/ButtonsWithMoreHooks.jsx for more details._ To see how hook data is stored on the fiber tree: @@ -71,12 +73,12 @@ To see how hook data is stored on the fiber tree: Any changes to console.logs in Reactime can be seen by refreshing the browser the app is running in. ## Replace Functionality for Outdated Packages -Packages emotion/core and material-ui/core haven't been updated to use React 18. This is the reason npm install --force is necessary when installing the dependencies of Reactime. Replacing the functionality these packages perform and removing them from Reactime would ensure compatibility moving forward. -React Developer Tools has deprecated \_\_REACT\_DEVTOOLS\_GLOBAL\_HOOK\_\_, which Reactime uses to extract a running application's fiber tree. At the time of the release of Reactime 19 (May 2023), this tool still works reliably to deliver said fiber tree. This will likely be the case until the React version (React version 18.2 at time of writing) undergoes updates that diverge beyond compatibility with \_\_REACT\_DEVTOOLS\_GLOBAL\_HOOK\_\_. At this time, Reactime will need to change how it extracts an application's fiber tree. +Packages emotion/core and material-ui/core haven't been updated to use React 18. This is the reason npm install --force is necessary when installing the dependencies of Reactime. Replacing the functionality these packages perform and removing them from Reactime would ensure compatibility moving forward. -Changing how Reactime extracts the fiber tree before said React version update may yeild diminishing result, as whatever method will also need to be updated to match React's breaking updates. +React Developer Tools has deprecated \_\_REACT_DEVTOOLS_GLOBAL_HOOK\_\_, which Reactime uses to extract a running application's fiber tree. At the time of the release of Reactime 19 (May 2023), this tool still works reliably to deliver said fiber tree. This will likely be the case until the React version (React version 18.2 at time of writing) undergoes updates that diverge beyond compatibility with \_\_REACT_DEVTOOLS_GLOBAL_HOOK\_\_. At this time, Reactime will need to change how it extracts an application's fiber tree. +Changing how Reactime extracts the fiber tree before said React version update may yeild diminishing result, as whatever method will also need to be updated to match React's breaking updates. ## Redux @@ -84,7 +86,6 @@ Can Reactime be integrated with Redux compatibility so applications using Redux Yes, but it would be very time-consuming and not the most feasible option while Redux devtools exists already. With how Redux devtools is currently set up, a developer is unable to use Redux devtools as a third-party user and integrate its functionality into their own application, as Redux devtools is meant to be used directly on an application using Redux for state-tracking purposes. Since the devtools do not appear to have a public API for integrated use in an application or it simply does not exist, Redux devtools would need to be rebuilt from the ground up and then integrated into Reactime, or built into Reactime directly still from scratch. - # File Structure In the _src_ folder, there are three directories we care about: _app_, _backend_, and _extension_. @@ -100,7 +101,7 @@ src/ │   ├── containers/ # More React components │   ├── reducers/ # Redux mechanism for updating state │   ├── styles/ # -│   ├── FrontendTypes.ts # Library of typescript interfaces +│   ├── FrontendTypes.ts # Library of typescript interfaces │   ├── index.tsx # Starting point for root App component │   ├── module.d.ts # │   └── store.tsx # @@ -127,7 +128,7 @@ src/ │   ├── index.d.ts # Definitely Type file for Index │   ├── module.d.ts # │   ├── package.json # -│   ├── puppeteerServer.js # +│   ├── puppeteerServer.ts # │ ├── extension/ # Chrome Extension code │   ├── build/ # Destination for bundles and manifest.json (Chrome config file) @@ -156,7 +157,6 @@ All the diagrams of data flows are available on [MIRO](https://miro.com/app/boar - Like regular web apps, Chrome Extensions are event-based. The background script is where one typically monitors for browser triggers (e.g. events like closing a tab, for example). The content script is what allows us to read or write to our target web application, usually as a result of [messages passed](https://developer.chrome.com/extensions/messaging) from the background script. - These two files help us handle requests both from the web browser and from the Reactime extension itself - ## Data Flow Architecture The general flow of data is described in the following steps: @@ -170,7 +170,6 @@ The general flow of data is described in the following steps: 3. Likewise, when Reactime emits an action due to user interaction -- a "jump" request for example -- a message will be passed from Reactime via the background script to the content script. Then, the content script will pass a message to the target application containing a payload that represents the state the user wants the DOM to reflect or "jump" to. - One important thing to note here is that this jump action must be dispatched in the target application (i.e. _backend_ land), because only there do we have direct access to the DOM. - # Reacti.me Website: See [Reacti.me README](https://github.com/reactimetravel/reactime-website/blob/main/README.md) for instruction of how to update the website @@ -239,6 +238,7 @@ Some relevant sections are reproduced below: - In other words, a background script works as a sort of middleman, directly maintaining connection with its parent extension, and acting as a proxy enabling communication between it and the content script. # Past Medium Articles for Reference + - [Reactime 19: What time is it? It’s still Reactime!](https://medium.com/@minzo.kim/what-time-is-it-its-still-reactime-d496adfa908c) - [Reactime 18.0. Better than ever](https://medium.com/@zdf2424/reactime-18-0-better-than-ever-148b81606257) - [Reactime v17.0.0: Now with support for the Context API, and a modern UI](https://medium.com/@reactime/reactime-v17-0-0-now-with-support-for-the-context-api-and-a-modern-ui-f0edf9e54dae) diff --git a/src/backend/puppeteerServer.js b/src/backend/puppeteerServer.ts similarity index 82% rename from src/backend/puppeteerServer.js rename to src/backend/puppeteerServer.ts index 4c11c7e0d..342c22347 100644 --- a/src/backend/puppeteerServer.js +++ b/src/backend/puppeteerServer.ts @@ -1,8 +1,8 @@ /* eslint-disable linebreak-style */ /* eslint-disable import/no-extraneous-dependencies */ /* eslint-disable @typescript-eslint/no-var-requires */ -const express = require('express'); -const path = require('path'); +import express from 'express'; +import path from 'path'; const app = express(); From a756755e3fcd0cb4fd8043844072c3c8ec1db0a2 Mon Sep 17 00:00:00 2001 From: James McCollough <100531603+j-mccoll@users.noreply.github.com> Date: Mon, 19 Jun 2023 15:34:09 -0400 Subject: [PATCH 45/70] Make action tests more robust --- src/app/__tests__/action.test.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/app/__tests__/action.test.tsx b/src/app/__tests__/action.test.tsx index d13fb5152..ee91db26b 100644 --- a/src/app/__tests__/action.test.tsx +++ b/src/app/__tests__/action.test.tsx @@ -87,14 +87,14 @@ describe('unit testing for Action.tsx', () => { test('Clicking the snapshot should trigger onClick', () => { render(); fireEvent.click(screen.getByRole('presentation')); - expect(props.dispatch).toHaveBeenCalledWith(changeView(2));; + expect(props.dispatch).toHaveBeenCalledWith(changeView(props.index));; }); test('Clicking Jump button should trigger changeSlider and changeView', () => { render(); fireEvent.click(screen.getAllByRole('button')[1]); - expect(props.dispatch).toHaveBeenCalledWith(changeSlider(2)); - expect(props.dispatch).toHaveBeenCalledWith(changeView(2)); + expect(props.dispatch).toHaveBeenCalledWith(changeSlider(props.index)); + expect(props.dispatch).toHaveBeenCalledWith(changeView(props.index)); }); }); }); From 15f7becf21fc4244aa0b378b07635352da3e52e3 Mon Sep 17 00:00:00 2001 From: James McCollough <100531603+j-mccoll@users.noreply.github.com> Date: Mon, 19 Jun 2023 15:37:19 -0400 Subject: [PATCH 46/70] Remove deprecated enzyme action tests --- .../__tests__enzyme/ignore/action.test.tsx | 75 ------------------- 1 file changed, 75 deletions(-) delete mode 100644 src/app/__tests__enzyme/ignore/action.test.tsx diff --git a/src/app/__tests__enzyme/ignore/action.test.tsx b/src/app/__tests__enzyme/ignore/action.test.tsx deleted file mode 100644 index f5801ef8c..000000000 --- a/src/app/__tests__enzyme/ignore/action.test.tsx +++ /dev/null @@ -1,75 +0,0 @@ -/* eslint-disable @typescript-eslint/no-explicit-any */ -/* eslint-disable @typescript-eslint/no-empty-function */ -/* eslint-disable @typescript-eslint/no-var-requires */ -/* eslint-disable react/jsx-props-no-spreading */ -import React from 'react'; -import { configure, shallow } from 'enzyme'; -import Adapter from 'enzyme-adapter-react-16'; -import { changeView, changeSlider } from '../../actions/actions'; - -const Action = require('../components/Action').default; - -configure({ adapter: new (Adapter as any)() }); - -describe('unit testing for Action.tsx', () => { - let wrapper; - const props = { - key: 'actions2', - selected: true, - last: false, - index: 2, - sliderIndex: 2, - dispatch: jest.fn(), - displayName: '3.0', - componentName: 'App', - logChangedState: jest.fn(), - componentData: { - actualDuration: 3.5, - }, - state: { test: 'test' }, - viewIndex: 2, - handleOnkeyDown: jest.fn(), - }; - beforeEach(() => { - wrapper = shallow(); - props.dispatch.mockClear(); - }); - - describe('Component', () => { - test.skip("should have a className 'action-component selected' if props.selected is true", () => { - wrapper.setProps({ selected: true }); - expect(wrapper.hasClass('action-component selected')).toEqual(true); - }); - - test("shouldn't have a className 'action-component selected' if props.selected is false", () => { - wrapper.setProps({ selected: false }); - expect(wrapper.hasClass('action-component selected')).toEqual(false); - }); - - test('should invoke dispatch method when clicked', () => { - wrapper.find('.action-component').simulate('click'); - expect(props.dispatch).toHaveBeenCalled(); - }); - - test('dispatch should send a changeView action', () => { - wrapper.find('.action-component').simulate('click'); - expect(props.dispatch.mock.calls[0][0]).toEqual(changeView(props.index)); - }); - }); - - describe('Jump Button', () => { - test("should render a div with a className 'jump-button' inside action-component", () => { - expect(wrapper.find('.action-component').children().find('.jump-button')).toHaveLength(1); - }); - - test('should invoke dispatch method when clicked', () => { - wrapper.find('.jump-button').simulate('click', { stopPropagation() {} }); - expect(props.dispatch).toHaveBeenCalled(); - }); - - test('dispatch should send a changeSlider action', () => { - wrapper.find('.jump-button').simulate('click', { stopPropagation() {} }); - expect(props.dispatch.mock.calls[0][0]).toEqual(changeSlider(props.index)); - }); - }); -}); From a31a21bc408d125e4065082ec4323a4479e93936 Mon Sep 17 00:00:00 2001 From: James McCollough <100531603+j-mccoll@users.noreply.github.com> Date: Mon, 19 Jun 2023 15:39:45 -0400 Subject: [PATCH 47/70] Remove deprecated enzyme ActionContainer tests --- .../ignore/ActionContainer.test.tsx | 144 ------------------ 1 file changed, 144 deletions(-) delete mode 100644 src/app/__tests__enzyme/ignore/ActionContainer.test.tsx diff --git a/src/app/__tests__enzyme/ignore/ActionContainer.test.tsx b/src/app/__tests__enzyme/ignore/ActionContainer.test.tsx deleted file mode 100644 index 483e8fc30..000000000 --- a/src/app/__tests__enzyme/ignore/ActionContainer.test.tsx +++ /dev/null @@ -1,144 +0,0 @@ -/* eslint-disable @typescript-eslint/no-explicit-any */ -/* eslint-disable react/jsx-filename-extension */ - -import { shallow, configure } from 'enzyme'; -import React from 'react'; -import Adapter from 'enzyme-adapter-react-16'; -import ActionContainer from '../containers/ActionContainer'; -import { useStoreContext } from '../store'; -import { emptySnapshots } from '../actions/actions'; -import Action from '../components/Action'; -import RouteDescription from '../components/RouteDescription'; - -configure({ adapter: new (Adapter as any)() }); - -const state = { - tabs: { - 87: { - snapshots: [1, 2, 3, 4], - hierarchy: { - index: 0, - name: 1, - branch: 0, - stateSnapshot: { - state: {}, - children: [ - { - state: { test: 'test' }, - name: 'App', - componentData: { actualDuration: 3.5 }, - }, - ], - route: { - id: 1, - url: 'http://localhost:8080/', - }, - }, - children: [ - { - index: 1, - name: 2, - branch: 0, - stateSnapshot: { - state: {}, - children: [ - { - state: { test: 'test' }, - name: 'App', - componentData: { actualDuration: 3.5 }, - }, - ], - route: { - id: 2, - url: 'http://localhost:8080/', - }, - }, - children: [ - { - index: 2, - name: 3, - branch: 0, - stateSnapshot: { - state: {}, - children: [ - { - state: { test: 'test' }, - name: 'App', - componentData: { actualDuration: 3.5 }, - }, - ], - route: { - id: 3, - url: 'http://localhost:8080/', - }, - }, - children: [ - { - index: 3, - name: 4, - branch: 0, - stateSnapshot: { - state: {}, - children: [ - { - state: { test: 'test' }, - name: 'App', - componentData: { actualDuration: 3.5 }, - }, - ], - route: { - id: 4, - url: 'http://localhost:8080/test/', - }, - }, - children: [], - }, - ], - }, - ], - }, - ], - }, - currLocation: { - index: 0, - name: 1, - branch: 0, - }, - sliderIndex: 0, - viewIndex: -1, - }, - }, - currentTab: 87, -}; - -const dispatch = jest.fn(); - -jest.mock('../store'); -useStoreContext.mockImplementation(() => [state, dispatch]); - -let wrapper; - -// actionView={true} must be passed in to in beforeEach() to deal with new -// conditional rendering in ActionContainer that shows/hides time-travel functionality - -beforeEach(() => { - wrapper = shallow(); - // wrapper2 = shallow(); - useStoreContext.mockClear(); - dispatch.mockClear(); -}); - -describe('testing the emptySnapshot button', () => { - test('emptySnapshot button should dispatch action upon click', () => { - wrapper.find('.empty-button').simulate('click'); - expect(dispatch.mock.calls.length).toBe(1); - }); - test('emptying snapshots should send emptySnapshot action to dispatch', () => { - wrapper.find('.empty-button').simulate('click'); - expect(dispatch.mock.calls[0][0]).toEqual(emptySnapshots()); - }); -}); - -test('number of RouteDescription components should reflect number of unique routes', () => { - expect(wrapper.find(RouteDescription).length).toBe(2); -}); From 252dbe43994fc9e9048901b61fca02be77688060 Mon Sep 17 00:00:00 2001 From: James McCollough <100531603+j-mccoll@users.noreply.github.com> Date: Mon, 19 Jun 2023 15:41:32 -0400 Subject: [PATCH 48/70] Remove deprecated enzyme ButtonsContainer tests --- .../ignore/ButtonsContainer.test.tsx | 67 ------------------- 1 file changed, 67 deletions(-) delete mode 100644 src/app/__tests__enzyme/ignore/ButtonsContainer.test.tsx diff --git a/src/app/__tests__enzyme/ignore/ButtonsContainer.test.tsx b/src/app/__tests__enzyme/ignore/ButtonsContainer.test.tsx deleted file mode 100644 index c547558ed..000000000 --- a/src/app/__tests__enzyme/ignore/ButtonsContainer.test.tsx +++ /dev/null @@ -1,67 +0,0 @@ -/* eslint-disable @typescript-eslint/no-explicit-any */ -/* eslint-disable react/jsx-filename-extension */ -import { shallow, configure } from 'enzyme'; -import React from 'react'; -import Adapter from 'enzyme-adapter-react-16'; -import ButtonsContainer from '../containers/ButtonsContainer'; -import { useStoreContext } from '../store'; -import { toggleMode } from '../actions/actions'; - -configure({ adapter: new (Adapter as any)() }); - -const state = { - tabs: { - 87: { - snapshots: [1, 2, 3, 4], - sliderIndex: 0, - viewIndex: -1, - mode: { - paused: false, - locked: false, - }, - }, - }, - currentTab: 87, -}; - -const currentTab = state.tabs[state.currentTab]; - -const dispatch = jest.fn(); - -jest.mock('../../../node_modules/intro.js/introjs.css', () => jest.fn()); -jest.mock('../store'); -useStoreContext.mockImplementation(() => [state, dispatch]); - -let wrapper; - -describe('testing the bottom buttons', () => { - beforeEach(() => { - wrapper = shallow(); - dispatch.mockClear(); - useStoreContext.mockClear(); - currentTab.mode = { - paused: false, - }; - }); - - describe('pause button testing', () => { - beforeEach(() => { - wrapper.find('.pause-button').simulate('click'); - }); - test('pause button dispatches upon click', () => { - expect(dispatch.mock.calls.length).toBe(1); - }); - - test('pause button dispatches toggleMode action', () => { - expect(dispatch.mock.calls[0][0]).toEqual(toggleMode('paused')); - }); - - test('pause button displays state', () => { - expect(wrapper.find('.pause-button').text()).toBe('Lock'); - state.tabs[state.currentTab].mode.paused = true; - wrapper = shallow(); - expect(wrapper.find('.pause-button').text()).toBe('Unlock'); - }); - }); - -}); From 1957e53125a71f68a9554ea2e99c4c09c256572d Mon Sep 17 00:00:00 2001 From: James McCollough <100531603+j-mccoll@users.noreply.github.com> Date: Mon, 19 Jun 2023 15:45:08 -0400 Subject: [PATCH 49/70] Remove deprecated enzyme ComponentMap tests --- .../ignore/ComponentMap.test.tsx | 23 ------------------- 1 file changed, 23 deletions(-) delete mode 100644 src/app/__tests__enzyme/ignore/ComponentMap.test.tsx diff --git a/src/app/__tests__enzyme/ignore/ComponentMap.test.tsx b/src/app/__tests__enzyme/ignore/ComponentMap.test.tsx deleted file mode 100644 index 1e1b3a626..000000000 --- a/src/app/__tests__enzyme/ignore/ComponentMap.test.tsx +++ /dev/null @@ -1,23 +0,0 @@ -/* eslint:disable */ - -import * as d3 from 'd3'; - -describe('D3Canvas Testing', () => { - const getCanvas = () => { - return d3.select('#canvas'); - }; - - it('should exist', () => { - expect(getCanvas()).not.toBeNull(); - }); -}); - -describe('D3 Node Testing', () => { - const getNodes = () => { - return d3.select('g'); - }; - - it('should exist', () => { - expect(getNodes()).not.toBeNull(); - }); -}); From d59e2f5ca90feff3b66b9bd65fb80cbbee7110d0 Mon Sep 17 00:00:00 2001 From: James McCollough <100531603+j-mccoll@users.noreply.github.com> Date: Mon, 19 Jun 2023 15:56:02 -0400 Subject: [PATCH 50/70] Remove deprecated enzyme drowdown tests --- .../__tests__enzyme/ignore/dropdown.test.tsx | 43 ------------------- 1 file changed, 43 deletions(-) delete mode 100644 src/app/__tests__enzyme/ignore/dropdown.test.tsx diff --git a/src/app/__tests__enzyme/ignore/dropdown.test.tsx b/src/app/__tests__enzyme/ignore/dropdown.test.tsx deleted file mode 100644 index 6eb3563ed..000000000 --- a/src/app/__tests__enzyme/ignore/dropdown.test.tsx +++ /dev/null @@ -1,43 +0,0 @@ -/* eslint-disable @typescript-eslint/no-explicit-any */ -/* eslint-disable @typescript-eslint/no-var-requires */ -/* eslint-disable react/jsx-props-no-spreading */ -/* eslint-disable react/jsx-filename-extension */ -import React from 'react'; -import { configure, shallow } from 'enzyme'; -import Adapter from 'enzyme-adapter-react-16'; - -const Dropdown = require('../components/Dropdown').default; - -configure({ adapter: new (Adapter as any)() }); - -describe('unit testing for Dropdown.jsx', () => { - let wrapper; - const props = { - speeds: [ - { value: 1234, label: '0.5x' }, - { value: 312, label: '1.0x' }, - { value: 23, label: '2.0x' }, - ], - setSpeed: jest.fn(), - selectedSpeed: { value: 312, label: '1.0x' }, - }; - beforeEach(() => { - wrapper = shallow(); - }); - - describe('Component', () => { - test('array of objects that have value and label should be options props', () => { - expect(wrapper.props().options).toEqual(props.speeds); - }); - test('selectedOption should be value property', () => { - expect(wrapper.props().value).toEqual(props.selectedSpeed); - }); - }); - - describe('setSpeed', () => { - test('should invoke setSpeed on change', () => { - wrapper.simulate('change', { value: 2000, label: '0.5x' }); - expect(props.setSpeed).toHaveBeenCalled(); - }); - }); -}); From 653d59f0306ceb60b4784f4e5153e82f408d776d Mon Sep 17 00:00:00 2001 From: James McCollough <100531603+j-mccoll@users.noreply.github.com> Date: Mon, 19 Jun 2023 15:58:25 -0400 Subject: [PATCH 51/70] Remove deprecated enzyme History tests --- .../__tests__enzyme/ignore/History.test.tsx | 19 ------------------- 1 file changed, 19 deletions(-) delete mode 100644 src/app/__tests__enzyme/ignore/History.test.tsx diff --git a/src/app/__tests__enzyme/ignore/History.test.tsx b/src/app/__tests__enzyme/ignore/History.test.tsx deleted file mode 100644 index 34e118c8d..000000000 --- a/src/app/__tests__enzyme/ignore/History.test.tsx +++ /dev/null @@ -1,19 +0,0 @@ -/* eslint:disable */ - -import * as d3 from 'd3'; - -describe('D3 Canvas Testing', () => { - const getCanvas = () => d3.select('#canvas'); - - it('should render', () => { - expect(getCanvas()).not.toBeNull(); - }); -}); - -describe('D3 Node Testing', () => { - const getNodes = () => d3.select('g'); - - it('should render', () => { - expect(getNodes()).not.toBeNull(); - }); -}); From 1ad731b381828d1783c05d4c24ad76db0165f620 Mon Sep 17 00:00:00 2001 From: James McCollough <100531603+j-mccoll@users.noreply.github.com> Date: Mon, 19 Jun 2023 15:59:32 -0400 Subject: [PATCH 52/70] Remove deprecated enzyme index test --- src/app/__tests__enzyme/ignore/index.test.tsx | 11 ----------- 1 file changed, 11 deletions(-) delete mode 100644 src/app/__tests__enzyme/ignore/index.test.tsx diff --git a/src/app/__tests__enzyme/ignore/index.test.tsx b/src/app/__tests__enzyme/ignore/index.test.tsx deleted file mode 100644 index 8f63502fe..000000000 --- a/src/app/__tests__enzyme/ignore/index.test.tsx +++ /dev/null @@ -1,11 +0,0 @@ -/* eslint-disable @typescript-eslint/no-var-requires */ -import React from 'react'; -import ReactDOM from 'react-dom'; - -const App = require('../components/App').default; - -jest.mock('../../../node_modules/intro.js/introjs.css', () => jest.fn()); -it('renders without crashing', () => { - const root = document.createElement('root'); - ReactDOM.render(, root); -}); From 0565c8ec382ddfb5caf42b77a6a296fab749a8c2 Mon Sep 17 00:00:00 2001 From: James McCollough <100531603+j-mccoll@users.noreply.github.com> Date: Mon, 19 Jun 2023 16:06:57 -0400 Subject: [PATCH 53/70] Remove deprecated enzyme MainContainer tests --- .../ignore/MainContainer.test.tsx | 77 ------------------- 1 file changed, 77 deletions(-) delete mode 100644 src/app/__tests__enzyme/ignore/MainContainer.test.tsx diff --git a/src/app/__tests__enzyme/ignore/MainContainer.test.tsx b/src/app/__tests__enzyme/ignore/MainContainer.test.tsx deleted file mode 100644 index d4303d452..000000000 --- a/src/app/__tests__enzyme/ignore/MainContainer.test.tsx +++ /dev/null @@ -1,77 +0,0 @@ -/* eslint-disable @typescript-eslint/no-explicit-any */ -/* eslint-disable @typescript-eslint/no-empty-function */ -/* eslint-disable @typescript-eslint/no-var-requires */ -/* eslint-disable react/jsx-filename-extension */ -import { shallow, configure } from 'enzyme'; -import React from 'react'; -import Adapter from 'enzyme-adapter-react-16'; -import MainContainer from '../containers/MainContainer'; -import { useStoreContext } from '../store'; - -import ActionContainer from '../containers/ActionContainer'; -import StateContainer from '../containers/StateContainer'; -import TravelContainer from '../containers/TravelContainer'; -import ButtonsContainer from '../containers/ButtonsContainer'; -import ErrorContainer from '../containers/ErrorContainer'; - -const chrome = require('sinon-chrome'); - -configure({ adapter: new (Adapter as any)() }); - -const state = { - tabs: {}, - currentTab: null, -}; - -const dispatch = jest.fn(); -jest.mock('../../../node_modules/intro.js/introjs.css', () => jest.fn()); -jest.mock('../store'); -useStoreContext.mockImplementation(() => [state, dispatch]); - -let wrapper; -global.chrome = chrome; -const port = { - onMessage: { - addListener: () => {}, - }, - onDisconnect: { - addListener: () => {}, - }, -}; -chrome.runtime.connect.returns(port); - -beforeEach(() => { - wrapper = shallow(); - useStoreContext.mockClear(); - dispatch.mockClear(); -}); - -describe('MainContainer rendering', () => { - test('With no snapshots, should not render any containers', () => { - expect(wrapper.find(ErrorContainer).length).toBe(1); - expect(wrapper.find(ActionContainer).length).toBe(0); - expect(wrapper.find(StateContainer).length).toBe(0); - expect(wrapper.find(TravelContainer).length).toBe(0); - expect(wrapper.find(ButtonsContainer).length).toBe(0); - }); - test('With snapshots, should render all containers', () => { - state.currentTab = 87; - state.tabs[87] = { - snapshots: [{}], - status: { - contentScriptLaunched: true, - reactDevToolsInstalled: true, - targetPageisaReactApp: true, - }, - viewIndex: -1, - sliderIndex: 0, - mode: {}, - }; - - wrapper = shallow(); - expect(wrapper.find(ActionContainer).length).toBe(1); - expect(wrapper.find(StateContainer).length).toBe(1); - expect(wrapper.find(TravelContainer).length).toBe(1); - expect(wrapper.find(ButtonsContainer).length).toBe(1); - }); -}); From d1049a619893f71d119edd8bd80d4fee23bee1f5 Mon Sep 17 00:00:00 2001 From: James McCollough <100531603+j-mccoll@users.noreply.github.com> Date: Mon, 19 Jun 2023 16:09:32 -0400 Subject: [PATCH 54/70] Remove deprecated enzyme MainSlider tests --- .../ignore/MainSlider.test.tsx | 65 ------------------- 1 file changed, 65 deletions(-) delete mode 100644 src/app/__tests__enzyme/ignore/MainSlider.test.tsx diff --git a/src/app/__tests__enzyme/ignore/MainSlider.test.tsx b/src/app/__tests__enzyme/ignore/MainSlider.test.tsx deleted file mode 100644 index 3f365f730..000000000 --- a/src/app/__tests__enzyme/ignore/MainSlider.test.tsx +++ /dev/null @@ -1,65 +0,0 @@ -/* eslint-disable @typescript-eslint/no-explicit-any */ -/* eslint-disable react/jsx-props-no-spreading */ -import { shallow, configure } from 'enzyme'; -import React from 'react'; -import Adapter from 'enzyme-adapter-react-16'; -import Slider from 'rc-slider'; -import Tooltip from 'rc-tooltip'; -import MainSlider from '../components/MainSlider'; - -import { useStoreContext } from '../store'; - -configure({ adapter: new (Adapter as any)() }); - -jest.mock('../store'); -// the handle function in MainSlider returns out a Tooltip Component -const handle = Tooltip; - -describe('Unit testing for MainSlider.jsx', () => { - let wrapper; - const props = { - snapshotsLength: 1, - }; - - const state = { - tabs: { - 100: { - sliderIndex: 1, - }, - }, - currentTab: 100, - }; - - const dispatch = jest.fn(); - useStoreContext.mockImplementation(() => [state, dispatch]); - - beforeEach(() => { - wrapper = shallow(); - dispatch.mockClear(); - }); - it('Component should return component from rc-slider library', () => { - expect(wrapper.type()).toEqual(Slider); - }); - it('Component should have min, max, value, and handle props', () => { - expect(wrapper.props()).toHaveProperty('min'); - expect(wrapper.props()).toHaveProperty('max'); - expect(wrapper.props()).toHaveProperty('value'); - expect(wrapper.props()).toHaveProperty('handle'); - }); - it('Prop type tests on component', () => { - expect(typeof wrapper.prop('min')).toEqual('number'); - expect(typeof wrapper.prop('max')).toEqual('number'); - expect(typeof wrapper.prop('value')).toEqual('number'); - expect(typeof wrapper.prop('handle')).toEqual('function'); - }); - - describe('Testing for handle functional component', () => { - // this doesnt work, not sure how to implement yet - // the handle function should return a Tooltip component - // eslint-disable-next-line jest/no-test-prefixes - // eslint-disable-next-line jest/no-disabled-tests - it.skip('handle prop should return component from rc-tooltip library', () => { - expect(wrapper.prop('handle')()).toEqual(handle); - }); - }); -}); From d7d7b0ffb51f386e5ed512cf59cc433ccce84326 Mon Sep 17 00:00:00 2001 From: James McCollough <100531603+j-mccoll@users.noreply.github.com> Date: Mon, 19 Jun 2023 16:22:34 -0400 Subject: [PATCH 55/70] Refactor test in ButtonContainer --- src/app/__tests__/ButtonContainer.test.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/__tests__/ButtonContainer.test.tsx b/src/app/__tests__/ButtonContainer.test.tsx index 5f5fcb5b8..2ca667a3b 100644 --- a/src/app/__tests__/ButtonContainer.test.tsx +++ b/src/app/__tests__/ButtonContainer.test.tsx @@ -63,7 +63,7 @@ describe('Unit testing for ButtonContainer', () => { describe('When view is unlock', () => { test('Button should show as unlocked', () => { - state.tabs['87'].mode.paused = true; + state.tabs['87'].mode.paused = false; render(); expect(screen.getAllByRole('button')[0]).toHaveTextContent('Unlocked'); }); From 757b39347f4281aff98895643b870c5fadb82996 Mon Sep 17 00:00:00 2001 From: James McCollough <100531603+j-mccoll@users.noreply.github.com> Date: Mon, 19 Jun 2023 16:28:42 -0400 Subject: [PATCH 56/70] Remove deprecated enzyme TravelContainer tests --- .../ignore/TravelContainer.test.tsx | 85 ------------------- 1 file changed, 85 deletions(-) delete mode 100644 src/app/__tests__enzyme/ignore/TravelContainer.test.tsx diff --git a/src/app/__tests__enzyme/ignore/TravelContainer.test.tsx b/src/app/__tests__enzyme/ignore/TravelContainer.test.tsx deleted file mode 100644 index 14ac57eb4..000000000 --- a/src/app/__tests__enzyme/ignore/TravelContainer.test.tsx +++ /dev/null @@ -1,85 +0,0 @@ -/* eslint-disable @typescript-eslint/no-explicit-any */ -/* eslint-disable react/jsx-filename-extension */ -import { shallow, configure } from 'enzyme'; -import React from 'react'; -import Adapter from 'enzyme-adapter-react-16'; -import TravelContainer from '../containers/TravelContainer'; -import MainSlider from '../components/MainSlider'; -import Dropdown from '../components/Dropdown'; -import { useStoreContext } from '../store'; -import { moveBackward, moveForward } from '../actions/actions'; - -configure({ adapter: new (Adapter as any)() }); - -const state = { - tabs: { - 87: { - snapshots: [1, 2, 3, 4], - sliderIndex: 2, - playing: true, - }, - }, - currentTab: 87, -}; - -const dispatch = jest.fn(); -jest.mock('../store'); -useStoreContext.mockImplementation(() => [state, dispatch]); - -let wrapper; - -beforeEach(() => { - wrapper = shallow(); - useStoreContext.mockClear(); - dispatch.mockClear(); -}); - -describe(' rendering', () => { - test('should render three buttons', () => { - expect(wrapper.find('button')).toHaveLength(3); - }); - test('should render one MainSlider', () => { - expect(wrapper.find(MainSlider)).toHaveLength(1); - }); - test('should render one Dropdown', () => { - expect(wrapper.find(Dropdown)).toHaveLength(1); - }); -}); - -describe('testing the backward-button', () => { - test('should dispatch action upon click', () => { - wrapper.find('.backward-button').simulate('click'); - expect(dispatch.mock.calls.length).toBe(1); - }); - - test('should send moveBackward action to dispatch', () => { - wrapper.find('.backward-button').simulate('click'); - expect(dispatch.mock.calls[0][0]).toEqual(moveBackward()); - }); -}); - -describe('testing the forward-button', () => { - test('should dispatch action upon click', () => { - wrapper.find('.forward-button').simulate('click'); - expect(dispatch.mock.calls.length).toBe(1); - }); - - test('should send moveforward action to dispatch', () => { - wrapper.find('.forward-button').simulate('click'); - expect(dispatch.mock.calls[0][0]).toEqual(moveForward()); - }); -}); - -describe('testing the play-button', () => { - test("should display 'pause' if playing is true", () => { - state.tabs[87].playing = true; - wrapper = shallow(); - expect(wrapper.find('.play-button').text()).toBe('Pause'); - }); - - test('should display play if playing is false', () => { - state.tabs[87].playing = false; - wrapper = shallow(); - expect(wrapper.find('.play-button').text()).toBe('Play'); - }); -}); From bccf7fda232220b435c178c11ddc0d5a5d3bd026 Mon Sep 17 00:00:00 2001 From: James McCollough <100531603+j-mccoll@users.noreply.github.com> Date: Mon, 19 Jun 2023 16:29:45 -0400 Subject: [PATCH 57/70] Remove deprecated enzyme WebMetrics tests --- .../ignore/WebMetrics.test.tsx | 22 ------------------- 1 file changed, 22 deletions(-) delete mode 100644 src/app/__tests__enzyme/ignore/WebMetrics.test.tsx diff --git a/src/app/__tests__enzyme/ignore/WebMetrics.test.tsx b/src/app/__tests__enzyme/ignore/WebMetrics.test.tsx deleted file mode 100644 index 7c5b7674e..000000000 --- a/src/app/__tests__enzyme/ignore/WebMetrics.test.tsx +++ /dev/null @@ -1,22 +0,0 @@ -/* eslint:disable */ -import React from 'react'; -import { shallow, configure } from 'enzyme'; -import Adapter from 'enzyme-adapter-react-16'; -import WebMetrics from '../components/WebMetrics'; -import { expect } from 'chai'; - -//the WebMetrics container should render 4
elements, each with id="card" -//the WebMetrics container is itself
-configure({ adapter: new (Adapter as any)() }); - -let wrapper = shallow(); - -describe('WebMetrics graph testing', () => { - it('should have 1 div with class name "metric" ', () => { - expect(wrapper.find('.metric')).to.have.lengthOf(1); - }); - - it('should have 1 div with id "chart" ', () => { - expect(wrapper.find('#chart')).to.have.lengthOf(1); - }); -}); From 796feca9bffb1eff30470d0fdca1f1fada303465 Mon Sep 17 00:00:00 2001 From: James McCollough <100531603+j-mccoll@users.noreply.github.com> Date: Mon, 19 Jun 2023 18:17:08 -0400 Subject: [PATCH 58/70] Remove deprecated enzyme Diff tests --- src/app/__tests__enzyme/ignore/Diff.test.tsx | 79 -------------------- 1 file changed, 79 deletions(-) delete mode 100644 src/app/__tests__enzyme/ignore/Diff.test.tsx diff --git a/src/app/__tests__enzyme/ignore/Diff.test.tsx b/src/app/__tests__enzyme/ignore/Diff.test.tsx deleted file mode 100644 index 6214f734a..000000000 --- a/src/app/__tests__enzyme/ignore/Diff.test.tsx +++ /dev/null @@ -1,79 +0,0 @@ -/* eslint-disable @typescript-eslint/no-explicit-any */ -/* eslint-disable @typescript-eslint/no-var-requires */ -import React from 'react'; -import { configure, shallow } from 'enzyme'; -import Adapter from 'enzyme-adapter-react-16'; -import { useStoreContext } from '../store'; - -const Diff = require('../components/Diff').default; - -configure({ adapter: new (Adapter as any)() }); - -jest.mock('../store'); - -describe('Unit testing for Diff.jsx', () => { - let wrapper; - const props = { - show: false, - snapshot: [ - { - children: [ - { - state: { total: 12, next: 5, operation: null }, - }, - ], - }, - ], - }; - - const state = { - currentTab: 100, - tabs: { 100: { snapshots: [1, 2, 3, 4], viewIndex: 1, sliderIndex: 1 } }, - }; - - useStoreContext.mockImplementation(() => [state]); - - const delta = { children: {} }; // expect delta to be an obj - const html = 'html'; // expect html to be a string - const previous = { state: 'string', children: {} }; // expect previous to be an obj - - beforeEach(() => { - // eslint-disable-next-line react/jsx-props-no-spreading - wrapper = shallow(); - }); - - describe('delta', () => { - it('delta variable should be an object, with a property children', () => { - expect(typeof delta).toBe('object'); - expect(delta).toHaveProperty('children'); - }); - }); - - describe('html', () => { - it('html variable should be a string', () => { - expect(typeof html).toBe('string'); - }); - }); - - describe('previous', () => { - it('previous variable should be a object', () => { - expect(previous).toHaveProperty('state'); - expect(previous).toHaveProperty('children'); - expect(typeof previous).toBe('object'); - }); - }); - - describe('Diff Component', () => { - it('Check if Diff component is a div', () => { - expect(wrapper.type()).toEqual('div'); - }); - it('Check if Diff component inner text value is a string', () => { - expect(typeof wrapper.text()).toEqual('string'); - }); - it('Check if previous and delta is defined Diff should not have text content "No state change detected. Trigger an event to change state"', () => { - expect(wrapper.textContent).not.toEqual( - 'No state change detected. Trigger an event to change state', - ); - }); - }); -}); From 809fd8112b19dc1bd99d8f1bf10dc9386646166c Mon Sep 17 00:00:00 2001 From: James McCollough <100531603+j-mccoll@users.noreply.github.com> Date: Mon, 19 Jun 2023 18:18:14 -0400 Subject: [PATCH 59/70] Remove deprecated enzyme DiffRoute tests --- .../__tests__enzyme/ignore/DiffRoute.test.tsx | 44 ------------------- 1 file changed, 44 deletions(-) delete mode 100644 src/app/__tests__enzyme/ignore/DiffRoute.test.tsx diff --git a/src/app/__tests__enzyme/ignore/DiffRoute.test.tsx b/src/app/__tests__enzyme/ignore/DiffRoute.test.tsx deleted file mode 100644 index 33ac03ab0..000000000 --- a/src/app/__tests__enzyme/ignore/DiffRoute.test.tsx +++ /dev/null @@ -1,44 +0,0 @@ -/* eslint-disable @typescript-eslint/no-explicit-any */ -/* eslint-disable @typescript-eslint/no-var-requires */ -import React from 'react'; -import { configure, shallow } from 'enzyme'; -import Adapter from 'enzyme-adapter-react-16'; -import { MemoryRouter as Router, Switch } from 'react-router-dom'; - -const DiffRoute = require('../components/DiffRoute').default; - -const props = { - snapshot: [{}], -}; - -configure({ adapter: new (Adapter as any)() }); -let wrapper; - -describe('DiffRoute props', () => { - it('should have a property called snapshot', () => { - expect(props).toHaveProperty('snapshot'); - }); - it('props snapshot value should be an array', () => { - expect(Array.isArray(props.snapshot)).toBe(true); - }); -}); - -describe('DiffRoute component', () => { - beforeEach(() => { - wrapper = shallow(); - }); - it('should contain a router component', () => { - expect(wrapper.find(Router).type()).toEqual(Router); - }); - it('div tag in Router should have a classname "navbar', () => { - expect(wrapper.find('.navbar').type()).toBe('div'); - }); - it('router should have a switch component', () => { - expect(wrapper.find(Switch).type()).toEqual(Switch); - }); -}); - -// remaining tests: -// check if router component has a div with a navlik component -// check if navlinks go to appropriate routes, and text shows Tree and Raw -// check if routes in switch have appropriate props From 1f2534ac48b315db65d960101bd2fcc6e42fb5f2 Mon Sep 17 00:00:00 2001 From: James McCollough <100531603+j-mccoll@users.noreply.github.com> Date: Mon, 19 Jun 2023 18:18:41 -0400 Subject: [PATCH 60/70] Remove deprecated enzyme mainReducer tests --- .../ignore/mainReducer.test.tsx | 404 ------------------ 1 file changed, 404 deletions(-) delete mode 100644 src/app/__tests__enzyme/ignore/mainReducer.test.tsx diff --git a/src/app/__tests__enzyme/ignore/mainReducer.test.tsx b/src/app/__tests__enzyme/ignore/mainReducer.test.tsx deleted file mode 100644 index 95c053d3a..000000000 --- a/src/app/__tests__enzyme/ignore/mainReducer.test.tsx +++ /dev/null @@ -1,404 +0,0 @@ -/* eslint-disable @typescript-eslint/no-empty-function */ -/* eslint-disable max-len */ -import mainReducer from '../reducers/mainReducer'; -import { - toggleMode, - addNewSnapshots, - initialConnect, - setPort, - emptySnapshots, - changeView, - changeSlider, - moveBackward, - moveForward, - playForward, - pause, - startPlaying, - importSnapshots, - setTab, - deleteTab, -} from '../actions/actions'; - -describe('mainReducer testing', () => { - let state; - let currentTab; - beforeEach(() => { - state = { - tabs: { - 87: { - snapshots: [1, 2, 3, 4], - sliderIndex: 2, - viewIndex: -1, - mode: { - paused: false, - locked: false, - }, - intervalId: 87, - playing: true, - index: 3, - // should be a linked list with four nodes - hierarchy: { - index: 0, - name: 1, - branch: 0, - stateSnapshot: { - state: {}, - children: [ - { - state: { test: 'test' }, - name: 'App', - componentData: { actualDuration: 3.5 }, - }, - ], - }, - children: [ - { - index: 1, - name: 2, - branch: 0, - stateSnapshot: { - state: {}, - children: [ - { - state: { test: 'test' }, - name: 'App', - componentData: { actualDuration: 3.5 }, - }, - ], - }, - children: [ - { - index: 2, - name: 3, - branch: 0, - stateSnapshot: { - state: {}, - children: [ - { - state: { test: 'test' }, - name: 'App', - componentData: { actualDuration: 3.5 }, - }, - ], - }, - children: [ - { - index: 3, - name: 4, - branch: 0, - stateSnapshot: { - state: {}, - children: [ - { - state: { test: 'test' }, - name: 'App', - componentData: { actualDuration: 3.5 }, - }, - ], - }, - children: [], - }, - ], - }, - ], - }, - ], - }, - // currLocation: null, - // should point to the last node in hierarchy - currLocation: 4, - }, - 75: { - snapshots: [1, 2, 3, 4], - sliderIndex: 3, - viewIndex: -1, - mode: { - paused: false, - locked: false, - }, - intervalId: 75, - playing: false, - // should be a linked list with four nodes - hierarchy: { - index: 0, - name: 1, - branch: 0, - stateSnapshot: { - state: {}, - children: [ - { - state: { test: 'test' }, - name: 'App', - componentData: { actualDuration: 3.5 }, - }, - ], - }, - children: [ - { - index: 1, - name: 2, - branch: 0, - stateSnapshot: { - state: {}, - children: [ - { - state: { test: 'test' }, - name: 'App', - componentData: { actualDuration: 3.5 }, - }, - ], - }, - children: [ - { - index: 2, - name: 3, - branch: 0, - stateSnapshot: { - state: {}, - children: [ - { - state: { test: 'test' }, - name: 'App', - componentData: { actualDuration: 3.5 }, - }, - ], - }, - children: [ - { - index: 3, - name: 4, - branch: 0, - stateSnapshot: { - state: {}, - children: [ - { - state: { test: 'test' }, - name: 'App', - componentData: { actualDuration: 3.5 }, - }, - ], - }, - children: [], - }, - ], - }, - ], - }, - ], - }, - // currLocation: null, - // should point to the last node in hierarchy - currLocation: 4, - }, - }, - currentTab: 87, - port: { - postMessage: () => {}, - }, - }; - - // eslint-disable-next-line prefer-destructuring - currentTab = state.currentTab; - }); - - describe('moveBackward', () => { - it('should decrement sliderIndex by 1', () => { - expect(mainReducer(state, moveBackward()).tabs[currentTab].sliderIndex).toEqual(1); - expect(mainReducer(state, moveBackward()).tabs[currentTab].playing).toEqual(false); - }); - it('should not decrement if sliderIndex is zero', () => { - state.tabs[currentTab].sliderIndex = 0; - const { sliderIndex } = mainReducer(state, moveBackward()).tabs[currentTab]; - expect(sliderIndex).toBe(0); - }); - }); - - describe('moveForward', () => { - it('should increment sliderIndex by 1', () => { - expect(mainReducer(state, moveForward()).tabs[currentTab].sliderIndex).toEqual(3); - expect(mainReducer(state, moveForward()).tabs[currentTab].playing).toEqual(false); - }); - it('should not increment past end value if sliderIndex at end', () => { - state.tabs[currentTab].sliderIndex = 3; - const { sliderIndex } = mainReducer(state, moveForward()).tabs[currentTab]; - expect(sliderIndex).toBe(3); - }); - it('should not change playing if not coming from user', () => { - const { playing } = mainReducer(state, playForward()).tabs[currentTab]; - expect(playing).toBe(true); - }); - }); - - describe('changeView', () => { - it('should unselect view if same index was selected', () => { - state.tabs[currentTab].viewIndex = 1; - expect(mainReducer(state, changeView(1)).tabs[currentTab].viewIndex).toEqual(-1); - }); - it('change viewIndex when unselected', () => { - expect(mainReducer(state, changeView(2)).tabs[currentTab].viewIndex).toEqual(2); - }); - }); - - describe('changeSlider', () => { - it('should change sliderIndex', () => { - expect(mainReducer(state, changeSlider(2)).tabs[currentTab].sliderIndex).toEqual(2); - }); - // should also change view - }); - - describe('empty', () => { - it('should empty snapshots except the first one', () => { - expect(mainReducer(state, emptySnapshots()).tabs[currentTab].sliderIndex).toEqual(0); - expect(mainReducer(state, emptySnapshots()).tabs[currentTab].viewIndex).toEqual(0); - expect(mainReducer(state, emptySnapshots()).tabs[currentTab].playing).toEqual(false); - expect(mainReducer(state, emptySnapshots()).tabs[currentTab].snapshots).toEqual([ - state.tabs[currentTab].snapshots[state.tabs[currentTab].snapshots.length - 1], - ]); - }); - // should push slider back to start position - }); - - describe('setPort', () => { - it('should set port when connection', () => { - expect(mainReducer(state, setPort('newPort')).port).toEqual('newPort'); - }); - }); - - describe('Import', () => { - it('importing file should replace snapshots of devtool', () => { - expect(mainReducer(state, importSnapshots([100, 101])).tabs[currentTab].snapshots).toEqual([ - 100, 101, - ]); - }); - }); - - describe('Toggle Mode', () => { - it('clicking pause button should only change pause mode', () => { - const { mode } = mainReducer(state, toggleMode('paused')).tabs[currentTab]; - expect(mode.paused).toBe(true); - expect(mode.locked).toBe(false); - }); - it('clicking lock button should only change lock mode', () => { - const { mode } = mainReducer(state, toggleMode('locked')).tabs[currentTab]; - expect(mode.paused).toBe(false); - expect(mode.locked).toBe(true); - }); - it('undefined payload does nothing', () => { - const { mode } = mainReducer(state, toggleMode('undefined')).tabs[currentTab]; - expect(mode.paused).toBe(false); - expect(mode.locked).toBe(false); - }); - }); - - describe('slider pause', () => { - it('should set playing to false and intervalId to null', () => { - const playedTab = mainReducer(state, pause()).tabs[currentTab]; - expect(playedTab.playing).toBe(false); - expect(playedTab.intervalId).toBe(null); - }); - }); - - describe('slider play', () => { - it('should set playing to true and intervalId to payload', () => { - const playedTab = mainReducer(state, startPlaying(333)).tabs[currentTab]; - expect(playedTab.playing).toBe(true); - expect(playedTab.intervalId).toBe(333); - }); - }); - - describe('Initial Connect', () => { - const newTab = { - 104: { - snapshots: [1, 2, 3, 8], - sliderIndex: 3, - viewIndex: -1, - mode: { - paused: false, - locked: false, - }, - intervalId: 912, - playing: true, - }, - }; - it('should add new tab', () => { - const addedTab = mainReducer(state, initialConnect(newTab)).tabs[104]; - expect(addedTab).not.toBe(undefined); - }); - it('should force some values to default', () => { - const addedTab = mainReducer(state, initialConnect(newTab)).tabs[104]; - expect(addedTab.sliderIndex).toBe(0); - expect(addedTab.viewIndex).toBe(-1); - expect(addedTab.intervalId).toBe(null); - expect(addedTab.playing).toBe(false); - }); - it('snapshots should match the payload', () => { - const addedTab = mainReducer(state, initialConnect(newTab)).tabs[104]; - expect(addedTab.snapshots).toEqual(newTab[104].snapshots); - }); - it('if currentTab undefined currentTab becomes firstTab', () => { - state.currentTab = undefined; - const addedTab = mainReducer(state, initialConnect(newTab)); - expect(addedTab.currentTab).toBe(104); - }); - }); - - // This test is breaking, please troubleshoot - // describe('new snapshots', () => { - // const newSnapshots = { - // 87: { - // snapshots: [1, 2, 3, 4, 5], - // sliderIndex: 2, - // viewIndex: -1, - // mode: { - // paused: false, - // locked: false, - // persist: false, - // }, - // intervalId: 87, - // playing: true, - // }, - // }; - // it('update snapshots of corresponding tabId', () => { - // const updated = mainReducer(state, addNewSnapshots(newSnapshots)); - // expect(updated.tabs[87].snapshots).toEqual(newSnapshots[87].snapshots); - // }); - // it('should delete tabs that are deleted from background script', () => { - // const updated = mainReducer(state, addNewSnapshots(newSnapshots)); - // expect(updated.tabs[75]).toBe(undefined); - // }); - // it('if currentTab undefined currentTab becomes first Tab', () => { - // state.currentTab = undefined; - // const updated = mainReducer(state, addNewSnapshots(newSnapshots)); - // expect(updated.currentTab).toBe(87); - // }); - // }); - - describe('set_tab', () => { - it('should set tab to payload', () => { - const newCurrentTab = mainReducer(state, setTab(75)).currentTab; - expect(newCurrentTab).toBe(75); - }); - }); - - describe('delete_tab', () => { - it('should delete only payload tab from state', () => { - const afterDelete = mainReducer(state, deleteTab(75)); - expect(afterDelete.tabs[75]).toBe(undefined); - expect(afterDelete.tabs[87]).not.toBe(undefined); - }); - }); - - describe('default', () => { - const action = { - type: 'doesNotExist', - payload: 'trigger', - }; - it('if there are no match of action types, throw error', () => { - try { - mainReducer(state, action); - } catch (err) { - expect(err).toBeInstanceOf(Error); - } - }); - }); -}); From 5aae81425a8778a9bfeef3d2628c4a36422ec963 Mon Sep 17 00:00:00 2001 From: James McCollough <100531603+j-mccoll@users.noreply.github.com> Date: Mon, 19 Jun 2023 18:19:14 -0400 Subject: [PATCH 61/70] Remove deprecated enzyme RouteDescription tests --- .../ignore/RouteDescription.test.tsx | 66 ------------------- 1 file changed, 66 deletions(-) delete mode 100644 src/app/__tests__enzyme/ignore/RouteDescription.test.tsx diff --git a/src/app/__tests__enzyme/ignore/RouteDescription.test.tsx b/src/app/__tests__enzyme/ignore/RouteDescription.test.tsx deleted file mode 100644 index b1fc02619..000000000 --- a/src/app/__tests__enzyme/ignore/RouteDescription.test.tsx +++ /dev/null @@ -1,66 +0,0 @@ -/* eslint-disable @typescript-eslint/no-explicit-any */ -/* eslint-disable react/jsx-filename-extension */ - -import React from 'react'; -import { shallow, configure, render } from 'enzyme'; -import Adapter from 'enzyme-adapter-react-16'; -import Action from '../components/Action'; -import RouteDescription from '../components/RouteDescription'; - -configure({ adapter: new (Adapter as any)() }); - -describe('Unit testing RouteDescription', () => { - const actionsArr: JSX.Element[] = []; - - actionsArr.push( - null} - sliderIndex={0} - handleOnkeyDown={(e, i) => null} - viewIndex={undefined} - isCurrIndex={false} - routePath='http://localhost:3000/home' - />, - ); - - actionsArr.push( - null} - sliderIndex={0} - handleOnkeyDown={(e, i) => null} - viewIndex={undefined} - isCurrIndex={false} - routePath='http://localhost:3000/home' - />, - ); - - const wrapper = shallow(); - - test('Renders the correct number of Action components', () => { - expect(wrapper.find(Action).length).toBe(2); - }); - - test('Renders a single ".route" class', () => { - expect(wrapper.find('.route').length).toBe(1); - }); - - test('Renders an h3 tag with the correct pathname "Route: "', () => { - expect(wrapper.find('h3').text()).toBe('Route: /home'); - }); -}); From 9675557a2b4bb0ad274d32c4b238fb51ee35488b Mon Sep 17 00:00:00 2001 From: James McCollough <100531603+j-mccoll@users.noreply.github.com> Date: Mon, 19 Jun 2023 18:19:49 -0400 Subject: [PATCH 62/70] Remove deprecated enzyme SwitchApp tests --- .../__tests__enzyme/ignore/SwitchApp.test.tsx | 77 ------------------- 1 file changed, 77 deletions(-) delete mode 100644 src/app/__tests__enzyme/ignore/SwitchApp.test.tsx diff --git a/src/app/__tests__enzyme/ignore/SwitchApp.test.tsx b/src/app/__tests__enzyme/ignore/SwitchApp.test.tsx deleted file mode 100644 index 632cb56e3..000000000 --- a/src/app/__tests__enzyme/ignore/SwitchApp.test.tsx +++ /dev/null @@ -1,77 +0,0 @@ -/* eslint-disable @typescript-eslint/no-explicit-any */ -import React from 'react'; -import Select from 'react-select'; -import { configure, shallow } from 'enzyme'; -import Adapter from 'enzyme-adapter-react-16'; -import SwitchApp from '../components/SwitchApp'; - -import { useStoreContext } from '../store'; - -configure({ adapter: new (Adapter as any)() }); - -jest.mock('../store'); - -describe('Unit testing for SwitchApp.jsx', () => { - let wrapper; - - const state = { - currentTab: 100, - tabs: { - 100: { - snapshots: [1, 2, 3, 4], - viewIndex: 1, - sliderIndex: 1, - title: 'component', - }, - }, - }; - const dropdownCurrTabLabel = { - value: 100, - label: 'component', - }; - // mockImplementation creates a mock function call - const dispatch = jest.fn(); - - // mockImplementation creates a mock state - useStoreContext.mockImplementation(() => [state, dispatch]); - - beforeEach(() => { - wrapper = shallow(); - dispatch.mockClear(); - }); - - describe('SwitchApp Component', () => { - beforeEach(() => { - wrapper.find('.tab-select-container').simulate('change', {}); - }); - it('SwitchApp component returns