Skip to content

Commit fb62eaf

Browse files
feanilfeanil
authored
Merge pull request #36372 from jciasenza/jciasenza
fix: updated existing enzyme tests to use react testing library
2 parents 1e3074a + e3c5495 commit fb62eaf

5 files changed

Lines changed: 4767 additions & 7193 deletions

File tree

‎lms/djangoapps/instructor/static/instructor/ProblemBrowser/components/Main/Main.test.jsx‎

Lines changed: 65 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -1,96 +1,91 @@
1-
// eslint-disable-next-line no-redeclare
2-
/* global jest,test,describe,expect */
3-
import { Button } from '@edx/paragon';
4-
import BlockBrowserContainer from 'BlockBrowser/components/BlockBrowser/BlockBrowserContainer';
51
import { Provider } from 'react-redux';
6-
import { shallow } from 'enzyme';
72
import React from 'react';
8-
import renderer from 'react-test-renderer';
3+
import {
4+
render,
5+
screen,
6+
waitFor,
7+
} from '@testing-library/react';
8+
import userEvent from '@testing-library/user-event';
99
import store from '../../data/store';
10-
1110
import Main from './Main';
1211

12+
jest.mock('BlockBrowser/components/BlockBrowser/BlockBrowserContainer', () => {
13+
function MockedBlockBrowserContainer() {
14+
return (
15+
<div data-testid="mocked-block-browser-container" className="block-browser">
16+
Mocked BlockBrowserContainer
17+
</div>
18+
);
19+
}
20+
return MockedBlockBrowserContainer;
21+
});
22+
1323
describe('ProblemBrowser Main component', () => {
1424
const courseId = 'testcourse';
1525
const problemResponsesEndpoint = '/api/problem_responses/';
1626
const taskStatusEndpoint = '/api/task_status/';
1727
const excludedBlockTypes = [];
28+
const reportDownloadEndpoint = '/api/report_download';
29+
let fetchCourseBlocksMock;
30+
let createProblemResponsesReportTaskMock;
31+
let onSelectBlockMock;
1832

19-
test('render with basic parameters', () => {
20-
const component = renderer.create(
21-
<Provider store={store}>
22-
<Main
23-
courseId={courseId}
24-
createProblemResponsesReportTask={jest.fn()}
25-
excludeBlockTypes={excludedBlockTypes}
26-
fetchCourseBlocks={jest.fn()}
27-
problemResponsesEndpoint={problemResponsesEndpoint}
28-
onSelectBlock={jest.fn()}
29-
selectedBlock={null}
30-
taskStatusEndpoint={taskStatusEndpoint}
31-
/>
32-
</Provider>,
33-
);
34-
const tree = component.toJSON();
35-
expect(tree).toMatchSnapshot();
36-
});
37-
38-
test('render with selected block', () => {
39-
const component = renderer.create(
40-
<Provider store={store}>
41-
<Main
42-
courseId={courseId}
43-
createProblemResponsesReportTask={jest.fn()}
44-
excludeBlockTypes={excludedBlockTypes}
45-
fetchCourseBlocks={jest.fn()}
46-
problemResponsesEndpoint={problemResponsesEndpoint}
47-
onSelectBlock={jest.fn()}
48-
selectedBlock="some-selected-block"
49-
taskStatusEndpoint={taskStatusEndpoint}
50-
/>
51-
</Provider>,
52-
);
53-
const tree = component.toJSON();
54-
expect(tree).toMatchSnapshot();
33+
beforeEach(() => {
34+
fetchCourseBlocksMock = jest.fn();
35+
createProblemResponsesReportTaskMock = jest.fn();
36+
onSelectBlockMock = jest.fn();
5537
});
5638

57-
test('fetch course block on toggling dropdown', () => {
58-
const fetchCourseBlocksMock = jest.fn();
59-
const component = renderer.create(
39+
const renderMainComponent = (props = {}) => (
40+
render(
6041
<Provider store={store}>
6142
<Main
6243
courseId={courseId}
63-
createProblemResponsesReportTask={jest.fn()}
44+
createProblemResponsesReportTask={createProblemResponsesReportTaskMock}
6445
excludeBlockTypes={excludedBlockTypes}
6546
fetchCourseBlocks={fetchCourseBlocksMock}
6647
problemResponsesEndpoint={problemResponsesEndpoint}
67-
onSelectBlock={jest.fn()}
68-
selectedBlock="some-selected-block"
48+
onSelectBlock={onSelectBlockMock}
49+
selectedBlock={props.selectedBlock}
6950
taskStatusEndpoint={taskStatusEndpoint}
51+
reportDownloadEndpoint={reportDownloadEndpoint}
52+
ShowBtnUi="false"
53+
{...props}
7054
/>
7155
</Provider>,
72-
);
73-
// eslint-disable-next-line prefer-destructuring
74-
const instance = component.root.children[0].instance;
75-
instance.handleToggleDropdown();
76-
expect(fetchCourseBlocksMock.mock.calls.length).toBe(1);
56+
)
57+
);
58+
59+
describe('Initial rendering', () => {
60+
test('should match snapshot with basic parameters', () => {
61+
const { container } = renderMainComponent();
62+
expect(container).toMatchSnapshot();
63+
});
64+
test('should match snapshot with selected block', () => {
65+
const { container } = renderMainComponent({ selectedBlock: 'some-selected-block' });
66+
expect(container).toMatchSnapshot();
67+
});
7768
});
7869

79-
test('display dropdown on toggling dropdown', () => {
80-
const component = shallow(
81-
<Main
82-
courseId={courseId}
83-
createProblemResponsesReportTask={jest.fn()}
84-
excludeBlockTypes={excludedBlockTypes}
85-
fetchCourseBlocks={jest.fn()}
86-
problemResponsesEndpoint={problemResponsesEndpoint}
87-
onSelectBlock={jest.fn()}
88-
selectedBlock="some-selected-block"
89-
taskStatusEndpoint={taskStatusEndpoint}
90-
/>,
91-
);
92-
expect(component.find(BlockBrowserContainer).length).toBeFalsy();
93-
component.find(Button).find({ label: 'Select a section or problem' }).simulate('click');
94-
expect(component.find(BlockBrowserContainer).length).toBeTruthy();
70+
describe('Dropdown interactions', () => {
71+
test('should fetch course blocks when dropdown is toggled', async () => {
72+
renderMainComponent();
73+
await userEvent.click(screen.getByText('Select a section or problem'));
74+
await waitFor(() => {
75+
expect(fetchCourseBlocksMock).toHaveBeenCalledTimes(1);
76+
expect(fetchCourseBlocksMock).toHaveBeenCalledWith(courseId, excludedBlockTypes);
77+
});
78+
});
79+
80+
test('should display dropdown when toggled', async () => {
81+
renderMainComponent();
82+
expect(screen.queryByTestId('mocked-block-browser-container')).toBeNull();
83+
await userEvent.click(screen.getByText('Select a section or problem'));
84+
await waitFor(() => expect(
85+
screen.getByTestId('mocked-block-browser-container'),
86+
).toHaveClass('block-browser'));
87+
await userEvent.click(screen.getByText('Select a section or problem'));
88+
await waitFor(() => expect(screen.queryByTestId('mocked-block-browser-container')).toBeNull());
89+
});
9590
});
9691
});

‎lms/djangoapps/instructor/static/instructor/ProblemBrowser/components/Main/__snapshots__/Main.test.jsx.snap‎

Lines changed: 58 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -1,83 +1,73 @@
11
// Jest Snapshot v1, https://goo.gl/fbAQLP
22

3-
exports[`ProblemBrowser Main component render with basic parameters 1`] = `
4-
<div
5-
className="problem-browser-container"
6-
>
3+
exports[`ProblemBrowser Main component Initial rendering should match snapshot with basic parameters 1`] = `
4+
<div>
75
<div
8-
className="problem-browser"
6+
class="problem-browser-container"
97
>
10-
<button
11-
className="btn"
12-
onBlur={[Function]}
13-
onClick={[Function]}
14-
onKeyDown={[Function]}
15-
type="button"
16-
>
17-
Select a section or problem
18-
</button>
19-
<input
20-
disabled={true}
21-
hidden={false}
22-
name="problem-location"
23-
type="text"
24-
value={null}
25-
/>
26-
<button
27-
className="btn"
28-
name="list-problem-responses-csv"
29-
onBlur={[Function]}
30-
onClick={[Function]}
31-
onKeyDown={[Function]}
32-
type="button"
33-
>
34-
Create a report of problem responses
35-
</button>
368
<div
37-
aria-live="polite"
38-
className="report-generation-status"
39-
/>
9+
class="problem-browser"
10+
>
11+
<button
12+
class="btn"
13+
type="button"
14+
>
15+
Select a section or problem
16+
</button>
17+
<input
18+
disabled=""
19+
name="problem-location"
20+
type="text"
21+
value=""
22+
/>
23+
<button
24+
class="btn"
25+
name="list-problem-responses-csv"
26+
type="button"
27+
>
28+
Create a report of problem responses
29+
</button>
30+
<div
31+
aria-live="polite"
32+
class="report-generation-status"
33+
/>
34+
</div>
4035
</div>
4136
</div>
4237
`;
4338

44-
exports[`ProblemBrowser Main component render with selected block 1`] = `
45-
<div
46-
className="problem-browser-container"
47-
>
39+
exports[`ProblemBrowser Main component Initial rendering should match snapshot with selected block 1`] = `
40+
<div>
4841
<div
49-
className="problem-browser"
42+
class="problem-browser-container"
5043
>
51-
<button
52-
className="btn"
53-
onBlur={[Function]}
54-
onClick={[Function]}
55-
onKeyDown={[Function]}
56-
type="button"
57-
>
58-
Select a section or problem
59-
</button>
60-
<input
61-
disabled={true}
62-
hidden={false}
63-
name="problem-location"
64-
type="text"
65-
value="some-selected-block"
66-
/>
67-
<button
68-
className="btn"
69-
name="list-problem-responses-csv"
70-
onBlur={[Function]}
71-
onClick={[Function]}
72-
onKeyDown={[Function]}
73-
type="button"
74-
>
75-
Create a report of problem responses
76-
</button>
7744
<div
78-
aria-live="polite"
79-
className="report-generation-status"
80-
/>
45+
class="problem-browser"
46+
>
47+
<button
48+
class="btn"
49+
type="button"
50+
>
51+
Select a section or problem
52+
</button>
53+
<input
54+
disabled=""
55+
name="problem-location"
56+
type="text"
57+
value="some-selected-block"
58+
/>
59+
<button
60+
class="btn"
61+
name="list-problem-responses-csv"
62+
type="button"
63+
>
64+
Create a report of problem responses
65+
</button>
66+
<div
67+
aria-live="polite"
68+
class="report-generation-status"
69+
/>
70+
</div>
8171
</div>
8272
</div>
8373
`;

0 commit comments

Comments
 (0)