Skip to content

Commit d622c6a

Browse files
AndrewByunAndrewByun
committed
finished converting action.test.tsx to RTK
1 parent 391c154 commit d622c6a

File tree

3 files changed

+97
-84
lines changed

3 files changed

+97
-84
lines changed

‎src/app/RTKslices.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -172,9 +172,9 @@ export const mainSlice = createSlice({
172172
changeView: (state, action) => {
173173
const {tabs, currentTab} = state;
174174
console.log('this is state:', current(state))
175-
console.log('this is tabs:', current(tabs))
175+
console.log('this is tabs:', tabs)
176176
console.log('this is currentabs:', currentTab)
177-
console.log('this is tabs[currentab]', current(tabs[currentTab]))
177+
console.log('this is tabs[currentab]', tabs[currentTab])
178178
const {viewIndex} = tabs[currentTab] || {};
179179
console.log('hi this is viewIndex:', viewIndex);
180180
console.log('this is action payload', action.payload)
@@ -201,8 +201,8 @@ export const mainSlice = createSlice({
201201
const { hierarchy, snapshots } = tabs[currentTab] || {};
202202

203203
console.log('this is PORT', port);
204-
console.log('this is hierarchy', current(hierarchy));
205-
console.log('this is SNapshots', current(snapshots));
204+
console.log('this is hierarchy', hierarchy);
205+
console.log('this is SNapshots', snapshots);
206206

207207
const nameFromIndex = findName(action.payload, hierarchy);
208208

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,8 @@ import '@testing-library/jest-dom/extend-expect';
66
import ActionContainer from '../containers/ActionContainer';
77
// 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

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

Lines changed: 91 additions & 78 deletions
Original file line numberDiff line numberDiff line change
@@ -4,21 +4,30 @@ import { render as rtlRender, screen, fireEvent } from '@testing-library/react';
44
import '@testing-library/jest-dom/extend-expect'; // needed this to extend the jest-dom assertions (ex toHaveTextContent)
55
import Action from '../components/Action';
66
import { changeView, changeSlider } from '../RTKslices';
7-
import { Provider, useDispatch } from 'react-redux';
7+
import { Provider } from 'react-redux';
88
import { store } from '../RTKstore'; //importing store for testing to give us access to Redux Store we configured
9-
9+
import * as reactRedux from 'react-redux'
1010

1111
// @ts-ignore
1212
Action.cleanTime = jest.fn().mockReturnValue();
1313

14+
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(),
17+
}));
18+
1419
const render = component => rtlRender(
1520
<Provider store={store}>
1621
{component}
1722
</Provider>
1823
)
1924

20-
2125
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);
2231
const props = {
2332
key: 'actions2',
2433
selected: true,
@@ -27,7 +36,7 @@ describe('Unit testing for Action.tsx', () => {
2736
sliderIndex: 2,
2837
isCurrIndex: false,
2938
routePath: '',
30-
dispatch: jest.fn(),
39+
// dispatch: jest.fn(),
3140
displayName: '3.0',
3241
componentName: 'App',
3342
logChangedState: jest.fn(),
@@ -42,89 +51,93 @@ describe('Unit testing for Action.tsx', () => {
4251
beforeEach(() => {
4352
props.isCurrIndex = false;
4453
props.componentData = { actualDuration: 3.5 };
45-
props.dispatch.mockClear();
54+
// props.dispatch.mockClear();
55+
// useSelectorMock.mockClear()
56+
// useDispatchMock.mockClear()
4657
});
4758

4859
describe('When a component is shown on the page', () => {
49-
// test('Action snapshot should be shown as Snapshot: 3.0', () => {
50-
// render(
51-
// <Action {...props} />
52-
// );
53-
// expect(screen.getByPlaceholderText('Snapshot: 3.0')).toBeInTheDocument();
54-
// });
55-
56-
// test('Two buttons with Time and Current when not at current snapshot', () => {
57-
// props.isCurrIndex = true;
58-
// render(
59-
// <Action {...props} />
60-
// );
61-
// expect(screen.getAllByRole('button')).toHaveLength(2);
62-
// expect(screen.getAllByRole('button')[0]).toHaveTextContent('+00:03.50');
63-
// expect(screen.getAllByRole('button')[1]).toHaveTextContent('Current');
64-
// });
65-
66-
// test('Action snapshot should be shown as Snapshot: 3.0', () => {
67-
// render(
68-
// <Action {...props} />
69-
// );
70-
// expect(screen.getByPlaceholderText('Snapshot: 3.0')).toBeInTheDocument();
71-
// });
72-
73-
// test("When there is no duration data", () => {
74-
// props.componentData = undefined;
75-
// render(
76-
// <Action {...props} />
77-
// );
78-
// expect(screen.getAllByRole('button')[0]).toHaveTextContent('NO TIME');
79-
// });
80-
81-
// test('When actualDuration exceeds 60, time should be formatted correctly', () => {
82-
// props.componentData.actualDuration = 75;
83-
// render(
84-
// <Action {...props} />
85-
// );
86-
// expect(screen.getAllByRole('button')[0]).toHaveTextContent('+01:15.00');
87-
// });
88-
89-
// test('Using the ArrowUp key on Action snapshot should trigger handleOnKeyDown', () => {
90-
// render(
91-
// <Action {...props} />
92-
// );
93-
// fireEvent.keyDown(screen.getByRole('presentation'), {key: 'ArrowUp', code: 'ArrowUp', charCode: 38});
94-
// expect(props.handleOnkeyDown).toHaveBeenCalled();
95-
// });
96-
97-
// test('Using the ArrowDown key on Action snapshot should trigger handleOnKeyDown', () => {
98-
// render(
99-
// <Action {...props} />
100-
// );
101-
// fireEvent.keyDown(screen.getByRole('presentation'), {key: 'ArrowDown', code: 'ArrowDown', charCode: 40});
102-
// expect(props.handleOnkeyDown).toHaveBeenCalled();
103-
// });
104-
105-
// test('Using the Enter key on Action snapshot should trigger handleOnKeyDown', () => {
106-
// render(
107-
// <Action {...props} />
108-
// );
109-
// fireEvent.keyDown(screen.getByRole('presentation'), {key: 'Enter', code: 'Enter', charCode: 13});
110-
// expect(props.handleOnkeyDown).toHaveBeenCalled();
111-
// });
112-
113-
// test('Clicking the snapshot should trigger onClick', () => {
114-
// render(
115-
// <Action {...props} />
116-
// )
117-
// fireEvent.click(screen.getByRole('presentation'));
118-
// expect(props.dispatch).toHaveBeenCalledWith(changeView(props.index));;
119-
// });
60+
test('Action snapshot should be shown as Snapshot: 3.0', () => {
61+
render(
62+
<Action {...props} />
63+
);
64+
expect(screen.getByPlaceholderText('Snapshot: 3.0')).toBeInTheDocument();
65+
});
66+
67+
test('Two buttons with Time and Current when not at current snapshot', () => {
68+
props.isCurrIndex = true;
69+
render(
70+
<Action {...props} />
71+
);
72+
expect(screen.getAllByRole('button')).toHaveLength(2);
73+
expect(screen.getAllByRole('button')[0]).toHaveTextContent('+00:03.50');
74+
expect(screen.getAllByRole('button')[1]).toHaveTextContent('Current');
75+
});
76+
77+
test('Action snapshot should be shown as Snapshot: 3.0', () => {
78+
render(
79+
<Action {...props} />
80+
);
81+
expect(screen.getByPlaceholderText('Snapshot: 3.0')).toBeInTheDocument();
82+
});
83+
84+
test("When there is no duration data", () => {
85+
props.componentData = undefined;
86+
render(
87+
<Action {...props} />
88+
);
89+
expect(screen.getAllByRole('button')[0]).toHaveTextContent('NO TIME');
90+
});
91+
92+
test('When actualDuration exceeds 60, time should be formatted correctly', () => {
93+
props.componentData.actualDuration = 75;
94+
render(
95+
<Action {...props} />
96+
);
97+
expect(screen.getAllByRole('button')[0]).toHaveTextContent('+01:15.00');
98+
});
99+
100+
test('Using the ArrowUp key on Action snapshot should trigger handleOnKeyDown', () => {
101+
render(
102+
<Action {...props} />
103+
);
104+
fireEvent.keyDown(screen.getByRole('presentation'), {key: 'ArrowUp', code: 'ArrowUp', charCode: 38});
105+
expect(props.handleOnkeyDown).toHaveBeenCalled();
106+
});
107+
108+
test('Using the ArrowDown key on Action snapshot should trigger handleOnKeyDown', () => {
109+
render(
110+
<Action {...props} />
111+
);
112+
fireEvent.keyDown(screen.getByRole('presentation'), {key: 'ArrowDown', code: 'ArrowDown', charCode: 40});
113+
expect(props.handleOnkeyDown).toHaveBeenCalled();
114+
});
115+
116+
test('Using the Enter key on Action snapshot should trigger handleOnKeyDown', () => {
117+
render(
118+
<Action {...props} />
119+
);
120+
fireEvent.keyDown(screen.getByRole('presentation'), {key: 'Enter', code: 'Enter', charCode: 13});
121+
expect(props.handleOnkeyDown).toHaveBeenCalled();
122+
});
123+
124+
test('Clicking the snapshot should trigger onClick', () => {
125+
render(
126+
<Action {...props} />
127+
)
128+
fireEvent.click(screen.getByRole('presentation'));
129+
expect(dummyDispatch).toHaveBeenCalledWith(changeView(props.index));;
130+
});
120131

121132
test('Clicking Jump button should trigger changeSlider and changeView', () => {
133+
// const dummyDispatch = jest.fn();
134+
// useDispatchMock.mockReturnValue(dummyDispatch);
122135
render(
123136
<Action {...props} />
124137
);
125138
fireEvent.click(screen.getAllByRole('button')[1]);
126-
expect(props.dispatch).toHaveBeenCalledWith(changeSlider(props.index));
127-
expect(props.dispatch).toHaveBeenCalledWith(changeView(props.index));
139+
expect(dummyDispatch).toHaveBeenCalledWith(changeSlider(props.index));
140+
expect(dummyDispatch).toHaveBeenCalledWith(changeView(props.index));
128141
});
129142
});
130143
});

0 commit comments

Comments
 (0)