Clean up frontend tests

Author: j-mccoll

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);
   });
 });

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(<ButtonsContainer />);
       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(<ButtonsContainer />);
       expect(screen.getAllByRole('button')[0]).toHaveTextContent('Locked');

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

src/app/__tests__/MainContainer.test.tsx

@@ -23,11 +23,13 @@ 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);

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;

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(<TravelContainer snapshotsLength={0} />);
   });
 
-  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(<TravelContainer snapshotsLength={0} />);
     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(<TravelContainer snapshotsLength={0} />);
     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(<TravelContainer snapshotsLength={0} />);
     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(<TravelContainer snapshotsLength={0} />);
     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;
   });
 });

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

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(<Action {...props} />);
       expect(screen.getAllByRole('button')[0]).toHaveTextContent('NO TIME');

src/app/components/Tutorial.tsx

@@ -82,7 +82,7 @@ export default class Tutorial extends Component<TutorialProps, TutorialState> {
         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',
           },
           {