Skip to content

Commit 5376e2e

Browse files
kelvinmirhankelvinmirhan
committed
added second actionContainer testing file for integration tests
1 parent 23e8e5a commit 5376e2e

File tree

5 files changed

+131
-72
lines changed

5 files changed

+131
-72
lines changed

‎src/app/RTKslices.tsx

Lines changed: 1 addition & 0 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

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

Lines changed: 9 additions & 8 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: {

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

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
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+
18+
const customInitialState = {
19+
main: {
20+
port: null,
21+
currentTab: null,
22+
currentTitle: 'No Target',
23+
tabs: {},
24+
currentTabInApp: null,
25+
connectionStatus: true,
26+
reconnectRequested: false,
27+
},
28+
};
29+
30+
const customStore = configureStore({
31+
reducer: {
32+
main: mainSlice.reducer,
33+
},
34+
preloadedState: customInitialState, // Provide custom initial state
35+
middleware: (getDefaultMiddleware) =>
36+
getDefaultMiddleware({ serializableCheck: false }),
37+
});
38+
39+
const render = component => rtlRender(
40+
<Provider store={customStore}>
41+
{component}
42+
</Provider>
43+
);
44+
45+
describe('Integration testing for ActionContainer.tsx', () => {
46+
test('renders the ActionContainer component', () => {
47+
//tests that the clearButton is rendered by testing if we can get "Clear"
48+
render(<ActionContainer />);
49+
const clearButton = screen.getByText('Clear'); // Use an existing element
50+
//need to click the clear button or anything for state to be defined?
51+
// fireEvent.click()
52+
expect(clearButton).toBeInTheDocument();
53+
});
54+
})
55+
56+
57+

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

Lines changed: 63 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -57,69 +57,69 @@ describe('Unit testing for Action.tsx', () => {
5757
});
5858

5959
describe('When a component is shown on the page', () => {
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-
// });
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+
});
123123

124124
test('Clicking the snapshot should trigger onClick', () => {
125125
render(

‎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)