Skip to content

Commit d96bd1e

Browse files
kelvinmirhankelvinmirhan
authored
Merge pull request #28 from oslabs-beta/featurekelvin
Featurekelvin
2 parents d563029 + a74adfb commit d96bd1e

File tree

6 files changed

+191
-28
lines changed

6 files changed

+191
-28
lines changed

‎package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -237,6 +237,7 @@
237237
"react-spinners": "^0.11.0",
238238
"recoil": "0.0.10",
239239
"redux": "^4.2.1",
240+
"redux-mock-store": "^1.5.4",
240241
"styled-components": "^6.0.4",
241242
"util": "^0.12.4",
242243
"web-vitals": "^1.1.0",

‎src/app/RTKslices.tsx

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,7 @@ export const mainSlice = createSlice({
4040

4141
emptySnapshots: (state) => {
4242
const { tabs, currentTab, port } = state;
43+
console.log("this is state 2", current(state));
4344

4445
port.postMessage({ action: 'emptySnap', tabId: currentTab });
4546

@@ -208,8 +209,8 @@ export const mainSlice = createSlice({
208209

209210
const nameFromIndex = findName(action.payload, hierarchy);
210211

211-
console.log('this is action payload', action.payload);
212-
console.log('this is nameFromIndex', nameFromIndex);
212+
// console.log('this is action payload', action.payload);
213+
// console.log('this is nameFromIndex', nameFromIndex);
213214

214215
port.postMessage({
215216
action: 'jumpToSnap',

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

Lines changed: 19 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -4,18 +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-
const render = component => rtlRender(
15-
<Provider store={store}>
16-
{component}
17-
</Provider>
18-
)
14+
// const render = component => rtlRender(
15+
// <Provider store={store}>
16+
// {component}
17+
// </Provider>
18+
// )
19+
1920

2021
const state = {
2122
tabs: {
@@ -185,16 +186,16 @@ describe('unit testing for ActionContainer', () => {
185186
// });
186187

187188
// 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-
// });
189+
// beforeEach(() => {
190+
// mockeduseStoreContext.mockClear();
191+
// dispatch.mockClear();
192+
// render(
193+
// <ActionContainer actionView={true} />
194+
// )
195+
// render(
196+
// <TravelContainer snapshotsLength={0} />
197+
// )
198+
// });
198199

199200
// test('Slider resets on clear button', () => {
200201
// fireEvent.click(screen.getAllByRole('button')[0]);

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

Lines changed: 158 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,158 @@
1+
import React from 'react';
2+
import { render as rtlRender, screen, fireEvent } from '@testing-library/react';
3+
import '@testing-library/jest-dom/extend-expect';
4+
import ActionContainer from '../containers/ActionContainer';
5+
import TravelContainer from '../containers/TravelContainer';
6+
import { Provider } from 'react-redux';
7+
import { configureStore } from '@reduxjs/toolkit';
8+
import { store } from '../RTKstore';
9+
import { mainSlice } from '../RTKslices'
10+
11+
//Note for testing:
12+
//typically, jest.mock is commonly used in unit testing to isolate the code under test.
13+
//In contrast, when performing integration testing of components with a real Redux store,
14+
//you typically don't need to use jest.mock because you're interested in testing how the real components interact with the actual store.
15+
//The decision to use jest.mock depends on the type of testing (unit or integration) and your specific testing goals.
16+
17+
const customTabs = {
18+
87: {
19+
snapshots: [1, 2, 3, 4],
20+
hierarchy: {
21+
index: 0,
22+
name: 1,
23+
branch: 0,
24+
stateSnapshot: {
25+
state: {},
26+
children: [
27+
{
28+
state: { test: 'test' },
29+
name: 'App',
30+
componentData: { actualDuration: 3.5 },
31+
},
32+
],
33+
route: {
34+
id: 1,
35+
url: 'http://localhost:8080/',
36+
},
37+
},
38+
children: [
39+
{
40+
index: 1,
41+
name: 2,
42+
branch: 0,
43+
stateSnapshot: {
44+
state: {},
45+
children: [
46+
{
47+
state: { test: 'test' },
48+
name: 'App',
49+
componentData: { actualDuration: 3.5 },
50+
},
51+
],
52+
route: {
53+
id: 2,
54+
url: 'http://localhost:8080/',
55+
},
56+
},
57+
children: [
58+
{
59+
index: 2,
60+
name: 3,
61+
branch: 0,
62+
stateSnapshot: {
63+
state: {},
64+
children: [
65+
{
66+
state: { test: 'test' },
67+
name: 'App',
68+
componentData: { actualDuration: 3.5 },
69+
},
70+
],
71+
route: {
72+
id: 3,
73+
url: 'http://localhost:8080/',
74+
},
75+
},
76+
children: [
77+
{
78+
index: 3,
79+
name: 4,
80+
branch: 0,
81+
stateSnapshot: {
82+
state: {},
83+
children: [
84+
{
85+
state: { test: 'test' },
86+
name: 'App',
87+
componentData: { actualDuration: 3.5 },
88+
},
89+
],
90+
route: {
91+
id: 4,
92+
url: 'http://localhost:8080/test/',
93+
},
94+
},
95+
children: [],
96+
},
97+
],
98+
},
99+
],
100+
},
101+
],
102+
},
103+
currLocation: {
104+
index: 0,
105+
name: 1,
106+
branch: 0,
107+
},
108+
sliderIndex: 0,
109+
viewIndex: -1,
110+
},
111+
}
112+
113+
const customInitialState = {
114+
main: {
115+
port: null,
116+
currentTab: 87, // Update with your desired value
117+
currentTitle: null,
118+
tabs: customTabs, // Replace with the actual (testing) tab data
119+
currentTabInApp: null,
120+
connectionStatus: false,
121+
reconnectRequested: false,
122+
},
123+
};
124+
125+
const customStore = configureStore({
126+
reducer: {
127+
main: mainSlice.reducer,
128+
},
129+
preloadedState: customInitialState, // Provide custom initial state
130+
middleware: (getDefaultMiddleware) =>
131+
getDefaultMiddleware({ serializableCheck: false }),
132+
});
133+
134+
const render = component => rtlRender(
135+
<Provider store={customStore}>
136+
{component}
137+
</Provider>
138+
);
139+
140+
//need to add this mockFunction for setActionView
141+
//because in actual actioncontainer componenent, it is prop drilled down from maincontainer
142+
//here we set it as a jest.fn()
143+
//then we pass it into our actionContainer on render
144+
const setActionViewMock = jest.fn();
145+
146+
describe('Integration testing for ActionContainer.tsx', () => {
147+
test('renders the ActionContainer component', () => {
148+
//tests that the clearButton is rendered by testing if we can get "Clear"
149+
//need to set actionView to true to correctly render clearbutton
150+
render(<ActionContainer setActionView={setActionViewMock} actionView={true}/>);
151+
const clearButton = screen.getByText('Clear'); // Use an existing element
152+
expect(setActionViewMock).toHaveBeenCalledWith(true);
153+
expect(clearButton).toBeInTheDocument();
154+
});
155+
});
156+
157+
158+

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

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -6,14 +6,16 @@ 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 * as reactRedux from 'react-redux'
10+
import { useDispatch } from 'react-redux'; //more explicit about what we are importing from library for a more focused testing approach
1011

1112
// @ts-ignore
1213
Action.cleanTime = jest.fn().mockReturnValue();
1314

15+
//creating a mock function to mock the react-redux module and overwrite the useDispatch method with a jest.fn()
1416
jest.mock('react-redux', () => ({
1517
...jest.requireActual('react-redux'), // Use the actual react-redux module except for the functions you want to mock
16-
useDispatch: jest.fn(),
18+
useDispatch: jest.fn(), // set up a mock function for useDispatch
1719
}));
1820

1921
const render = component => rtlRender(
@@ -23,11 +25,9 @@ const render = component => rtlRender(
2325
)
2426

2527
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();
30-
useDispatchMock.mockReturnValue(dummyDispatch);
28+
const useDispatchMock = useDispatch as jest.Mock; //getting a reference to the mock function you setup during jest.mock configuration on line 18
29+
const dummyDispatch = jest.fn(); //separate mock function created because we need to explicitly define on line 30 what
30+
useDispatchMock.mockReturnValue(dummyDispatch);//exactly useDispatchMock returns (which is a jest.fn())
3131
const props = {
3232
key: 'actions2',
3333
selected: true,
@@ -142,6 +142,8 @@ describe('Unit testing for Action.tsx', () => {
142142
});
143143
});
144144

145+
146+
145147
//these were the tests for 9 and 10 before our changes... in progress
146148

147149
// test('Clicking the snapshot should trigger onClick', () => {

‎src/app/containers/ActionContainer.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -203,7 +203,7 @@ function ActionContainer(props): JSX.Element {
203203
dispatch(emptySnapshots()); // set slider back to zero, visually
204204
resetSlider();
205205
}}
206-
type='button'
206+
type='button'
207207
>
208208
Clear
209209
</Button>

0 commit comments

Comments
 (0)