Merge branch 'dev' into reactime19.0-Jackie

Author: yuanjackie1

.babelrc

@@ -1,6 +1,4 @@
 {
-  "presets": [
-    "airbnb"
-  ],
+  "presets": ["airbnb", "@babel/preset-typescript"],
   "plugins": ["@emotion"]
 }

.eslintrc

@@ -3,10 +3,12 @@
     "airbnb",
     "plugin:jest/recommended",
     "plugin:@typescript-eslint/eslint-recommended",
-    "plugin:@typescript-eslint/recommended"
+    "plugin:@typescript-eslint/recommended",
+    "plugin:testing-library/react", // added in for RTL tests
+    "plugin:jest-dom/recommended" // added in for RTL tests
   ],
   "root": true,
-  "plugins": ["jest", "react", "react-hooks", "@typescript-eslint"],
+  "plugins": ["jest", "react", "react-hooks", "@typescript-eslint", "testing-library", "jest-dom"],
   "rules": {
     "arrow-parens": [2, "as-needed"],
     "import/no-unresolved": "off",

demo-app/src/client/Components/Buttons.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import Increment from './Increment';
 
-function Buttons():JSX.Element {
+function Buttons(): JSX.Element {
   const buttons = [];
   for (let i = 0; i < 4; i++) {
     buttons.push(<Increment key={i} />);
@@ -20,4 +20,3 @@ function Buttons():JSX.Element {
 }
 
 export default Buttons;
-

jest.config.js

@@ -0,0 +1,21 @@
+const { TextEncoder } = require('util');
+module.exports = {
+  globals: {
+    TextEncoder: TextEncoder,
+  },
+  transform: {
+    '^.+\\.(js|ts|tsx)$': 'ts-jest',
+  },
+  testPathIgnorePatterns: ['www', './src/backend/__tests__/ignore', './src/app/__tests__enzyme/ignore'],
+  coveragePathIgnorePatterns: ['/src/backend/__tests__/ignore/', '/src/app/__tests__enzyme/ignore'],
+  transformIgnorePatterns: ['/node_modules/(?!d3|d3-array|internmap|delaunator|robust-predicates)'],
+  testRegex: '(/__tests__/.*|\\.(test|spec))\\.(ts|tsx|js)$',
+  moduleFileExtensions: ['ts', 'tsx', 'js'],
+  setupFilesAfterEnv: ['@testing-library/jest-dom/extend-expect'],
+  testEnvironment: 'jsdom',
+  moduleNameMapper: {
+    '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
+      '<rootDir>/__mocks__/fileMock.js',
+    '\\.(scss|sass|css)$': 'identity-obj-proxy',
+  },
+};

package.json

@@ -1,34 +1,14 @@
 {
   "name": "reactime",
   "description": "build web extension bundle.js",
-  "jest": {
-    "transform": {
-      "^.+\\.(js|ts|tsx)$": "ts-jest"
-    },
-    "testPathIgnorePatterns": [
-      "www",
-      "./src/backend/__tests__/ignore"
-    ],
-    "coveragePathIgnorePatterns": [
-      "/src/backend/__tests__/ignore/"
-    ],
-    "transformIgnorePatterns": [
-      "/node_modules/(?!d3|d3-array|internmap|delaunator|robust-predicates)"
-    ],
-    "testRegex": "(/__tests__/.*|\\.(test|spec))\\.(ts|tsx|js)$",
-    "moduleFileExtensions": [
-      "ts",
-      "tsx",
-      "js"
-    ]
-  },
   "scripts": {
     "build": "NODE_OPTIONS=--openssl-legacy-provider webpack --mode production",
     "dev": "NODE_OPTIONS=--openssl-legacy-provider webpack --mode development --watch",
     "buildlegacy": "webpack --mode production",
     "devlegacy": "webpack --mode development --watch",
     "test": "jest --verbose --coverage",
     "test-backend": "jest --verbose --coverage src/backend",
+    "test-frontend": "jest --verbose --coverage src/app",
     "test-on": "./node_modules/.bin/jest $1",
     "docker-test-lint": "eslint --ext .js --ext .jsx src",
     "docs": "typedoc --json docs --inputFiles src/app --inputFiles src/backend --readme docs/readme.md",
@@ -110,9 +90,12 @@
     "@babel/plugin-proposal-decorators": "^7.10.5",
     "@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",
+    "@testing-library/user-event": "^14.4.3",
     "@types/chai": "^4.2.14",
     "@types/chrome": "^0.0.119",
     "@types/d3": "^7.4.0",
@@ -134,15 +117,19 @@
     "eslint-config-airbnb": "^18.2.0",
     "eslint-plugin-import": "^2.22.0",
     "eslint-plugin-jest": "^22.21.0",
+    "eslint-plugin-jest-dom": "^4.0.3",
     "eslint-plugin-jsx-a11y": "^6.3.1",
     "eslint-plugin-react": "^7.20.3",
     "eslint-plugin-react-hooks": "^1.7.0",
+    "eslint-plugin-testing-library": "^5.10.3",
     "express": "^4.17.1",
     "jest": "^29.5.0",
     "jest-cli": "^26.1.0",
     "jest-diff": "^26.1.0",
+    "jest-environment-jsdom": "^29.5.0",
     "jest-runner-eslint": "^2.0.0",
     "jscharting-react": "^1.2.1",
+    "jsdom": "^21.1.2",
     "prettier": "2.8.4",
     "puppeteer": "^14.3.0",
     "react-devtools-core": "^4.27.3",
@@ -195,12 +182,12 @@
     "d3-scale-chromatic": "^3.0.0",
     "d3-shape": "^2.0.0",
     "d3-zoom": "^3.0.0",
+    "identity-obj-proxy": "^3.0.0",
     "immer": "^9.0.12",
     "intro.js": "^5.0.0",
     "intro.js-react": "^0.6.0",
     "jest-runner": "^26.1.0",
     "jscharting": "^3.0.2",
-    "jsdom": "^21.1.1",
     "jsondiffpatch": "^0.3.11",
     "lodash": "^4.17.21",
     "prop-types": "^15.7.2",

src/app/__tests__/ActionContainer.test.tsx

@@ -1,16 +1,10 @@
 /* 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 { render, screen, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
 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: {
@@ -112,33 +106,45 @@ const state = {
 };
 
 const dispatch = jest.fn();
-
+jest.spyOn(React, 'useEffect').mockImplementation(() => jest.fn());
 jest.mock('../store');
-useStoreContext.mockImplementation(() => [state, dispatch]);
 
-let wrapper;
+const mockeduseStoreContext = jest.mocked(useStoreContext);
+mockeduseStoreContext.mockImplementation(() => [state, dispatch]);
 
-// actionView={true} must be passed in to <ActionContainer /> in beforeEach() to deal with new
-// conditional rendering in ActionContainer that shows/hides time-travel functionality
+const MockRouteDescription = jest.fn();
+jest.mock('../components/RouteDescription', () => () => {
+  MockRouteDescription();
+  return <div>MockRouteDescription</div>;
+});
 
-beforeEach(() => {
-  wrapper = shallow(<ActionContainer actionView={true} />);
-  // wrapper2 = shallow(<RouteDescription />);
-  useStoreContext.mockClear();
-  dispatch.mockClear();
+const MockSwitchApp = jest.fn();
+jest.mock('../components/SwitchApp', () => () => {
+  MockSwitchApp();
+  return <div>MockSwitchApp</div>;
 });
 
-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);
+describe('unit testing for ActionContainer', () => {
+  beforeEach(() => {
+    mockeduseStoreContext.mockClear();
+    dispatch.mockClear();
+    render(<ActionContainer actionView={true} />);
   });
-  test('emptying snapshots should send emptySnapshot action to dispatch', () => {
-    wrapper.find('.empty-button').simulate('click');
-    expect(dispatch.mock.calls[0][0]).toEqual(emptySnapshots());
+
+  test('Expect top arrow to be rendered', () => {
+    expect(screen.getByRole('complementary')).toBeInTheDocument();
   });
-});
 
-test('number of RouteDescription components should reflect number of unique routes', () => {
-  expect(wrapper.find(RouteDescription).length).toBe(2);
+  test('Expect RouteDescription to be rendered', () => {
+    expect(screen.getAllByText('MockRouteDescription')).toHaveLength(2);
+  });
+
+  test('Expect SwitchApp to be rendered', () => {
+    expect(screen.getByText('MockSwitchApp')).toBeInTheDocument();
+  });
+
+  test('Click works on clear button', async () => {
+    fireEvent.click(screen.getAllByRole('button')[0]);
+    await expect(dispatch).toHaveBeenCalledTimes(1);
+  });
 });

src/app/__tests__/ButtonContainer.test.tsx

@@ -0,0 +1,82 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect'; // needed this to extend the jest-dom assertions  (ex toHaveTextContent)
+import { TextEncoder } from 'util';
+global.TextEncoder = TextEncoder;
+import ButtonsContainer from '../containers/ButtonsContainer';
+import { useStoreContext } from '../store';
+
+// const { Steps } = require('intro.js-react');
+jest.mock('../store');
+const mockedUsedStoreContext = jest.mocked(useStoreContext);
+// useStoreContext as jest.Mock<useStoreContext>.mockImplementaton(() => [state, dispatch])
+
+global.URL.createObjectURL = jest.fn(() => 'https://pdf.com');
+global.URL.revokeObjectURL = jest.fn();
+
+describe('Unit testing for ButtonContainer', () => {
+  beforeEach;
+
+  const state = {
+    tabs: {
+      87: {
+        snapshots: [1, 2, 3, 4],
+        sliderIndex: 0,
+        viewIndex: -1,
+        mode: {
+          paused: false,
+          locked: false,
+          persist: false,
+        },
+      },
+    },
+    currentTab: 87,
+  };
+
+  const currentTab = state.tabs[state.currentTab];
+  const dispatch = jest.fn();
+  const exportHandler = jest.fn().mockImplementation(() => 'clicked');
+  const importHandler = jest.fn();
+  const fileDownload = jest.fn();
+
+  mockedUsedStoreContext.mockImplementation(() => [state, dispatch]);
+  // useStoreContext.mockImplementation(() => [state, dispatch]);
+
+  beforeEach(() => {
+    dispatch.mockClear();
+    mockedUsedStoreContext.mockClear();
+    currentTab.mode = {
+      paused: false,
+      persist: false,
+    };
+  });
+
+  describe('When button container is loaded', () => {
+    test('should have 4 buttons ', () => {
+      render(<ButtonsContainer />);
+      expect(screen.getAllByRole('button')).toHaveLength(4);
+      expect(screen.getAllByRole('button')[0]).toHaveTextContent('Lock');
+      expect(screen.getAllByRole('button')[1]).toHaveTextContent('Download');
+      expect(screen.getAllByRole('button')[2]).toHaveTextContent('Upload');
+      expect(screen.getAllByRole('button')[3]).toHaveTextContent('How to use');
+    });
+  });
+
+  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('Unlock');
+    });
+  });
+
+  describe('Upload/Download', () => {
+    test('Clicking upload and download buttons', async () => {
+      render(<ButtonsContainer />);
+      fireEvent.click(screen.getAllByRole('button')[1]);
+      fireEvent.click(screen.getAllByRole('button')[2]);
+      expect(screen.getAllByRole('button')[1]).toBeInTheDocument();
+      expect(screen.getAllByRole('button')[2]).toBeInTheDocument();
+    });
+  });
+});

src/app/__tests__/ErrorContainer.test.tsx

@@ -0,0 +1,76 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect'; // needed this to extend the jest-dom assertions  (ex toHaveTextContent)
+import ErrorContainer from '../containers/ErrorContainer';
+import { useStoreContext } from '../store';
+
+const state = {
+  currentTab: null,
+  currentTitle: 'No Target',
+  tabs: {},
+};
+
+const MockErrorMsg = jest.fn();
+jest.mock('../components/ErrorMsg', () => () => {
+  MockErrorMsg();
+  return <div>MockErrorMsg</div>;
+});
+
+jest.mock('../store');
+const mockeduseStoreContext = jest.mocked(useStoreContext);
+
+const dispatch = jest.fn();
+mockeduseStoreContext.mockImplementation(() => [state, dispatch]);
+
+describe('unit testing for ErrorContainer.tsx', () => {
+  test('logo image renders as expected', () => {
+    render(<ErrorContainer />);
+    expect(screen.getByAltText('Reactime Logo')).toBeInTheDocument();
+  });
+
+  test('ErrorMsg component renders as expected', () => {
+    render(<ErrorContainer />);
+    expect(screen.getByText('MockErrorMsg')).toBeInTheDocument();
+  });
+
+  test('Reactime website shows as expected', () => {
+    render(<ErrorContainer />);
+    expect(
+      screen.getByText('Please visit the Reactime website for more info.'),
+    ).toBeInTheDocument();
+  });
+
+  describe('Loading Checks show up as expected', () => {
+    test('Content script launching check shows', () => {
+      render(<ErrorContainer />);
+      expect(
+        screen.getByText(`Checking if content script has been launched on current tab`),
+      ).toBeInTheDocument();
+    });
+    test('React Dev Tool Install check shows', () => {
+      render(<ErrorContainer />);
+      expect(
+        screen.getByText(`Checking if React Dev Tools has been installed`),
+      ).toBeInTheDocument();
+    });
+    test('Compatible app check shows', () => {
+      render(<ErrorContainer />);
+      expect(screen.getByText(`Checking if target is a compatible React app`)).toBeInTheDocument();
+    });
+  });
+
+  describe('Launching header shows correct tab info', () => {
+    test('When currentTitle has no target', () => {
+      render(<ErrorContainer />);
+      expect(screen.getByText(`Launching Reactime on tab: No Target`)).toBeInTheDocument();
+      expect(screen.queryByText(`Launching Reactime on tab: Test Page`)).not.toBeInTheDocument();
+    });
+
+    test('When currentTitle has a target title', () => {
+      state.currentTitle = 'Test Page';
+      render(<ErrorContainer />);
+      expect(screen.getByText(`Launching Reactime on tab: Test Page`)).toBeInTheDocument();
+      expect(screen.queryByText(`Launching Reactime on tab: No Target`)).not.toBeInTheDocument();
+    });
+  });
+});