test: deprecate react-unit-test-utils part-6 (#440)
This commit is contained in:
Victor Navarro
@@ -1,56 +1,66 @@
|
||||
import React from 'react';
|
||||
import { shallow } from '@edx/react-unit-test-utils';
|
||||
|
||||
import { render } from '@testing-library/react';
|
||||
import { IntlProvider } from '@edx/frontend-platform/i18n';
|
||||
import { FileTypes } from 'data/constants/files';
|
||||
import { FileRenderer } from 'components/FilePreview';
|
||||
import { PreviewDisplay } from './PreviewDisplay';
|
||||
|
||||
jest.mock('components/FilePreview', () => ({
|
||||
FileRenderer: () => 'FileRenderer',
|
||||
}));
|
||||
jest.unmock('@openedx/paragon');
|
||||
jest.unmock('react');
|
||||
jest.unmock('@edx/frontend-platform/i18n');
|
||||
|
||||
describe('PreviewDisplay', () => {
|
||||
describe('component', () => {
|
||||
const supportedTypes = Object.values(FileTypes);
|
||||
const props = {
|
||||
files: [
|
||||
...supportedTypes.map((fileType, index) => ({
|
||||
name: `fake_file_${index}.${fileType}`,
|
||||
description: `file description ${index}`,
|
||||
downloadUrl: `/url-path/fake_file_${index}.${fileType}`,
|
||||
})),
|
||||
{
|
||||
name: 'bad_ext_fake_file.other',
|
||||
description: 'bad_ext file description',
|
||||
downloadUrl: 'bad_ext.other',
|
||||
},
|
||||
],
|
||||
const supportedTypes = Object.values(FileTypes);
|
||||
const props = {
|
||||
files: [
|
||||
...supportedTypes.map((fileType, index) => ({
|
||||
name: `fake_file_${index}.${fileType}`,
|
||||
description: `file description ${index}`,
|
||||
downloadUrl: `/url-path/fake_file_${index}.${fileType}`,
|
||||
})),
|
||||
{
|
||||
name: 'bad_ext_fake_file.other',
|
||||
description: 'bad_ext file description',
|
||||
downloadUrl: 'bad_ext.other',
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
const renderWithIntl = (component) => render(
|
||||
<IntlProvider locale="en" messages={{}}>
|
||||
{component}
|
||||
</IntlProvider>,
|
||||
);
|
||||
|
||||
beforeEach(() => {
|
||||
jest.clearAllMocks();
|
||||
});
|
||||
|
||||
it('renders preview display container', () => {
|
||||
const { container } = renderWithIntl(<PreviewDisplay {...props} />);
|
||||
const previewDisplay = container.querySelector('.preview-display');
|
||||
expect(previewDisplay).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders empty container when no files provided', () => {
|
||||
const { container } = renderWithIntl(<PreviewDisplay files={[]} />);
|
||||
const previewDisplay = container.querySelector('.preview-display');
|
||||
expect(previewDisplay).toBeInTheDocument();
|
||||
expect(previewDisplay.children.length).toBe(0);
|
||||
});
|
||||
|
||||
it('only renders supported file types', () => {
|
||||
const { container } = renderWithIntl(<PreviewDisplay {...props} />);
|
||||
const previewDisplay = container.querySelector('.preview-display');
|
||||
expect(previewDisplay.children.length).toBe(supportedTypes.length);
|
||||
});
|
||||
|
||||
it('filters out unsupported file types', () => {
|
||||
const unsupportedFile = {
|
||||
name: 'unsupported.xyz',
|
||||
description: 'unsupported file',
|
||||
downloadUrl: '/unsupported.xyz',
|
||||
};
|
||||
let el;
|
||||
beforeEach(() => {
|
||||
el = shallow(<PreviewDisplay {...props} />);
|
||||
});
|
||||
|
||||
describe('snapshot', () => {
|
||||
test('files render with props', () => {
|
||||
expect(el.snapshot).toMatchSnapshot();
|
||||
});
|
||||
test('files does not exist', () => {
|
||||
el = shallow(<PreviewDisplay {...props} files={[]} />);
|
||||
expect(el.snapshot).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
|
||||
describe('component', () => {
|
||||
test('only renders compatible files', () => {
|
||||
const cards = el.instance.findByType(FileRenderer);
|
||||
expect(cards.length).toEqual(supportedTypes.length);
|
||||
cards.forEach((_, index) => {
|
||||
expect(
|
||||
cards[index].props.file,
|
||||
).toEqual(props.files[index]);
|
||||
});
|
||||
});
|
||||
});
|
||||
const { container } = renderWithIntl(<PreviewDisplay files={[unsupportedFile]} />);
|
||||
const previewDisplay = container.querySelector('.preview-display');
|
||||
expect(previewDisplay.children.length).toBe(0);
|
||||
});
|
||||
});
|
||||
|
||||
@@ -1,99 +1,104 @@
|
||||
import React from 'react';
|
||||
import { shallow } from '@edx/react-unit-test-utils';
|
||||
|
||||
import { render, screen } from '@testing-library/react';
|
||||
import { IntlProvider } from '@edx/frontend-platform/i18n';
|
||||
import { downloadAllLimit, downloadSingleLimit } from 'data/constants/files';
|
||||
|
||||
import { formatMessage } from 'testUtils';
|
||||
import { SubmissionFiles } from './SubmissionFiles';
|
||||
import messages from './messages';
|
||||
|
||||
jest.mock('./components/FileNameCell', () => jest.fn().mockName('FileNameCell'));
|
||||
jest.mock('./components/FileExtensionCell', () => jest.fn().mockName('FileExtensionCell'));
|
||||
jest.mock('./components/FilePopoverCell', () => jest.fn().mockName('FilePopoverCell'));
|
||||
jest.mock('./FileDownload', () => 'FileDownload');
|
||||
jest.unmock('@openedx/paragon');
|
||||
jest.unmock('react');
|
||||
jest.unmock('@edx/frontend-platform/i18n');
|
||||
|
||||
jest.mock('./components/FileNameCell', () => jest.fn(({ value }) => <div>Name: {value}</div>));
|
||||
jest.mock('./components/FileExtensionCell', () => jest.fn(({ value }) => <div>Extension: {value}</div>));
|
||||
jest.mock('./components/FilePopoverCell', () => jest.fn(() => <div>Popover</div>));
|
||||
jest.mock('./FileDownload', () => jest.fn(({ files }) => <div data-testid="file-download">Download {files.length} files</div>));
|
||||
|
||||
describe('SubmissionFiles', () => {
|
||||
describe('component', () => {
|
||||
const props = {
|
||||
files: [
|
||||
{
|
||||
name: 'some file name.jpg',
|
||||
description: 'description for the file',
|
||||
downloadURL: '/valid-url-wink-wink',
|
||||
size: 0,
|
||||
},
|
||||
{
|
||||
name: 'file number 2.jpg',
|
||||
description: 'description for this file',
|
||||
downloadURL: '/url-2',
|
||||
size: 0,
|
||||
},
|
||||
],
|
||||
};
|
||||
let el;
|
||||
beforeEach(() => {
|
||||
el = shallow(<SubmissionFiles {...props} />);
|
||||
const defaultProps = {
|
||||
files: [
|
||||
{
|
||||
name: 'some file name.jpg',
|
||||
description: 'description for the file',
|
||||
downloadURL: '/valid-url-wink-wink',
|
||||
size: 100,
|
||||
},
|
||||
{
|
||||
name: 'file number 2.jpg',
|
||||
description: 'description for this file',
|
||||
downloadURL: '/url-2',
|
||||
size: 200,
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
const renderWithIntl = (component) => render(
|
||||
<IntlProvider locale="en" messages={{}}>
|
||||
{component}
|
||||
</IntlProvider>,
|
||||
);
|
||||
|
||||
beforeEach(() => {
|
||||
jest.clearAllMocks();
|
||||
});
|
||||
|
||||
describe('behavior', () => {
|
||||
it('displays submission files title with file count', () => {
|
||||
renderWithIntl(<SubmissionFiles {...defaultProps} />);
|
||||
const title = screen.getByTestId('submission-files-title');
|
||||
expect(title).toBeInTheDocument();
|
||||
expect(title).toHaveTextContent(`Submission Files (${defaultProps.files.length})`);
|
||||
});
|
||||
|
||||
describe('snapshot', () => {
|
||||
test('files existed for props', () => {
|
||||
expect(el.snapshot).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('files does not exist', () => {
|
||||
el = shallow(<SubmissionFiles {...props} files={[]} />);
|
||||
|
||||
expect(el.snapshot).toMatchSnapshot();
|
||||
});
|
||||
test('files size exceed', () => {
|
||||
const files = props.files.map(file => ({ ...file, size: downloadSingleLimit + 1 }));
|
||||
el = shallow(<SubmissionFiles {...props} files={files} />);
|
||||
expect(el.snapshot).toMatchSnapshot();
|
||||
});
|
||||
it('renders file download component when files can be downloaded', () => {
|
||||
renderWithIntl(<SubmissionFiles {...defaultProps} />);
|
||||
const downloadComponent = screen.getByTestId('file-download');
|
||||
expect(downloadComponent).toBeInTheDocument();
|
||||
expect(downloadComponent).toHaveTextContent('Download 2 files');
|
||||
});
|
||||
|
||||
describe('behavior', () => {
|
||||
test('title', () => {
|
||||
const titleEl = el.instance.findByTestId('submission-files-title')[0].children[0];
|
||||
expect(titleEl.el).toEqual(
|
||||
`${formatMessage(messages.submissionFiles)} (${props.files.length})`,
|
||||
);
|
||||
});
|
||||
it('displays warning when individual file exceeds size limit', () => {
|
||||
const largeFileProps = {
|
||||
...defaultProps,
|
||||
files: [
|
||||
{ ...defaultProps.files[0], size: downloadSingleLimit + 1 },
|
||||
defaultProps.files[1],
|
||||
],
|
||||
};
|
||||
renderWithIntl(<SubmissionFiles {...largeFileProps} />);
|
||||
|
||||
describe('canDownload', () => {
|
||||
test('normal file size', () => {
|
||||
expect(el.instance.findByTestId('file-download')).toHaveLength(1);
|
||||
});
|
||||
expect(screen.queryByTestId('file-download')).not.toBeInTheDocument();
|
||||
const warningText = screen.getByTestId('exceed-download-text');
|
||||
expect(warningText).toBeInTheDocument();
|
||||
expect(warningText).toHaveTextContent('Exceeded the allow download size');
|
||||
});
|
||||
|
||||
test('one of the file exceed the limit', () => {
|
||||
const oneFileExceed = [{ ...props.files[0], size: downloadSingleLimit + 1 }, props.files[1]];
|
||||
it('displays warning when total file size exceeds limit', () => {
|
||||
const largeFileSize = (downloadAllLimit + 1) / 20;
|
||||
const largeFilesProps = {
|
||||
...defaultProps,
|
||||
files: Array(20).fill({
|
||||
name: 'large file.jpg',
|
||||
description: 'large file description',
|
||||
downloadURL: '/large-file-url',
|
||||
size: largeFileSize,
|
||||
}),
|
||||
};
|
||||
renderWithIntl(<SubmissionFiles {...largeFilesProps} />);
|
||||
|
||||
oneFileExceed.forEach(file => expect(file.size < downloadAllLimit).toEqual(true));
|
||||
expect(screen.queryByTestId('file-download')).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
el = shallow(<SubmissionFiles {...props} files={oneFileExceed} />);
|
||||
expect(el.instance.findByTestId('file-download')).toHaveLength(0);
|
||||
it('displays title only when no files are provided', () => {
|
||||
const { container } = renderWithIntl(<SubmissionFiles {...defaultProps} files={[]} />);
|
||||
const title = container.querySelector('.submission-files-title h3');
|
||||
expect(title).toBeInTheDocument();
|
||||
expect(title).toHaveTextContent('Submission Files (0)');
|
||||
expect(screen.queryByTestId('file-download')).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
const warningEl = el.instance.findByTestId('exceed-download-text')[0];
|
||||
expect(warningEl.el.children[1]).toEqual(formatMessage(messages.exceedFileSize));
|
||||
});
|
||||
|
||||
test('total file size exceed the limit', () => {
|
||||
const length = 20;
|
||||
const totalFilesExceed = new Array(length).fill({
|
||||
name: 'some file name.jpg',
|
||||
description: 'description for the file',
|
||||
downloadURL: '/valid-url-wink-wink',
|
||||
size: (downloadAllLimit + 1) / length,
|
||||
});
|
||||
totalFilesExceed.forEach(file => {
|
||||
expect(file.size < downloadAllLimit).toEqual(true);
|
||||
expect(file.size < downloadSingleLimit).toEqual(true);
|
||||
});
|
||||
|
||||
el = shallow(<SubmissionFiles {...props} files={totalFilesExceed} />);
|
||||
expect(el.instance.findByTestId('file-download')).toHaveLength(0);
|
||||
});
|
||||
});
|
||||
it('renders data table with correct file information', () => {
|
||||
const { container } = renderWithIntl(<SubmissionFiles {...defaultProps} />);
|
||||
const dataTable = container.querySelector('.submission-files-table');
|
||||
expect(dataTable).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
@@ -1,124 +0,0 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`PreviewDisplay component snapshot files does not exist 1`] = `
|
||||
<div
|
||||
className="preview-display"
|
||||
/>
|
||||
`;
|
||||
|
||||
exports[`PreviewDisplay component snapshot files render with props 1`] = `
|
||||
<div
|
||||
className="preview-display"
|
||||
>
|
||||
<FileRenderer
|
||||
file={
|
||||
{
|
||||
"description": "file description 0",
|
||||
"downloadUrl": "/url-path/fake_file_0.pdf",
|
||||
"name": "fake_file_0.pdf",
|
||||
}
|
||||
}
|
||||
key="fake_file_0.pdf"
|
||||
/>
|
||||
<FileRenderer
|
||||
file={
|
||||
{
|
||||
"description": "file description 1",
|
||||
"downloadUrl": "/url-path/fake_file_1.jpg",
|
||||
"name": "fake_file_1.jpg",
|
||||
}
|
||||
}
|
||||
key="fake_file_1.jpg"
|
||||
/>
|
||||
<FileRenderer
|
||||
file={
|
||||
{
|
||||
"description": "file description 2",
|
||||
"downloadUrl": "/url-path/fake_file_2.jpeg",
|
||||
"name": "fake_file_2.jpeg",
|
||||
}
|
||||
}
|
||||
key="fake_file_2.jpeg"
|
||||
/>
|
||||
<FileRenderer
|
||||
file={
|
||||
{
|
||||
"description": "file description 3",
|
||||
"downloadUrl": "/url-path/fake_file_3.png",
|
||||
"name": "fake_file_3.png",
|
||||
}
|
||||
}
|
||||
key="fake_file_3.png"
|
||||
/>
|
||||
<FileRenderer
|
||||
file={
|
||||
{
|
||||
"description": "file description 4",
|
||||
"downloadUrl": "/url-path/fake_file_4.bmp",
|
||||
"name": "fake_file_4.bmp",
|
||||
}
|
||||
}
|
||||
key="fake_file_4.bmp"
|
||||
/>
|
||||
<FileRenderer
|
||||
file={
|
||||
{
|
||||
"description": "file description 5",
|
||||
"downloadUrl": "/url-path/fake_file_5.txt",
|
||||
"name": "fake_file_5.txt",
|
||||
}
|
||||
}
|
||||
key="fake_file_5.txt"
|
||||
/>
|
||||
<FileRenderer
|
||||
file={
|
||||
{
|
||||
"description": "file description 6",
|
||||
"downloadUrl": "/url-path/fake_file_6.gif",
|
||||
"name": "fake_file_6.gif",
|
||||
}
|
||||
}
|
||||
key="fake_file_6.gif"
|
||||
/>
|
||||
<FileRenderer
|
||||
file={
|
||||
{
|
||||
"description": "file description 7",
|
||||
"downloadUrl": "/url-path/fake_file_7.jfif",
|
||||
"name": "fake_file_7.jfif",
|
||||
}
|
||||
}
|
||||
key="fake_file_7.jfif"
|
||||
/>
|
||||
<FileRenderer
|
||||
file={
|
||||
{
|
||||
"description": "file description 8",
|
||||
"downloadUrl": "/url-path/fake_file_8.pjpeg",
|
||||
"name": "fake_file_8.pjpeg",
|
||||
}
|
||||
}
|
||||
key="fake_file_8.pjpeg"
|
||||
/>
|
||||
<FileRenderer
|
||||
file={
|
||||
{
|
||||
"description": "file description 9",
|
||||
"downloadUrl": "/url-path/fake_file_9.pjp",
|
||||
"name": "fake_file_9.pjp",
|
||||
}
|
||||
}
|
||||
key="fake_file_9.pjp"
|
||||
/>
|
||||
<FileRenderer
|
||||
file={
|
||||
{
|
||||
"description": "file description 10",
|
||||
"downloadUrl": "/url-path/fake_file_10.svg",
|
||||
"name": "fake_file_10.svg",
|
||||
}
|
||||
}
|
||||
key="fake_file_10.svg"
|
||||
/>
|
||||
</div>
|
||||
`;
|
||||
@@ -1,230 +0,0 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`SubmissionFiles component snapshot files does not exist 1`] = `
|
||||
<Card
|
||||
className="submission-files"
|
||||
>
|
||||
<div
|
||||
className="submission-files-title no-submissions"
|
||||
>
|
||||
<h3>
|
||||
Submission Files (0)
|
||||
</h3>
|
||||
</div>
|
||||
</Card>
|
||||
`;
|
||||
|
||||
exports[`SubmissionFiles component snapshot files existed for props 1`] = `
|
||||
<Card
|
||||
className="submission-files"
|
||||
>
|
||||
<Fragment>
|
||||
<Collapsible.Advanced
|
||||
defaultOpen={true}
|
||||
>
|
||||
<Collapsible.Trigger
|
||||
className="submission-files-title"
|
||||
>
|
||||
<h3
|
||||
data-testid="submission-files-title"
|
||||
>
|
||||
Submission Files (2)
|
||||
</h3>
|
||||
<Collapsible.Visible
|
||||
whenClosed={true}
|
||||
>
|
||||
<Icon
|
||||
src={[MockFunction icons.ArrowDropDown]}
|
||||
/>
|
||||
</Collapsible.Visible>
|
||||
<Collapsible.Visible
|
||||
whenOpen={true}
|
||||
>
|
||||
<Icon
|
||||
src={[MockFunction icons.ArrowDropUp]}
|
||||
/>
|
||||
</Collapsible.Visible>
|
||||
</Collapsible.Trigger>
|
||||
<Collapsible.Body
|
||||
className="submission-files-body"
|
||||
>
|
||||
<div
|
||||
className="submission-files-table"
|
||||
>
|
||||
<DataTable
|
||||
columns={
|
||||
[
|
||||
{
|
||||
"Cell": [MockFunction FileNameCell],
|
||||
"Header": "Name",
|
||||
"accessor": "name",
|
||||
},
|
||||
{
|
||||
"Cell": [MockFunction FileExtensionCell],
|
||||
"Header": "File Extension",
|
||||
"accessor": "name",
|
||||
"id": "extension",
|
||||
},
|
||||
{
|
||||
"Cell": [MockFunction FilePopoverCell],
|
||||
"Header": "File Metadata",
|
||||
"accessor": "",
|
||||
},
|
||||
]
|
||||
}
|
||||
data={
|
||||
[
|
||||
{
|
||||
"description": "description for the file",
|
||||
"downloadURL": "/valid-url-wink-wink",
|
||||
"name": "some file name.jpg",
|
||||
"size": 0,
|
||||
},
|
||||
{
|
||||
"description": "description for this file",
|
||||
"downloadURL": "/url-2",
|
||||
"name": "file number 2.jpg",
|
||||
"size": 0,
|
||||
},
|
||||
]
|
||||
}
|
||||
itemCount={2}
|
||||
>
|
||||
<DataTable.Table />
|
||||
</DataTable>
|
||||
</div>
|
||||
</Collapsible.Body>
|
||||
</Collapsible.Advanced>
|
||||
<Card.Footer
|
||||
className="text-right"
|
||||
>
|
||||
<FileDownload
|
||||
data-testid="file-download"
|
||||
files={
|
||||
[
|
||||
{
|
||||
"description": "description for the file",
|
||||
"downloadURL": "/valid-url-wink-wink",
|
||||
"name": "some file name.jpg",
|
||||
"size": 0,
|
||||
},
|
||||
{
|
||||
"description": "description for this file",
|
||||
"downloadURL": "/url-2",
|
||||
"name": "file number 2.jpg",
|
||||
"size": 0,
|
||||
},
|
||||
]
|
||||
}
|
||||
/>
|
||||
</Card.Footer>
|
||||
</Fragment>
|
||||
</Card>
|
||||
`;
|
||||
|
||||
exports[`SubmissionFiles component snapshot files size exceed 1`] = `
|
||||
<Card
|
||||
className="submission-files"
|
||||
>
|
||||
<Fragment>
|
||||
<Collapsible.Advanced
|
||||
defaultOpen={true}
|
||||
>
|
||||
<Collapsible.Trigger
|
||||
className="submission-files-title"
|
||||
>
|
||||
<h3
|
||||
data-testid="submission-files-title"
|
||||
>
|
||||
Submission Files (2)
|
||||
</h3>
|
||||
<Collapsible.Visible
|
||||
whenClosed={true}
|
||||
>
|
||||
<Icon
|
||||
src={[MockFunction icons.ArrowDropDown]}
|
||||
/>
|
||||
</Collapsible.Visible>
|
||||
<Collapsible.Visible
|
||||
whenOpen={true}
|
||||
>
|
||||
<Icon
|
||||
src={[MockFunction icons.ArrowDropUp]}
|
||||
/>
|
||||
</Collapsible.Visible>
|
||||
</Collapsible.Trigger>
|
||||
<Collapsible.Body
|
||||
className="submission-files-body"
|
||||
>
|
||||
<div
|
||||
className="submission-files-table"
|
||||
>
|
||||
<DataTable
|
||||
columns={
|
||||
[
|
||||
{
|
||||
"Cell": [MockFunction FileNameCell],
|
||||
"Header": "Name",
|
||||
"accessor": "name",
|
||||
},
|
||||
{
|
||||
"Cell": [MockFunction FileExtensionCell],
|
||||
"Header": "File Extension",
|
||||
"accessor": "name",
|
||||
"id": "extension",
|
||||
},
|
||||
{
|
||||
"Cell": [MockFunction FilePopoverCell],
|
||||
"Header": "File Metadata",
|
||||
"accessor": "",
|
||||
},
|
||||
]
|
||||
}
|
||||
data={
|
||||
[
|
||||
{
|
||||
"description": "description for the file",
|
||||
"downloadURL": "/valid-url-wink-wink",
|
||||
"name": "some file name.jpg",
|
||||
"size": 1610612737,
|
||||
},
|
||||
{
|
||||
"description": "description for this file",
|
||||
"downloadURL": "/url-2",
|
||||
"name": "file number 2.jpg",
|
||||
"size": 1610612737,
|
||||
},
|
||||
]
|
||||
}
|
||||
itemCount={2}
|
||||
>
|
||||
<DataTable.Table />
|
||||
</DataTable>
|
||||
</div>
|
||||
</Collapsible.Body>
|
||||
</Collapsible.Advanced>
|
||||
<Card.Footer
|
||||
className="text-right"
|
||||
>
|
||||
<div>
|
||||
<Icon
|
||||
className="d-inline-block align-middle"
|
||||
/>
|
||||
<span
|
||||
className="exceed-download-text"
|
||||
data-testid="exceed-download-text"
|
||||
>
|
||||
|
||||
Exceeded the allow download size
|
||||
|
||||
</span>
|
||||
<Button
|
||||
disabled={true}
|
||||
>
|
||||
Download files
|
||||
</Button>
|
||||
</div>
|
||||
</Card.Footer>
|
||||
</Fragment>
|
||||
</Card>
|
||||
`;
|
||||
@@ -1,99 +0,0 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`ResponseDisplay component snapshot file upload disable with valid response 1`] = `
|
||||
<div
|
||||
className="response-display"
|
||||
>
|
||||
<Card
|
||||
key="0"
|
||||
>
|
||||
<Card.Section
|
||||
className="response-display-text-content"
|
||||
data-testid="response-display-text-content"
|
||||
>
|
||||
parsed html (sanitized (some text response here))
|
||||
</Card.Section>
|
||||
</Card>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`ResponseDisplay component snapshot file upload disabled without response 1`] = `
|
||||
<div
|
||||
className="response-display"
|
||||
>
|
||||
<SubmissionFiles
|
||||
data-testid="submission-files"
|
||||
files={[]}
|
||||
/>
|
||||
<PreviewDisplay
|
||||
data-testid="allow-file-upload"
|
||||
files={[]}
|
||||
/>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`ResponseDisplay component snapshot file upload enable with valid response 1`] = `
|
||||
<div
|
||||
className="response-display"
|
||||
>
|
||||
<SubmissionFiles
|
||||
data-testid="submission-files"
|
||||
files={
|
||||
[
|
||||
{
|
||||
"description": "description for the file",
|
||||
"downloadURL": "/valid-url-wink-wink",
|
||||
"name": "some file name.jpg",
|
||||
},
|
||||
{
|
||||
"description": "description for this file",
|
||||
"downloadURL": "/url-2",
|
||||
"name": "file number 2.jpg",
|
||||
},
|
||||
]
|
||||
}
|
||||
/>
|
||||
<PreviewDisplay
|
||||
data-testid="allow-file-upload"
|
||||
files={
|
||||
[
|
||||
{
|
||||
"description": "description for the file",
|
||||
"downloadURL": "/valid-url-wink-wink",
|
||||
"name": "some file name.jpg",
|
||||
},
|
||||
{
|
||||
"description": "description for this file",
|
||||
"downloadURL": "/url-2",
|
||||
"name": "file number 2.jpg",
|
||||
},
|
||||
]
|
||||
}
|
||||
/>
|
||||
<Card
|
||||
key="0"
|
||||
>
|
||||
<Card.Section
|
||||
className="response-display-text-content"
|
||||
data-testid="response-display-text-content"
|
||||
>
|
||||
parsed html (sanitized (some text response here))
|
||||
</Card.Section>
|
||||
</Card>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`ResponseDisplay component snapshot file upload enable without response 1`] = `
|
||||
<div
|
||||
className="response-display"
|
||||
>
|
||||
<SubmissionFiles
|
||||
data-testid="submission-files"
|
||||
files={[]}
|
||||
/>
|
||||
<PreviewDisplay
|
||||
data-testid="allow-file-upload"
|
||||
files={[]}
|
||||
/>
|
||||
</div>
|
||||
`;
|
||||
@@ -1,25 +1,42 @@
|
||||
import React from 'react';
|
||||
import { shallow } from '@edx/react-unit-test-utils';
|
||||
|
||||
import { render } from '@testing-library/react';
|
||||
import FileExtensionCell from './FileExtensionCell';
|
||||
|
||||
describe('FileExtensionCell', () => {
|
||||
describe('component', () => {
|
||||
const props = {
|
||||
value: 'file_name.with_extension.pdf',
|
||||
};
|
||||
let el;
|
||||
beforeEach(() => {
|
||||
el = shallow(<FileExtensionCell {...props} />);
|
||||
});
|
||||
test('snapshot', () => {
|
||||
expect(el.snapshot).toMatchSnapshot();
|
||||
});
|
||||
jest.unmock('@openedx/paragon');
|
||||
jest.unmock('react');
|
||||
|
||||
describe('behavior', () => {
|
||||
test('content', () => {
|
||||
expect(el.instance.children[0].el).toEqual('PDF');
|
||||
});
|
||||
});
|
||||
describe('FileExtensionCell', () => {
|
||||
const props = {
|
||||
value: 'file_name.with_extension.pdf',
|
||||
};
|
||||
|
||||
beforeEach(() => {
|
||||
jest.clearAllMocks();
|
||||
});
|
||||
|
||||
it('renders file extension in uppercase', () => {
|
||||
const { getByText } = render(<FileExtensionCell {...props} />);
|
||||
expect(getByText('PDF')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('applies correct CSS class', () => {
|
||||
const { container } = render(<FileExtensionCell {...props} />);
|
||||
const element = container.firstChild;
|
||||
expect(element).toHaveClass('text-truncate');
|
||||
});
|
||||
|
||||
it('extracts extension from file with multiple dots', () => {
|
||||
const { getByText } = render(<FileExtensionCell value="my.file.name.docx" />);
|
||||
expect(getByText('DOCX')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('handles file without extension', () => {
|
||||
const { getByText } = render(<FileExtensionCell value="filename" />);
|
||||
expect(getByText('FILENAME')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('handles empty file extension', () => {
|
||||
const { container } = render(<FileExtensionCell value="filename." />);
|
||||
const element = container.firstChild;
|
||||
expect(element).toHaveTextContent('');
|
||||
});
|
||||
});
|
||||
|
||||
@@ -1,25 +1,21 @@
|
||||
import React from 'react';
|
||||
import { shallow } from '@edx/react-unit-test-utils';
|
||||
import { render, screen } from '@testing-library/react';
|
||||
|
||||
import FileNameCell from './FileNameCell';
|
||||
|
||||
describe('FileNameCell', () => {
|
||||
describe('component', () => {
|
||||
const props = {
|
||||
value: 'some test text value',
|
||||
};
|
||||
let el;
|
||||
beforeEach(() => {
|
||||
el = shallow(<FileNameCell {...props} />);
|
||||
});
|
||||
test('snapshot', () => {
|
||||
expect(el.snapshot).toMatchSnapshot();
|
||||
});
|
||||
const props = {
|
||||
value: 'some test text value',
|
||||
};
|
||||
|
||||
describe('behavior', () => {
|
||||
test('content', () => {
|
||||
expect(el.instance.children[0].el).toEqual(props.value);
|
||||
});
|
||||
});
|
||||
it('renders the value text', () => {
|
||||
render(<FileNameCell {...props} />);
|
||||
expect(screen.getByText('some test text value')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('applies text truncation class', () => {
|
||||
const { container } = render(<FileNameCell {...props} />);
|
||||
const divElement = container.querySelector('div');
|
||||
expect(divElement).toHaveClass('text-truncate');
|
||||
});
|
||||
});
|
||||
|
||||
@@ -1,9 +0,0 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`FileExtensionCell component snapshot 1`] = `
|
||||
<div
|
||||
className="text-truncate"
|
||||
>
|
||||
PDF
|
||||
</div>
|
||||
`;
|
||||
@@ -1,9 +0,0 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`FileNameCell component snapshot 1`] = `
|
||||
<div
|
||||
className="text-truncate"
|
||||
>
|
||||
some test text value
|
||||
</div>
|
||||
`;
|
||||
@@ -1,121 +1,127 @@
|
||||
import React from 'react';
|
||||
import { shallow } from '@edx/react-unit-test-utils';
|
||||
|
||||
import createDOMPurify from 'dompurify';
|
||||
import parse from 'html-react-parser';
|
||||
|
||||
import { render, screen } from '@testing-library/react';
|
||||
import { fileUploadResponseOptions } from 'data/services/lms/constants';
|
||||
import { selectors } from 'data/redux';
|
||||
|
||||
import { ResponseDisplay, mapStateToProps } from '.';
|
||||
|
||||
jest.unmock('@openedx/paragon');
|
||||
jest.unmock('react');
|
||||
|
||||
jest.mock('data/redux', () => ({
|
||||
selectors: {
|
||||
grading: {
|
||||
selected: {
|
||||
response: (state) => ({ response: state }),
|
||||
response: jest.fn((state) => state.response || { text: [], files: [] }),
|
||||
},
|
||||
},
|
||||
app: {
|
||||
ora: {
|
||||
fileUploadResponseConfig: (state) => ({ config: state }),
|
||||
fileUploadResponseConfig: jest.fn((state) => state.fileUploadResponseConfig || 'optional'),
|
||||
},
|
||||
},
|
||||
},
|
||||
}));
|
||||
jest.mock('./SubmissionFiles', () => 'SubmissionFiles');
|
||||
|
||||
jest.mock('./SubmissionFiles', () => jest.fn(({ files }) => (
|
||||
<div data-testid="submission-files">Files: {files.length}</div>
|
||||
)));
|
||||
|
||||
jest.mock('./PreviewDisplay', () => jest.fn(({ files }) => (
|
||||
<div data-testid="preview-display">Preview: {files.length}</div>
|
||||
)));
|
||||
|
||||
jest.mock('dompurify', () => () => ({
|
||||
sanitize: (text) => `sanitized (${text})`,
|
||||
sanitize: (text) => text,
|
||||
}));
|
||||
jest.mock('html-react-parser', () => (text) => `parsed html (${text})`);
|
||||
|
||||
jest.mock('html-react-parser', () => (text) => text);
|
||||
|
||||
describe('ResponseDisplay', () => {
|
||||
describe('component', () => {
|
||||
const props = {
|
||||
response: {
|
||||
text: ['some text response here'],
|
||||
files: [
|
||||
{
|
||||
name: 'some file name.jpg',
|
||||
description: 'description for the file',
|
||||
downloadURL: '/valid-url-wink-wink',
|
||||
},
|
||||
{
|
||||
name: 'file number 2.jpg',
|
||||
description: 'description for this file',
|
||||
downloadURL: '/url-2',
|
||||
},
|
||||
],
|
||||
},
|
||||
fileUploadResponseConfig: 'optional',
|
||||
};
|
||||
let el;
|
||||
beforeAll(() => {
|
||||
global.window = {};
|
||||
});
|
||||
beforeEach(() => {
|
||||
el = shallow(<ResponseDisplay {...props} />);
|
||||
});
|
||||
describe('snapshot', () => {
|
||||
test('file upload enable with valid response', () => {
|
||||
expect(el.snapshot).toMatchSnapshot();
|
||||
});
|
||||
const defaultProps = {
|
||||
response: {
|
||||
text: ['some text response here', 'another text response'],
|
||||
files: [
|
||||
{
|
||||
name: 'some file name.jpg',
|
||||
description: 'description for the file',
|
||||
downloadURL: '/valid-url-wink-wink',
|
||||
},
|
||||
{
|
||||
name: 'file number 2.jpg',
|
||||
description: 'description for this file',
|
||||
downloadURL: '/url-2',
|
||||
},
|
||||
],
|
||||
},
|
||||
fileUploadResponseConfig: 'optional',
|
||||
};
|
||||
|
||||
test('file upload enable without response', () => {
|
||||
el = shallow(<ResponseDisplay {...props} response={{ text: [], files: [] }} />);
|
||||
expect(el.snapshot).toMatchSnapshot();
|
||||
});
|
||||
test('file upload disable with valid response', () => {
|
||||
el = shallow(<ResponseDisplay {...props} fileUploadResponseConfig={fileUploadResponseOptions.none} />);
|
||||
expect(el.snapshot).toMatchSnapshot();
|
||||
});
|
||||
beforeAll(() => {
|
||||
global.window = {};
|
||||
});
|
||||
|
||||
test('file upload disabled without response', () => {
|
||||
el = shallow(<ResponseDisplay {...props} response={{ text: [], files: [] }} />);
|
||||
expect(el.snapshot).toMatchSnapshot();
|
||||
});
|
||||
beforeEach(() => {
|
||||
jest.clearAllMocks();
|
||||
});
|
||||
|
||||
describe('behavior', () => {
|
||||
it('renders response display container', () => {
|
||||
const { container } = render(<ResponseDisplay {...defaultProps} />);
|
||||
const responseDisplay = container.querySelector('.response-display');
|
||||
expect(responseDisplay).toBeInTheDocument();
|
||||
});
|
||||
describe('behavior', () => {
|
||||
test('get textContents', () => {
|
||||
const textContents = el.instance.findByTestId('response-display-text-content');
|
||||
expect(textContents.length).toEqual(
|
||||
props.response.text.length,
|
||||
);
|
||||
textContents.forEach((text, index) => {
|
||||
expect(text.el.children[0]).toEqual(
|
||||
parse(createDOMPurify(window).sanitize(props.response.text[index])),
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
test('get submittedFiles', () => {
|
||||
expect(el.instance.findByTestId('submission-files')[0].props.files).toEqual(props.response.files);
|
||||
});
|
||||
test('get allowFileUpload', () => {
|
||||
expect(el.instance.findByTestId('allow-file-upload').length > 0).toEqual(
|
||||
props.fileUploadResponseConfig !== fileUploadResponseOptions.none,
|
||||
);
|
||||
});
|
||||
it('displays text content in cards', () => {
|
||||
const { container } = render(<ResponseDisplay {...defaultProps} />);
|
||||
const textContents = container.querySelectorAll('.response-display-text-content');
|
||||
expect(textContents).toHaveLength(defaultProps.response.text.length);
|
||||
expect(textContents[0]).toHaveTextContent('some text response here');
|
||||
expect(textContents[1]).toHaveTextContent('another text response');
|
||||
});
|
||||
|
||||
it('displays submission files when file upload is allowed', () => {
|
||||
render(<ResponseDisplay {...defaultProps} />);
|
||||
const submissionFiles = screen.getByTestId('submission-files');
|
||||
expect(submissionFiles).toBeInTheDocument();
|
||||
expect(submissionFiles).toHaveTextContent('Files: 2');
|
||||
});
|
||||
|
||||
it('displays preview display when file upload is allowed', () => {
|
||||
render(<ResponseDisplay {...defaultProps} />);
|
||||
const previewDisplay = screen.getByTestId('preview-display');
|
||||
expect(previewDisplay).toBeInTheDocument();
|
||||
expect(previewDisplay).toHaveTextContent('Preview: 2');
|
||||
});
|
||||
|
||||
it('does not display file components when file upload is disabled', () => {
|
||||
render(<ResponseDisplay {...defaultProps} fileUploadResponseConfig={fileUploadResponseOptions.none} />);
|
||||
expect(screen.queryByTestId('submission-files')).not.toBeInTheDocument();
|
||||
expect(screen.queryByTestId('preview-display')).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders empty content when no text response provided', () => {
|
||||
const { container } = render(<ResponseDisplay {...defaultProps} response={{ text: [], files: [] }} />);
|
||||
const textContents = container.querySelectorAll('.response-display-text-content');
|
||||
expect(textContents).toHaveLength(0);
|
||||
});
|
||||
});
|
||||
|
||||
describe('mapStateToProps', () => {
|
||||
let mapped;
|
||||
const testState = {
|
||||
dummyText: ['text'],
|
||||
dummyFiles: ['files', 'file-2'],
|
||||
response: {
|
||||
text: ['test text'],
|
||||
files: ['file1', 'file2'],
|
||||
},
|
||||
fileUploadResponseConfig: 'required',
|
||||
};
|
||||
beforeEach(() => {
|
||||
mapped = mapStateToProps(testState);
|
||||
|
||||
it('maps response from grading.selected.response selector', () => {
|
||||
const mapped = mapStateToProps(testState);
|
||||
expect(mapped.response).toEqual(selectors.grading.selected.response(testState));
|
||||
});
|
||||
test('response loads from grading.selected.response', () => {
|
||||
expect(mapped.response).toEqual(
|
||||
selectors.grading.selected.response(testState),
|
||||
);
|
||||
});
|
||||
test('response loads from grading.selected.response', () => {
|
||||
expect(mapped.fileUploadResponseConfig).toEqual(
|
||||
selectors.app.ora.fileUploadResponseConfig(testState),
|
||||
);
|
||||
|
||||
it('maps fileUploadResponseConfig from app.ora.fileUploadResponseConfig selector', () => {
|
||||
const mapped = mapStateToProps(testState);
|
||||
expect(mapped.fileUploadResponseConfig).toEqual(selectors.app.ora.fileUploadResponseConfig(testState));
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user