Merge pull request #29 from oslabs-beta/andrewb

Andrewb

Author: AndrewByun

src/app/__tests__/ActionContainer.test.tsx

@@ -11,6 +11,12 @@ import { store } from '../RTKstore';
 //so far i have imported provider, usedispatch, useselector, and store 
 //wrapped components in provider
 
+// jest.mock('react-redux', () => ({
+//   ...jest.requireActual('react-redux'), // include all the exports from the actual react-redux module
+//   useDispatch: jest.fn(),
+//   useSelector: jest.fn() //override the useDispatch from the react redux module with a jest mock function
+// }));
+
 // const render = component => rtlRender(
 //   <Provider store={store}>
 //     {component}
@@ -119,30 +125,15 @@ const state = {
 //creates jest mock function to simulate behavior of functions/methods
 const dispatch = jest.fn();
 
-//TESTING OUR CODE HERRE
-
-
-
-
-//ORGINAL CODE HERE
-
 jest.spyOn(React, 'useEffect').mockImplementation(() => jest.fn());
-jest.mock('../store');
-
-//jest.spyOn(React, 'useEffect').mockImplementation(() => jest.fn());: 
 //This line spies on the useEffect function from React, replacing it with a mocked implementation that returns an empty Jest mock function, 
 //effectively disabling its actual side effects during testing.
-
-//jest.mock('../store');: 
+jest.mock('../store');
 //This line mocks the import of a module located at '../store', which can be useful to isolate components from real Redux store behavior 
 //and provide custom mock behavior for testing purposes.
 
-
 const mockeduseStoreContext = jest.mocked(useStoreContext);
-mockeduseStoreContext.mockImplementation(() => [state, dispatch]);
-// jest.mocked(useStoreContext): This part of the code uses Jest's jest.mocked function to create a mocked version of the useStoreContext function. The jest.mocked function is used to mock functions and methods. It creates a mock that can be configured with custom behavior.
-
-// mockeduseStoreContext.mockImplementation(() => [state, dispatch]): After creating the mock, this line configures the mock to implement a specific behavior. In this case, it specifies that when useStoreContext is called, it should return an array containing two values: state and dispatch.
+mockeduseStoreContext.mockImplementation(() => [state, dispatch]); //After creating the mock, this line configures the mock to implement a specific behavior. In this case, it specifies that when useStoreContext is called, it should return an array containing two values: state and dispatch.
 
 
 ////////////////////////////////////////////////////////////////////////////////////
@@ -171,19 +162,19 @@ describe('unit testing for ActionContainer', () => {
     expect(screen.getByRole('complementary')).toBeInTheDocument();
   });
 
-//   test('Expect RouteDescription to be rendered', () => {
-//     expect(screen.getAllByText('MockRouteDescription')).toHaveLength(2);
-//   });
+  test('Expect RouteDescription to be rendered', () => {
+    expect(screen.getAllByText('MockRouteDescription')).toHaveLength(2);
+  });
 
-//   test('Expect SwitchApp to be rendered', () => {
-//     expect(screen.getByText('MockSwitchApp')).toBeInTheDocument();
-//   });
+  test('Expect SwitchApp to be rendered', () => {
+    expect(screen.getByText('MockSwitchApp')).toBeInTheDocument();
+  });
 
-//   test('Click works on clear button', () => {
-//     fireEvent.click(screen.getAllByRole('button')[0]);
-//     expect(dispatch).toHaveBeenCalledTimes(1);
-//   });
-// });
+  test('Click works on clear button', () => {
+    fireEvent.click(screen.getAllByRole('button')[0]);
+    expect(dispatch).toHaveBeenCalledTimes(1);
+  });
+});
 
 // describe('integration testing for ActionContainer', () => {
   // beforeEach(() => {
@@ -197,8 +188,8 @@ describe('unit testing for ActionContainer', () => {
   //   )
   // });
 
-//   test('Slider resets on clear button', () => {
-//     fireEvent.click(screen.getAllByRole('button')[0]);
-//     expect(screen.getByRole('slider')).toHaveStyle('left: 0');
-//   });
+  test('Slider resets on clear button', () => {
+    fireEvent.click(screen.getAllByRole('button')[0]);
+    expect(screen.getByRole('slider')).toHaveStyle('left: 0');
+  });
 });

