added TravelForwardBackward test file to isolate certain tests

Author: kelvinmirhan

src/app/__tests__/ActionContainerV2.test.tsx

@@ -166,7 +166,7 @@ describe('unit testing for ActionContainer', ()=>{
   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(()=>{
-    render(<ActionContainer actionView = {true} setActionView={setActionViewMock}/>)
+    render(<ActionContainer actionView={true} setActionView={setActionViewMock}/>)
   });
 
   test('expect top arrow to be rendered', ()=>{

src/app/__tests__/TravelContainerV2.test.tsx

@@ -183,65 +183,37 @@ describe('All elements appear in the TravelContainer module', () => {
         expect(forwardButton).toBeInTheDocument();
       });
   });
-   
-//   describe('Testing backward and forward button', () => {
-//     beforeEach(() => {
-//       render(<TravelContainer snapshotsLength={0} />);
-//     });
 
-//     test('Clicking < Button button will trigger button', () => {
-//       let buttons = screen.getAllByRole('button');
-//       expect(buttons[1]).toHaveTextContent('<');
-//       fireEvent.click(buttons[1]);
-//       expect(dispatch).toHaveBeenCalledTimes(1);
-//     });
-  
-//     test('Clicking > Button button will trigger button', () => {
-//       let buttons = screen.getAllByRole('button');
-//       expect(buttons[2]).toHaveTextContent('>');
-//       fireEvent.click(buttons[2]);
-//       expect(dispatch).toHaveBeenCalledTimes(1);
-//     });
-//   });
-  
-//   describe('Testing play/pause button', () => {
-//     beforeEach(() => {
-//       dispatch.mockClear();
-//     });
-  
-//     test('Play button is rendered', () => {
-//       render(<TravelContainer snapshotsLength={0} />);
-//       const playButton = screen.getByTestId('play-button-test');
-//       expect(playButton).toBeInTheDocument();
-//     });
+  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 dummyDispatch = jest.fn();
+    useDispatchMock.mockReturnValue(dummyDispatch);
+    beforeEach(() => {
+      renderWithTheme(<TravelContainer snapshotsLength={0}/>);
+      dummyDispatch.mockClear();
+    });
 
-//     test('Play initially says Play', () => {
-//       render(<TravelContainer snapshotsLength={0} />);
-//       const playButton = screen.getByTestId('play-button-test');
-//       expect(playButton.textContent).toBe('Play');
-//     });
+    test('Play button is rendered', () => {
+      const playButton = screen.getByTestId('play-button-test');
+      expect(playButton).toBeInTheDocument();
+    });
 
-//     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);
-//       expect(dispatch).toHaveBeenCalledTimes(1);
-//     });
+    test('Play initially says Play', () => {
+      const playButton = screen.getByTestId('play-button-test');
+      expect(playButton.textContent).toBe('Play');
+    });
 
-//     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 Play button will trigger dispatch', () => {
+      const playButton = screen.getByTestId('play-button-test');
+      expect(playButton.textContent).toBe('Play');
+      fireEvent.click(playButton);
+      expect(dummyDispatch).toHaveBeenCalledTimes(1);
+    });
 
-//     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);
-//       expect(dispatch).toHaveBeenCalledTimes(1);
-//       state.tabs[87].playing = false;
-//     });
-//   });
+    test('Clicking Pause button will trigger dispatch', () => {
+      customInitialState.main.tabs[87].playing = true;
+      const playButton = screen.getByTestId('play-button-test');
+      fireEvent.click(playButton);
+      expect(dummyDispatch).toHaveBeenCalledTimes(1);
+    });
+  });

src/app/__tests__/TravelForwardBackward.test.tsx.tsx

