Add latest changes from gitlab-org/gitlab@15-0-stable-eev15.0.0-rc42

3 files changed, 91 insertions, 8 deletions

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);
   });
 });