115 lines
3.1 KiB
JavaScript
115 lines
3.1 KiB
JavaScript
import { h } from 'preact';
|
|
import {
|
|
render,
|
|
fireEvent,
|
|
waitForElementToBeRemoved,
|
|
} from '@testing-library/preact';
|
|
import { axe } from 'jest-axe';
|
|
import fetch from 'jest-fetch-mock';
|
|
import { ImageUploader } from '../ImageUploader';
|
|
import '@testing-library/jest-dom';
|
|
|
|
global.fetch = fetch;
|
|
|
|
describe('<ImageUploader />', () => {
|
|
it('should have no a11y violations', async () => {
|
|
const { container } = render(<ImageUploader />);
|
|
const results = await axe(container);
|
|
expect(results).toHaveNoViolations();
|
|
});
|
|
|
|
it('displays an upload input', () => {
|
|
const { getByLabelText } = render(<ImageUploader />);
|
|
const uploadInput = getByLabelText(/Upload an image/i);
|
|
|
|
expect(uploadInput.getAttribute('type')).toEqual('file');
|
|
});
|
|
|
|
it('displays the upload spinner during upload', async () => {
|
|
fetch.mockResponse(
|
|
JSON.stringify({
|
|
links: ['/i/fake-link.jpg'],
|
|
}),
|
|
);
|
|
|
|
const { getByLabelText, queryByText } = render(<ImageUploader />);
|
|
|
|
const inputEl = getByLabelText(/Upload an image/i);
|
|
const file = new File(['(⌐□_□)'], 'chucknorris.png', {
|
|
type: 'image/png',
|
|
});
|
|
|
|
fireEvent.change(inputEl, { target: { files: [file] } });
|
|
|
|
const uploadingImage = queryByText(/uploading.../i);
|
|
|
|
expect(uploadingImage).toBeDefined();
|
|
});
|
|
|
|
it('displays text to copy after upload', async () => {
|
|
fetch.mockResponse(
|
|
JSON.stringify({
|
|
links: ['/i/fake-link.jpg'],
|
|
}),
|
|
);
|
|
|
|
const {
|
|
findByTitle,
|
|
getByDisplayValue,
|
|
getByLabelText,
|
|
queryByText,
|
|
} = render(<ImageUploader />);
|
|
const inputEl = getByLabelText(/Upload an image/i);
|
|
|
|
const file = new File(['(⌐□_□)'], 'chucknorris.png', {
|
|
type: 'image/png',
|
|
});
|
|
|
|
fireEvent.change(inputEl, { target: { files: [file] } });
|
|
let uploadingImage = queryByText(/uploading.../i);
|
|
|
|
expect(uploadingImage).toBeDefined();
|
|
|
|
expect(inputEl.files[0]).toEqual(file);
|
|
expect(inputEl.files).toHaveLength(1);
|
|
|
|
waitForElementToBeRemoved(() => queryByText(/uploading.../i));
|
|
|
|
expect(await findByTitle(/copy markdown for image/i)).toBeDefined();
|
|
|
|
getByDisplayValue(/fake-link.jpg/i);
|
|
});
|
|
|
|
// TODO: 'Copied!' is always in the DOM, and so we cannot test that the visual implications of the copy when clicking on the copy icon
|
|
|
|
it('displays an error when one occurs', async () => {
|
|
fetch.mockReject({
|
|
message: 'Some Fake Error',
|
|
});
|
|
|
|
const { getByLabelText, findByText, queryByText } = render(
|
|
<ImageUploader />,
|
|
);
|
|
const inputEl = getByLabelText(/Upload an image/i);
|
|
|
|
// Check the input validation settings
|
|
expect(inputEl.getAttribute('accept')).toEqual('image/*');
|
|
expect(Number(inputEl.dataset.maxFileSizeMb)).toEqual(25);
|
|
|
|
const file = new File(['(⌐□_□)'], 'chucknorris.png', {
|
|
type: 'image/png',
|
|
});
|
|
|
|
fireEvent.change(inputEl, {
|
|
target: {
|
|
files: [file],
|
|
},
|
|
});
|
|
|
|
expect(await findByText(/uploading.../i)).toBeDefined();
|
|
|
|
waitForElementToBeRemoved(() => queryByText(/uploading.../i));
|
|
|
|
await findByText(/some fake error/i);
|
|
});
|
|
});
|