Merge pull request #40 from oslabs-beta/kelvin/finished/web

removed unused comments, replaced store and reducer with RTK files, u…

Author: ctstamper

src/app/__tests__/ActionContainer.test.tsx

@@ -4,10 +4,8 @@ import '@testing-library/jest-dom/extend-expect';
 import { TextEncoder } from 'util';
 global.TextEncoder = TextEncoder;
 import ButtonsContainer from '../containers/ButtonsContainer';
-// import { useStoreContext } from '../store';
 import userEvent from '@testing-library/user-event';
-// import { toggleMode } from '../actions/actions'; 
-import { toggleMode, mainSlice } from '../RTKslices';
+import { toggleMode, mainSlice } from '../slices/mainSlice';
 import { useDispatch, Provider } from 'react-redux';
 import { configureStore } from '@reduxjs/toolkit';
 

src/app/__tests__/ActionContainerV2.test.tsx

@@ -2,9 +2,8 @@ import React from 'react';
 import { render as rtlRender, 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';
 import { configureStore } from '@reduxjs/toolkit';
-import { mainSlice } from '../RTKslices'
+import { mainSlice } from '../slices/mainSlice'
 import { Provider } from 'react-redux';
 
 const customTabs = {
@@ -107,7 +106,7 @@ const customInitialState = {
   main: {
     port: null,
     currentTab: 87, // Update with your desired value
-    currentTitle: 'No Target', //I updated this to 'No Target' to match the initialState in RTKslices.tsx. It used to be null, but that doesn't make sense because if it doesn't get updated, we would render null instead of No Target
+    currentTitle: 'No Target', //I updated this to 'No Target' to match the initialState in mainSlice.ts. It used to be null, but that doesn't make sense because if it doesn't get updated, we would render null instead of No Target
     tabs: customTabs, // Replace with the actual (testing) tab data
     currentTabInApp: 'null',
     connectionStatus: false,

src/app/__tests__/ButtonContainer.test.tsx

@@ -2,8 +2,6 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 import MainContainer from '../containers/MainContainer';
-
-//Added :
 import { useDispatch, useSelector } from 'react-redux';
 
 jest.mock('react-redux', () => ({
@@ -16,9 +14,7 @@ const mockState = {
     tabs: {},
     currentTab: null,
   },
-};
-
-// End 
+};// End 
 
 const chrome = require('sinon-chrome');
 
@@ -63,6 +59,7 @@ global.chrome = chrome;
 const port = {
   onMessage: {
     addListener: () => {},
+    hasListener: () => {},
   },
   onDisconnect: {
     addListener: () => {},

src/app/__tests__/ErrorContainer.test.tsx

@@ -1,50 +1,70 @@
 import React from 'react';
-import { render, screen } from '@testing-library/react';
+import { render as rtlRender, screen } from '@testing-library/react';
 import '@testing-library/jest-dom/extend-expect';
-import { TextEncoder } from 'util';
-global.TextEncoder = TextEncoder;
 import MainSlider from '../components/MainSlider';
-import { useStoreContext } from '../store';
+import { mainSlice } from '../slices/mainSlice'
+import { Provider } from 'react-redux';
+import { configureStore } from '@reduxjs/toolkit';
 
-jest.mock('../store');
-const mockeduseStoreContext = jest.mocked(useStoreContext);
 
-describe('Unit testing for MainSlider.jsx', () => {
-  const props = {
-    snapshotsLength: 1,
-  };
-
-  const state = {
-    tabs: {
-      100: {
+const customTabs = {
+    100: {
         sliderIndex: 1,
       },
+  }
+
+const customInitialState = {
+    main: {
+      port: null,
+      currentTab: 100, 
+      currentTitle: null,
+      tabs: customTabs, // Replace with the actual (testing) tab data
+      currentTabInApp: null,
+      connectionStatus: false,
+      connectRequested: true,
     },
-    currentTab: 100,
   };
 
-  const dispatch = jest.fn();
-  mockeduseStoreContext.mockImplementation(() => [state, dispatch]);
+const customStore = configureStore({
+    reducer: {
+      main: mainSlice.reducer,
+    },
+    preloadedState: customInitialState, 
+    middleware: (getDefaultMiddleware) =>
+      getDefaultMiddleware({ serializableCheck: false }),
+  });
+
+const render = component => rtlRender(
+    <Provider store={customStore}>
+      {component}
+    </Provider>
+  );
+
+  describe('Unit testing for MainSlider.jsx', () => {
+    const props = {
+      snapshotsLength: 1,
+    };
 
   describe('When user only has one snapshot to view', () => {
     test('Component should have min, max, value with correct values to indicate slider position for correct tab', () => {
       render(<MainSlider {...props} />);
-      expect(screen.getByRole('slider')).toHaveAttribute('aria-valuemin', '0');
-      expect(screen.getByRole('slider')).toHaveAttribute('aria-valuemax', '0');
-      expect(screen.getByRole('slider')).toHaveAttribute('aria-valuenow', '0');
+        expect(screen.getByRole('slider')).toHaveAttribute('aria-valuemin', '0');
+        expect(screen.getByRole('slider')).toHaveAttribute('aria-valuemax', '0');
+        expect(screen.getByRole('slider')).toHaveAttribute('aria-valuenow', '0');
+      });
     });
-  });
 
   describe('When there are multiple snapshots and we are looking in between', () => {
-    const props = {
-      snapshotsLength: 3,
-    };
-
-    test('Component should have min, max, value with correct values to indicate slider position when there are multiple snapshots', () => {
-      render(<MainSlider {...props} />);
-      expect(screen.getByRole('slider')).toHaveAttribute('aria-valuemax', '2');
-      expect(screen.getByRole('slider')).toHaveAttribute('aria-valuemin', '0');
-      expect(screen.getByRole('slider')).toHaveAttribute('aria-valuenow','0')
+      const props = {
+        snapshotsLength: 3,
+      };
+  
+      test('Component should have min, max, value with correct values to indicate slider position when there are multiple snapshots', () => {
+        render(<MainSlider {...props} />);
+        expect(screen.getByRole('slider')).toHaveAttribute('aria-valuemax', '2');
+        expect(screen.getByRole('slider')).toHaveAttribute('aria-valuemin', '0');
+        expect(screen.getByRole('slider')).toHaveAttribute('aria-valuenow','0')
+      });
     });
-  });
-});
+
+});