Skip to content

Commit 8e7bba5

Browse files
vmnavarro94vmnavarro94
authored
test: deprecate react-unit-test-utils part-6 (#440)
1 parent e4c0b18 commit 8e7bba5

File tree

10 files changed

+288
-725
lines changed

10 files changed

+288
-725
lines changed

‎src/containers/ResponseDisplay/PreviewDisplay.test.jsx‎

Lines changed: 58 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -1,56 +1,66 @@
1-
import React from 'react';
2-
import { shallow } from '@edx/react-unit-test-utils';
3-
1+
import { render } from '@testing-library/react';
2+
import { IntlProvider } from '@edx/frontend-platform/i18n';
43
import { FileTypes } from 'data/constants/files';
5-
import { FileRenderer } from 'components/FilePreview';
64
import { PreviewDisplay } from './PreviewDisplay';
75

8-
jest.mock('components/FilePreview', () => ({
9-
FileRenderer: () => 'FileRenderer',
10-
}));
6+
jest.unmock('@openedx/paragon');
7+
jest.unmock('react');
8+
jest.unmock('@edx/frontend-platform/i18n');
119

1210
describe('PreviewDisplay', () => {
13-
describe('component', () => {
14-
const supportedTypes = Object.values(FileTypes);
15-
const props = {
16-
files: [
17-
...supportedTypes.map((fileType, index) => ({
18-
name: `fake_file_${index}.${fileType}`,
19-
description: `file description ${index}`,
20-
downloadUrl: `/url-path/fake_file_${index}.${fileType}`,
21-
})),
22-
{
23-
name: 'bad_ext_fake_file.other',
24-
description: 'bad_ext file description',
25-
downloadUrl: 'bad_ext.other',
26-
},
27-
],
11+
const supportedTypes = Object.values(FileTypes);
12+
const props = {
13+
files: [
14+
...supportedTypes.map((fileType, index) => ({
15+
name: `fake_file_${index}.${fileType}`,
16+
description: `file description ${index}`,
17+
downloadUrl: `/url-path/fake_file_${index}.${fileType}`,
18+
})),
19+
{
20+
name: 'bad_ext_fake_file.other',
21+
description: 'bad_ext file description',
22+
downloadUrl: 'bad_ext.other',
23+
},
24+
],
25+
};
26+
27+
const renderWithIntl = (component) => render(
28+
<IntlProvider locale="en" messages={{}}>
29+
{component}
30+
</IntlProvider>,
31+
);
32+
33+
beforeEach(() => {
34+
jest.clearAllMocks();
35+
});
36+
37+
it('renders preview display container', () => {
38+
const { container } = renderWithIntl(<PreviewDisplay {...props} />);
39+
const previewDisplay = container.querySelector('.preview-display');
40+
expect(previewDisplay).toBeInTheDocument();
41+
});
42+
43+
it('renders empty container when no files provided', () => {
44+
const { container } = renderWithIntl(<PreviewDisplay files={[]} />);
45+
const previewDisplay = container.querySelector('.preview-display');
46+
expect(previewDisplay).toBeInTheDocument();
47+
expect(previewDisplay.children.length).toBe(0);
48+
});
49+
50+
it('only renders supported file types', () => {
51+
const { container } = renderWithIntl(<PreviewDisplay {...props} />);
52+
const previewDisplay = container.querySelector('.preview-display');
53+
expect(previewDisplay.children.length).toBe(supportedTypes.length);
54+
});
55+
56+
it('filters out unsupported file types', () => {
57+
const unsupportedFile = {
58+
name: 'unsupported.xyz',
59+
description: 'unsupported file',
60+
downloadUrl: '/unsupported.xyz',
2861
};
29-
let el;
30-
beforeEach(() => {
31-
el = shallow(<PreviewDisplay {...props} />);
32-
});
33-
34-
describe('snapshot', () => {
35-
test('files render with props', () => {
36-
expect(el.snapshot).toMatchSnapshot();
37-
});
38-
test('files does not exist', () => {
39-
el = shallow(<PreviewDisplay {...props} files={[]} />);
40-
expect(el.snapshot).toMatchSnapshot();
41-
});
42-
});
43-
44-
describe('component', () => {
45-
test('only renders compatible files', () => {
46-
const cards = el.instance.findByType(FileRenderer);
47-
expect(cards.length).toEqual(supportedTypes.length);
48-
cards.forEach((_, index) => {
49-
expect(
50-
cards[index].props.file,
51-
).toEqual(props.files[index]);
52-
});
53-
});
54-
});
62+
const { container } = renderWithIntl(<PreviewDisplay files={[unsupportedFile]} />);
63+
const previewDisplay = container.querySelector('.preview-display');
64+
expect(previewDisplay.children.length).toBe(0);
5565
});
5666
});

‎src/containers/ResponseDisplay/SubmissionFiles.test.jsx‎

Lines changed: 85 additions & 80 deletions
Original file line numberDiff line numberDiff line change
@@ -1,99 +1,104 @@
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 { downloadAllLimit, downloadSingleLimit } from 'data/constants/files';
5-
6-
import { formatMessage } from 'testUtils';
74
import { SubmissionFiles } from './SubmissionFiles';
8-
import messages from './messages';
95

10-
jest.mock('./components/FileNameCell', () => jest.fn().mockName('FileNameCell'));
11-
jest.mock('./components/FileExtensionCell', () => jest.fn().mockName('FileExtensionCell'));
12-
jest.mock('./components/FilePopoverCell', () => jest.fn().mockName('FilePopoverCell'));
13-
jest.mock('./FileDownload', () => 'FileDownload');
6+
jest.unmock('@openedx/paragon');
7+
jest.unmock('react');
8+
jest.unmock('@edx/frontend-platform/i18n');
9+
10+
jest.mock('./components/FileNameCell', () => jest.fn(({ value }) => <div>Name: {value}</div>));
11+
jest.mock('./components/FileExtensionCell', () => jest.fn(({ value }) => <div>Extension: {value}</div>));
12+
jest.mock('./components/FilePopoverCell', () => jest.fn(() => <div>Popover</div>));
13+
jest.mock('./FileDownload', () => jest.fn(({ files }) => <div data-testid="file-download">Download {files.length} files</div>));
1414

1515
describe('SubmissionFiles', () => {
16-
describe('component', () => {
17-
const props = {
18-
files: [
19-
{
20-
name: 'some file name.jpg',
21-
description: 'description for the file',
22-
downloadURL: '/valid-url-wink-wink',
23-
size: 0,
24-
},
25-
{
26-
name: 'file number 2.jpg',
27-
description: 'description for this file',
28-
downloadURL: '/url-2',
29-
size: 0,
30-
},
31-
],
32-
};
33-
let el;
34-
beforeEach(() => {
35-
el = shallow(<SubmissionFiles {...props} />);
36-
});
16+
const defaultProps = {
17+
files: [
18+
{
19+
name: 'some file name.jpg',
20+
description: 'description for the file',
21+
downloadURL: '/valid-url-wink-wink',
22+
size: 100,
23+
},
24+
{
25+
name: 'file number 2.jpg',
26+
description: 'description for this file',
27+
downloadURL: '/url-2',
28+
size: 200,
29+
},
30+
],
31+
};
3732

38-
describe('snapshot', () => {
39-
test('files existed for props', () => {
40-
expect(el.snapshot).toMatchSnapshot();
41-
});
33+
const renderWithIntl = (component) => render(
34+
<IntlProvider locale="en" messages={{}}>
35+
{component}
36+
</IntlProvider>,
37+
);
4238

43-
test('files does not exist', () => {
44-
el = shallow(<SubmissionFiles {...props} files={[]} />);
39+
beforeEach(() => {
40+
jest.clearAllMocks();
41+
});
4542

46-
expect(el.snapshot).toMatchSnapshot();
47-
});
48-
test('files size exceed', () => {
49-
const files = props.files.map(file => ({ ...file, size: downloadSingleLimit + 1 }));
50-
el = shallow(<SubmissionFiles {...props} files={files} />);
51-
expect(el.snapshot).toMatchSnapshot();
52-
});
43+
describe('behavior', () => {
44+
it('displays submission files title with file count', () => {
45+
renderWithIntl(<SubmissionFiles {...defaultProps} />);
46+
const title = screen.getByTestId('submission-files-title');
47+
expect(title).toBeInTheDocument();
48+
expect(title).toHaveTextContent(`Submission Files (${defaultProps.files.length})`);
5349
});
5450

55-
describe('behavior', () => {
56-
test('title', () => {
57-
const titleEl = el.instance.findByTestId('submission-files-title')[0].children[0];
58-
expect(titleEl.el).toEqual(
59-
`${formatMessage(messages.submissionFiles)} (${props.files.length})`,
60-
);
61-
});
62-
63-
describe('canDownload', () => {
64-
test('normal file size', () => {
65-
expect(el.instance.findByTestId('file-download')).toHaveLength(1);
66-
});
51+
it('renders file download component when files can be downloaded', () => {
52+
renderWithIntl(<SubmissionFiles {...defaultProps} />);
53+
const downloadComponent = screen.getByTestId('file-download');
54+
expect(downloadComponent).toBeInTheDocument();
55+
expect(downloadComponent).toHaveTextContent('Download 2 files');
56+
});
6757

68-
test('one of the file exceed the limit', () => {
69-
const oneFileExceed = [{ ...props.files[0], size: downloadSingleLimit + 1 }, props.files[1]];
58+
it('displays warning when individual file exceeds size limit', () => {
59+
const largeFileProps = {
60+
...defaultProps,
61+
files: [
62+
{ ...defaultProps.files[0], size: downloadSingleLimit + 1 },
63+
defaultProps.files[1],
64+
],
65+
};
66+
renderWithIntl(<SubmissionFiles {...largeFileProps} />);
7067

71-
oneFileExceed.forEach(file => expect(file.size < downloadAllLimit).toEqual(true));
68+
expect(screen.queryByTestId('file-download')).not.toBeInTheDocument();
69+
const warningText = screen.getByTestId('exceed-download-text');
70+
expect(warningText).toBeInTheDocument();
71+
expect(warningText).toHaveTextContent('Exceeded the allow download size');
72+
});
7273

73-
el = shallow(<SubmissionFiles {...props} files={oneFileExceed} />);
74-
expect(el.instance.findByTestId('file-download')).toHaveLength(0);
74+
it('displays warning when total file size exceeds limit', () => {
75+
const largeFileSize = (downloadAllLimit + 1) / 20;
76+
const largeFilesProps = {
77+
...defaultProps,
78+
files: Array(20).fill({
79+
name: 'large file.jpg',
80+
description: 'large file description',
81+
downloadURL: '/large-file-url',
82+
size: largeFileSize,
83+
}),
84+
};
85+
renderWithIntl(<SubmissionFiles {...largeFilesProps} />);
7586

76-
const warningEl = el.instance.findByTestId('exceed-download-text')[0];
77-
expect(warningEl.el.children[1]).toEqual(formatMessage(messages.exceedFileSize));
78-
});
87+
expect(screen.queryByTestId('file-download')).not.toBeInTheDocument();
88+
});
7989

80-
test('total file size exceed the limit', () => {
81-
const length = 20;
82-
const totalFilesExceed = new Array(length).fill({
83-
name: 'some file name.jpg',
84-
description: 'description for the file',
85-
downloadURL: '/valid-url-wink-wink',
86-
size: (downloadAllLimit + 1) / length,
87-
});
88-
totalFilesExceed.forEach(file => {
89-
expect(file.size < downloadAllLimit).toEqual(true);
90-
expect(file.size < downloadSingleLimit).toEqual(true);
91-
});
90+
it('displays title only when no files are provided', () => {
91+
const { container } = renderWithIntl(<SubmissionFiles {...defaultProps} files={[]} />);
92+
const title = container.querySelector('.submission-files-title h3');
93+
expect(title).toBeInTheDocument();
94+
expect(title).toHaveTextContent('Submission Files (0)');
95+
expect(screen.queryByTestId('file-download')).not.toBeInTheDocument();
96+
});
9297

93-
el = shallow(<SubmissionFiles {...props} files={totalFilesExceed} />);
94-
expect(el.instance.findByTestId('file-download')).toHaveLength(0);
95-
});
96-
});
98+
it('renders data table with correct file information', () => {
99+
const { container } = renderWithIntl(<SubmissionFiles {...defaultProps} />);
100+
const dataTable = container.querySelector('.submission-files-table');
101+
expect(dataTable).toBeInTheDocument();
97102
});
98103
});
99104
});

0 commit comments

Comments
 (0)