2020-06-16 18:09:01 +00:00
|
|
|
import { GlIntersectionObserver } from '@gitlab/ui';
|
2020-06-15 15:08:20 +00:00
|
|
|
import { mount } from '@vue/test-utils';
|
2017-12-15 04:52:18 +00:00
|
|
|
import MockAdapter from 'axios-mock-adapter';
|
2020-08-17 21:09:56 +00:00
|
|
|
import { useMockIntersectionObserver } from 'helpers/mock_dom_observer';
|
2018-03-20 04:01:17 +00:00
|
|
|
import '~/behaviors/markdown/render_gfm';
|
2020-06-15 15:08:20 +00:00
|
|
|
import IssuableApp from '~/issue_show/components/app.vue';
|
2021-02-01 15:08:56 +00:00
|
|
|
import DescriptionComponent from '~/issue_show/components/description.vue';
|
2021-02-14 18:09:20 +00:00
|
|
|
import IncidentTabs from '~/issue_show/components/incidents/incident_tabs.vue';
|
2021-02-01 15:08:56 +00:00
|
|
|
import PinnedLinks from '~/issue_show/components/pinned_links.vue';
|
|
|
|
import { IssuableStatus, IssuableStatusText } from '~/issue_show/constants';
|
2021-02-14 18:09:20 +00:00
|
|
|
import eventHub from '~/issue_show/event_hub';
|
|
|
|
import axios from '~/lib/utils/axios_utils';
|
|
|
|
import { visitUrl } from '~/lib/utils/url_utility';
|
2020-09-02 18:10:40 +00:00
|
|
|
import {
|
|
|
|
appProps,
|
|
|
|
initialRequest,
|
|
|
|
publishedIncidentUrl,
|
|
|
|
secondRequest,
|
|
|
|
zoomMeetingUrl,
|
|
|
|
} from '../mock_data';
|
2017-04-25 16:31:15 +00:00
|
|
|
|
2017-05-18 12:24:34 +00:00
|
|
|
function formatText(text) {
|
|
|
|
return text.trim().replace(/\s\s+/g, ' ');
|
|
|
|
}
|
|
|
|
|
2020-05-06 15:09:42 +00:00
|
|
|
jest.mock('~/lib/utils/url_utility');
|
|
|
|
jest.mock('~/issue_show/event_hub');
|
|
|
|
|
2020-02-04 09:08:32 +00:00
|
|
|
const REALTIME_REQUEST_STACK = [initialRequest, secondRequest];
|
2017-12-15 04:52:18 +00:00
|
|
|
|
2017-05-11 08:32:41 +00:00
|
|
|
describe('Issuable output', () => {
|
2020-07-21 21:09:12 +00:00
|
|
|
useMockIntersectionObserver();
|
|
|
|
|
2017-12-15 04:52:18 +00:00
|
|
|
let mock;
|
|
|
|
let realtimeRequestCount = 0;
|
2020-06-15 15:08:20 +00:00
|
|
|
let wrapper;
|
2017-07-12 14:47:09 +00:00
|
|
|
|
2020-06-16 18:09:01 +00:00
|
|
|
const findStickyHeader = () => wrapper.find('[data-testid="issue-sticky-header"]');
|
|
|
|
|
2020-11-09 12:09:24 +00:00
|
|
|
const findLockedBadge = () => wrapper.find('[data-testid="locked"]');
|
|
|
|
|
|
|
|
const findConfidentialBadge = () => wrapper.find('[data-testid="confidential"]');
|
|
|
|
|
2020-09-15 12:09:30 +00:00
|
|
|
const mountComponent = (props = {}, options = {}) => {
|
2020-09-02 09:10:23 +00:00
|
|
|
wrapper = mount(IssuableApp, {
|
2020-09-02 18:10:40 +00:00
|
|
|
propsData: { ...appProps, ...props },
|
2020-09-10 18:08:54 +00:00
|
|
|
provide: {
|
|
|
|
fullPath: 'gitlab-org/incidents',
|
|
|
|
iid: '19',
|
2021-01-12 18:11:03 +00:00
|
|
|
uploadMetricsFeatureAvailable: false,
|
2020-09-10 18:08:54 +00:00
|
|
|
},
|
|
|
|
stubs: {
|
|
|
|
HighlightBar: true,
|
2020-09-15 12:09:30 +00:00
|
|
|
IncidentTabs: true,
|
2020-09-10 18:08:54 +00:00
|
|
|
},
|
2020-09-15 12:09:30 +00:00
|
|
|
...options,
|
2020-09-02 09:10:23 +00:00
|
|
|
});
|
|
|
|
};
|
|
|
|
|
2020-05-06 15:09:42 +00:00
|
|
|
beforeEach(() => {
|
2019-01-29 13:50:22 +00:00
|
|
|
setFixtures(`
|
|
|
|
<div>
|
2020-05-06 15:09:42 +00:00
|
|
|
<title>Title</title>
|
2019-09-25 15:06:16 +00:00
|
|
|
<div class="detail-page-description content-block">
|
|
|
|
<details open>
|
|
|
|
<summary>One</summary>
|
|
|
|
</details>
|
|
|
|
<details>
|
|
|
|
<summary>Two</summary>
|
|
|
|
</details>
|
|
|
|
</div>
|
2019-01-29 13:50:22 +00:00
|
|
|
<div class="flash-container"></div>
|
|
|
|
<span id="task_status"></span>
|
|
|
|
</div>
|
|
|
|
`);
|
2017-06-23 09:28:19 +00:00
|
|
|
|
2017-12-15 04:52:18 +00:00
|
|
|
mock = new MockAdapter(axios);
|
2020-03-02 15:08:01 +00:00
|
|
|
mock
|
|
|
|
.onGet('/gitlab-org/gitlab-shell/-/issues/9/realtime_changes/realtime_changes')
|
|
|
|
.reply(() => {
|
|
|
|
const res = Promise.resolve([200, REALTIME_REQUEST_STACK[realtimeRequestCount]]);
|
|
|
|
realtimeRequestCount += 1;
|
|
|
|
return res;
|
|
|
|
});
|
2017-07-12 14:47:09 +00:00
|
|
|
|
2020-09-02 09:10:23 +00:00
|
|
|
mountComponent();
|
2020-09-15 15:10:08 +00:00
|
|
|
|
|
|
|
jest.advanceTimersByTime(2);
|
2017-05-10 14:05:58 +00:00
|
|
|
});
|
2017-04-06 01:13:06 +00:00
|
|
|
|
2017-07-12 14:47:09 +00:00
|
|
|
afterEach(() => {
|
2018-01-23 11:42:02 +00:00
|
|
|
mock.restore();
|
2017-12-15 04:52:18 +00:00
|
|
|
realtimeRequestCount = 0;
|
2017-05-18 12:24:34 +00:00
|
|
|
|
2020-06-15 15:08:20 +00:00
|
|
|
wrapper.vm.poll.stop();
|
|
|
|
wrapper.destroy();
|
|
|
|
wrapper = null;
|
2017-07-12 14:47:09 +00:00
|
|
|
});
|
|
|
|
|
2020-05-06 15:09:42 +00:00
|
|
|
it('should render a title/description/edited and update title/description/edited on update', () => {
|
2017-06-23 09:28:19 +00:00
|
|
|
let editedText;
|
2020-05-06 15:09:42 +00:00
|
|
|
return axios
|
|
|
|
.waitForAll()
|
2018-10-17 07:13:26 +00:00
|
|
|
.then(() => {
|
2020-06-15 15:08:20 +00:00
|
|
|
editedText = wrapper.find('.edited-text');
|
2018-10-17 07:13:26 +00:00
|
|
|
})
|
|
|
|
.then(() => {
|
|
|
|
expect(document.querySelector('title').innerText).toContain('this is a title (#1)');
|
2020-06-15 15:08:20 +00:00
|
|
|
expect(wrapper.find('.title').text()).toContain('this is a title');
|
|
|
|
expect(wrapper.find('.md').text()).toContain('this is a description!');
|
|
|
|
expect(wrapper.find('.js-task-list-field').element.value).toContain(
|
2018-10-17 07:13:26 +00:00
|
|
|
'this is a description',
|
|
|
|
);
|
2018-10-17 07:21:28 +00:00
|
|
|
|
2020-06-15 15:08:20 +00:00
|
|
|
expect(formatText(editedText.text())).toMatch(/Edited[\s\S]+?by Some User/);
|
|
|
|
expect(editedText.find('.author-link').attributes('href')).toMatch(/\/some_user$/);
|
|
|
|
expect(editedText.find('time').text()).toBeTruthy();
|
|
|
|
expect(wrapper.vm.state.lock_version).toEqual(1);
|
2018-10-17 07:13:26 +00:00
|
|
|
})
|
|
|
|
.then(() => {
|
2020-06-15 15:08:20 +00:00
|
|
|
wrapper.vm.poll.makeRequest();
|
2020-05-06 15:09:42 +00:00
|
|
|
return axios.waitForAll();
|
2018-10-17 07:13:26 +00:00
|
|
|
})
|
|
|
|
.then(() => {
|
|
|
|
expect(document.querySelector('title').innerText).toContain('2 (#1)');
|
2020-06-15 15:08:20 +00:00
|
|
|
expect(wrapper.find('.title').text()).toContain('2');
|
|
|
|
expect(wrapper.find('.md').text()).toContain('42');
|
|
|
|
expect(wrapper.find('.js-task-list-field').element.value).toContain('42');
|
|
|
|
expect(wrapper.find('.edited-text').text()).toBeTruthy();
|
|
|
|
expect(formatText(wrapper.find('.edited-text').text())).toMatch(
|
2018-10-17 07:13:26 +00:00
|
|
|
/Edited[\s\S]+?by Other User/,
|
|
|
|
);
|
2018-10-17 07:21:28 +00:00
|
|
|
|
2020-06-15 15:08:20 +00:00
|
|
|
expect(editedText.find('.author-link').attributes('href')).toMatch(/\/other_user$/);
|
|
|
|
expect(editedText.find('time').text()).toBeTruthy();
|
|
|
|
expect(wrapper.vm.state.lock_version).toEqual(2);
|
2020-05-06 15:09:42 +00:00
|
|
|
});
|
2017-04-06 01:13:06 +00:00
|
|
|
});
|
2017-05-12 10:23:30 +00:00
|
|
|
|
2020-05-06 15:09:42 +00:00
|
|
|
it('shows actions if permissions are correct', () => {
|
2020-06-15 15:08:20 +00:00
|
|
|
wrapper.vm.showForm = true;
|
2017-05-12 10:58:48 +00:00
|
|
|
|
2020-06-15 15:08:20 +00:00
|
|
|
return wrapper.vm.$nextTick().then(() => {
|
2020-08-28 12:10:37 +00:00
|
|
|
expect(wrapper.find('.markdown-selector').exists()).toBe(true);
|
2017-05-12 10:58:48 +00:00
|
|
|
});
|
|
|
|
});
|
|
|
|
|
2020-05-06 15:09:42 +00:00
|
|
|
it('does not show actions if permissions are incorrect', () => {
|
2020-06-15 15:08:20 +00:00
|
|
|
wrapper.vm.showForm = true;
|
|
|
|
wrapper.setProps({ canUpdate: false });
|
2017-05-12 10:58:48 +00:00
|
|
|
|
2020-06-15 15:08:20 +00:00
|
|
|
return wrapper.vm.$nextTick().then(() => {
|
2020-08-28 12:10:37 +00:00
|
|
|
expect(wrapper.find('.markdown-selector').exists()).toBe(false);
|
2017-05-12 10:58:48 +00:00
|
|
|
});
|
|
|
|
});
|
|
|
|
|
2020-05-06 15:09:42 +00:00
|
|
|
it('does not update formState if form is already open', () => {
|
2020-06-15 15:08:20 +00:00
|
|
|
wrapper.vm.updateAndShowForm();
|
2017-05-17 15:06:17 +00:00
|
|
|
|
2020-06-15 15:08:20 +00:00
|
|
|
wrapper.vm.state.titleText = 'testing 123';
|
2017-05-17 15:06:17 +00:00
|
|
|
|
2020-06-15 15:08:20 +00:00
|
|
|
wrapper.vm.updateAndShowForm();
|
2017-05-17 15:06:17 +00:00
|
|
|
|
2020-06-15 15:08:20 +00:00
|
|
|
return wrapper.vm.$nextTick().then(() => {
|
|
|
|
expect(wrapper.vm.store.formState.title).not.toBe('testing 123');
|
2020-05-06 15:09:42 +00:00
|
|
|
});
|
|
|
|
});
|
|
|
|
|
2020-06-11 09:08:16 +00:00
|
|
|
describe('Pinned links propagated', () => {
|
|
|
|
it.each`
|
|
|
|
prop | value
|
|
|
|
${'zoomMeetingUrl'} | ${zoomMeetingUrl}
|
|
|
|
${'publishedIncidentUrl'} | ${publishedIncidentUrl}
|
|
|
|
`('sets the $prop correctly on underlying pinned links', ({ prop, value }) => {
|
2020-06-15 15:08:20 +00:00
|
|
|
expect(wrapper.vm[prop]).toEqual(value);
|
|
|
|
expect(wrapper.find(`[data-testid="${prop}"]`).attributes('href')).toBe(value);
|
2020-06-11 09:08:16 +00:00
|
|
|
});
|
|
|
|
});
|
|
|
|
|
2017-05-12 10:23:30 +00:00
|
|
|
describe('updateIssuable', () => {
|
2020-05-06 15:09:42 +00:00
|
|
|
it('fetches new data after update', () => {
|
2020-06-15 15:08:20 +00:00
|
|
|
const updateStoreSpy = jest.spyOn(wrapper.vm, 'updateStoreState');
|
|
|
|
const getDataSpy = jest.spyOn(wrapper.vm.service, 'getData');
|
|
|
|
jest.spyOn(wrapper.vm.service, 'updateIssuable').mockResolvedValue({
|
2020-05-06 15:09:42 +00:00
|
|
|
data: { web_url: window.location.pathname },
|
|
|
|
});
|
|
|
|
|
2020-06-15 15:08:20 +00:00
|
|
|
return wrapper.vm.updateIssuable().then(() => {
|
2020-05-06 15:09:42 +00:00
|
|
|
expect(updateStoreSpy).toHaveBeenCalled();
|
|
|
|
expect(getDataSpy).toHaveBeenCalled();
|
|
|
|
});
|
2017-05-22 12:59:11 +00:00
|
|
|
});
|
|
|
|
|
2020-05-06 15:09:42 +00:00
|
|
|
it('correctly updates issuable data', () => {
|
2020-06-15 15:08:20 +00:00
|
|
|
const spy = jest.spyOn(wrapper.vm.service, 'updateIssuable').mockResolvedValue({
|
2020-05-06 15:09:42 +00:00
|
|
|
data: { web_url: window.location.pathname },
|
|
|
|
});
|
2017-05-12 10:23:30 +00:00
|
|
|
|
2020-06-15 15:08:20 +00:00
|
|
|
return wrapper.vm.updateIssuable().then(() => {
|
|
|
|
expect(spy).toHaveBeenCalledWith(wrapper.vm.formState);
|
2020-05-06 15:09:42 +00:00
|
|
|
expect(eventHub.$emit).toHaveBeenCalledWith('close.form');
|
|
|
|
});
|
2017-05-12 10:23:30 +00:00
|
|
|
});
|
|
|
|
|
2020-05-06 15:09:42 +00:00
|
|
|
it('does not redirect if issue has not moved', () => {
|
2020-06-15 15:08:20 +00:00
|
|
|
jest.spyOn(wrapper.vm.service, 'updateIssuable').mockResolvedValue({
|
2020-05-06 15:09:42 +00:00
|
|
|
data: {
|
|
|
|
web_url: window.location.pathname,
|
2020-06-15 15:08:20 +00:00
|
|
|
confidential: wrapper.vm.isConfidential,
|
2020-05-06 15:09:42 +00:00
|
|
|
},
|
|
|
|
});
|
2017-05-17 12:01:24 +00:00
|
|
|
|
2020-06-15 15:08:20 +00:00
|
|
|
return wrapper.vm.updateIssuable().then(() => {
|
2020-05-13 09:08:37 +00:00
|
|
|
expect(visitUrl).not.toHaveBeenCalled();
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
it('does not redirect if issue has not moved and user has switched tabs', () => {
|
2020-06-15 15:08:20 +00:00
|
|
|
jest.spyOn(wrapper.vm.service, 'updateIssuable').mockResolvedValue({
|
2020-05-13 09:08:37 +00:00
|
|
|
data: {
|
|
|
|
web_url: '',
|
2020-06-15 15:08:20 +00:00
|
|
|
confidential: wrapper.vm.isConfidential,
|
2020-05-13 09:08:37 +00:00
|
|
|
},
|
|
|
|
});
|
|
|
|
|
2020-06-15 15:08:20 +00:00
|
|
|
return wrapper.vm.updateIssuable().then(() => {
|
2018-04-16 18:40:30 +00:00
|
|
|
expect(visitUrl).not.toHaveBeenCalled();
|
2017-05-17 12:01:24 +00:00
|
|
|
});
|
|
|
|
});
|
|
|
|
|
2020-05-06 15:09:42 +00:00
|
|
|
it('redirects if returned web_url has changed', () => {
|
2020-06-15 15:08:20 +00:00
|
|
|
jest.spyOn(wrapper.vm.service, 'updateIssuable').mockResolvedValue({
|
2020-05-06 15:09:42 +00:00
|
|
|
data: {
|
|
|
|
web_url: '/testing-issue-move',
|
2020-06-15 15:08:20 +00:00
|
|
|
confidential: wrapper.vm.isConfidential,
|
2020-05-06 15:09:42 +00:00
|
|
|
},
|
|
|
|
});
|
2017-05-16 09:53:46 +00:00
|
|
|
|
2020-06-15 15:08:20 +00:00
|
|
|
wrapper.vm.updateIssuable();
|
2017-05-16 09:53:46 +00:00
|
|
|
|
2020-06-15 15:08:20 +00:00
|
|
|
return wrapper.vm.updateIssuable().then(() => {
|
2018-04-16 18:40:30 +00:00
|
|
|
expect(visitUrl).toHaveBeenCalledWith('/testing-issue-move');
|
2017-05-16 09:53:46 +00:00
|
|
|
});
|
|
|
|
});
|
|
|
|
|
2018-01-17 18:58:42 +00:00
|
|
|
describe('shows dialog when issue has unsaved changed', () => {
|
2020-05-06 15:09:42 +00:00
|
|
|
it('confirms on title change', () => {
|
2020-06-15 15:08:20 +00:00
|
|
|
wrapper.vm.showForm = true;
|
|
|
|
wrapper.vm.state.titleText = 'title has changed';
|
2018-01-17 18:58:42 +00:00
|
|
|
const e = { returnValue: null };
|
2020-06-15 15:08:20 +00:00
|
|
|
wrapper.vm.handleBeforeUnloadEvent(e);
|
|
|
|
|
|
|
|
return wrapper.vm.$nextTick().then(() => {
|
2018-01-17 18:58:42 +00:00
|
|
|
expect(e.returnValue).not.toBeNull();
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
2020-05-06 15:09:42 +00:00
|
|
|
it('confirms on description change', () => {
|
2020-06-15 15:08:20 +00:00
|
|
|
wrapper.vm.showForm = true;
|
|
|
|
wrapper.vm.state.descriptionText = 'description has changed';
|
2018-01-17 18:58:42 +00:00
|
|
|
const e = { returnValue: null };
|
2020-06-15 15:08:20 +00:00
|
|
|
wrapper.vm.handleBeforeUnloadEvent(e);
|
|
|
|
|
|
|
|
return wrapper.vm.$nextTick().then(() => {
|
2018-01-17 18:58:42 +00:00
|
|
|
expect(e.returnValue).not.toBeNull();
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
2020-05-06 15:09:42 +00:00
|
|
|
it('does nothing when nothing has changed', () => {
|
2018-01-17 18:58:42 +00:00
|
|
|
const e = { returnValue: null };
|
2020-06-15 15:08:20 +00:00
|
|
|
wrapper.vm.handleBeforeUnloadEvent(e);
|
|
|
|
|
|
|
|
return wrapper.vm.$nextTick().then(() => {
|
2018-01-17 18:58:42 +00:00
|
|
|
expect(e.returnValue).toBeNull();
|
|
|
|
});
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
2017-11-15 23:13:20 +00:00
|
|
|
describe('error when updating', () => {
|
2020-05-06 15:09:42 +00:00
|
|
|
it('closes form on error', () => {
|
2020-06-15 15:08:20 +00:00
|
|
|
jest.spyOn(wrapper.vm.service, 'updateIssuable').mockRejectedValue();
|
|
|
|
|
|
|
|
return wrapper.vm.updateIssuable().then(() => {
|
2019-01-30 18:22:54 +00:00
|
|
|
expect(eventHub.$emit).not.toHaveBeenCalledWith('close.form');
|
2019-01-29 13:50:22 +00:00
|
|
|
expect(document.querySelector('.flash-container .flash-text').innerText.trim()).toBe(
|
|
|
|
`Error updating issue`,
|
|
|
|
);
|
2017-11-15 23:13:20 +00:00
|
|
|
});
|
|
|
|
});
|
|
|
|
|
2020-05-06 15:09:42 +00:00
|
|
|
it('returns the correct error message for issuableType', () => {
|
2020-06-15 15:08:20 +00:00
|
|
|
jest.spyOn(wrapper.vm.service, 'updateIssuable').mockRejectedValue();
|
|
|
|
wrapper.setProps({ issuableType: 'merge request' });
|
2017-11-15 23:13:20 +00:00
|
|
|
|
2020-06-15 15:08:20 +00:00
|
|
|
return wrapper.vm
|
2020-05-06 15:09:42 +00:00
|
|
|
.$nextTick()
|
2020-06-15 15:08:20 +00:00
|
|
|
.then(wrapper.vm.updateIssuable)
|
2020-05-06 15:09:42 +00:00
|
|
|
.then(() => {
|
2019-01-30 18:22:54 +00:00
|
|
|
expect(eventHub.$emit).not.toHaveBeenCalledWith('close.form');
|
2019-01-29 13:50:22 +00:00
|
|
|
expect(document.querySelector('.flash-container .flash-text').innerText.trim()).toBe(
|
|
|
|
`Error updating merge request`,
|
|
|
|
);
|
2017-11-15 23:13:20 +00:00
|
|
|
});
|
2017-05-12 10:23:30 +00:00
|
|
|
});
|
2018-12-21 00:19:41 +00:00
|
|
|
|
2020-05-06 15:09:42 +00:00
|
|
|
it('shows error message from backend if exists', () => {
|
2018-12-21 00:19:41 +00:00
|
|
|
const msg = 'Custom error message from backend';
|
2020-05-06 15:09:42 +00:00
|
|
|
jest
|
2020-06-15 15:08:20 +00:00
|
|
|
.spyOn(wrapper.vm.service, 'updateIssuable')
|
2020-05-06 15:09:42 +00:00
|
|
|
.mockRejectedValue({ response: { data: { errors: [msg] } } });
|
2018-12-21 00:19:41 +00:00
|
|
|
|
2020-06-15 15:08:20 +00:00
|
|
|
return wrapper.vm.updateIssuable().then(() => {
|
2019-01-29 13:50:22 +00:00
|
|
|
expect(document.querySelector('.flash-container .flash-text').innerText.trim()).toBe(
|
2020-06-15 15:08:20 +00:00
|
|
|
`${wrapper.vm.defaultErrorMessage}. ${msg}`,
|
2019-01-29 13:50:22 +00:00
|
|
|
);
|
2018-12-21 00:19:41 +00:00
|
|
|
});
|
|
|
|
});
|
2017-05-12 10:23:30 +00:00
|
|
|
});
|
|
|
|
});
|
|
|
|
|
2020-05-06 15:09:42 +00:00
|
|
|
describe('deleteIssuable', () => {
|
|
|
|
it('changes URL when deleted', () => {
|
2020-06-15 15:08:20 +00:00
|
|
|
jest.spyOn(wrapper.vm.service, 'deleteIssuable').mockResolvedValue({
|
2017-12-15 04:52:18 +00:00
|
|
|
data: {
|
2020-05-06 15:09:42 +00:00
|
|
|
web_url: '/test',
|
2017-12-08 12:26:39 +00:00
|
|
|
},
|
|
|
|
});
|
|
|
|
|
2020-06-15 15:08:20 +00:00
|
|
|
return wrapper.vm.deleteIssuable().then(() => {
|
2018-04-16 18:40:30 +00:00
|
|
|
expect(visitUrl).toHaveBeenCalledWith('/test');
|
2017-05-12 10:23:30 +00:00
|
|
|
});
|
|
|
|
});
|
|
|
|
|
2020-05-06 15:09:42 +00:00
|
|
|
it('stops polling when deleting', () => {
|
2020-06-15 15:08:20 +00:00
|
|
|
const spy = jest.spyOn(wrapper.vm.poll, 'stop');
|
|
|
|
jest.spyOn(wrapper.vm.service, 'deleteIssuable').mockResolvedValue({
|
2020-05-06 15:09:42 +00:00
|
|
|
data: {
|
|
|
|
web_url: '/test',
|
|
|
|
},
|
|
|
|
});
|
2019-01-30 18:23:25 +00:00
|
|
|
|
2020-06-15 15:08:20 +00:00
|
|
|
return wrapper.vm.deleteIssuable().then(() => {
|
2020-05-06 15:09:42 +00:00
|
|
|
expect(spy).toHaveBeenCalledWith();
|
2017-05-12 10:23:30 +00:00
|
|
|
});
|
|
|
|
});
|
|
|
|
|
2020-05-06 15:09:42 +00:00
|
|
|
it('closes form on error', () => {
|
2020-06-15 15:08:20 +00:00
|
|
|
jest.spyOn(wrapper.vm.service, 'deleteIssuable').mockRejectedValue();
|
2017-05-12 10:23:30 +00:00
|
|
|
|
2020-06-15 15:08:20 +00:00
|
|
|
return wrapper.vm.deleteIssuable().then(() => {
|
2019-01-30 18:23:25 +00:00
|
|
|
expect(eventHub.$emit).not.toHaveBeenCalledWith('close.form');
|
2019-01-29 13:50:22 +00:00
|
|
|
expect(document.querySelector('.flash-container .flash-text').innerText.trim()).toBe(
|
|
|
|
'Error deleting issue',
|
|
|
|
);
|
2017-05-12 10:23:30 +00:00
|
|
|
});
|
|
|
|
});
|
|
|
|
});
|
2017-05-18 16:37:37 +00:00
|
|
|
|
2019-09-18 14:02:45 +00:00
|
|
|
describe('updateAndShowForm', () => {
|
2020-05-06 15:09:42 +00:00
|
|
|
it('shows locked warning if form is open & data is different', () => {
|
2020-06-15 15:08:20 +00:00
|
|
|
return wrapper.vm
|
2020-05-06 15:09:42 +00:00
|
|
|
.$nextTick()
|
2017-05-18 16:37:37 +00:00
|
|
|
.then(() => {
|
2020-06-15 15:08:20 +00:00
|
|
|
wrapper.vm.updateAndShowForm();
|
2017-05-18 16:37:37 +00:00
|
|
|
|
2020-06-15 15:08:20 +00:00
|
|
|
wrapper.vm.poll.makeRequest();
|
2019-09-18 14:02:45 +00:00
|
|
|
|
2020-12-23 21:10:24 +00:00
|
|
|
return new Promise((resolve) => {
|
|
|
|
wrapper.vm.$watch('formState.lockedWarningVisible', (value) => {
|
2020-06-15 15:08:20 +00:00
|
|
|
if (value) {
|
|
|
|
resolve();
|
|
|
|
}
|
2019-09-18 14:02:45 +00:00
|
|
|
});
|
|
|
|
});
|
2017-05-18 16:37:37 +00:00
|
|
|
})
|
|
|
|
.then(() => {
|
2020-06-15 15:08:20 +00:00
|
|
|
expect(wrapper.vm.formState.lockedWarningVisible).toEqual(true);
|
|
|
|
expect(wrapper.vm.formState.lock_version).toEqual(1);
|
2020-08-28 12:10:37 +00:00
|
|
|
expect(wrapper.find('.alert').exists()).toBe(true);
|
2020-05-06 15:09:42 +00:00
|
|
|
});
|
2017-05-18 16:37:37 +00:00
|
|
|
});
|
|
|
|
});
|
2017-10-17 17:04:33 +00:00
|
|
|
|
2019-09-18 14:02:45 +00:00
|
|
|
describe('requestTemplatesAndShowForm', () => {
|
2020-05-06 15:09:42 +00:00
|
|
|
let formSpy;
|
|
|
|
|
2019-09-18 14:02:45 +00:00
|
|
|
beforeEach(() => {
|
2020-06-15 15:08:20 +00:00
|
|
|
formSpy = jest.spyOn(wrapper.vm, 'updateAndShowForm');
|
2019-09-18 14:02:45 +00:00
|
|
|
});
|
|
|
|
|
2021-02-18 12:09:34 +00:00
|
|
|
it('shows the form if template names as hash request is successful', () => {
|
|
|
|
const mockData = {
|
|
|
|
test: [{ name: 'test', id: 'test', project_path: '/', namespace_path: '/' }],
|
|
|
|
};
|
|
|
|
mock.onGet('/issuable-templates-path').reply(() => Promise.resolve([200, mockData]));
|
|
|
|
|
|
|
|
return wrapper.vm.requestTemplatesAndShowForm().then(() => {
|
|
|
|
expect(formSpy).toHaveBeenCalledWith(mockData);
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
it('shows the form if template names as array request is successful', () => {
|
2021-02-11 18:09:10 +00:00
|
|
|
const mockData = [{ name: 'test', id: 'test', project_path: '/', namespace_path: '/' }];
|
2019-09-18 14:02:45 +00:00
|
|
|
mock.onGet('/issuable-templates-path').reply(() => Promise.resolve([200, mockData]));
|
|
|
|
|
2020-06-15 15:08:20 +00:00
|
|
|
return wrapper.vm.requestTemplatesAndShowForm().then(() => {
|
2020-05-06 15:09:42 +00:00
|
|
|
expect(formSpy).toHaveBeenCalledWith(mockData);
|
|
|
|
});
|
2019-09-18 14:02:45 +00:00
|
|
|
});
|
|
|
|
|
2020-05-06 15:09:42 +00:00
|
|
|
it('shows the form if template names request failed', () => {
|
2019-09-18 14:02:45 +00:00
|
|
|
mock
|
|
|
|
.onGet('/issuable-templates-path')
|
|
|
|
.reply(() => Promise.reject(new Error('something went wrong')));
|
|
|
|
|
2020-06-15 15:08:20 +00:00
|
|
|
return wrapper.vm.requestTemplatesAndShowForm().then(() => {
|
2020-05-06 15:09:42 +00:00
|
|
|
expect(document.querySelector('.flash-container .flash-text').textContent).toContain(
|
|
|
|
'Error updating issue',
|
|
|
|
);
|
2019-09-18 14:02:45 +00:00
|
|
|
|
2020-05-06 15:09:42 +00:00
|
|
|
expect(formSpy).toHaveBeenCalledWith();
|
|
|
|
});
|
2019-09-18 14:02:45 +00:00
|
|
|
});
|
|
|
|
});
|
|
|
|
|
2017-10-17 17:04:33 +00:00
|
|
|
describe('show inline edit button', () => {
|
|
|
|
it('should not render by default', () => {
|
2020-08-28 12:10:37 +00:00
|
|
|
expect(wrapper.find('.btn-edit').exists()).toBe(true);
|
2017-10-17 17:04:33 +00:00
|
|
|
});
|
|
|
|
|
|
|
|
it('should render if showInlineEditButton', () => {
|
2020-06-15 15:08:20 +00:00
|
|
|
wrapper.setProps({ showInlineEditButton: true });
|
2018-10-09 18:03:09 +00:00
|
|
|
|
2020-06-15 15:08:20 +00:00
|
|
|
return wrapper.vm.$nextTick(() => {
|
2020-08-28 12:10:37 +00:00
|
|
|
expect(wrapper.find('.btn-edit').exists()).toBe(true);
|
2020-06-15 15:08:20 +00:00
|
|
|
});
|
2017-10-17 17:04:33 +00:00
|
|
|
});
|
|
|
|
});
|
2019-01-25 23:56:53 +00:00
|
|
|
|
|
|
|
describe('updateStoreState', () => {
|
2020-05-06 15:09:42 +00:00
|
|
|
it('should make a request and update the state of the store', () => {
|
2019-01-25 23:56:53 +00:00
|
|
|
const data = { foo: 1 };
|
2020-06-15 15:08:20 +00:00
|
|
|
const getDataSpy = jest.spyOn(wrapper.vm.service, 'getData').mockResolvedValue({ data });
|
|
|
|
const updateStateSpy = jest
|
|
|
|
.spyOn(wrapper.vm.store, 'updateState')
|
|
|
|
.mockImplementation(jest.fn);
|
2019-01-25 23:56:53 +00:00
|
|
|
|
2020-06-15 15:08:20 +00:00
|
|
|
return wrapper.vm.updateStoreState().then(() => {
|
2020-05-06 15:09:42 +00:00
|
|
|
expect(getDataSpy).toHaveBeenCalled();
|
|
|
|
expect(updateStateSpy).toHaveBeenCalledWith(data);
|
|
|
|
});
|
2019-01-25 23:56:53 +00:00
|
|
|
});
|
2019-01-26 14:49:49 +00:00
|
|
|
|
2020-05-06 15:09:42 +00:00
|
|
|
it('should show error message if store update fails', () => {
|
2020-06-15 15:08:20 +00:00
|
|
|
jest.spyOn(wrapper.vm.service, 'getData').mockRejectedValue();
|
|
|
|
wrapper.setProps({ issuableType: 'merge request' });
|
2019-01-26 14:49:49 +00:00
|
|
|
|
2020-06-15 15:08:20 +00:00
|
|
|
return wrapper.vm.updateStoreState().then(() => {
|
2020-05-06 15:09:42 +00:00
|
|
|
expect(document.querySelector('.flash-container .flash-text').innerText.trim()).toBe(
|
2020-06-15 15:08:20 +00:00
|
|
|
`Error updating ${wrapper.vm.issuableType}`,
|
2020-05-06 15:09:42 +00:00
|
|
|
);
|
|
|
|
});
|
2019-01-26 14:49:49 +00:00
|
|
|
});
|
2019-01-25 23:56:53 +00:00
|
|
|
});
|
2019-04-16 08:20:37 +00:00
|
|
|
|
|
|
|
describe('issueChanged', () => {
|
|
|
|
beforeEach(() => {
|
2020-06-15 15:08:20 +00:00
|
|
|
wrapper.vm.store.formState.title = '';
|
|
|
|
wrapper.vm.store.formState.description = '';
|
|
|
|
wrapper.setProps({
|
|
|
|
initialDescriptionText: '',
|
|
|
|
initialTitleText: '',
|
|
|
|
});
|
2019-04-16 08:20:37 +00:00
|
|
|
});
|
|
|
|
|
|
|
|
it('returns true when title is changed', () => {
|
2020-06-15 15:08:20 +00:00
|
|
|
wrapper.vm.store.formState.title = 'RandomText';
|
2019-04-16 08:20:37 +00:00
|
|
|
|
2020-06-15 15:08:20 +00:00
|
|
|
expect(wrapper.vm.issueChanged).toBe(true);
|
2019-04-16 08:20:37 +00:00
|
|
|
});
|
|
|
|
|
|
|
|
it('returns false when title is empty null', () => {
|
2020-06-15 15:08:20 +00:00
|
|
|
wrapper.vm.store.formState.title = null;
|
2019-04-16 08:20:37 +00:00
|
|
|
|
2020-06-15 15:08:20 +00:00
|
|
|
expect(wrapper.vm.issueChanged).toBe(false);
|
2019-04-16 08:20:37 +00:00
|
|
|
});
|
|
|
|
|
|
|
|
it('returns true when description is changed', () => {
|
2020-06-15 15:08:20 +00:00
|
|
|
wrapper.vm.store.formState.description = 'RandomText';
|
2019-04-16 08:20:37 +00:00
|
|
|
|
2020-06-15 15:08:20 +00:00
|
|
|
expect(wrapper.vm.issueChanged).toBe(true);
|
2019-04-16 08:20:37 +00:00
|
|
|
});
|
|
|
|
|
|
|
|
it('returns false when description is empty null', () => {
|
2020-06-15 15:08:20 +00:00
|
|
|
wrapper.vm.store.formState.description = null;
|
2019-04-16 08:20:37 +00:00
|
|
|
|
2020-06-15 15:08:20 +00:00
|
|
|
expect(wrapper.vm.issueChanged).toBe(false);
|
2019-04-16 08:20:37 +00:00
|
|
|
});
|
|
|
|
|
|
|
|
it('returns false when `initialDescriptionText` is null and `formState.description` is empty string', () => {
|
2020-06-15 15:08:20 +00:00
|
|
|
wrapper.vm.store.formState.description = '';
|
|
|
|
wrapper.setProps({ initialDescriptionText: null });
|
2019-04-16 08:20:37 +00:00
|
|
|
|
2020-06-15 15:08:20 +00:00
|
|
|
expect(wrapper.vm.issueChanged).toBe(false);
|
2019-04-16 08:20:37 +00:00
|
|
|
});
|
|
|
|
});
|
2020-06-16 18:09:01 +00:00
|
|
|
|
|
|
|
describe('sticky header', () => {
|
|
|
|
describe('when title is in view', () => {
|
|
|
|
it('is not shown', () => {
|
2020-11-09 12:09:24 +00:00
|
|
|
expect(findStickyHeader().exists()).toBe(false);
|
2020-06-16 18:09:01 +00:00
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
describe('when title is not in view', () => {
|
|
|
|
beforeEach(() => {
|
|
|
|
wrapper.vm.state.titleText = 'Sticky header title';
|
|
|
|
wrapper.find(GlIntersectionObserver).vm.$emit('disappear');
|
|
|
|
});
|
|
|
|
|
2020-11-09 12:09:24 +00:00
|
|
|
it('shows with title', () => {
|
2020-06-16 18:09:01 +00:00
|
|
|
expect(findStickyHeader().text()).toContain('Sticky header title');
|
|
|
|
});
|
|
|
|
|
2020-11-09 12:09:24 +00:00
|
|
|
it.each`
|
|
|
|
title | state
|
|
|
|
${'shows with Open when status is opened'} | ${IssuableStatus.Open}
|
|
|
|
${'shows with Closed when status is closed'} | ${IssuableStatus.Closed}
|
|
|
|
${'shows with Open when status is reopened'} | ${IssuableStatus.Reopened}
|
|
|
|
`('$title', async ({ state }) => {
|
|
|
|
wrapper.setProps({ issuableStatus: state });
|
2020-06-16 18:09:01 +00:00
|
|
|
|
2020-11-09 12:09:24 +00:00
|
|
|
await wrapper.vm.$nextTick();
|
|
|
|
|
|
|
|
expect(findStickyHeader().text()).toContain(IssuableStatusText[state]);
|
2020-06-16 18:09:01 +00:00
|
|
|
});
|
|
|
|
|
2020-11-09 12:09:24 +00:00
|
|
|
it.each`
|
|
|
|
title | isConfidential
|
|
|
|
${'does not show confidential badge when issue is not confidential'} | ${true}
|
|
|
|
${'shows confidential badge when issue is confidential'} | ${false}
|
|
|
|
`('$title', async ({ isConfidential }) => {
|
|
|
|
wrapper.setProps({ isConfidential });
|
2020-06-16 18:09:01 +00:00
|
|
|
|
2020-11-09 12:09:24 +00:00
|
|
|
await wrapper.vm.$nextTick();
|
|
|
|
|
|
|
|
expect(findConfidentialBadge().exists()).toBe(isConfidential);
|
|
|
|
});
|
|
|
|
|
|
|
|
it.each`
|
|
|
|
title | isLocked
|
|
|
|
${'does not show locked badge when issue is not locked'} | ${true}
|
|
|
|
${'shows locked badge when issue is locked'} | ${false}
|
|
|
|
`('$title', async ({ isLocked }) => {
|
|
|
|
wrapper.setProps({ isLocked });
|
|
|
|
|
|
|
|
await wrapper.vm.$nextTick();
|
|
|
|
|
|
|
|
expect(findLockedBadge().exists()).toBe(isLocked);
|
2020-06-16 18:09:01 +00:00
|
|
|
});
|
|
|
|
});
|
|
|
|
});
|
2020-09-02 09:10:23 +00:00
|
|
|
|
|
|
|
describe('Composable description component', () => {
|
|
|
|
const findIncidentTabs = () => wrapper.find(IncidentTabs);
|
|
|
|
const findDescriptionComponent = () => wrapper.find(DescriptionComponent);
|
|
|
|
const findPinnedLinks = () => wrapper.find(PinnedLinks);
|
|
|
|
const borderClass = 'gl-border-b-1 gl-border-b-gray-100 gl-border-b-solid gl-mb-6';
|
|
|
|
|
|
|
|
describe('when using description component', () => {
|
|
|
|
it('renders the description component', () => {
|
|
|
|
expect(findDescriptionComponent().exists()).toBe(true);
|
|
|
|
});
|
|
|
|
|
|
|
|
it('does not render incident tabs', () => {
|
|
|
|
expect(findIncidentTabs().exists()).toBe(false);
|
|
|
|
});
|
|
|
|
|
|
|
|
it('adds a border below the header', () => {
|
|
|
|
expect(findPinnedLinks().attributes('class')).toContain(borderClass);
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
describe('when using incident tabs description wrapper', () => {
|
|
|
|
beforeEach(() => {
|
2020-09-15 12:09:30 +00:00
|
|
|
mountComponent(
|
|
|
|
{
|
|
|
|
descriptionComponent: IncidentTabs,
|
|
|
|
showTitleBorder: false,
|
|
|
|
},
|
|
|
|
{
|
|
|
|
mocks: {
|
|
|
|
$apollo: {
|
|
|
|
queries: {
|
|
|
|
alert: {
|
|
|
|
loading: false,
|
|
|
|
},
|
|
|
|
},
|
|
|
|
},
|
|
|
|
},
|
|
|
|
},
|
|
|
|
);
|
2020-09-02 09:10:23 +00:00
|
|
|
});
|
|
|
|
|
|
|
|
it('renders the description component', () => {
|
|
|
|
expect(findDescriptionComponent().exists()).toBe(true);
|
|
|
|
});
|
|
|
|
|
|
|
|
it('renders incident tabs', () => {
|
|
|
|
expect(findIncidentTabs().exists()).toBe(true);
|
|
|
|
});
|
|
|
|
|
|
|
|
it('does not add a border below the header', () => {
|
|
|
|
expect(findPinnedLinks().attributes('class')).not.toContain(borderClass);
|
|
|
|
});
|
|
|
|
});
|
|
|
|
});
|
2017-04-06 01:13:06 +00:00
|
|
|
});
|