debian-mirror-gitlab/spec/frontend/issues/show/components/description_spec.js

288 lines
7.9 KiB
JavaScript
Raw Normal View History

2018-05-09 12:01:36 +05:30
import $ from 'jquery';
2022-04-04 11:22:00 +05:30
import { nextTick } from 'vue';
2019-12-04 20:38:33 +05:30
import '~/behaviors/markdown/render_gfm';
2022-04-04 11:22:00 +05:30
import { GlPopover, GlModal } from '@gitlab/ui';
import { shallowMount } from '@vue/test-utils';
import { stubComponent } from 'helpers/stub_component';
2020-05-24 23:13:21 +05:30
import { TEST_HOST } from 'helpers/test_constants';
2022-01-26 12:08:38 +05:30
import Description from '~/issues/show/components/description.vue';
2020-05-24 23:13:21 +05:30
import TaskList from '~/task_list';
2022-04-04 11:22:00 +05:30
import CreateWorkItem from '~/work_items/pages/create_work_item.vue';
import {
descriptionProps as initialProps,
descriptionHtmlWithCheckboxes,
} from '../mock_data/mock_data';
2020-05-24 23:13:21 +05:30
jest.mock('~/task_list');
2017-09-10 17:25:29 +05:30
2022-04-04 11:22:00 +05:30
const showModal = jest.fn();
const hideModal = jest.fn();
2017-09-10 17:25:29 +05:30
describe('Description component', () => {
2022-04-04 11:22:00 +05:30
let wrapper;
const findGfmContent = () => wrapper.find('[data-testid="gfm-content"]');
const findTextarea = () => wrapper.find('[data-testid="textarea"]');
const findTaskActionButtons = () => wrapper.findAll('.js-add-task');
const findConvertToTaskButton = () => wrapper.find('[data-testid="convert-to-task"]');
const findTaskSvg = () => wrapper.find('[data-testid="issue-open-m-icon"]');
const findPopovers = () => wrapper.findAllComponents(GlPopover);
const findModal = () => wrapper.findComponent(GlModal);
const findCreateWorkItem = () => wrapper.findComponent(CreateWorkItem);
function createComponent({ props = {}, provide = {} } = {}) {
wrapper = shallowMount(Description, {
propsData: {
...initialProps,
...props,
},
provide,
stubs: {
GlModal: stubComponent(GlModal, {
methods: {
show: showModal,
hide: hideModal,
},
}),
GlPopover,
},
});
}
2017-09-10 17:25:29 +05:30
beforeEach(() => {
if (!document.querySelector('.issuable-meta')) {
const metaData = document.createElement('div');
metaData.classList.add('issuable-meta');
2019-03-02 22:35:43 +05:30
metaData.innerHTML =
'<div class="flash-container"></div><span id="task_status"></span><span id="task_status_short"></span>';
2017-09-10 17:25:29 +05:30
document.body.appendChild(metaData);
}
2018-03-17 18:26:18 +05:30
});
afterEach(() => {
2022-04-04 11:22:00 +05:30
wrapper.destroy();
2017-09-10 17:25:29 +05:30
});
2019-03-02 22:35:43 +05:30
afterAll(() => {
$('.issuable-meta .flash-container').remove();
});
2022-04-04 11:22:00 +05:30
it('doesnt animate first description changes', async () => {
createComponent();
await wrapper.setProps({
descriptionHtml: 'changed',
2020-11-24 15:15:51 +05:30
});
2022-04-04 11:22:00 +05:30
expect(findGfmContent().classes()).not.toContain('issue-realtime-pre-pulse');
2020-11-24 15:15:51 +05:30
});
2022-04-04 11:22:00 +05:30
it('animates description changes on live update', async () => {
createComponent();
await wrapper.setProps({
descriptionHtml: 'changed',
});
expect(findGfmContent().classes()).not.toContain('issue-realtime-pre-pulse');
await wrapper.setProps({
descriptionHtml: 'changed second time',
});
expect(findGfmContent().classes()).toContain('issue-realtime-pre-pulse');
await jest.runOnlyPendingTimers();
expect(findGfmContent().classes()).toContain('issue-realtime-trigger-pulse');
2017-09-10 17:25:29 +05:30
});
2022-04-04 11:22:00 +05:30
it('applies syntax highlighting and math when description changed', async () => {
2020-05-24 23:13:21 +05:30
const prototypeSpy = jest.spyOn($.prototype, 'renderGFM');
2022-04-04 11:22:00 +05:30
createComponent();
2018-10-15 14:42:47 +05:30
2022-04-04 11:22:00 +05:30
await wrapper.setProps({
descriptionHtml: 'changed',
2020-05-24 23:13:21 +05:30
});
2022-04-04 11:22:00 +05:30
expect(findGfmContent().exists()).toBe(true);
expect(prototypeSpy).toHaveBeenCalled();
2020-05-24 23:13:21 +05:30
});
it('sets data-update-url', () => {
2022-04-04 11:22:00 +05:30
createComponent();
expect(findTextarea().attributes('data-update-url')).toBe(TEST_HOST);
2020-05-24 23:13:21 +05:30
});
describe('TaskList', () => {
2018-03-17 18:26:18 +05:30
beforeEach(() => {
2020-05-24 23:13:21 +05:30
TaskList.mockClear();
2018-03-17 18:26:18 +05:30
});
2020-05-24 23:13:21 +05:30
it('re-inits the TaskList when description changed', () => {
2022-04-04 11:22:00 +05:30
createComponent({
props: {
issuableType: 'issuableType',
},
});
wrapper.setProps({
descriptionHtml: 'changed',
});
2018-03-17 18:26:18 +05:30
2020-05-24 23:13:21 +05:30
expect(TaskList).toHaveBeenCalled();
2018-03-17 18:26:18 +05:30
});
2022-04-04 11:22:00 +05:30
it('does not re-init the TaskList when canUpdate is false', async () => {
createComponent({
props: {
issuableType: 'issuableType',
canUpdate: false,
},
});
wrapper.setProps({
descriptionHtml: 'changed',
});
2018-03-17 18:26:18 +05:30
2022-04-04 11:22:00 +05:30
expect(TaskList).not.toHaveBeenCalled();
2018-03-17 18:26:18 +05:30
});
2020-05-24 23:13:21 +05:30
it('calls with issuableType dataType', () => {
2022-04-04 11:22:00 +05:30
createComponent({
props: {
issuableType: 'issuableType',
},
});
wrapper.setProps({
descriptionHtml: 'changed',
});
2018-03-17 18:26:18 +05:30
2020-05-24 23:13:21 +05:30
expect(TaskList).toHaveBeenCalledWith({
dataType: 'issuableType',
fieldName: 'description',
selector: '.detail-page-description',
2021-12-11 22:18:48 +05:30
onUpdate: expect.any(Function),
onSuccess: expect.any(Function),
2020-05-24 23:13:21 +05:30
onError: expect.any(Function),
lockVersion: 0,
2018-03-17 18:26:18 +05:30
});
});
});
2017-09-10 17:25:29 +05:30
describe('taskStatus', () => {
2022-04-04 11:22:00 +05:30
it('adds full taskStatus', async () => {
createComponent({
props: {
taskStatus: '1 of 1',
},
2017-09-10 17:25:29 +05:30
});
2022-04-04 11:22:00 +05:30
await nextTick();
2017-09-10 17:25:29 +05:30
2022-04-04 11:22:00 +05:30
expect(document.querySelector('.issuable-meta #task_status').textContent.trim()).toBe(
'1 of 1',
);
});
2017-09-10 17:25:29 +05:30
2022-04-04 11:22:00 +05:30
it('adds short taskStatus', async () => {
createComponent({
props: {
taskStatus: '1 of 1',
},
2017-09-10 17:25:29 +05:30
});
2022-04-04 11:22:00 +05:30
await nextTick();
2017-09-10 17:25:29 +05:30
2022-04-04 11:22:00 +05:30
expect(document.querySelector('.issuable-meta #task_status_short').textContent.trim()).toBe(
'1/1 task',
);
});
2017-09-10 17:25:29 +05:30
2022-04-04 11:22:00 +05:30
it('clears task status text when no tasks are present', async () => {
createComponent({
props: {
taskStatus: '0 of 0',
},
2017-09-10 17:25:29 +05:30
});
2022-04-04 11:22:00 +05:30
await nextTick();
expect(document.querySelector('.issuable-meta #task_status').textContent.trim()).toBe('');
2017-09-10 17:25:29 +05:30
});
});
2022-04-04 11:22:00 +05:30
describe('with work items feature flag is enabled', () => {
describe('empty description', () => {
beforeEach(async () => {
createComponent({
props: {
descriptionHtml: '',
},
provide: {
glFeatures: {
workItems: true,
},
},
});
await nextTick();
});
2021-12-11 22:18:48 +05:30
2022-04-04 11:22:00 +05:30
it('renders without error', () => {
expect(findTaskActionButtons()).toHaveLength(0);
});
2021-12-11 22:18:48 +05:30
});
2022-04-04 11:22:00 +05:30
describe('description with checkboxes', () => {
beforeEach(async () => {
createComponent({
props: {
descriptionHtml: descriptionHtmlWithCheckboxes,
},
provide: {
glFeatures: {
workItems: true,
},
},
});
await nextTick();
});
2021-12-11 22:18:48 +05:30
2022-04-04 11:22:00 +05:30
it('renders a list of hidden buttons corresponding to checkboxes in description HTML', () => {
expect(findTaskActionButtons()).toHaveLength(3);
});
2021-12-11 22:18:48 +05:30
2022-04-04 11:22:00 +05:30
it('renders a list of popovers corresponding to checkboxes in description HTML', () => {
expect(findPopovers()).toHaveLength(3);
expect(findPopovers().at(0).props('target')).toBe(
findTaskActionButtons().at(0).attributes('id'),
);
});
2021-12-11 22:18:48 +05:30
2022-04-04 11:22:00 +05:30
it('does not show a modal by default', () => {
expect(findModal().props('visible')).toBe(false);
});
2019-03-02 22:35:43 +05:30
2022-04-04 11:22:00 +05:30
it('opens a modal when a button on popover is clicked and displays correct title', async () => {
findConvertToTaskButton().vm.$emit('click');
expect(showModal).toHaveBeenCalled();
await nextTick();
expect(findCreateWorkItem().props('initialTitle').trim()).toBe('todo 1');
});
it('closes the modal on `closeCreateTaskModal` event', () => {
findConvertToTaskButton().vm.$emit('click');
findCreateWorkItem().vm.$emit('closeModal');
expect(hideModal).toHaveBeenCalled();
});
2019-03-02 22:35:43 +05:30
2022-04-04 11:22:00 +05:30
it('updates description HTML on `onCreate` event', async () => {
const newTitle = 'New title';
findConvertToTaskButton().vm.$emit('click');
findCreateWorkItem().vm.$emit('onCreate', newTitle);
expect(hideModal).toHaveBeenCalled();
await nextTick();
expect(findTaskSvg().exists()).toBe(true);
expect(wrapper.text()).toContain(newTitle);
});
2019-03-02 22:35:43 +05:30
});
});
2017-09-10 17:25:29 +05:30
});