Skip to content

Commit 728bc10

Browse files
AndrewByunAndrewByun
committed
storing minor changes for testing
1 parent 759ae6a commit 728bc10

File tree

3 files changed

+52
-76
lines changed

3 files changed

+52
-76
lines changed

‎src/app/__tests__/ActionContainer.test.tsx

Lines changed: 37 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,19 @@ import React from 'react';
44
import { render as rtlRender, screen, fireEvent } from '@testing-library/react';
55
import '@testing-library/jest-dom/extend-expect';
66
import ActionContainer from '../containers/ActionContainer';
7-
// import { useStoreContext } from '../store';
7+
import { useStoreContext } from '../store';
88
import TravelContainer from '../containers/TravelContainer';
9-
// import { Provider, useDispatch, useSelector } from 'react-redux';
10-
// import { store } from '../RTKstore';
9+
import { Provider, useDispatch, useSelector } from 'react-redux';
10+
import { store } from '../RTKstore';
1111
//so far i have imported provider, usedispatch, useselector, and store
1212
//wrapped components in provider
1313

14+
// jest.mock('react-redux', () => ({
15+
// ...jest.requireActual('react-redux'), // include all the exports from the actual react-redux module
16+
// useDispatch: jest.fn(),
17+
// useSelector: jest.fn() //override the useDispatch from the react redux module with a jest mock function
18+
// }));
19+
1420
const render = component => rtlRender(
1521
<Provider store={store}>
1622
{component}
@@ -118,30 +124,15 @@ const state = {
118124
//creates jest mock function to simulate behavior of functions/methods
119125
const dispatch = jest.fn();
120126

121-
//TESTING OUR CODE HERRE
122-
123-
124-
125-
126-
//ORGINAL CODE HERE
127-
128127
jest.spyOn(React, 'useEffect').mockImplementation(() => jest.fn());
129-
jest.mock('../store');
130-
131-
//jest.spyOn(React, 'useEffect').mockImplementation(() => jest.fn());:
132128
//This line spies on the useEffect function from React, replacing it with a mocked implementation that returns an empty Jest mock function,
133129
//effectively disabling its actual side effects during testing.
134-
135-
//jest.mock('../store');:
130+
jest.mock('../store');
136131
//This line mocks the import of a module located at '../store', which can be useful to isolate components from real Redux store behavior
137132
//and provide custom mock behavior for testing purposes.
138133

139-
140134
const mockeduseStoreContext = jest.mocked(useStoreContext);
141-
mockeduseStoreContext.mockImplementation(() => [state, dispatch]);
142-
// 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.
143-
144-
// 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.
135+
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.
145136

146137

147138
////////////////////////////////////////////////////////////////////////////////////
@@ -170,34 +161,34 @@ describe('unit testing for ActionContainer', () => {
170161
expect(screen.getByRole('complementary')).toBeInTheDocument();
171162
});
172163

173-
// test('Expect RouteDescription to be rendered', () => {
174-
// expect(screen.getAllByText('MockRouteDescription')).toHaveLength(2);
175-
// });
164+
test('Expect RouteDescription to be rendered', () => {
165+
expect(screen.getAllByText('MockRouteDescription')).toHaveLength(2);
166+
});
176167

177-
// test('Expect SwitchApp to be rendered', () => {
178-
// expect(screen.getByText('MockSwitchApp')).toBeInTheDocument();
179-
// });
168+
test('Expect SwitchApp to be rendered', () => {
169+
expect(screen.getByText('MockSwitchApp')).toBeInTheDocument();
170+
});
180171

181-
// test('Click works on clear button', () => {
182-
// fireEvent.click(screen.getAllByRole('button')[0]);
183-
// expect(dispatch).toHaveBeenCalledTimes(1);
184-
// });
185-
// });
172+
test('Click works on clear button', () => {
173+
fireEvent.click(screen.getAllByRole('button')[0]);
174+
expect(dispatch).toHaveBeenCalledTimes(1);
175+
});
176+
});
186177

187-
// describe('integration testing for ActionContainer', () => {
188-
// beforeEach(() => {
189-
// mockeduseStoreContext.mockClear();
190-
// dispatch.mockClear();
191-
// render(
192-
// <ActionContainer actionView={true} />
193-
// )
194-
// render(
195-
// <TravelContainer snapshotsLength={0} />
196-
// )
197-
// });
178+
describe('integration testing for ActionContainer', () => {
179+
beforeEach(() => {
180+
mockeduseStoreContext.mockClear();
181+
dispatch.mockClear();
182+
render(
183+
<ActionContainer actionView={true} />
184+
)
185+
render(
186+
<TravelContainer snapshotsLength={0} />
187+
)
188+
});
198189

199-
// test('Slider resets on clear button', () => {
200-
// fireEvent.click(screen.getAllByRole('button')[0]);
201-
// expect(screen.getByRole('slider')).toHaveStyle('left: 0');
202-
// });
190+
test('Slider resets on clear button', () => {
191+
fireEvent.click(screen.getAllByRole('button')[0]);
192+
expect(screen.getByRole('slider')).toHaveStyle('left: 0');
193+
});
203194
});

