fixed 8 non-running tests

Author: MelKoppens

src/app/__tests__/ActionContainer.test.tsx

@@ -138,7 +138,7 @@ jest.mock('../components/Actions/RouteDescription', () => () => {
 });
 
 const MockSwitchApp = jest.fn();
-jest.mock('../components/SwitchApp', () => () => {
+jest.mock('../components/Actions/SwitchApp', () => () => {
   MockSwitchApp();
   return <div>MockSwitchApp</div>;
 });
@@ -156,7 +156,8 @@ jest.mock('react-redux', () => ({
 // const dispatch = jest.fn();
 
 describe('unit testing for ActionContainer', () => {
-  const useDispatchMock = useDispatch as jest.Mock; //getting a reference to the mock function you setup during jest.mock configuration on line 18
+  const useDispatchMock = (useDispatch as unknown) as jest.Mock; // make the test run
+  // const useDispatchMock = useDispatch as jest.Mock; //getting a reference to the mock function you setup during jest.mock configuration on line 18
   const dummyDispatch = jest.fn(); //separate mock function created because we need to explicitly define on line 30 what
   useDispatchMock.mockReturnValue(dummyDispatch); //exactly useDispatchMock returns (which is a jest.fn())
   beforeEach(() => {

src/app/__tests__/ButtonContainer.test.tsx

@@ -142,7 +142,8 @@ global.URL.createObjectURL = jest.fn(() => 'https://pdf.com');
 global.URL.revokeObjectURL = jest.fn();
 
 describe('Unit testing for ButtonContainer', () => {
-  const useDispatchMock = useDispatch as jest.Mock; //getting a reference to the mock function you setup during jest.mock configuration on line 18
+  const useDispatchMock = (useDispatch as unknown) as jest.Mock; // make the test run
+  // const useDispatchMock = useDispatch as jest.Mock; //getting a reference to the mock function you setup during jest.mock configuration on line 18
   const dummyDispatch = jest.fn(); //separate mock function created because we need to explicitly define on line 30 what
   useDispatchMock.mockReturnValue(dummyDispatch); //exactly useDispatchMock returns (which is a jest.fn())
   beforeEach;

src/app/__tests__/ErrorContainer.test.tsx

@@ -131,7 +131,7 @@ const render = (component) => rtlRender(<Provider store={customStore}>{component
 // };
 
 const MockErrorMsg = jest.fn();
-jest.mock('../components/ErrorMsg', () => () => {
+jest.mock('../components/ErrorHandling/ErrorMsg', () => () => {
   MockErrorMsg();
   return <div>MockErrorMsg</div>;
 });
@@ -142,51 +142,56 @@ jest.mock('../components/ErrorMsg', () => () => {
 // const dispatch = jest.fn();
 // mockeduseStoreContext.mockImplementation(() => [state, dispatch]);
 
+// added to fix broken tests
+const props = {
+  port: null, 
+};
+
 describe('unit testing for ErrorContainer.tsx', () => {
   test('logo image renders as expected', () => {
-    render(<ErrorContainer />);
+    render(<ErrorContainer {...props} />); // added {...props} to fix broken test
     expect(screen.getByAltText('Reactime Logo')).toBeInTheDocument();
   });
 
   test('ErrorMsg component renders as expected', () => {
-    render(<ErrorContainer />);
+    render(<ErrorContainer {...props} />); // added {...props} to fix broken test
     expect(screen.getByText('MockErrorMsg')).toBeInTheDocument();
   });
 
   test('Reactime website shows as expected', () => {
-    render(<ErrorContainer />);
+    render(<ErrorContainer {...props} />); // added {...props} to fix broken test
     expect(screen.getByText('Please visit the Reactime Github for more info.')).toBeInTheDocument();
   });
 
   describe('Loading Checks show up as expected', () => {
     test('Content script launching check shows', () => {
-      render(<ErrorContainer />);
+      render(<ErrorContainer {...props} />); // added {...props} to fix broken test
       expect(
         screen.getByText(`Checking if content script has been launched on current tab`),
       ).toBeInTheDocument();
     });
     test('React Dev Tool Install check shows', () => {
-      render(<ErrorContainer />);
+      render(<ErrorContainer {...props} />); // added {...props} to fix broken test
       expect(
         screen.getByText(`Checking if React Dev Tools has been installed`),
       ).toBeInTheDocument();
     });
     test('Compatible app check shows', () => {
-      render(<ErrorContainer />);
+      render(<ErrorContainer {...props} />); // added {...props} to fix broken test
       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 />);
+          render(<ErrorContainer {...props} />); // added {...props} to fix broken test
       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', () => {
       customInitialState.main.currentTitle = 'Test Page';
-      render(<ErrorContainer />);
+          render(<ErrorContainer {...props} />); // added {...props} to fix broken test
       expect(screen.getByText(`Launching Reactime on tab: Test Page`)).toBeInTheDocument();
       expect(screen.queryByText(`Launching Reactime on tab: No Target`)).not.toBeInTheDocument();
     });

src/app/__tests__/MainSlider.test.tsx

@@ -37,6 +37,7 @@ const render = (component) => rtlRender(<Provider store={customStore}>{component
 describe('Unit testing for MainSlider.jsx', () => {
   const props = {
     snapshotsLength: 1,
+    className: 'String' // added to fix the test
   };
 
   describe('When user only has one snapshot to view', () => {
@@ -51,6 +52,7 @@ describe('Unit testing for MainSlider.jsx', () => {
   describe('When there are multiple snapshots and we are looking in between', () => {
     const props = {
       snapshotsLength: 3,
+      className: 'String' // added to fix the test
     };
 
     test('Component should have min, max, value with correct values to indicate slider position when there are multiple snapshots', () => {

src/app/__tests__/TravelContainer.test.tsx

@@ -135,13 +135,13 @@ const renderWithTheme = (component) => {
 };
 
 const mockSlider = jest.fn();
-jest.mock('../components/MainSlider', () => (props) => {
+jest.mock('../components/TimeTravel/MainSlider', () => (props) => {
   mockSlider(props);
   return <div>MockSlider</div>;
 });
 
 const mockDropDown = jest.fn();
-jest.mock('../components/Dropdown', () => (props) => {
+jest.mock('../components/TimeTravel/Dropdown', () => (props) => {
   mockDropDown(props);
   return <div>mockDropDown</div>;
 });
@@ -182,7 +182,8 @@ describe('All elements appear in the TravelContainer module', () => {
 });
 
 describe('Testing play/pause button', () => {
-  const useDispatchMock = useDispatch as jest.Mock; //getting a reference to the mock function you setup during jest.mock configuration on line 154
+  const useDispatchMock = (useDispatch as unknown) as jest.Mock; // make the test run
+  // const useDispatchMock = useDispatch as jest.Mock; //getting a reference to the mock function you setup during jest.mock configuration on line 154
   const dummyDispatch = jest.fn();
   useDispatchMock.mockReturnValue(dummyDispatch);
   beforeEach(() => {

src/app/__tests__/TravelForwardBackward.test.tsx

@@ -136,7 +136,8 @@ jest.mock('react-redux', () => ({
 //needed to isolate the testing of the forward and backward buttons as behavior was affected when within the travelContainer file
 
 describe('Testing backward and forward button', () => {
-  const useDispatchMock = useDispatch as jest.Mock; //getting a reference to the mock function you setup during jest.mock configuration on line 154
+  const useDispatchMock = (useDispatch as unknown) as jest.Mock; // make the test run
+  // const useDispatchMock = useDispatch as jest.Mock; //getting a reference to the mock function you setup during jest.mock configuration on line 154
   const dummyDispatch = jest.fn();
   useDispatchMock.mockReturnValue(dummyDispatch);
   beforeEach(() => {

src/app/__tests__/WebMetrics.test.tsx

@@ -10,7 +10,8 @@ jest.mock('react-redux', () => ({
   ...jest.requireActual('react-redux'), // Use the actual react-redux module except for the functions you want to mock
   useDispatch: jest.fn(), // set up a mock function for useDispatch
 }));
-const useDispatchMock = useDispatch as jest.Mock; //getting a reference to the mock function you setup during jest.mock configuration on line 18
+const useDispatchMock = (useDispatch as unknown) as jest.Mock; // make the test run
+// const useDispatchMock = useDispatch as jest.Mock; //getting a reference to the mock function you setup during jest.mock configuration on line 18
 const dummyDispatch = jest.fn(); //separate mock function created because we need to explicitly define on line 30 what
 useDispatchMock.mockReturnValue(dummyDispatch); //exactly useDispatchMock returns (which is a jest.fn())
 const customTabs = {

src/app/__tests__/action.test.tsx

@@ -22,7 +22,8 @@ jest.mock('react-redux', () => ({
 const render = (component) => rtlRender(<Provider store={store}>{component}</Provider>);
 
 describe('Unit testing for Action.tsx', () => {
-  const useDispatchMock = useDispatch as jest.Mock; //getting a reference to the mock function you setup during jest.mock configuration on line 18
+  const useDispatchMock = (useDispatch as unknown) as jest.Mock;  // attempt to make the test run
+  // const useDispatchMock = useDispatch as jest.Mock; //getting a reference to the mock function you setup during jest.mock configuration on line 18
   const dummyDispatch = jest.fn(); //separate mock function created because we need to explicitly define on line 30 what
   useDispatchMock.mockReturnValue(dummyDispatch); //exactly useDispatchMock returns (which is a jest.fn())
   const props = {