Merge branch 'dev' into testing-cleanup

Author: j-mccoll

demo-app-remix/server.js renamed to 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}`);

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,

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,20 +73,19 @@ 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
 
 Can Reactime be integrated with Redux compatibility so applications using Redux can track state in Reactime?
 
 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)

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', () => {
     expect(dispatch).toHaveBeenCalledTimes(1);
   });
 });
+
+describe('integration testing for ActionContainer', () => {
+  beforeEach(() => {
+    mockeduseStoreContext.mockClear();
+    dispatch.mockClear();
+    render(<ActionContainer actionView={true} />);
+    render(<TravelContainer snapshotsLength={0} />);
+  });
+
+  test('Slider resets on clear button', () => {
+    fireEvent.click(screen.getAllByRole('button')[0]);
+    expect(screen.getByRole('slider')).toHaveStyle('left: 0');
+  });
+});

src/app/__tests__/ButtonContainer.test.tsx

@@ -24,9 +24,8 @@ describe('Unit testing for ButtonContainer', () => {
         sliderIndex: 0,
         viewIndex: -1,
         mode: {
-          paused: false,
+          paused: true,
           locked: false,
-          persist: false,
         },
       },
     },
@@ -46,7 +45,7 @@ describe('Unit testing for ButtonContainer', () => {
     dispatch.mockClear();
     mockedUsedStoreContext.mockClear();
     currentTab.mode = {
-      paused: false,
+      paused: true,
       persist: false,
     };
   });
@@ -55,18 +54,18 @@ describe('Unit testing for ButtonContainer', () => {
     test('it should have 4 buttons', () => {
       render(<ButtonsContainer />);
       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');
     });
   });
 
-  describe('When view is locked', () => {
-    test('Button should show as locked', () => {
+  describe('When view is unlock', () => {
+    test('Button should show as unlocked', () => {
       state.tabs['87'].mode.paused = true;
       render(<ButtonsContainer />);
-      expect(screen.getAllByRole('button')[0]).toHaveTextContent('Locked');
+      expect(screen.getAllByRole('button')[0]).toHaveTextContent('Unlocked');
     });
   });
 

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(<Loader loading={true} result={false} />);
-    expect(container.firstChild).toHaveClass('css-xp4o0b');
+    expect(container.firstChild).toHaveClass('css-1tm071a');
   });
 
   test('renders a fail icon', () => {

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(<MainSlider {...props} />);
       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')
     });
   });
 });

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(<Tutorial {...props} />);
     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(<Tutorial {...props} />);
     fireEvent.click(screen.getByRole('button'));
@@ -30,17 +30,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(<Tutorial {...props} />);
     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(<Tutorial {...props} />);
     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(<Tutorial {...props} />);
+    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(<Tutorial {...props} />);
+    fireEvent.click(screen.getByRole('button'));
+    expect(screen.getByText('Tree Tab')).toBeInTheDocument();
   });
 });

src/app/__tests__/action.test.tsx

@@ -1,7 +1,9 @@
 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';
+import { changeView, changeSlider } from '../actions/actions';
 
 // @ts-ignore
 Action.cleanTime = jest.fn().mockReturnValue();
@@ -57,5 +59,42 @@ describe('unit testing for Action.tsx', () => {
       render(<Action {...props} />);
       expect(screen.getAllByRole('button')[0]).toHaveTextContent('NO TIME');
     });
+
+    test('When actualDuration exceeds 60, time should be formatted correctly', () => {
+      props.componentData.actualDuration = 75; 
+      render(<Action {...props} />);
+      expect(screen.getAllByRole('button')[0]).toHaveTextContent('+01:15.00');
+    });
+
+    test('Using the ArrowUp key on Action snapshot should trigger handleOnKeyDown', () => {
+      render(<Action {...props} />);
+      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(<Action {...props} />);
+      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(<Action {...props} />);
+      fireEvent.keyDown(screen.getByRole('presentation'), {key: 'Enter', code: 'Enter', charCode: 13});
+      expect(props.handleOnkeyDown).toHaveBeenCalled();
+    });
+
+    test('Clicking the snapshot should trigger onClick', () => {
+      render(<Action {...props} />);
+      fireEvent.click(screen.getByRole('presentation'));
+      expect(props.dispatch).toHaveBeenCalledWith(changeView(2));;
+    });
+
+    test('Clicking Jump button should trigger changeSlider and changeView', () => {
+      render(<Action {...props} />);
+      fireEvent.click(screen.getAllByRole('button')[1]);
+      expect(props.dispatch).toHaveBeenCalledWith(changeSlider(2));
+      expect(props.dispatch).toHaveBeenCalledWith(changeView(2));
+    });
   });
 });

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('<FontAwesomeIcon />Persist');
-      state.tabs[state.currentTab].mode.persist = true;
-      wrapper = shallow(<ButtonsContainer />);
-      expect(wrapper.find('.persist-button').text()).toBe('<FontAwesomeIcon />Unpersist');
-    });
-  });
 });