‎src/app/__tests__/action.test.tsx

Lines changed: 11 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -6,28 +6,30 @@ import Action from '../components/Action';
66
import { changeView, changeSlider } from '../RTKslices';
77
import { Provider } from 'react-redux';
88
import { store } from '../RTKstore'; //importing store for testing to give us access to Redux Store we configured
9-
import * as reactRedux from 'react-redux'
9+
import { useDispatch } from 'react-redux' //import all exports from react-redux as an object, reactRedux
1010

1111
// @ts-ignore
1212
Action.cleanTime = jest.fn().mockReturnValue();
13-
13+
//create a mock of the react-redux module
1414
jest.mock('react-redux', () => ({
15-
...jest.requireActual('react-redux'), // Use the actual react-redux module except for the functions you want to mock
16-
useDispatch: jest.fn(),
15+
...jest.requireActual('react-redux'), // include all the exports from the actual react-redux module
16+
useDispatch: jest.fn(), //override the useDispatch from the react redux module with a jest mock function
1717
}));
1818

19+
//wraps the component with our provider each time we use render
1920
const render = component => rtlRender(
2021
<Provider store={store}>
2122
{component}
2223
</Provider>
2324
)
2425

2526
describe('Unit testing for Action.tsx', () => {
26-
// const useSelectorMock = jest.spyOn(reactRedux, 'useSelector')
27-
// const useDispatchMock = jest.spyOn(reactRedux, 'useDispatch')
28-
const useDispatchMock = reactRedux.useDispatch as jest.Mock;
29-
const dummyDispatch = jest.fn();
27+
//declare a var useDispatchMock, and assign it to the useDispatch from the reactRedux object, and set it's type as jest.Mock
28+
//we expect useDispatchMock to have a type assertion of jest.Mock
29+
const useDispatchMock = useDispatch as jest.Mock;
30+
const dummyDispatch = jest.fn(); //define a mock function and store it in the var dummyDispatch
3031
useDispatchMock.mockReturnValue(dummyDispatch);
32+
//when the test runs, its going to see that the component invokes useDispatch, but since we have it overridden as a jest mock func, it'll run that instead, and we set it up so that when the jest mock func runs, it returns dummy dispatch to run in its place. This allows us to check the number of times dummy dispatch was called, which would represent the number of times useDispatch was called.
3133
const props = {
3234
key: 'actions2',
3335
selected: true,
@@ -130,8 +132,6 @@ describe('Unit testing for Action.tsx', () => {
130132
});
131133

132134
test('Clicking Jump button should trigger changeSlider and changeView', () => {
133-
// const dummyDispatch = jest.fn();
134-
// useDispatchMock.mockReturnValue(dummyDispatch);
135135
render(
136136
<Action {...props} />
137137
);
@@ -140,19 +140,4 @@ describe('Unit testing for Action.tsx', () => {
140140
expect(dummyDispatch).toHaveBeenCalledWith(changeView(props.index));
141141
});
142142
});
143-
});
144-
145-
//these were the tests for 9 and 10 before our changes... in progress
146-
147-
// test('Clicking the snapshot should trigger onClick', () => {
148-
// render(<Action {...props} />);
149-
// fireEvent.click(screen.getByRole('presentation'));
150-
// expect(props.dispatch).toHaveBeenCalledWith(changeView(props.index));;
151-
// });
152-
153-
// test('Clicking Jump button should trigger changeSlider and changeView', () => {
154-
// render(<Action {...props} />);
155-
// fireEvent.click(screen.getAllByRole('button')[1]);
156-
// expect(props.dispatch).toHaveBeenCalledWith(changeSlider(props.index));
157-
// expect(props.dispatch).toHaveBeenCalledWith(changeView(props.index));
158-
// });
143+
});

‎src/app/store.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
// /* eslint-disable @typescript-eslint/no-explicit-any */
2-
// import React, { useContext } from 'react';
1+
/* eslint-disable @typescript-eslint/no-explicit-any */
2+
import React, { useContext } from 'react';
33

4-
// export const StoreContext = React.createContext(); // we create a context object and assign it to StoreContext
5-
// export const useStoreContext = () => useContext(StoreContext); // the useStoreContext function allows us to use use the above declared StoreContext.
4+
export const StoreContext = React.createContext(); // we create a context object and assign it to StoreContext
5+
export const useStoreContext = () => useContext(StoreContext); // the useStoreContext function allows us to use use the above declared StoreContext.

0 commit comments

Comments
 (0)