debian-mirror-gitlab/spec/frontend/dropzone_input_spec.js

172 lines
4.9 KiB
JavaScript
Raw Normal View History

2021-11-11 11:23:49 +05:30
import MockAdapter from 'axios-mock-adapter';
2018-11-20 20:47:30 +05:30
import $ from 'jquery';
2020-06-23 00:09:42 +05:30
import mock from 'xhr-mock';
2020-10-24 23:57:45 +05:30
import waitForPromises from 'helpers/wait_for_promises';
2021-03-11 19:13:27 +05:30
import { TEST_HOST } from 'spec/test_constants';
2020-03-13 15:44:24 +05:30
import PasteMarkdownTable from '~/behaviors/markdown/paste_markdown_table';
2021-03-11 19:13:27 +05:30
import dropzoneInput from '~/dropzone_input';
2021-11-11 11:23:49 +05:30
import axios from '~/lib/utils/axios_utils';
import httpStatusCodes from '~/lib/utils/http_status';
2018-11-20 20:47:30 +05:30
2019-12-04 20:38:33 +05:30
const TEST_FILE = new File([], 'somefile.jpg');
TEST_FILE.upload = {};
2018-11-20 20:47:30 +05:30
const TEST_UPLOAD_PATH = `${TEST_HOST}/upload/file`;
const TEST_ERROR_MESSAGE = 'A big error occurred!';
2018-12-13 13:39:08 +05:30
const TEMPLATE = `<form class="gfm-form" data-uploads-path="${TEST_UPLOAD_PATH}">
2018-11-20 20:47:30 +05:30
<textarea class="js-gfm-input"></textarea>
<div class="uploading-error-message"></div>
2018-12-13 13:39:08 +05:30
</form>`;
2018-11-20 20:47:30 +05:30
describe('dropzone_input', () => {
2019-12-26 22:10:19 +05:30
it('returns null when failed to initialize', () => {
const dropzone = dropzoneInput($('<form class="gfm-form"></form>'));
2018-11-20 20:47:30 +05:30
2019-12-26 22:10:19 +05:30
expect(dropzone).toBeNull();
});
2018-11-20 20:47:30 +05:30
2019-12-26 22:10:19 +05:30
it('returns valid dropzone when successfully initialize', () => {
const dropzone = dropzoneInput($(TEMPLATE));
2018-11-20 20:47:30 +05:30
2019-12-26 22:10:19 +05:30
expect(dropzone.version).toBeTruthy();
2018-11-20 20:47:30 +05:30
});
2020-03-13 15:44:24 +05:30
describe('handlePaste', () => {
2022-01-26 12:08:38 +05:30
let form;
2021-11-11 11:23:49 +05:30
const triggerPasteEvent = (clipboardData = {}) => {
const event = $.Event('paste');
const origEvent = new Event('paste');
origEvent.clipboardData = clipboardData;
event.originalEvent = origEvent;
$('.js-gfm-input').trigger(event);
};
2020-03-13 15:44:24 +05:30
beforeEach(() => {
loadFixtures('issues/new-issue.html');
2022-01-26 12:08:38 +05:30
form = $('#new_issue');
2020-03-13 15:44:24 +05:30
form.data('uploads-path', TEST_UPLOAD_PATH);
dropzoneInput(form);
});
2022-01-26 12:08:38 +05:30
afterEach(() => {
form = null;
});
2020-03-13 15:44:24 +05:30
it('pastes Markdown tables', () => {
2021-11-11 11:23:49 +05:30
jest.spyOn(PasteMarkdownTable.prototype, 'isTable');
jest.spyOn(PasteMarkdownTable.prototype, 'convertToTableMarkdown');
2020-06-23 00:09:42 +05:30
2021-11-11 11:23:49 +05:30
triggerPasteEvent({
2020-06-23 00:09:42 +05:30
types: ['text/plain', 'text/html'],
getData: () => '<table><tr><td>Hello World</td></tr></table>',
items: [],
2021-11-11 11:23:49 +05:30
});
2020-03-13 15:44:24 +05:30
expect(PasteMarkdownTable.prototype.isTable).toHaveBeenCalled();
expect(PasteMarkdownTable.prototype.convertToTableMarkdown).toHaveBeenCalled();
});
2021-11-11 11:23:49 +05:30
it('passes truncated long filename to post request', async () => {
const axiosMock = new MockAdapter(axios);
const longFileName = 'a'.repeat(300);
triggerPasteEvent({
types: ['text/plain', 'text/html', 'text/rtf', 'Files'],
getData: () => longFileName,
2021-12-11 22:18:48 +05:30
files: [new File([new Blob()], longFileName, { type: 'image/png' })],
2021-11-11 11:23:49 +05:30
items: [
{
kind: 'file',
type: 'image/png',
getAsFile: () => new Blob(),
},
],
});
axiosMock.onPost().reply(httpStatusCodes.OK, { link: { markdown: 'foo' } });
await waitForPromises();
expect(axiosMock.history.post[0].data.get('file').name).toHaveLength(246);
});
2021-12-11 22:18:48 +05:30
2022-01-26 12:08:38 +05:30
it('disables generated image file when clipboardData have both image and text', () => {
const TEST_PLAIN_TEXT = 'This wording is a plain text.';
triggerPasteEvent({
types: ['text/plain', 'Files'],
getData: () => TEST_PLAIN_TEXT,
items: [
{
kind: 'text',
type: 'text/plain',
},
{
kind: 'file',
type: 'image/png',
getAsFile: () => new Blob(),
},
],
});
expect(form.find('.js-gfm-input')[0].value).toBe('');
});
2021-12-11 22:18:48 +05:30
it('display original file name in comment box', async () => {
const axiosMock = new MockAdapter(axios);
triggerPasteEvent({
types: ['Files'],
files: [new File([new Blob()], 'test.png', { type: 'image/png' })],
items: [
{
kind: 'file',
type: 'image/png',
getAsFile: () => new Blob(),
},
],
});
axiosMock.onPost().reply(httpStatusCodes.OK, { link: { markdown: 'foo' } });
await waitForPromises();
expect(axiosMock.history.post[0].data.get('file').name).toEqual('test.png');
});
2020-03-13 15:44:24 +05:30
});
2019-12-26 22:10:19 +05:30
describe('shows error message', () => {
let form;
let dropzone;
2018-11-20 20:47:30 +05:30
2019-12-26 22:10:19 +05:30
beforeEach(() => {
2020-06-23 00:09:42 +05:30
mock.setup();
2019-12-26 22:10:19 +05:30
form = $(TEMPLATE);
2018-11-20 20:47:30 +05:30
2019-12-26 22:10:19 +05:30
dropzone = dropzoneInput(form);
});
2018-11-20 20:47:30 +05:30
2019-12-26 22:10:19 +05:30
afterEach(() => {
2020-06-23 00:09:42 +05:30
mock.teardown();
2019-12-26 22:10:19 +05:30
});
2020-06-23 00:09:42 +05:30
beforeEach(() => {});
2018-11-20 20:47:30 +05:30
2020-06-23 00:09:42 +05:30
it.each`
responseType | responseBody
${'application/json'} | ${JSON.stringify({ message: TEST_ERROR_MESSAGE })}
${'text/plain'} | ${TEST_ERROR_MESSAGE}
`('when AJAX fails with json', ({ responseType, responseBody }) => {
mock.post(TEST_UPLOAD_PATH, {
status: 400,
body: responseBody,
headers: { 'Content-Type': responseType },
});
2018-11-20 20:47:30 +05:30
2019-12-26 22:10:19 +05:30
dropzone.processFile(TEST_FILE);
2018-11-20 20:47:30 +05:30
2020-06-23 00:09:42 +05:30
return waitForPromises().then(() => {
expect(form.find('.uploading-error-message').text()).toEqual(TEST_ERROR_MESSAGE);
});
2019-12-26 22:10:19 +05:30
});
2018-11-20 20:47:30 +05:30
});
});