@@ -0,0 +1,165 @@
+import React from 'react';
+import { render as rtlRender, screen, fireEvent } from '@testing-library/react';
+import TravelContainer from '../containers/TravelContainer';
+import { Provider } from 'react-redux';
+import { configureStore } from '@reduxjs/toolkit';
+import { mainSlice } from '../RTKslices'
+import { useDispatch } from 'react-redux';
+import '@testing-library/jest-dom/extend-expect'; // needed this to extend the jest-dom assertions  (ex toHaveTextContent)
+
+const customTabs = {
+    87: {
+      snapshots: [0, 1, 2, 3],
+      hierarchy: {
+        index: 0,
+        name: 1,
+        branch: 0,
+        stateSnapshot: {
+          state: {},
+          children: [
+            {
+              state: { test: 'test' },
+              name: 'App',
+              componentData: { actualDuration: 3.5 },
+            },
+          ],
+          route: {
+            id: 1,
+            url: 'http://localhost:8080/',
+          },
+        },
+        children: [
+          {
+            index: 1,
+            name: 2,
+            branch: 0,
+            stateSnapshot: {
+              state: {},
+              children: [
+                {
+                  state: { test: 'test' },
+                  name: 'App',
+                  componentData: { actualDuration: 3.5 },
+                },
+              ],
+              route: {
+                id: 2,
+                url: 'http://localhost:8080/',
+              },
+            },
+            children: [
+              {
+                index: 2,
+                name: 3,
+                branch: 0,
+                stateSnapshot: {
+                  state: {},
+                  children: [
+                    {
+                      state: { test: 'test' },
+                      name: 'App',
+                      componentData: { actualDuration: 3.5 },
+                    },
+                  ],
+                  route: {
+                    id: 3,
+                    url: 'http://localhost:8080/',
+                  },
+                },
+                children: [
+                  {
+                    index: 3,
+                    name: 4,
+                    branch: 0,
+                    stateSnapshot: {
+                      state: {},
+                      children: [
+                        {
+                          state: { test: 'test' },
+                          name: 'App',
+                          componentData: { actualDuration: 3.5 },
+                        },
+                      ],
+                      route: {
+                        id: 4,
+                        url: 'http://localhost:8080/test/',
+                      },
+                    },
+                    children: [],
+                  },
+                ],
+              },
+            ],
+          },
+        ],
+      },
+      currLocation: {
+        index: 0,
+        name: 1,
+        branch: 0,
+      },
+      sliderIndex: 3, //updated to 3 
+      viewIndex: -1,
+      playing: false,
+    },
+  }
+
+const customInitialState = {
+    main: {
+      port: null,
+      currentTab: 87, // Update with your desired value
+      currentTitle: null,
+      tabs: customTabs, // Replace with the actual (testing) tab data
+      currentTabInApp: null,
+      connectionStatus: false,
+      connectRequested: true,
+    },
+  };
+
+const customStore = configureStore({
+    reducer: {
+      main: mainSlice.reducer,
+    },
+    preloadedState: customInitialState, // Provide custom initial state
+    middleware: (getDefaultMiddleware) =>
+      getDefaultMiddleware({ serializableCheck: false }),
+  });
+  
+  const render = (component) => {
+    return rtlRender(
+      <Provider store={customStore}>
+          {component}
+      </Provider>
+    );
+  };
+
+
+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
+  }));  
+ 
+//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 dummyDispatch = jest.fn();
+    useDispatchMock.mockReturnValue(dummyDispatch);
+    beforeEach(() => {
+      render(<TravelContainer snapshotsLength={0} />);
+      dummyDispatch.mockClear();
+    });
+  
+    test('Clicking < Button button will trigger button', () => {
+      let buttons = screen.getAllByRole('button');
+      console.log(buttons);
+      fireEvent.click(buttons[1]);
+      expect(dummyDispatch).toHaveBeenCalledTimes(1);
+    });
+  
+    test('Clicking > Button button will trigger button', () => {
+      let buttons = screen.getAllByRole('button');
+      fireEvent.click(buttons[2]);
+      expect(dummyDispatch).toHaveBeenCalledTimes(1);
+    });
+  });