Updated RTL front end unit tests and removed Enzyme tests

Co-authored-by: Mark Teets <[email protected]>
Co-authored-by: Minzo Kim <[email protected]>
Co-authored-by: Jackie Yuan <[email protected]>

Author: 4 people

jest.config.js

@@ -6,8 +6,8 @@ module.exports = {
   transform: {
     '^.+\\.(js|ts|tsx)$': 'ts-jest',
   },
-  testPathIgnorePatterns: ['www', './src/backend/__tests__/ignore'],
-  coveragePathIgnorePatterns: ['/src/backend/__tests__/ignore/'],
+  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'],

package.json

@@ -9,8 +9,6 @@
     "test": "jest --verbose --coverage",
     "test-backend": "jest --verbose --coverage src/backend",
     "test-frontend": "jest --verbose --coverage src/app",
-    "test-jn": "jest --verbose --coverage src/app/__tests__jn",
-    "test-zo": "jest --verbose --coverage src/app/__tests__zo",
     "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",

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,44 @@ const state = {
 };
 
 const dispatch = jest.fn();
-
+const resetSlider = jest.fn();
+jest.spyOn(React, 'useEffect').mockImplementation(() => jest.fn());
 jest.mock('../store');
 useStoreContext.mockImplementation(() => [state, dispatch]);
 
-let wrapper;
-
-// 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(() => {
+    useStoreContext.mockClear();
+    dispatch.mockClear();
+    render(<ActionContainer actionView={true} />);
+  });
+
+  test('Expect top arrow to be rendered', () => {
+    expect(screen.getByRole('complementary')).toBeInTheDocument();
   });
-  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 RouteDescription to be rendered', () => {
+    expect(screen.getAllByText('MockRouteDescription')).toHaveLength(2);
   });
-});
 
