Skip to content

Commit ac03594

Browse files
vmnavarro94diana-villalvazo-wgu
vmnavarro94
and
diana-villalvazo-wgu
authored
test: deprecate react-unit-test-utils part-8 (#444)
* test: deprecate react-unit-test-utils part-8 * test: change fireEvent to userEvent * test: rebase fixes * test: change fireEvent to userEvent * test: fixes and adress review * test: improve description test --------- Co-authored-by: diana-villalvazo-wgu <[email protected]>
1 parent 8e7bba5 commit ac03594

File tree

13 files changed

+462
-437
lines changed

13 files changed

+462
-437
lines changed

‎src/components/ConfirmModal.test.jsx‎

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
1-
import { render, screen, fireEvent } from '@testing-library/react';
1+
import { render, screen } from '@testing-library/react';
2+
import userEvent from '@testing-library/user-event';
23
import { ConfirmModal } from './ConfirmModal';
34

45
jest.unmock('@openedx/paragon');
@@ -29,15 +30,17 @@ describe('ConfirmModal', () => {
2930
expect(getByText(props.content)).toBeInTheDocument();
3031
});
3132

32-
it('should call onCancel when cancel button is clicked', () => {
33+
it('should call onCancel when cancel button is clicked', async () => {
3334
render(<ConfirmModal {...props} isOpen />);
34-
fireEvent.click(screen.getByText(props.cancelText));
35+
const user = userEvent.setup();
36+
await user.click(screen.getByText(props.cancelText));
3537
expect(props.onCancel).toHaveBeenCalledTimes(1);
3638
});
3739

38-
it('should call onConfirm when confirm button is clicked', () => {
40+
it('should call onConfirm when confirm button is clicked', async () => {
3941
render(<ConfirmModal {...props} isOpen />);
40-
fireEvent.click(screen.getByText(props.confirmText));
42+
const user = userEvent.setup();
43+
await user.click(screen.getByText(props.confirmText));
4144
expect(props.onConfirm).toHaveBeenCalledTimes(1);
4245
});
4346
});

‎src/components/FilePreview/FileInfo.test.jsx‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
1-
import { render, screen, fireEvent } from '@testing-library/react';
1+
import { render, screen } from '@testing-library/react';
2+
import userEvent from '@testing-library/user-event';
23

34
import FileInfo from './FileInfo';
45

@@ -20,10 +21,10 @@ describe('FileInfo component', () => {
2021
expect(screen.getByText('FormattedMessage')).toBeInTheDocument();
2122
});
2223

23-
it('calls onClick when button is clicked', () => {
24+
it('calls onClick when button is clicked', async () => {
2425
render(<FileInfo {...props}>{children}</FileInfo>);
25-
26-
fireEvent.click(screen.getByText('FormattedMessage'));
26+
const user = userEvent.setup();
27+
await user.click(screen.getByText('FormattedMessage'));
2728
expect(props.onClick).toHaveBeenCalledTimes(1);
2829
});
2930
});

‎src/containers/CriterionContainer/CriterionFeedback.test.jsx‎

Lines changed: 14 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import React from 'react';
2-
import { render, fireEvent } from '@testing-library/react';
2+
import { render, screen } from '@testing-library/react';
3+
import userEvent from '@testing-library/user-event';
34

45
import { actions, selectors } from 'data/redux';
56
import {
@@ -49,26 +50,26 @@ describe('Criterion Feedback', () => {
4950
describe('component', () => {
5051
describe('render', () => {
5152
it('shows a non-disabled input when grading', () => {
52-
const { getByTestId } = render(<CriterionFeedback {...props} />);
53-
const input = getByTestId('criterion-feedback-input');
53+
render(<CriterionFeedback {...props} />);
54+
const input = screen.getByTestId('criterion-feedback-input');
5455
expect(input).toBeInTheDocument();
5556
expect(input).not.toBeDisabled();
5657
expect(input).toHaveValue(props.value);
5758
});
5859

5960
it('shows a disabled input when not grading', () => {
60-
const { getByTestId } = render(
61+
render(
6162
<CriterionFeedback {...props} isGrading={false} gradeStatus={gradeStatuses.graded} />,
6263
);
63-
const input = getByTestId('criterion-feedback-input');
64+
const input = screen.getByTestId('criterion-feedback-input');
6465
expect(input).toBeInTheDocument();
6566
expect(input).toBeDisabled();
6667
expect(input).toHaveValue(props.value);
6768
});
6869

6970
it('displays an error message when feedback is invalid', () => {
70-
const { getByTestId } = render(<CriterionFeedback {...props} isInvalid />);
71-
expect(getByTestId('criterion-feedback-error-msg')).toBeInTheDocument();
71+
render(<CriterionFeedback {...props} isInvalid />);
72+
expect(screen.getByTestId('criterion-feedback-error-msg')).toBeInTheDocument();
7273
});
7374

7475
it('does not render anything when config is set to disabled', () => {
@@ -80,12 +81,13 @@ describe('Criterion Feedback', () => {
8081
});
8182

8283
describe('behavior', () => {
83-
it('calls setValue when input value changes', () => {
84-
const { getByTestId } = render(<CriterionFeedback {...props} />);
85-
const input = getByTestId('criterion-feedback-input');
86-
fireEvent.change(input, { target: { value: 'some value' } });
84+
it('calls setValue when input value changes', async () => {
85+
render(<CriterionFeedback {...props} />);
86+
const user = userEvent.setup();
87+
const input = screen.getByTestId('criterion-feedback-input');
88+
await user.clear(input);
8789
expect(props.setValue).toHaveBeenCalledWith({
88-
value: 'some value',
90+
value: '',
8991
orderNum: props.orderNum,
9092
});
9193
});

‎src/containers/ReviewActions/components/StartGradingButton/__snapshots__/index.test.jsx.snap‎

Lines changed: 0 additions & 18 deletions
This file was deleted.

‎src/containers/ReviewActions/components/StartGradingButton/index.test.jsx‎

Lines changed: 117 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,49 +1,131 @@
1-
import React from 'react';
2-
import { shallow } from '@edx/react-unit-test-utils';
3-
1+
import { render, screen } from '@testing-library/react';
2+
import { IntlProvider } from '@edx/frontend-platform/i18n';
43
import { useDispatch } from 'react-redux';
5-
64
import * as hooks from './hooks';
75
import { StartGradingButton } from '.';
6+
import messages from '../messages';
7+
8+
jest.unmock('@openedx/paragon');
9+
jest.unmock('react');
10+
jest.unmock('@edx/frontend-platform/i18n');
811

9-
jest.mock('../OverrideGradeConfirmModal', () => 'OverrideGradeConfirmModal');
10-
jest.mock('../StopGradingConfirmModal', () => 'StopGradingConfirmModal');
12+
jest.mock('react-redux', () => ({
13+
useDispatch: jest.fn(),
14+
}));
1115

1216
jest.mock('./hooks', () => ({
1317
buttonHooks: jest.fn(),
1418
}));
1519

16-
let el;
17-
describe('StartGradingButton component', () => {
18-
describe('component', () => {
19-
const dispatch = useDispatch();
20-
const buttonHooks = {
20+
describe('StartGradingButton', () => {
21+
const mockDispatch = jest.fn();
22+
23+
const renderWithIntl = (component) => render(
24+
<IntlProvider locale="en" messages={{}}>
25+
{component}
26+
</IntlProvider>,
27+
);
28+
29+
beforeEach(() => {
30+
jest.clearAllMocks();
31+
useDispatch.mockReturnValue(mockDispatch);
32+
});
33+
34+
it('does not render when hide is true', () => {
35+
hooks.buttonHooks.mockReturnValue({
36+
hide: true,
37+
buttonArgs: {},
38+
overrideGradeArgs: {},
39+
stopGradingArgs: {},
40+
});
41+
const { container } = renderWithIntl(<StartGradingButton />);
42+
expect(container.firstChild).toBeNull();
43+
});
44+
45+
it('renders primary button when visible', () => {
46+
hooks.buttonHooks.mockReturnValue({
47+
hide: false,
48+
buttonArgs: { children: 'Start Grading' },
49+
overrideGradeArgs: {
50+
isOpen: false,
51+
onCancel: jest.fn(),
52+
onConfirm: jest.fn(),
53+
},
54+
stopGradingArgs: {
55+
isOpen: false,
56+
isOverride: false,
57+
onCancel: jest.fn(),
58+
onConfirm: jest.fn(),
59+
},
60+
});
61+
renderWithIntl(<StartGradingButton />);
62+
const button = screen.getByRole('button', { name: 'Start Grading' });
63+
expect(button).toBeInTheDocument();
64+
expect(button).toHaveClass('btn-primary');
65+
});
66+
67+
it('renders override grade modal components', () => {
68+
hooks.buttonHooks.mockReturnValue({
69+
hide: false,
70+
buttonArgs: { children: 'Start Grading' },
71+
overrideGradeArgs: {
72+
isOpen: true,
73+
onCancel: jest.fn(),
74+
onConfirm: jest.fn(),
75+
},
76+
stopGradingArgs: {
77+
isOpen: false,
78+
isOverride: false,
79+
onCancel: jest.fn(),
80+
onConfirm: jest.fn(),
81+
},
82+
});
83+
renderWithIntl(<StartGradingButton />);
84+
const overrideModalTitle = screen.getByText(messages.overrideConfirmTitle.defaultMessage);
85+
expect(overrideModalTitle).toBeInTheDocument();
86+
});
87+
88+
it('renders stop grading modal components', () => {
89+
hooks.buttonHooks.mockReturnValue({
90+
hide: false,
91+
buttonArgs: { children: 'Start Grading' },
92+
overrideGradeArgs: {
93+
isOpen: false,
94+
onCancel: jest.fn(),
95+
onConfirm: jest.fn(),
96+
},
97+
stopGradingArgs: {
98+
isOpen: true,
99+
isOverride: false,
100+
onCancel: jest.fn(),
101+
onConfirm: jest.fn(),
102+
},
103+
});
104+
renderWithIntl(<StartGradingButton />);
105+
const stopGradingModalTitle = screen.getByText(messages.confirmStopGradingTitle.defaultMessage);
106+
expect(stopGradingModalTitle).toBeInTheDocument();
107+
});
108+
109+
it('calls buttonHooks with dispatch and intl', () => {
110+
hooks.buttonHooks.mockReturnValue({
21111
hide: false,
22-
buttonArgs: { props: 'hooks.buttonArgs' },
23-
overrideGradeArgs: { props: 'hooks.overrideGradeArgs' },
24-
stopGradingArgs: { props: 'hooks.stopGradingArgs' },
25-
};
26-
describe('behavior', () => {
27-
it('initializes buttonHooks with dispatch and intl fields', () => {
28-
hooks.buttonHooks.mockReturnValueOnce(buttonHooks);
29-
el = shallow(<StartGradingButton />);
30-
const expected = { dispatch, intl: { formatMessage: expect.any(Function), formatDate: expect.any(Function) } };
31-
expect(hooks.buttonHooks).toHaveBeenCalledWith(expected);
32-
});
112+
buttonArgs: { children: 'Start Grading' },
113+
overrideGradeArgs: {
114+
isOpen: false,
115+
onCancel: jest.fn(),
116+
onConfirm: jest.fn(),
117+
},
118+
stopGradingArgs: {
119+
isOpen: false,
120+
isOverride: false,
121+
onCancel: jest.fn(),
122+
onConfirm: jest.fn(),
123+
},
33124
});
34-
describe('snapshots', () => {
35-
test('hide: renders empty component if hook.hide is true', () => {
36-
hooks.buttonHooks.mockReturnValueOnce({ ...buttonHooks, hide: true });
37-
el = shallow(<StartGradingButton />);
38-
expect(el.snapshot).toMatchSnapshot();
39-
expect(el.isEmptyRender()).toEqual(true);
40-
});
41-
test('smoke test: forwards props to components from hooks', () => {
42-
hooks.buttonHooks.mockReturnValueOnce(buttonHooks);
43-
el = shallow(<StartGradingButton />);
44-
expect(el.snapshot).toMatchSnapshot();
45-
expect(el.isEmptyRender()).toEqual(false);
46-
});
125+
renderWithIntl(<StartGradingButton />);
126+
expect(hooks.buttonHooks).toHaveBeenCalledWith({
127+
dispatch: mockDispatch,
128+
intl: expect.any(Object),
47129
});
48130
});
49131
});

0 commit comments

Comments
 (0)