integration test for ActionContainer using RTK finally passed

Author: kelvinmirhan

src/app/__tests__/ActionContainer.test.tsx

@@ -186,16 +186,16 @@ describe('unit testing for ActionContainer', () => {
 // });
 
 // describe('integration testing for ActionContainer', () => {
-//   beforeEach(() => {
-//     mockeduseStoreContext.mockClear();
-//     dispatch.mockClear();
-//     render(
-//       <ActionContainer actionView={true} />
-//     )
-//     render(
-//       <TravelContainer snapshotsLength={0} />
-//     )
-//   });
+  // beforeEach(() => {
+  //   mockeduseStoreContext.mockClear();
+  //   dispatch.mockClear();
+  //   render(
+  //     <ActionContainer actionView={true} />
+  //   )
+  //   render(
+  //     <TravelContainer snapshotsLength={0} />
+  //   )
+  // });
 
 //   test('Slider resets on clear button', () => {
 //     fireEvent.click(screen.getAllByRole('button')[0]);

src/app/__tests__/ActionContainerV2.test.tsx

@@ -14,18 +14,113 @@ import { mainSlice } from '../RTKslices'
 //you typically don't need to use jest.mock because you're interested in testing how the real components interact with the actual store. 
 //The decision to use jest.mock depends on the type of testing (unit or integration) and your specific testing goals.
 
+    const customTabs = {
+        87: {
+          snapshots: [1, 2, 3, 4],
+          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: 0,
+          viewIndex: -1,
+        },
+      }
 
-const customInitialState = {
-    main: {
-      port: null,
-      currentTab: null,
-      currentTitle: 'No Target',
-      tabs: {},
-      currentTabInApp: null,
-      connectionStatus: true,
-      reconnectRequested: 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,
+          reconnectRequested: false,
+        },
+      };
 
 const customStore = configureStore({
   reducer: {
@@ -42,13 +137,19 @@ const render = component => rtlRender(
     </Provider>
 );
 
+//need to add this mockFunction for setActionView
+//because in actual actioncontainer componenent, it is prop drilled down from maincontainer
+//here we set it as a jest.fn() 
+//then we pass it into our actionContainer on render
+const setActionViewMock = jest.fn();
+
 describe('Integration testing for ActionContainer.tsx', () => {
     test('renders the ActionContainer component', () => {
         //tests that the clearButton is rendered by testing if we can get "Clear"
-        render(<ActionContainer />);
+        //need to set actionView to true to correctly render clearbutton
+        render(<ActionContainer setActionView={setActionViewMock} actionView={true}/>);
         const clearButton = screen.getByText('Clear'); // Use an existing element
-        //need to click the clear button or anything for state to be defined?
-        // fireEvent.click()
+        expect(setActionViewMock).toHaveBeenCalledWith(true);
         expect(clearButton).toBeInTheDocument();
       });
 })