-test('number of RouteDescription components should reflect number of unique routes', () => {
-  expect(wrapper.find(RouteDescription).length).toBe(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,89 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+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');
+
+global.URL.createObjectURL = jest.fn(() => 'https://pdf.com');
+global.URL.revokeObjectURL = jest.fn();
+
+const fileDownload = {
+  href: jest.fn(),
+};
+
+const URL = { revokeObjectURL: jest.fn() };
+// @ts-ignore
+// jest.spyOn(document, 'createElement').mockImplementation(() => fileDownload);
+
+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();
+
+  useStoreContext.mockImplementation(() => [state, dispatch]);
+
+  beforeEach(() => {
+    dispatch.mockClear();
+    useStoreContext.mockClear();
+    currentTab.mode = {
+      paused: false,
+      persist: false,
+    };
+  });
+
+  describe('When button container is loaded', () => {
+    test('should have 5 buttons ', () => {
+      render(<ButtonsContainer />);
+      expect(screen.getAllByRole('button')).toHaveLength(5);
+      expect(screen.getAllByRole('button')[0]).toHaveTextContent('Lock');
+      expect(screen.getAllByRole('button')[1]).toHaveTextContent('Split');
+      expect(screen.getAllByRole('button')[2]).toHaveTextContent('Download');
+      expect(screen.getAllByRole('button')[3]).toHaveTextContent('Upload');
+      expect(screen.getAllByRole('button')[4]).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')[2]);
+      fireEvent.click(screen.getAllByRole('button')[3]);
+      expect(screen.getAllByRole('button')[2]).toBeInTheDocument();
+      expect(screen.getAllByRole('button')[3]).toBeInTheDocument();
+    });
+  });
+});

src/app/__tests__jn/ErrorContainer.test.tsx renamed to src/app/__tests__/ErrorContainer.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'; // needed this to extend the jest-dom assertions  (ex toHaveTextContent)
 import ErrorContainer from '../containers/ErrorContainer';
 import { useStoreContext } from '../store';

src/app/__tests__jn/ErrorMsg.test.tsx renamed to src/app/__tests__/ErrorMsg.test.tsx

@@ -10,13 +10,11 @@ describe('unit testing for Loader.tsx', () => {
   });
 
   test('renders a fail icon', () => {
-    // render(<Loader loading={false} result={false} />);
     const { container } = render(<Loader loading={false} result={false} />);
     expect(container.getElementsByClassName('fail').length).toBe(1);
   });
 
   test('renders a check icon', () => {
-    // render(<Loader loading={false} result={true} />);
     const { container } = render(<Loader loading={false} result={true} />);
     expect(container.getElementsByClassName('check').length).toBe(1);
   });

src/app/__tests__jn/Loader.test.tsx renamed to src/app/__tests__/Loader.test.tsx

@@ -1,34 +1,47 @@
-/* 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 { render, screen } from '@testing-library/react';
 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 mockActionContainer = jest.fn();
+jest.mock('../containers/ActionContainer', () => (props) => {
+  mockActionContainer(props);
+  return <div>mockActionContainer</div>;
+});
+
+const mockStateContainer = jest.fn();
+jest.mock('../containers/StateContainer', () => (props) => {
+  mockStateContainer(props);
+  return <div>mockStateContainer</div>;
+});
+
+const mockTravelContainer = jest.fn();
+jest.mock('../containers/TravelContainer', () => (props) => {
+  mockTravelContainer(props);
+  return <div>mockTravelContainer</div>;
+});
+const mockButtonsContainer = jest.fn();
+jest.mock('../containers/ButtonsContainer', () => (props) => {
+  mockButtonsContainer(props);
+  return <div>mockButtonsContainer</div>;
+});
+const mockErrorContainer = jest.fn();
+jest.mock('../containers/ErrorContainer', () => (props) => {
+  mockErrorContainer(props);
+  return <div>mockErrorContainer</div>;
+});
 
 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: {
@@ -40,21 +53,42 @@ const port = {
 };
 chrome.runtime.connect.returns(port);
 
-beforeEach(() => {
-  wrapper = shallow(<MainContainer />);
-  useStoreContext.mockClear();
-  dispatch.mockClear();
+describe('With no snapshots, should not render any containers', () => {
+  test('With no snapshots, ErrorContainer should render', () => {
+    render(<MainContainer />);
+    expect(screen.getByText('mockErrorContainer')).toBeInTheDocument();
+    expect(mockErrorContainer).toBeCalledTimes(1);
+    const error = screen.queryByText('mockErrorContainer');
+    expect(error).not.toBeNull();
+  });
+  test('With no snapshots, ActionContainer should not render', () => {
+    render(<MainContainer />);
+    const ActionContainer = screen.queryByText('mockActionContainer');
+    expect(ActionContainer).not.toBeInTheDocument();
+  });
+  test('With no snapshots, StateContainer should not render', () => {
+    render(<MainContainer />);
+    const StateContainer = screen.queryByText('mockStateContainer');
+    expect(StateContainer).toBeNull();
+  });
+  test('With no snapshots, TravelContainer should not render', () => {
+    render(<MainContainer />);
+    const TravelContainer = screen.queryByText('mockTravelContainer');
+    expect(TravelContainer).toBeNull();
+  });
+  test('With no snapshots, ButtonsContainer should not render', () => {
+    render(<MainContainer />);
+    const ButtonsContainer = screen.queryByText('mockButtonsContainer');
+    expect(ButtonsContainer).toBeNull();
+  });
 });
 
-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', () => {
+describe('With snapshots, should render all containers', () => {
+  beforeEach(() => {
+    render(<MainContainer />);
+    useStoreContext.mockClear();
+    dispatch.mockClear();
+    mockErrorContainer.mockClear();
     state.currentTab = 87;
     state.tabs[87] = {
       snapshots: [{}],
@@ -67,11 +101,20 @@ describe('MainContainer rendering', () => {
       sliderIndex: 0,
       mode: {},
     };
-
-    wrapper = shallow(<MainContainer />);
-    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);
+  });
+  test('With snapshots, ErrorContainer should not render', () => {
+    expect(mockErrorContainer).toBeCalledTimes(0);
+  });
+  test('With snapshots, ActionContainer should not render', () => {
+    expect(screen.getByText('mockActionContainer')).toBeInTheDocument();
+  });
+  test('With snapshots, StateContainer should render', () => {
+    expect(screen.getByText('mockStateContainer')).toBeInTheDocument();
+  });
+  test('With snapshots, TravelContainer should render', () => {
+    expect(screen.getByText('mockTravelContainer')).toBeInTheDocument();
+  });
+  test('With snapshots, ButtonsContainer should render', () => {
+    expect(screen.getByText('mockButtonsContainer')).toBeInTheDocument();
   });
 });