src/app/__tests__/ActionContainerV2.test.tsx

@@ -7,7 +7,7 @@ import { Provider } from 'react-redux';
 import { configureStore } from '@reduxjs/toolkit';
 import { store } from '../RTKstore';
 import { mainSlice } from '../RTKslices'
-
+import { useDispatch } from 'react-redux';
 //Note for testing:
 //typically, jest.mock is commonly used in unit testing to isolate the code under test. 
 //In contrast, when performing integration testing of components with a real Redux store, 
@@ -137,12 +137,59 @@ const render = component => rtlRender(
     </Provider>
 );
 
+const MockRouteDescription = jest.fn();
+jest.mock('../components/RouteDescription', () => () => {
+  MockRouteDescription();
+  return <div>MockRouteDescription</div>;
+});
+
+const MockSwitchApp = jest.fn();
+jest.mock('../components/SwitchApp', () => () => {
+  MockSwitchApp();
+  return <div>MockSwitchApp</div>;
+});
 //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();
 
+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 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 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}/>)
+  });
+
+  test('expect top arrow to be rendered', ()=>{
+    // render(<ActionContainer actionView = {true} setActionView={setActionViewMock}/>)
+    expect(screen.getByRole('complementary')).toBeInTheDocument();
+  });
+
+  test('Expect RouteDescription to be rendered', () => {
+    // render(<ActionContainer actionView = {true} setActionView={setActionViewMock}/>)
+    expect(screen.getAllByText('MockRouteDescription')).toHaveLength(2);
+  });
+
+  test('Expect SwitchApp to be rendered', () => {
+    // render(<ActionContainer actionView = {true} setActionView={setActionViewMock}/>)
+    expect(screen.getByText('MockSwitchApp')).toBeInTheDocument();
+  });
+
+  test('Click works on clear button', () => {
+    fireEvent.click(screen.getAllByRole('button')[0]);
+    expect(dummyDispatch).toHaveBeenCalledTimes(1);
+  });
+})
+
 describe('Integration testing for ActionContainer.tsx', () => {
     test('renders the ActionContainer component', () => {
         //tests that the clearButton is rendered by testing if we can get "Clear"
@@ -152,6 +199,13 @@ describe('Integration testing for ActionContainer.tsx', () => {
         expect(setActionViewMock).toHaveBeenCalledWith(true);
         expect(clearButton).toBeInTheDocument();
       });
+
+      test('Slider resets on clear button', ()=>{
+        render(<ActionContainer actionView = {true} setActionView={setActionViewMock}/>)
+        render( <TravelContainer snapshotsLength={0} />)
+        fireEvent.click(screen.getAllByRole('button')[0]);
+        expect(screen.getByRole('slider')).toHaveStyle('left: 0');
+      });
 });
 
 

src/app/__tests__/action.test.tsx

@@ -18,6 +18,7 @@ jest.mock('react-redux', () => ({
   useDispatch: jest.fn(), // set up a mock function for useDispatch
 }));
 
+//wraps the component with our provider each time we use render
 const render = component => rtlRender(
   <Provider store={store}>
     {component}
@@ -130,8 +131,6 @@ describe('Unit testing for Action.tsx', () => {
     });
 
     test('Clicking Jump button should trigger changeSlider and changeView', () => {
-      // const dummyDispatch = jest.fn();
-      // useDispatchMock.mockReturnValue(dummyDispatch);
       render(   
         <Action {...props} />
       );

src/app/store.tsx

@@ -1,5 +1,5 @@
-// /* eslint-disable @typescript-eslint/no-explicit-any */
-// import React, { useContext } from 'react';
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import React, { useContext } from 'react';
 
-// export const StoreContext = React.createContext(); // we create a context object and assign it to StoreContext
-// export const useStoreContext = () => useContext(StoreContext); // the useStoreContext function allows us to use use the above declared StoreContext.
+export const StoreContext = React.createContext(); // we create a context object and assign it to StoreContext
+export const useStoreContext = () => useContext(StoreContext); // the useStoreContext function allows us to use use the above declared StoreContext.