Skip to content

Commit 62e3497

Browse files
AndrewByunAndrewByun
authored
Merge pull request #30 from oslabs-beta/andrewb
button container test file fully converted to use RTK
2 parents acd6f9e + 4b6ee3d commit 62e3497

File tree

4 files changed

+300
-45
lines changed

4 files changed

+300
-45
lines changed

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

Lines changed: 158 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,78 +1,204 @@
11
import React from 'react';
2-
import { render, screen, fireEvent } from '@testing-library/react';
2+
import { render as rtlRender, screen, fireEvent } from '@testing-library/react';
33
import '@testing-library/jest-dom/extend-expect';
44
import { TextEncoder } from 'util';
55
global.TextEncoder = TextEncoder;
66
import ButtonsContainer from '../containers/ButtonsContainer';
7-
import { useStoreContext } from '../store';
7+
// import { useStoreContext } from '../store';
88
import userEvent from '@testing-library/user-event';
9-
import { toggleMode } from '../actions/actions';
9+
// import { toggleMode } from '../actions/actions';
10+
import { toggleMode, mainSlice } from '../RTKslices';
11+
import { useDispatch, Provider } from 'react-redux';
12+
import { configureStore } from '@reduxjs/toolkit';
1013

1114
// const { Steps } = require('intro.js-react');
12-
jest.mock('../store');
13-
const mockedUsedStoreContext = jest.mocked(useStoreContext);
15+
// jest.mock('../store');
16+
// const mockedUsedStoreContext = jest.mocked(useStoreContext);
1417
// useStoreContext as jest.Mock<useStoreContext>.mockImplementaton(() => [state, dispatch])
1518

19+
const customTabs = {
20+
87: {
21+
snapshots: [1, 2, 3, 4],
22+
hierarchy: {
23+
index: 0,
24+
name: 1,
25+
branch: 0,
26+
stateSnapshot: {
27+
state: {},
28+
children: [
29+
{
30+
state: { test: 'test' },
31+
name: 'App',
32+
componentData: { actualDuration: 3.5 },
33+
},
34+
],
35+
route: {
36+
id: 1,
37+
url: 'http://localhost:8080/',
38+
},
39+
},
40+
children: [
41+
{
42+
index: 1,
43+
name: 2,
44+
branch: 0,
45+
stateSnapshot: {
46+
state: {},
47+
children: [
48+
{
49+
state: { test: 'test' },
50+
name: 'App',
51+
componentData: { actualDuration: 3.5 },
52+
},
53+
],
54+
route: {
55+
id: 2,
56+
url: 'http://localhost:8080/',
57+
},
58+
},
59+
children: [
60+
{
61+
index: 2,
62+
name: 3,
63+
branch: 0,
64+
stateSnapshot: {
65+
state: {},
66+
children: [
67+
{
68+
state: { test: 'test' },
69+
name: 'App',
70+
componentData: { actualDuration: 3.5 },
71+
},
72+
],
73+
route: {
74+
id: 3,
75+
url: 'http://localhost:8080/',
76+
},
77+
},
78+
children: [
79+
{
80+
index: 3,
81+
name: 4,
82+
branch: 0,
83+
stateSnapshot: {
84+
state: {},
85+
children: [
86+
{
87+
state: { test: 'test' },
88+
name: 'App',
89+
componentData: { actualDuration: 3.5 },
90+
},
91+
],
92+
route: {
93+
id: 4,
94+
url: 'http://localhost:8080/test/',
95+
},
96+
},
97+
children: [],
98+
},
99+
],
100+
},
101+
],
102+
},
103+
],
104+
},
105+
currLocation: {
106+
index: 0,
107+
name: 1,
108+
branch: 0,
109+
},
110+
sliderIndex: 0,
111+
viewIndex: -1,
112+
},
113+
}
114+
115+
const customInitialState = {
116+
main: {
117+
port: null,
118+
currentTab: 87, // Update with your desired value
119+
currentTitle: null,
120+
tabs: customTabs, // Replace with the actual (testing) tab data
121+
currentTabInApp: null,
122+
connectionStatus: false,
123+
connectRequested: true,
124+
},
125+
};
126+
127+
const customStore = configureStore({
128+
reducer: {
129+
main: mainSlice.reducer,
130+
},
131+
preloadedState: customInitialState, // Provide custom initial state
132+
middleware: (getDefaultMiddleware) =>
133+
getDefaultMiddleware({ serializableCheck: false }),
134+
});
135+
136+
const render = component => rtlRender(
137+
<Provider store={customStore}>
138+
{component}
139+
</Provider>
140+
);
141+
142+
jest.mock('react-redux', () => ({
143+
...jest.requireActual('react-redux'), // Use the actual react-redux module except for the functions you want to mock
144+
useDispatch: jest.fn(), // set up a mock function for useDispatch
145+
}));
146+
147+
//these are needed for the Clicking pause-button toggles locked/unlocked test, as the onClick triggers the exportHandler, which uses the .creatObjectURL and .revokeObjectURL methods, so we declare them as jest functions here
16148
global.URL.createObjectURL = jest.fn(() => 'https://pdf.com');
17149
global.URL.revokeObjectURL = jest.fn();
18150

