debian-mirror-gitlab/spec/frontend/issuable/issuable_form_spec.js

Ignoring revisions in .git-blame-ignore-revs. Click here to bypass and see the normal blame view.

249 lines
7.2 KiB
JavaScript
Raw Normal View History

2020-10-24 23:57:45 +05:30
import $ from 'jquery';
2022-10-11 01:57:18 +05:30
import Autosave from '~/autosave';
2022-07-16 23:28:13 +05:30
import { setHTMLFixture, resetHTMLFixture } from 'helpers/fixtures';
2022-01-26 12:08:38 +05:30
import IssuableForm from '~/issuable/issuable_form';
2022-06-21 17:19:12 +05:30
import setWindowLocation from 'helpers/set_window_location_helper';
2020-10-24 23:57:45 +05:30
2023-04-23 21:23:45 +05:30
import { getSaveableFormChildren } from './helpers';
2022-10-11 01:57:18 +05:30
jest.mock('~/autosave');
const createIssuable = (form) => {
return new IssuableForm(form);
};
2020-10-24 23:57:45 +05:30
describe('IssuableForm', () => {
2022-10-11 01:57:18 +05:30
let $form;
2020-10-24 23:57:45 +05:30
let instance;
beforeEach(() => {
2022-07-16 23:28:13 +05:30
setHTMLFixture(`
2022-06-21 17:19:12 +05:30
<form>
<input name="[title]" />
2023-04-23 21:23:45 +05:30
<input type="checkbox" class="js-toggle-draft" />
2022-10-11 01:57:18 +05:30
<textarea name="[description]"></textarea>
2022-06-21 17:19:12 +05:30
</form>
`);
2022-10-11 01:57:18 +05:30
$form = $('form');
2022-06-21 17:19:12 +05:30
});
2022-07-16 23:28:13 +05:30
afterEach(() => {
resetHTMLFixture();
2022-10-11 01:57:18 +05:30
$form = null;
instance = null;
2022-07-16 23:28:13 +05:30
});
2022-10-11 01:57:18 +05:30
describe('autosave', () => {
let $title;
let $description;
beforeEach(() => {
2023-03-17 16:20:25 +05:30
$title = $form.find('input[name*="[title]"]').get(0);
$description = $form.find('textarea[name*="[description]"]').get(0);
2022-10-11 01:57:18 +05:30
});
2022-06-21 17:19:12 +05:30
2022-10-11 01:57:18 +05:30
afterEach(() => {
$title = null;
$description = null;
2022-06-21 17:19:12 +05:30
});
2022-10-11 01:57:18 +05:30
describe('initAutosave', () => {
it('calls initAutosave', () => {
const initAutosave = jest.spyOn(IssuableForm.prototype, 'initAutosave');
createIssuable($form);
expect(initAutosave).toHaveBeenCalledTimes(1);
});
it('creates autosave with the searchTerm included', () => {
setWindowLocation('https://gitlab.test/foo?bar=true');
createIssuable($form);
expect(Autosave).toHaveBeenCalledWith(
$title,
['/foo', 'bar=true', 'title'],
'autosave//foo/bar=true=title',
);
expect(Autosave).toHaveBeenCalledWith(
$description,
['/foo', 'bar=true', 'description'],
'autosave//foo/bar=true=description',
);
});
it("creates autosave fields without the searchTerm if it's an issue new form", () => {
setWindowLocation('https://gitlab.test/issues/new?bar=true');
$form.attr('data-new-issue-path', '/issues/new');
createIssuable($form);
expect(Autosave).toHaveBeenCalledWith(
$title,
['/issues/new', '', 'title'],
'autosave//issues/new/bar=true=title',
);
expect(Autosave).toHaveBeenCalledWith(
$description,
['/issues/new', '', 'description'],
'autosave//issues/new/bar=true=description',
);
});
it.each([
{
id: 'confidential',
input: '<input type="checkbox" name="issue[confidential]"/>',
selector: 'input[name*="[confidential]"]',
},
{
id: 'due_date',
input: '<input type="text" name="issue[due_date]"/>',
selector: 'input[name*="[due_date]"]',
},
])('creates $id autosave when $id input exist', ({ id, input, selector }) => {
$form.append(input);
const $input = $form.find(selector);
createIssuable($form);
2023-04-23 21:23:45 +05:30
const children = getSaveableFormChildren($form[0]);
expect(Autosave).toHaveBeenCalledTimes(children.length);
2023-03-17 16:20:25 +05:30
expect(Autosave).toHaveBeenLastCalledWith(
$input.get(0),
['/', '', id],
`autosave///=${id}`,
);
2022-10-11 01:57:18 +05:30
});
});
describe('resetAutosave', () => {
it('calls reset on title and description', () => {
instance = createIssuable($form);
instance.resetAutosave();
expect(instance.autosaves.get('title').reset).toHaveBeenCalledTimes(1);
expect(instance.autosaves.get('description').reset).toHaveBeenCalledTimes(1);
});
2022-06-21 17:19:12 +05:30
2022-10-11 01:57:18 +05:30
it('resets autosave when submit', () => {
const resetAutosave = jest.spyOn(IssuableForm.prototype, 'resetAutosave');
createIssuable($form);
2022-06-21 17:19:12 +05:30
2022-10-11 01:57:18 +05:30
$form.submit();
2022-06-21 17:19:12 +05:30
2022-10-11 01:57:18 +05:30
expect(resetAutosave).toHaveBeenCalledTimes(1);
});
it('resets autosave on elements with the .js-reset-autosave class', () => {
const resetAutosave = jest.spyOn(IssuableForm.prototype, 'resetAutosave');
$form.append('<a class="js-reset-autosave">Cancel</a>');
createIssuable($form);
$form.find('.js-reset-autosave').trigger('click');
expect(resetAutosave).toHaveBeenCalledTimes(1);
});
it.each([
{ id: 'confidential', input: '<input type="checkbox" name="issue[confidential]"/>' },
{ id: 'due_date', input: '<input type="text" name="issue[due_date]"/>' },
])('calls reset on autosave $id when $id input exist', ({ id, input }) => {
$form.append(input);
instance = createIssuable($form);
instance.resetAutosave();
expect(instance.autosaves.get(id).reset).toHaveBeenCalledTimes(1);
});
2022-06-21 17:19:12 +05:30
});
2020-10-24 23:57:45 +05:30
});
2023-04-23 21:23:45 +05:30
describe('draft', () => {
let titleField;
let toggleDraft;
2022-10-11 01:57:18 +05:30
beforeEach(() => {
instance = createIssuable($form);
2023-04-23 21:23:45 +05:30
titleField = document.querySelector('input[name="[title]"]');
toggleDraft = document.querySelector('input.js-toggle-draft');
2022-08-13 15:12:31 +05:30
});
2023-04-23 21:23:45 +05:30
describe('removeDraft', () => {
2022-10-11 01:57:18 +05:30
it.each`
prefix
${'draFT: '}
${' [DRaft] '}
${'drAft:'}
${'[draFT]'}
${'(draft) '}
${' (DrafT)'}
${'draft: [draft] (draft)'}
`('removes "$prefix" from the beginning of the title', ({ prefix }) => {
2023-04-23 21:23:45 +05:30
titleField.value = `${prefix}The Issuable's Title Value`;
2022-10-11 01:57:18 +05:30
2023-04-23 21:23:45 +05:30
instance.removeDraft();
2022-10-11 01:57:18 +05:30
2023-04-23 21:23:45 +05:30
expect(titleField.value).toBe("The Issuable's Title Value");
2022-10-11 01:57:18 +05:30
});
2020-10-24 23:57:45 +05:30
});
2023-04-23 21:23:45 +05:30
describe('addDraft', () => {
2022-10-11 01:57:18 +05:30
it("properly adds the work in progress prefix to the Issuable's title", () => {
2023-04-23 21:23:45 +05:30
titleField.value = "The Issuable's Title Value";
2020-10-24 23:57:45 +05:30
2023-04-23 21:23:45 +05:30
instance.addDraft();
2020-10-24 23:57:45 +05:30
2023-04-23 21:23:45 +05:30
expect(titleField.value).toBe("Draft: The Issuable's Title Value");
2022-10-11 01:57:18 +05:30
});
2020-10-24 23:57:45 +05:30
});
2021-11-18 22:05:49 +05:30
2023-04-23 21:23:45 +05:30
describe('isMarkedDraft', () => {
2022-10-11 01:57:18 +05:30
it.each`
title | expected
${'draFT: something is happening'} | ${true}
${'draft something is happening'} | ${false}
${'something is happening to drafts'} | ${false}
${'something is happening'} | ${false}
`('returns $expected with "$title"', ({ title, expected }) => {
2023-04-23 21:23:45 +05:30
titleField.value = title;
2022-10-11 01:57:18 +05:30
2023-04-23 21:23:45 +05:30
expect(instance.isMarkedDraft()).toBe(expected);
2022-10-11 01:57:18 +05:30
});
2021-11-18 22:05:49 +05:30
});
2023-04-23 21:23:45 +05:30
describe('readDraftStatus', () => {
it.each`
title | checked
${'Draft: my title'} | ${true}
${'my title'} | ${false}
`(
'sets the draft checkbox checked status to $checked when the title is $title',
({ title, checked }) => {
titleField.value = title;
instance.readDraftStatus();
expect(toggleDraft.checked).toBe(checked);
},
);
});
describe('writeDraftStatus', () => {
it.each`
checked | title
${true} | ${'Draft: my title'}
${false} | ${'my title'}
`(
'updates the title to $title when the draft checkbox checked status is $checked',
({ checked, title }) => {
titleField.value = 'my title';
toggleDraft.checked = checked;
instance.writeDraftStatus();
expect(titleField.value).toBe(title);
},
);
});
2021-11-18 22:05:49 +05:30
});
2020-10-24 23:57:45 +05:30
});