Welcome to mirror list, hosted at ThFree Co, Russian Federation.

gitlab.com/gitlab-org/gitlab-foss.git - Unnamed repository; edit this file 'description' to name the repository.
summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat (limited to 'spec/frontend/work_items')
-rw-r--r--spec/frontend/work_items/components/item_state_spec.js54
-rw-r--r--spec/frontend/work_items/components/work_item_actions_spec.js55
-rw-r--r--spec/frontend/work_items/components/work_item_detail_modal_spec.js100
-rw-r--r--spec/frontend/work_items/components/work_item_state_spec.js117
-rw-r--r--spec/frontend/work_items/components/work_item_title_spec.js42
-rw-r--r--spec/frontend/work_items/mock_data.js23
-rw-r--r--spec/frontend/work_items/pages/create_work_item_spec.js7
-rw-r--r--spec/frontend/work_items/pages/work_item_detail_spec.js32
-rw-r--r--spec/frontend/work_items/pages/work_item_root_spec.js60
-rw-r--r--spec/frontend/work_items/router_spec.js1
10 files changed, 386 insertions, 105 deletions
diff --git a/spec/frontend/work_items/components/item_state_spec.js b/spec/frontend/work_items/components/item_state_spec.js
new file mode 100644
index 00000000000..79b76f3c061
--- /dev/null
+++ b/spec/frontend/work_items/components/item_state_spec.js
@@ -0,0 +1,54 @@
+import { mount } from '@vue/test-utils';
+import { STATE_OPEN, STATE_CLOSED } from '~/work_items/constants';
+import ItemState from '~/work_items/components/item_state.vue';
+
+describe('ItemState', () => {
+ let wrapper;
+
+ const findLabel = () => wrapper.find('label').text();
+ const selectedValue = () => wrapper.find('option:checked').element.value;
+
+ const clickOpen = () => wrapper.findAll('option').at(0).setSelected();
+
+ const createComponent = ({ state = STATE_OPEN, disabled = false } = {}) => {
+ wrapper = mount(ItemState, {
+ propsData: {
+ state,
+ disabled,
+ },
+ });
+ };
+
+ afterEach(() => {
+ wrapper.destroy();
+ });
+
+ it('renders label and dropdown', () => {
+ createComponent();
+
+ expect(findLabel()).toBe('Status');
+ expect(selectedValue()).toBe(STATE_OPEN);
+ });
+
+ it('renders dropdown for closed', () => {
+ createComponent({ state: STATE_CLOSED });
+
+ expect(selectedValue()).toBe(STATE_CLOSED);
+ });
+
+ it('emits changed event', async () => {
+ createComponent({ state: STATE_CLOSED });
+
+ await clickOpen();
+
+ expect(wrapper.emitted('changed')).toEqual([[STATE_OPEN]]);
+ });
+
+ it('does not emits changed event if clicking selected value', async () => {
+ createComponent({ state: STATE_OPEN });
+
+ await clickOpen();
+
+ expect(wrapper.emitted('changed')).toBeUndefined();
+ });
+});
diff --git a/spec/frontend/work_items/components/work_item_actions_spec.js b/spec/frontend/work_items/components/work_item_actions_spec.js
index d0e9cfee353..137a0a7326d 100644
--- a/spec/frontend/work_items/components/work_item_actions_spec.js
+++ b/spec/frontend/work_items/components/work_item_actions_spec.js
@@ -1,30 +1,18 @@
import { GlDropdownItem, GlModal } from '@gitlab/ui';
import { shallowMount } from '@vue/test-utils';
-import Vue from 'vue';
-import VueApollo from 'vue-apollo';
-import waitForPromises from 'helpers/wait_for_promises';
-import createMockApollo from 'helpers/mock_apollo_helper';
import WorkItemActions from '~/work_items/components/work_item_actions.vue';
-import deleteWorkItem from '~/work_items/graphql/delete_work_item.mutation.graphql';
-import { deleteWorkItemResponse, deleteWorkItemFailureResponse } from '../mock_data';
describe('WorkItemActions component', () => {
let wrapper;
let glModalDirective;
- Vue.use(VueApollo);
-
const findModal = () => wrapper.findComponent(GlModal);
const findDeleteButton = () => wrapper.findComponent(GlDropdownItem);
- const createComponent = ({
- canUpdate = true,
- deleteWorkItemHandler = jest.fn().mockResolvedValue(deleteWorkItemResponse),
- } = {}) => {
+ const createComponent = ({ canDelete = true } = {}) => {
glModalDirective = jest.fn();
wrapper = shallowMount(WorkItemActions, {
- apolloProvider: createMockApollo([[deleteWorkItem, deleteWorkItemHandler]]),
- propsData: { workItemId: '123', canUpdate },
+ propsData: { workItemId: '123', canDelete },
directives: {
glModal: {
bind(_, { value }) {
@@ -54,48 +42,17 @@ describe('WorkItemActions component', () => {
expect(glModalDirective).toHaveBeenCalled();
});
- it('calls delete mutation when clicking OK button', () => {
- const deleteWorkItemHandler = jest.fn().mockResolvedValue(deleteWorkItemResponse);
-
- createComponent({
- deleteWorkItemHandler,
- });
-
- findModal().vm.$emit('ok');
-
- expect(deleteWorkItemHandler).toHaveBeenCalled();
- expect(wrapper.emitted('error')).toBeUndefined();
- });
-
- it('emits event after delete success', async () => {
+ it('emits event when clicking OK button', () => {
createComponent();
findModal().vm.$emit('ok');
- await waitForPromises();
-
- expect(wrapper.emitted('workItemDeleted')).not.toBeUndefined();
- expect(wrapper.emitted('error')).toBeUndefined();
- });
-
- it('emits error event after delete failure', async () => {
- createComponent({
- deleteWorkItemHandler: jest.fn().mockResolvedValue(deleteWorkItemFailureResponse),
- });
-
- findModal().vm.$emit('ok');
-
- await waitForPromises();
-
- expect(wrapper.emitted('error')[0]).toEqual([
- "The resource that you are attempting to access does not exist or you don't have permission to perform this action",
- ]);
- expect(wrapper.emitted('workItemDeleted')).toBeUndefined();
+ expect(wrapper.emitted('deleteWorkItem')).toEqual([[]]);
});
- it('does not render when canUpdate is false', () => {
+ it('does not render when canDelete is false', () => {
createComponent({
- canUpdate: false,
+ canDelete: false,
});
expect(wrapper.html()).toBe('');
diff --git a/spec/frontend/work_items/components/work_item_detail_modal_spec.js b/spec/frontend/work_items/components/work_item_detail_modal_spec.js
index 9f35ccb853b..aaabdbc82d9 100644
--- a/spec/frontend/work_items/components/work_item_detail_modal_spec.js
+++ b/spec/frontend/work_items/components/work_item_detail_modal_spec.js
@@ -1,23 +1,57 @@
-import { GlModal } from '@gitlab/ui';
+import { GlAlert } from '@gitlab/ui';
import { shallowMount } from '@vue/test-utils';
-import Vue from 'vue';
+import Vue, { nextTick } from 'vue';
import VueApollo from 'vue-apollo';
+import waitForPromises from 'helpers/wait_for_promises';
+import createMockApollo from 'helpers/mock_apollo_helper';
import WorkItemDetail from '~/work_items/components/work_item_detail.vue';
import WorkItemDetailModal from '~/work_items/components/work_item_detail_modal.vue';
-import WorkItemActions from '~/work_items/components/work_item_actions.vue';
+import deleteWorkItemFromTaskMutation from '~/work_items/graphql/delete_task_from_work_item.mutation.graphql';
describe('WorkItemDetailModal component', () => {
let wrapper;
Vue.use(VueApollo);
+ const hideModal = jest.fn();
+ const GlModal = {
+ template: `
+ <div>
+ <slot></slot>
+ </div>
+ `,
+ methods: {
+ hide: hideModal,
+ },
+ };
+
const findModal = () => wrapper.findComponent(GlModal);
- const findWorkItemActions = () => wrapper.findComponent(WorkItemActions);
+ const findAlert = () => wrapper.findComponent(GlAlert);
const findWorkItemDetail = () => wrapper.findComponent(WorkItemDetail);
- const createComponent = ({ visible = true, workItemId = '1', canUpdate = false } = {}) => {
+ const createComponent = ({ workItemId = '1', error = false } = {}) => {
+ const apolloProvider = createMockApollo([
+ [
+ deleteWorkItemFromTaskMutation,
+ jest.fn().mockResolvedValue({
+ data: {
+ workItemDeleteTask: {
+ workItem: { id: 123, descriptionHtml: 'updated work item desc' },
+ errors: [],
+ },
+ },
+ }),
+ ],
+ ]);
+
wrapper = shallowMount(WorkItemDetailModal, {
- propsData: { visible, workItemId, canUpdate },
+ apolloProvider,
+ propsData: { workItemId },
+ data() {
+ return {
+ error,
+ };
+ },
stubs: {
GlModal,
},
@@ -28,31 +62,59 @@ describe('WorkItemDetailModal component', () => {
wrapper.destroy();
});
- describe.each([true, false])('when visible=%s', (visible) => {
- it(`${visible ? 'renders' : 'does not render'} modal`, () => {
- createComponent({ visible });
+ it('renders WorkItemDetail', () => {
+ createComponent();
- expect(findModal().props('visible')).toBe(visible);
+ expect(findWorkItemDetail().props()).toEqual({
+ workItemId: '1',
});
});
- it('renders heading', () => {
+ it('renders alert if there is an error', () => {
+ createComponent({ error: true });
+
+ expect(findAlert().exists()).toBe(true);
+ });
+
+ it('does not render alert if there is no error', () => {
createComponent();
- expect(wrapper.find('h2').text()).toBe('Work Item');
+ expect(findAlert().exists()).toBe(false);
});
- it('renders WorkItemDetail', () => {
+ it('dismisses the alert on `dismiss` emitted event', async () => {
+ createComponent({ error: true });
+ findAlert().vm.$emit('dismiss');
+ await nextTick();
+
+ expect(findAlert().exists()).toBe(false);
+ });
+
+ it('emits `close` event on hiding the modal', () => {
createComponent();
+ findModal().vm.$emit('hide');
- expect(findWorkItemDetail().props()).toEqual({ workItemId: '1' });
+ expect(wrapper.emitted('close')).toBeTruthy();
});
- it('shows work item actions', () => {
- createComponent({
- canUpdate: true,
- });
+ it('emits `workItemUpdated` event on updating work item', () => {
+ createComponent();
+ findWorkItemDetail().vm.$emit('workItemUpdated');
+
+ expect(wrapper.emitted('workItemUpdated')).toBeTruthy();
+ });
+
+ describe('delete work item', () => {
+ it('emits workItemDeleted and closes modal', async () => {
+ createComponent();
+ const newDesc = 'updated work item desc';
+
+ findWorkItemDetail().vm.$emit('deleteWorkItem');
- expect(findWorkItemActions().exists()).toBe(true);
+ await waitForPromises();
+
+ expect(wrapper.emitted('workItemDeleted')).toEqual([[newDesc]]);
+ expect(hideModal).toHaveBeenCalled();
+ });
});
});
diff --git a/spec/frontend/work_items/components/work_item_state_spec.js b/spec/frontend/work_items/components/work_item_state_spec.js
new file mode 100644
index 00000000000..9e48f56d9e9
--- /dev/null
+++ b/spec/frontend/work_items/components/work_item_state_spec.js
@@ -0,0 +1,117 @@
+import { shallowMount } from '@vue/test-utils';
+import Vue from 'vue';
+import VueApollo from 'vue-apollo';
+import createMockApollo from 'helpers/mock_apollo_helper';
+import { mockTracking } from 'helpers/tracking_helper';
+import waitForPromises from 'helpers/wait_for_promises';
+import ItemState from '~/work_items/components/item_state.vue';
+import WorkItemState from '~/work_items/components/work_item_state.vue';
+import {
+ i18n,
+ STATE_OPEN,
+ STATE_CLOSED,
+ STATE_EVENT_CLOSE,
+ STATE_EVENT_REOPEN,
+} from '~/work_items/constants';
+import updateWorkItemMutation from '~/work_items/graphql/update_work_item.mutation.graphql';
+import { updateWorkItemMutationResponse, workItemQueryResponse } from '../mock_data';
+
+describe('WorkItemState component', () => {
+ let wrapper;
+
+ Vue.use(VueApollo);
+
+ const mutationSuccessHandler = jest.fn().mockResolvedValue(updateWorkItemMutationResponse);
+
+ const findItemState = () => wrapper.findComponent(ItemState);
+
+ const createComponent = ({
+ state = STATE_OPEN,
+ mutationHandler = mutationSuccessHandler,
+ } = {}) => {
+ const { id, workItemType } = workItemQueryResponse.data.workItem;
+ wrapper = shallowMount(WorkItemState, {
+ apolloProvider: createMockApollo([[updateWorkItemMutation, mutationHandler]]),
+ propsData: {
+ workItem: {
+ id,
+ state,
+ workItemType,
+ },
+ },
+ });
+ };
+
+ afterEach(() => {
+ wrapper.destroy();
+ });
+
+ it('renders state', () => {
+ createComponent();
+
+ expect(findItemState().props('state')).toBe(workItemQueryResponse.data.workItem.state);
+ });
+
+ describe('when updating the state', () => {
+ it('calls a mutation', () => {
+ createComponent();
+
+ findItemState().vm.$emit('changed', STATE_CLOSED);
+
+ expect(mutationSuccessHandler).toHaveBeenCalledWith({
+ input: {
+ id: workItemQueryResponse.data.workItem.id,
+ stateEvent: STATE_EVENT_CLOSE,
+ },
+ });
+ });
+
+ it('calls a mutation with REOPEN', () => {
+ createComponent({
+ state: STATE_CLOSED,
+ });
+
+ findItemState().vm.$emit('changed', STATE_OPEN);
+
+ expect(mutationSuccessHandler).toHaveBeenCalledWith({
+ input: {
+ id: workItemQueryResponse.data.workItem.id,
+ stateEvent: STATE_EVENT_REOPEN,
+ },
+ });
+ });
+
+ it('emits updated event', async () => {
+ createComponent();
+
+ findItemState().vm.$emit('changed', STATE_CLOSED);
+ await waitForPromises();
+
+ expect(wrapper.emitted('updated')).toEqual([[]]);
+ });
+
+ it('emits an error message when the mutation was unsuccessful', async () => {
+ createComponent({ mutationHandler: jest.fn().mockRejectedValue('Error!') });
+
+ findItemState().vm.$emit('changed', STATE_CLOSED);
+ await waitForPromises();
+
+ expect(wrapper.emitted('error')).toEqual([[i18n.updateError]]);
+ });
+
+ it('tracks editing the state', async () => {
+ const trackingSpy = mockTracking(undefined, wrapper.element, jest.spyOn);
+
+ createComponent();
+
+ findItemState().vm.$emit('changed', STATE_CLOSED);
+ await waitForPromises();
+
+ expect(trackingSpy).toHaveBeenCalledWith('workItems:show', 'updated_state', {
+ category: 'workItems:show',
+ label: 'item_state',
+ property: 'type_Task',
+ });
+ });
+ });
+});
diff --git a/spec/frontend/work_items/components/work_item_title_spec.js b/spec/frontend/work_items/components/work_item_title_spec.js
index 9b1ef2d14e4..19b56362ac0 100644
--- a/spec/frontend/work_items/components/work_item_title_spec.js
+++ b/spec/frontend/work_items/components/work_item_title_spec.js
@@ -1,4 +1,3 @@
-import { GlLoadingIcon } from '@gitlab/ui';
import { shallowMount } from '@vue/test-utils';
import Vue from 'vue';
import VueApollo from 'vue-apollo';
@@ -18,15 +17,13 @@ describe('WorkItemTitle component', () => {
const mutationSuccessHandler = jest.fn().mockResolvedValue(updateWorkItemMutationResponse);
- const findLoadingIcon = () => wrapper.findComponent(GlLoadingIcon);
const findItemTitle = () => wrapper.findComponent(ItemTitle);
- const createComponent = ({ loading = false, mutationHandler = mutationSuccessHandler } = {}) => {
+ const createComponent = ({ mutationHandler = mutationSuccessHandler } = {}) => {
const { id, title, workItemType } = workItemQueryResponse.data.workItem;
wrapper = shallowMount(WorkItemTitle, {
apolloProvider: createMockApollo([[updateWorkItemMutation, mutationHandler]]),
propsData: {
- loading,
workItemId: id,
workItemTitle: title,
workItemType: workItemType.name,
@@ -38,32 +35,10 @@ describe('WorkItemTitle component', () => {
wrapper.destroy();
});
- describe('when loading', () => {
- beforeEach(() => {
- createComponent({ loading: true });
- });
-
- it('renders loading spinner', () => {
- expect(findLoadingIcon().exists()).toBe(true);
- });
-
- it('does not render title', () => {
- expect(findItemTitle().exists()).toBe(false);
- });
- });
-
- describe('when loaded', () => {
- beforeEach(() => {
- createComponent({ loading: false });
- });
-
- it('does not render loading spinner', () => {
- expect(findLoadingIcon().exists()).toBe(false);
- });
+ it('renders title', () => {
+ createComponent();
- it('renders title', () => {
- expect(findItemTitle().props('title')).toBe(workItemQueryResponse.data.workItem.title);
- });
+ expect(findItemTitle().props('title')).toBe(workItemQueryResponse.data.workItem.title);
});
describe('when updating the title', () => {
@@ -82,6 +57,15 @@ describe('WorkItemTitle component', () => {
});
});
+ it('emits updated event', async () => {
+ createComponent();
+
+ findItemTitle().vm.$emit('title-changed', 'new title');
+ await waitForPromises();
+
+ expect(wrapper.emitted('updated')).toEqual([[]]);
+ });
+
it('does not call a mutation when the title has not changed', () => {
createComponent();
diff --git a/spec/frontend/work_items/mock_data.js b/spec/frontend/work_items/mock_data.js
index 722e1708c15..f3483550013 100644
--- a/spec/frontend/work_items/mock_data.js
+++ b/spec/frontend/work_items/mock_data.js
@@ -4,11 +4,17 @@ export const workItemQueryResponse = {
__typename: 'WorkItem',
id: 'gid://gitlab/WorkItem/1',
title: 'Test',
+ state: 'OPEN',
+ description: 'description',
workItemType: {
__typename: 'WorkItemType',
id: 'gid://gitlab/WorkItems::Type/5',
name: 'Task',
},
+ userPermissions: {
+ deleteWorkItem: false,
+ updateWorkItem: false,
+ },
},
},
};
@@ -21,11 +27,17 @@ export const updateWorkItemMutationResponse = {
__typename: 'WorkItem',
id: 'gid://gitlab/WorkItem/1',
title: 'Updated title',
+ state: 'OPEN',
+ description: 'description',
workItemType: {
__typename: 'WorkItemType',
id: 'gid://gitlab/WorkItems::Type/5',
name: 'Task',
},
+ userPermissions: {
+ deleteWorkItem: false,
+ updateWorkItem: false,
+ },
},
},
},
@@ -39,6 +51,7 @@ export const projectWorkItemTypesQueryResponse = {
nodes: [
{ id: 'gid://gitlab/WorkItems::Type/1', name: 'Issue' },
{ id: 'gid://gitlab/WorkItems::Type/2', name: 'Incident' },
+ { id: 'gid://gitlab/WorkItems::Type/3', name: 'Task' },
],
},
},
@@ -53,11 +66,17 @@ export const createWorkItemMutationResponse = {
__typename: 'WorkItem',
id: 'gid://gitlab/WorkItem/1',
title: 'Updated title',
+ state: 'OPEN',
+ description: 'description',
workItemType: {
__typename: 'WorkItemType',
id: 'gid://gitlab/WorkItems::Type/5',
name: 'Task',
},
+ userPermissions: {
+ deleteWorkItem: false,
+ updateWorkItem: false,
+ },
},
},
},
@@ -72,6 +91,10 @@ export const createWorkItemFromTaskMutationResponse = {
descriptionHtml: '<p>New description</p>',
id: 'gid://gitlab/WorkItem/13',
__typename: 'WorkItem',
+ userPermissions: {
+ deleteWorkItem: false,
+ updateWorkItem: false,
+ },
},
},
},
diff --git a/spec/frontend/work_items/pages/create_work_item_spec.js b/spec/frontend/work_items/pages/create_work_item_spec.js
index fb1f1d56356..e89477ed599 100644
--- a/spec/frontend/work_items/pages/create_work_item_spec.js
+++ b/spec/frontend/work_items/pages/create_work_item_spec.js
@@ -158,6 +158,11 @@ describe('Create work item component', () => {
it('adds padding for content', () => {
expect(findContent().classes('gl-px-5')).toBe(true);
});
+
+ it('defaults type to `Task`', async () => {
+ await waitForPromises();
+ expect(findSelect().attributes('value')).toBe('gid://gitlab/WorkItems::Type/3');
+ });
});
it('displays a loading icon inside dropdown when work items query is loading', () => {
@@ -181,7 +186,7 @@ describe('Create work item component', () => {
});
it('displays a list of work item types', () => {
- expect(findSelect().attributes('options').split(',')).toHaveLength(3);
+ expect(findSelect().attributes('options').split(',')).toHaveLength(4);
});
it('selects a work item type on click', async () => {
diff --git a/spec/frontend/work_items/pages/work_item_detail_spec.js b/spec/frontend/work_items/pages/work_item_detail_spec.js
index 1eb6c0145e7..9f87655175c 100644
--- a/spec/frontend/work_items/pages/work_item_detail_spec.js
+++ b/spec/frontend/work_items/pages/work_item_detail_spec.js
@@ -1,10 +1,11 @@
-import { GlAlert } from '@gitlab/ui';
+import { GlAlert, GlSkeletonLoader } from '@gitlab/ui';
import { shallowMount } from '@vue/test-utils';
import Vue from 'vue';
import VueApollo from 'vue-apollo';
import createMockApollo from 'helpers/mock_apollo_helper';
import waitForPromises from 'helpers/wait_for_promises';
import WorkItemDetail from '~/work_items/components/work_item_detail.vue';
+import WorkItemState from '~/work_items/components/work_item_state.vue';
import WorkItemTitle from '~/work_items/components/work_item_title.vue';
import { i18n } from '~/work_items/constants';
import workItemQuery from '~/work_items/graphql/work_item.query.graphql';
@@ -20,7 +21,9 @@ describe('WorkItemDetail component', () => {
const initialSubscriptionHandler = jest.fn().mockResolvedValue(workItemTitleSubscriptionResponse);
const findAlert = () => wrapper.findComponent(GlAlert);
+ const findSkeleton = () => wrapper.findComponent(GlSkeletonLoader);
const findWorkItemTitle = () => wrapper.findComponent(WorkItemTitle);
+ const findWorkItemState = () => wrapper.findComponent(WorkItemState);
const createComponent = ({
workItemId = workItemQueryResponse.data.workItem.id,
@@ -55,8 +58,10 @@ describe('WorkItemDetail component', () => {
createComponent();
});
- it('renders WorkItemTitle in loading state', () => {
- expect(findWorkItemTitle().props('loading')).toBe(true);
+ it('renders skeleton loader', () => {
+ expect(findSkeleton().exists()).toBe(true);
+ expect(findWorkItemState().exists()).toBe(false);
+ expect(findWorkItemTitle().exists()).toBe(false);
});
});
@@ -66,8 +71,10 @@ describe('WorkItemDetail component', () => {
return waitForPromises();
});
- it('does not render WorkItemTitle in loading state', () => {
- expect(findWorkItemTitle().props('loading')).toBe(false);
+ it('does not render skeleton', () => {
+ expect(findSkeleton().exists()).toBe(false);
+ expect(findWorkItemState().exists()).toBe(true);
+ expect(findWorkItemTitle().exists()).toBe(true);
});
});
@@ -82,6 +89,7 @@ describe('WorkItemDetail component', () => {
it('shows an error message when WorkItemTitle emits an `error` event', async () => {
createComponent();
+ await waitForPromises();
findWorkItemTitle().vm.$emit('error', i18n.updateError);
await waitForPromises();
@@ -96,4 +104,18 @@ describe('WorkItemDetail component', () => {
issuableId: workItemQueryResponse.data.workItem.id,
});
});
+
+ it('emits workItemUpdated event when fields updated', async () => {
+ createComponent();
+
+ await waitForPromises();
+
+ findWorkItemState().vm.$emit('updated');
+
+ expect(wrapper.emitted('workItemUpdated')).toEqual([[]]);
+
+ findWorkItemTitle().vm.$emit('updated');
+
+ expect(wrapper.emitted('workItemUpdated')).toEqual([[], []]);
+ });
});
diff --git a/spec/frontend/work_items/pages/work_item_root_spec.js b/spec/frontend/work_items/pages/work_item_root_spec.js
index 2803724b9af..85096392e84 100644
--- a/spec/frontend/work_items/pages/work_item_root_spec.js
+++ b/spec/frontend/work_items/pages/work_item_root_spec.js
@@ -1,21 +1,45 @@
+import { GlAlert } from '@gitlab/ui';
import { shallowMount } from '@vue/test-utils';
import Vue from 'vue';
import VueApollo from 'vue-apollo';
+import waitForPromises from 'helpers/wait_for_promises';
+import createMockApollo from 'helpers/mock_apollo_helper';
+import { visitUrl } from '~/lib/utils/url_utility';
import WorkItemDetail from '~/work_items/components/work_item_detail.vue';
import WorkItemsRoot from '~/work_items/pages/work_item_root.vue';
+import deleteWorkItem from '~/work_items/graphql/delete_work_item.mutation.graphql';
+import { deleteWorkItemResponse, deleteWorkItemFailureResponse } from '../mock_data';
+
+jest.mock('~/lib/utils/url_utility', () => ({
+ visitUrl: jest.fn(),
+}));
Vue.use(VueApollo);
describe('Work items root component', () => {
let wrapper;
+ const issuesListPath = '/-/issues';
+ const mockToastShow = jest.fn();
const findWorkItemDetail = () => wrapper.findComponent(WorkItemDetail);
+ const findAlert = () => wrapper.findComponent(GlAlert);
- const createComponent = () => {
+ const createComponent = ({
+ deleteWorkItemHandler = jest.fn().mockResolvedValue(deleteWorkItemResponse),
+ } = {}) => {
wrapper = shallowMount(WorkItemsRoot, {
+ apolloProvider: createMockApollo([[deleteWorkItem, deleteWorkItemHandler]]),
+ provide: {
+ issuesListPath,
+ },
propsData: {
id: '1',
},
+ mocks: {
+ $toast: {
+ show: mockToastShow,
+ },
+ },
});
};
@@ -26,6 +50,38 @@ describe('Work items root component', () => {
it('renders WorkItemDetail', () => {
createComponent();
- expect(findWorkItemDetail().props()).toEqual({ workItemId: 'gid://gitlab/WorkItem/1' });
+ expect(findWorkItemDetail().props()).toEqual({
+ workItemId: 'gid://gitlab/WorkItem/1',
+ });
+ });
+
+ it('deletes work item when deleteWorkItem event emitted', async () => {
+ const deleteWorkItemHandler = jest.fn().mockResolvedValue(deleteWorkItemResponse);
+
+ createComponent({
+ deleteWorkItemHandler,
+ });
+
+ findWorkItemDetail().vm.$emit('deleteWorkItem');
+
+ await waitForPromises();
+
+ expect(deleteWorkItemHandler).toHaveBeenCalled();
+ expect(mockToastShow).toHaveBeenCalled();
+ expect(visitUrl).toHaveBeenCalledWith(issuesListPath);
+ });
+
+ it('shows alert if delete fails', async () => {
+ const deleteWorkItemHandler = jest.fn().mockRejectedValue(deleteWorkItemFailureResponse);
+
+ createComponent({
+ deleteWorkItemHandler,
+ });
+
+ findWorkItemDetail().vm.$emit('deleteWorkItem');
+
+ await waitForPromises();
+
+ expect(findAlert().exists()).toBe(true);
});
});
diff --git a/spec/frontend/work_items/router_spec.js b/spec/frontend/work_items/router_spec.js
index 7e68c5e4f0e..99dcd886f7b 100644
--- a/spec/frontend/work_items/router_spec.js
+++ b/spec/frontend/work_items/router_spec.js
@@ -17,6 +17,7 @@ describe('Work items router', () => {
router,
provide: {
fullPath: 'full-path',
+ issuesListPath: 'full-path/-/issues',
},
mocks: {
$apollo: {