19151
describe('Unit testing for ButtonContainer', () => {
152+
const useDispatchMock = useDispatch as jest.Mock; //getting a reference to the mock function you setup during jest.mock configuration on line 18
153+
const dummyDispatch = jest.fn(); //separate mock function created because we need to explicitly define on line 30 what
154+
useDispatchMock.mockReturnValue(dummyDispatch);//exactly useDispatchMock returns (which is a jest.fn())
20155
beforeEach;
21156

22-
const state = {
23-
tabs: {
24-
87: {
25-
snapshots: [1, 2, 3, 4],
26-
sliderIndex: 0,
27-
viewIndex: -1,
28-
mode: {
29-
paused: true,
30-
locked: false,
31-
},
32-
},
33-
},
34-
currentTab: 87,
35-
};
157+
const currentTab = customInitialState.main.tabs[customInitialState.main.currentTab];
36158

37-
const currentTab = state.tabs[state.currentTab];
38-
const dispatch = jest.fn();
39-
const exportHandler = jest.fn().mockImplementation(() => 'clicked');
40-
const importHandler = jest.fn();
41-
const fileDownload = jest.fn();
159+
// const dispatch = jest.fn();
160+
// const exportHandler = jest.fn().mockImplementation(() => 'clicked');
161+
// const importHandler = jest.fn();
162+
// const fileDownload = jest.fn();
42163

43-
mockedUsedStoreContext.mockImplementation(() => [state, dispatch]);
164+
// mockedUsedStoreContext.mockImplementation(() => [state, dispatch]);
44165
// useStoreContext.mockImplementation(() => [state, dispatch]);
45166

46167
beforeEach(() => {
47-
dispatch.mockClear();
48-
mockedUsedStoreContext.mockClear();
168+
// dispatch.mockClear();
169+
// mockedUsedStoreContext.mockClear();
49170
currentTab.mode = {
50171
paused: true,
51172
};
52173
});
53174

54175
describe('When button container is loaded', () => {
55-
test('it should have 4 buttons', () => {
176+
test('it should have 5 buttons', () => {
177+
customInitialState.main.connectionStatus = true;
56178
render(<ButtonsContainer />);
57-
expect(screen.getAllByRole('button')).toHaveLength(4);
179+
// console.log(screen.getAllByRole('button')[4])
180+
expect(screen.getAllByRole('button')).toHaveLength(5);
58181
expect(screen.getAllByRole('button')[0]).toHaveTextContent('Locked');
59182
expect(screen.getAllByRole('button')[1]).toHaveTextContent('Download');
60183
expect(screen.getAllByRole('button')[2]).toHaveTextContent('Upload');
61184
expect(screen.getAllByRole('button')[3]).toHaveTextContent('Tutorial');
185+
expect(screen.getAllByRole('button')[4]).toHaveTextContent('Reconnect');
62186
});
63187
});
64188

65189
describe('When view is unlock', () => {
66190
test('Button should show as unlocked', () => {
67-
state.tabs['87'].mode.paused = false;
191+
customInitialState.main.connectionStatus = true;
192+
currentTab.mode.paused = false;
68193
render(<ButtonsContainer />);
69194
expect(screen.getAllByRole('button')[0]).toHaveTextContent('Unlocked');
70195
});
71196
});
72197

73198
describe('When view is lock', () => {
74199
test('Button should show as locked', () => {
75-
state.tabs['87'].mode.paused = true;
200+
customInitialState.main.connectionStatus = true;
201+
currentTab.mode.paused = true;
76202
render(<ButtonsContainer />);
77203
expect(screen.getAllByRole('button')[0]).toHaveTextContent('Locked');
78204
});
@@ -83,7 +209,7 @@ describe('Unit testing for ButtonContainer', () => {
83209
render(<ButtonsContainer />);
84210
const button = screen.getAllByRole('button')[0];
85211
await userEvent.click(button);
86-
expect(dispatch).toHaveBeenCalledWith(toggleMode('paused'));
212+
expect(dummyDispatch).toHaveBeenCalledWith(toggleMode('paused'));
87213
});
88214
});
89215

0 commit comments

Comments
 (0)