testing for mainslider completed

Author: kelvinmirhan

src/app/__tests__/MainSliderV2.test.tsx

@@ -13,11 +13,10 @@ const customTabs = {
       },
   }
 
-
 const customInitialState = {
     main: {
       port: null,
-      currentTab: 87, 
+      currentTab: 100, 
       currentTitle: null,
       tabs: customTabs, // Replace with the actual (testing) tab data
       currentTabInApp: null,
@@ -39,9 +38,33 @@ 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');
+      });
+    });
+
+  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')
+      });
+    });
 
-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
-  }));
+});