Skip to content

Commit 545b749

Browse files
kelvinmirhankelvinmirhan
authored
Merge pull request #32 from oslabs-beta/workingBranch
Working branch
2 parents 9290bf1 + 1368caa commit 545b749

File tree

6 files changed

+399
-382
lines changed

6 files changed

+399
-382
lines changed

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

Lines changed: 182 additions & 182 deletions
Original file line numberDiff line numberDiff line change
@@ -1,180 +1,180 @@
1-
/* eslint-disable @typescript-eslint/no-explicit-any */
2-
/* eslint-disable react/jsx-filename-extension */
3-
import React from 'react';
4-
import { render as rtlRender, screen, fireEvent } from '@testing-library/react';
5-
import '@testing-library/jest-dom/extend-expect';
6-
import ActionContainer from '../containers/ActionContainer';
7-
import { useStoreContext } from '../store';
8-
import TravelContainer from '../containers/TravelContainer';
9-
import { Provider, useDispatch, useSelector } from 'react-redux';
10-
import { store } from '../RTKstore';
11-
//so far i have imported provider, usedispatch, useselector, and store
12-
//wrapped components in provider
13-
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-
20-
// const render = component => rtlRender(
21-
// <Provider store={store}>
22-
// {component}
23-
// </Provider>
24-
// )
25-
26-
27-
const state = {
28-
tabs: {
29-
87: {
30-
snapshots: [1, 2, 3, 4],
31-
hierarchy: {
32-
index: 0,
33-
name: 1,
34-
branch: 0,
35-
stateSnapshot: {
36-
state: {},
37-
children: [
38-
{
39-
state: { test: 'test' },
40-
name: 'App',
41-
componentData: { actualDuration: 3.5 },
42-
},
43-
],
44-
route: {
45-
id: 1,
46-
url: 'http://localhost:8080/',
47-
},
48-
},
49-
children: [
50-
{
51-
index: 1,
52-
name: 2,
53-
branch: 0,
54-
stateSnapshot: {
55-
state: {},
56-
children: [
57-
{
58-
state: { test: 'test' },
59-
name: 'App',
60-
componentData: { actualDuration: 3.5 },
61-
},
62-
],
63-
route: {
64-
id: 2,
65-
url: 'http://localhost:8080/',
66-
},
67-
},
68-
children: [
69-
{
70-
index: 2,
71-
name: 3,
72-
branch: 0,
73-
stateSnapshot: {
74-
state: {},
75-
children: [
76-
{
77-
state: { test: 'test' },
78-
name: 'App',
79-
componentData: { actualDuration: 3.5 },
80-
},
81-
],
82-
route: {
83-
id: 3,
84-
url: 'http://localhost:8080/',
85-
},
86-
},
87-
children: [
88-
{
89-
index: 3,
90-
name: 4,
91-
branch: 0,
92-
stateSnapshot: {
93-
state: {},
94-
children: [
95-
{
96-
state: { test: 'test' },
97-
name: 'App',
98-
componentData: { actualDuration: 3.5 },
99-
},
100-
],
101-
route: {
102-
id: 4,
103-
url: 'http://localhost:8080/test/',
104-
},
105-
},
106-
children: [],
107-
},
108-
],
109-
},
110-
],
111-
},
112-
],
113-
},
114-
currLocation: {
115-
index: 0,
116-
name: 1,
117-
branch: 0,
118-
},
119-
sliderIndex: 0,
120-
viewIndex: -1,
121-
},
122-
},
123-
currentTab: 87,
124-
};
125-
//creates jest mock function to simulate behavior of functions/methods
126-
const dispatch = jest.fn();
127-
128-
jest.spyOn(React, 'useEffect').mockImplementation(() => jest.fn());
129-
//This line spies on the useEffect function from React, replacing it with a mocked implementation that returns an empty Jest mock function,
130-
//effectively disabling its actual side effects during testing.
131-
jest.mock('../store');
132-
//This line mocks the import of a module located at '../store', which can be useful to isolate components from real Redux store behavior
133-
//and provide custom mock behavior for testing purposes.
134-
135-
const mockeduseStoreContext = jest.mocked(useStoreContext);
136-
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.
137-
138-
139-
////////////////////////////////////////////////////////////////////////////////////
140-
const MockRouteDescription = jest.fn();
141-
jest.mock('../components/RouteDescription', () => () => {
142-
MockRouteDescription();
143-
return <div>MockRouteDescription</div>;
144-
});
145-
146-
const MockSwitchApp = jest.fn();
147-
jest.mock('../components/SwitchApp', () => () => {
148-
MockSwitchApp();
149-
return <div>MockSwitchApp</div>;
150-
});
151-
152-
describe('unit testing for ActionContainer', () => {
153-
beforeEach(() => {
154-
mockeduseStoreContext.mockClear();
155-
dispatch.mockClear();
156-
render(
157-
<ActionContainer actionView={true} />
158-
)
159-
});
160-
161-
test('Expect top arrow to be rendered', () => {
162-
expect(screen.getByRole('complementary')).toBeInTheDocument();
163-
});
164-
165-
test('Expect RouteDescription to be rendered', () => {
166-
expect(screen.getAllByText('MockRouteDescription')).toHaveLength(2);
167-
});
168-
169-
test('Expect SwitchApp to be rendered', () => {
170-
expect(screen.getByText('MockSwitchApp')).toBeInTheDocument();
171-
});
172-
173-
test('Click works on clear button', () => {
174-
fireEvent.click(screen.getAllByRole('button')[0]);
175-
expect(dispatch).toHaveBeenCalledTimes(1);
176-
});
177-
});
1+
// /* eslint-disable @typescript-eslint/no-explicit-any */
2+
// /* eslint-disable react/jsx-filename-extension */
3+
// import React from 'react';
4+
// import { render as rtlRender, screen, fireEvent } from '@testing-library/react';
5+
// import '@testing-library/jest-dom/extend-expect';
6+
// import ActionContainer from '../containers/ActionContainer';
7+
// import { useStoreContext } from '../store';
8+
// import TravelContainer from '../containers/TravelContainer';
9+
// import { Provider, useDispatch, useSelector } from 'react-redux';
10+
// import { store } from '../RTKstore';
11+
// //so far i have imported provider, usedispatch, useselector, and store
12+
// //wrapped components in provider
13+
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+
20+
// // const render = component => rtlRender(
21+
// // <Provider store={store}>
22+
// // {component}
23+
// // </Provider>
24+
// // )
25+
26+
27+
// const state = {
28+
// tabs: {
29+
// 87: {
30+
// snapshots: [1, 2, 3, 4],
31+
// hierarchy: {
32+
// index: 0,
33+
// name: 1,
34+
// branch: 0,
35+
// stateSnapshot: {
36+
// state: {},
37+
// children: [
38+
// {
39+
// state: { test: 'test' },
40+
// name: 'App',
41+
// componentData: { actualDuration: 3.5 },
42+
// },
43+
// ],
44+
// route: {
45+
// id: 1,
46+
// url: 'http://localhost:8080/',
47+
// },
48+
// },
49+
// children: [
50+
// {
51+
// index: 1,
52+
// name: 2,
53+
// branch: 0,
54+
// stateSnapshot: {
55+
// state: {},
56+
// children: [
57+
// {
58+
// state: { test: 'test' },
59+
// name: 'App',
60+
// componentData: { actualDuration: 3.5 },
61+
// },
62+
// ],
63+
// route: {
64+
// id: 2,
65+
// url: 'http://localhost:8080/',
66+
// },
67+
// },
68+
// children: [
69+
// {
70+
// index: 2,
71+
// name: 3,
72+
// branch: 0,
73+
// stateSnapshot: {
74+
// state: {},
75+
// children: [
76+
// {
77+
// state: { test: 'test' },
78+
// name: 'App',
79+
// componentData: { actualDuration: 3.5 },
80+
// },
81+
// ],
82+
// route: {
83+
// id: 3,
84+
// url: 'http://localhost:8080/',
85+
// },
86+
// },
87+
// children: [
88+
// {
89+
// index: 3,
90+
// name: 4,
91+
// branch: 0,
92+
// stateSnapshot: {
93+
// state: {},
94+
// children: [
95+
// {
96+
// state: { test: 'test' },
97+
// name: 'App',
98+
// componentData: { actualDuration: 3.5 },
99+
// },
100+
// ],
101+
// route: {
102+
// id: 4,
103+
// url: 'http://localhost:8080/test/',
104+
// },
105+
// },
106+
// children: [],
107+
// },
108+
// ],
109+
// },
110+
// ],
111+
// },
112+
// ],
113+
// },
114+
// currLocation: {
115+
// index: 0,
116+
// name: 1,
117+
// branch: 0,
118+
// },
119+
// sliderIndex: 0,
120+
// viewIndex: -1,
121+
// },
122+
// },
123+
// currentTab: 87,
124+
// };
125+
// //creates jest mock function to simulate behavior of functions/methods
126+
// const dispatch = jest.fn();
127+
128+
// jest.spyOn(React, 'useEffect').mockImplementation(() => jest.fn());
129+
// //This line spies on the useEffect function from React, replacing it with a mocked implementation that returns an empty Jest mock function,
130+
// //effectively disabling its actual side effects during testing.
131+
// jest.mock('../store');
132+
// //This line mocks the import of a module located at '../store', which can be useful to isolate components from real Redux store behavior
133+
// //and provide custom mock behavior for testing purposes.
134+
135+
// const mockeduseStoreContext = jest.mocked(useStoreContext);
136+
// 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.
137+
138+
139+
// ////////////////////////////////////////////////////////////////////////////////////
140+
// const MockRouteDescription = jest.fn();
141+
// jest.mock('../components/RouteDescription', () => () => {
142+
// MockRouteDescription();
143+
// return <div>MockRouteDescription</div>;
144+
// });
145+
146+
// const MockSwitchApp = jest.fn();
147+
// jest.mock('../components/SwitchApp', () => () => {
148+
// MockSwitchApp();
149+
// return <div>MockSwitchApp</div>;
150+
// });
151+
152+
// describe('unit testing for ActionContainer', () => {
153+
// beforeEach(() => {
154+
// mockeduseStoreContext.mockClear();
155+
// dispatch.mockClear();
156+
// render(
157+
// <ActionContainer actionView={true} />
158+
// )
159+
// });
160+
161+
// test('Expect top arrow to be rendered', () => {
162+
// expect(screen.getByRole('complementary')).toBeInTheDocument();
163+
// });
164+
165+
// test('Expect RouteDescription to be rendered', () => {
166+
// expect(screen.getAllByText('MockRouteDescription')).toHaveLength(2);
167+
// });
168+
169+
// test('Expect SwitchApp to be rendered', () => {
170+
// expect(screen.getByText('MockSwitchApp')).toBeInTheDocument();
171+
// });
172+
173+
// test('Click works on clear button', () => {
174+
// fireEvent.click(screen.getAllByRole('button')[0]);
175+
// expect(dispatch).toHaveBeenCalledTimes(1);
176+
// });
177+
// });
178178

179179
// describe('integration testing for ActionContainer', () => {
180180
// beforeEach(() => {
@@ -188,8 +188,8 @@ describe('unit testing for ActionContainer', () => {
188188
// )
189189
// });
190190

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

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -166,7 +166,7 @@ describe('unit testing for ActionContainer', ()=>{
166166
const dummyDispatch = jest.fn(); //separate mock function created because we need to explicitly define on line 30 what
167167
useDispatchMock.mockReturnValue(dummyDispatch);//exactly useDispatchMock returns (which is a jest.fn())
168168
beforeEach(()=>{
169-
render(<ActionContainer actionView = {true} setActionView={setActionViewMock}/>)
169+
render(<ActionContainer actionView={true} setActionView={setActionViewMock}/>)
170170
});
171171

172172
test('expect top arrow to be rendered', ()=>{

0 commit comments

Comments
 (0)