Skip to content

Commit db0d9a4

Browse files
garrettlchowgarrettlchow
committed
updated travel container tests
1 parent ccf3fd5 commit db0d9a4

File tree

2 files changed

+142
-191
lines changed

2 files changed

+142
-191
lines changed

‎package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -203,6 +203,7 @@
203203
"react-select": "^5.8.0",
204204
"react-spinners": "^0.13.8",
205205
"redux": "^5.0.0",
206+
"redux-mock-store": "^1.5.5",
206207
"regenerator-runtime": "^0.14.1",
207208
"styled-components": "^6.1.2",
208209
"web-vitals": "^3.5.0"

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

Lines changed: 141 additions & 191 deletions
Original file line numberDiff line numberDiff line change
@@ -1,217 +1,167 @@
11
import React from 'react';
2-
import { render as rtlRender, screen, fireEvent } from '@testing-library/react';
3-
import TravelContainer from '../containers/TravelContainer';
2+
import { render, screen, fireEvent } from '@testing-library/react';
43
import { Provider } from 'react-redux';
5-
import { configureStore } from '@reduxjs/toolkit';
6-
import { mainSlice } from '../slices/mainSlice';
7-
import { useDispatch } from 'react-redux';
8-
import { ThemeProvider } from '@mui/material/styles';
9-
import theme from '../styles/theme';
10-
import '@testing-library/jest-dom'; // needed this to extend the jest-dom assertions (ex toHaveTextContent)
11-
12-
const customTabs = {
13-
87: {
14-
snapshots: [0, 1, 2, 3],
15-
hierarchy: {
16-
index: 0,
17-
name: 1,
18-
branch: 0,
19-
stateSnapshot: {
20-
state: {},
21-
children: [
22-
{
23-
state: { test: 'test' },
24-
name: 'App',
25-
componentData: { actualDuration: 3.5 },
4+
import '@testing-library/jest-dom';
5+
6+
import configureStore from 'redux-mock-store';
7+
import TravelContainer from '../containers/TravelContainer';
8+
import { playForward, pause, startPlaying, resetSlider, changeSlider } from '../slices/mainSlice';
9+
10+
const mockStore = configureStore([]);
11+
12+
describe('TravelContainer', () => {
13+
let store;
14+
15+
beforeEach(() => {
16+
store = mockStore({
17+
main: {
18+
tabs: {
19+
tab1: {
20+
sliderIndex: 0,
21+
playing: false,
22+
currLocation: null,
2623
},
27-
],
28-
route: {
29-
id: 1,
30-
url: 'http://localhost:8080/',
3124
},
25+
currentTab: 'tab1',
3226
},
33-
children: [
34-
{
35-
index: 1,
36-
name: 2,
37-
branch: 0,
38-
stateSnapshot: {
39-
state: {},
40-
children: [
41-
{
42-
state: { test: 'test' },
43-
name: 'App',
44-
componentData: { actualDuration: 3.5 },
45-
},
46-
],
47-
route: {
48-
id: 2,
49-
url: 'http://localhost:8080/',
50-
},
51-
},
52-
children: [
53-
{
54-
index: 2,
55-
name: 3,
56-
branch: 0,
57-
stateSnapshot: {
58-
state: {},
59-
children: [
60-
{
61-
state: { test: 'test' },
62-
name: 'App',
63-
componentData: { actualDuration: 3.5 },
64-
},
65-
],
66-
route: {
67-
id: 3,
68-
url: 'http://localhost:8080/',
69-
},
70-
},
71-
children: [
72-
{
73-
index: 3,
74-
name: 4,
75-
branch: 0,
76-
stateSnapshot: {
77-
state: {},
78-
children: [
79-
{
80-
state: { test: 'test' },
81-
name: 'App',
82-
componentData: { actualDuration: 3.5 },
83-
},
84-
],
85-
route: {
86-
id: 4,
87-
url: 'http://localhost:8080/test/',
88-
},
89-
},
90-
children: [],
91-
},
92-
],
93-
},
94-
],
95-
},
96-
],
97-
},
98-
currLocation: {
99-
index: 0,
100-
name: 1,
101-
branch: 0,
102-
},
103-
sliderIndex: 3, //updated to 3
104-
viewIndex: -1,
105-
playing: false,
106-
},
107-
};
108-
109-
const customInitialState = {
110-
main: {
111-
port: null,
112-
currentTab: 87, // Update with your desired value
113-
currentTitle: 'test string',
114-
tabs: customTabs, // Replace with the actual (testing) tab data
115-
currentTabInApp: null,
116-
connectionStatus: false,
117-
connectRequested: true,
118-
},
119-
};
120-
121-
const customStore = configureStore({
122-
reducer: {
123-
main: mainSlice.reducer,
124-
},
125-
preloadedState: customInitialState, // Provide custom initial state
126-
middleware: (getDefaultMiddleware) => getDefaultMiddleware({ serializableCheck: false }),
127-
});
27+
});
12828

129-
const renderWithTheme = (component) => {
130-
return rtlRender(
131-
<Provider store={customStore}>
132-
<ThemeProvider theme={theme}>{component}</ThemeProvider>
133-
</Provider>,
134-
);
135-
};
136-
137-
const mockSlider = jest.fn();
138-
jest.mock('../components/TimeTravel/MainSlider', () => (props) => {
139-
mockSlider(props);
140-
return <div>MockSlider</div>;
141-
});
29+
store.dispatch = jest.fn();
30+
});
14231

143-
const mockDropDown = jest.fn();
144-
jest.mock('../components/TimeTravel/Dropdown', () => (props) => {
145-
mockDropDown(props);
146-
return <div>mockDropDown</div>;
147-
});
32+
const renderComponent = (props = {}) => {
33+
const defaultProps = {
34+
snapshotsLength: 5,
35+
};
14836

149-
jest.mock('react-redux', () => ({
150-
...jest.requireActual('react-redux'), // Use the actual react-redux module except for the functions you want to mock
151-
useDispatch: jest.fn(), // set up a mock function for useDispatch
152-
}));
37+
return render(
38+
<Provider store={store}>
39+
<TravelContainer {...defaultProps} {...props} />
40+
</Provider>,
41+
);
42+
};
15343

154-
describe('All elements appear in the TravelContainer module', () => {
155-
beforeEach(() => {
156-
renderWithTheme(<TravelContainer snapshotsLength={0} />);
157-
});
44+
it('renders play button and dropdown', () => {
45+
renderComponent();
15846

159-
test('first button contains text Play', () => {
160-
let buttons = screen.getAllByRole('button');
161-
expect(buttons[0]).toHaveTextContent('Play');
47+
expect(screen.getByRole('button')).toBeInTheDocument();
48+
expect(screen.getByText('Play')).toBeInTheDocument();
16249
});
16350

164-
test('MainSlider exists in document', () => {
165-
expect(screen.getByText('MockSlider')).toBeInTheDocument();
166-
});
51+
it('changes play button text and icon when clicked', () => {
52+
renderComponent();
16753

168-
test('Dropdown exists in document', () => {
169-
expect(screen.getByText('mockDropDown')).toBeInTheDocument();
170-
});
54+
const playButton = screen.getByRole('button');
55+
fireEvent.click(playButton);
17156

172-
test('Backward button exists in document', () => {
173-
// Use the getByLabelText query to find the button by its label
174-
const backwardButton = screen.getByLabelText('Backward');
175-
expect(backwardButton).toBeInTheDocument();
57+
// Should dispatch startPlaying action
58+
expect(store.dispatch).toHaveBeenCalledWith(
59+
expect.objectContaining({
60+
type: startPlaying.type,
61+
}),
62+
);
17663
});
17764

178-
test('Forward button exists in document', () => {
179-
const forwardButton = screen.getByLabelText('Forward');
180-
expect(forwardButton).toBeInTheDocument();
181-
});
182-
});
65+
it('resets slider when playing from last snapshot', () => {
66+
store = mockStore({
67+
main: {
68+
tabs: {
69+
tab1: {
70+
sliderIndex: 4, // Last index (snapshotsLength - 1)
71+
playing: false,
72+
currLocation: null,
73+
},
74+
},
75+
currentTab: 'tab1',
76+
},
77+
});
78+
store.dispatch = jest.fn();
18379

184-
describe('Testing play/pause button', () => {
185-
const useDispatchMock = (useDispatch as unknown) as jest.Mock; // make the test run
186-
// const useDispatchMock = useDispatch as jest.Mock; //getting a reference to the mock function you setup during jest.mock configuration on line 154
187-
const dummyDispatch = jest.fn();
188-
useDispatchMock.mockReturnValue(dummyDispatch);
189-
beforeEach(() => {
190-
renderWithTheme(<TravelContainer snapshotsLength={0} />);
191-
dummyDispatch.mockClear();
192-
});
80+
renderComponent();
19381

194-
test('Play button is rendered', () => {
195-
const playButton = screen.getByTestId('play-button-test');
196-
expect(playButton).toBeInTheDocument();
82+
const playButton = screen.getByRole('button');
83+
fireEvent.click(playButton);
84+
85+
// Should dispatch resetSlider action
86+
expect(store.dispatch).toHaveBeenCalledWith(
87+
expect.objectContaining({
88+
type: resetSlider.type,
89+
}),
90+
);
19791
});
19892

199-
test('Play initially says Play', () => {
200-
const playButton = screen.getByTestId('play-button-test');
201-
expect(playButton.textContent).toBe('Play');
93+
it('pauses playback when play button is clicked while playing', () => {
94+
store = mockStore({
95+
main: {
96+
tabs: {
97+
tab1: {
98+
sliderIndex: 2,
99+
playing: true,
100+
currLocation: null,
101+
},
102+
},
103+
currentTab: 'tab1',
104+
},
105+
});
106+
store.dispatch = jest.fn();
107+
108+
renderComponent();
109+
110+
const pauseButton = screen.getByRole('button');
111+
fireEvent.click(pauseButton);
112+
113+
// Should dispatch pause action
114+
expect(store.dispatch).toHaveBeenCalledWith(
115+
expect.objectContaining({
116+
type: pause.type,
117+
}),
118+
);
202119
});
203120

204-
test('Clicking Play button will trigger dispatch', () => {
205-
const playButton = screen.getByTestId('play-button-test');
206-
expect(playButton.textContent).toBe('Play');
207-
fireEvent.click(playButton);
208-
expect(dummyDispatch).toHaveBeenCalledTimes(1);
121+
it('handles speed change from dropdown', () => {
122+
renderComponent();
123+
124+
// Find and click the dropdown
125+
const dropdown = screen.getByRole('combobox');
126+
fireEvent.keyDown(dropdown, { key: 'ArrowDown' });
127+
128+
// Select a different speed
129+
const speedOption = screen.getByText('0.5x');
130+
fireEvent.click(speedOption);
131+
132+
// The selected speed should be updated in the component state
133+
expect(screen.getByText('0.5x')).toBeInTheDocument();
209134
});
210135

211-
test('Clicking Pause button will trigger dispatch', () => {
212-
customInitialState.main.tabs[87].playing = true;
213-
const playButton = screen.getByTestId('play-button-test');
214-
fireEvent.click(playButton);
215-
expect(dummyDispatch).toHaveBeenCalledTimes(1);
136+
it('updates slider index when playing forward', () => {
137+
const { rerender } = renderComponent();
138+
139+
// Simulate playing forward
140+
store.dispatch(playForward(true));
141+
store.dispatch(changeSlider(1));
142+
143+
// Update store state
144+
store = mockStore({
145+
main: {
146+
tabs: {
147+
tab1: {
148+
sliderIndex: 1,
149+
playing: true,
150+
currLocation: null,
151+
},
152+
},
153+
currentTab: 'tab1',
154+
},
155+
});
156+
157+
// Rerender with new store state
158+
rerender(
159+
<Provider store={store}>
160+
<TravelContainer snapshotsLength={5} />
161+
</Provider>,
162+
);
163+
164+
// Verify the slider index was updated
165+
expect(store.getState().main.tabs.tab1.sliderIndex).toBe(1);
216166
});
217167
});

0 commit comments

Comments
 (0)