Add latest changes from gitlab-org/gitlab@14-9-stable-eev14.9.0-rc42

5 files changed, 119 insertions, 51 deletions

diff --git a/spec/frontend/work_items/components/work_item_detail_spec.js b/spec/frontend/work_items/components/work_item_detail_spec.js
new file mode 100644
index 00000000000..305f43ad8ba
--- /dev/null
+++ b/spec/frontend/work_items/components/work_item_detail_spec.js
@@ -0,0 +1,40 @@
+import { GlModal } 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 WorkItemTitle from '~/work_items/components/item_title.vue';
+import WorkItemDetailModal from '~/work_items/components/work_item_detail_modal.vue';
+import { resolvers } from '~/work_items/graphql/resolvers';
+
+describe('WorkItemDetailModal component', () => {
+  let wrapper;
+
+  Vue.use(VueApollo);
+
+  const findModal = () => wrapper.findComponent(GlModal);
+  const findWorkItemTitle = () => wrapper.findComponent(WorkItemTitle);
+
+  const createComponent = () => {
+    wrapper = shallowMount(WorkItemDetailModal, {
+      apolloProvider: createMockApollo([], resolvers),
+      propsData: { visible: true },
+    });
+  };
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  it('renders modal', () => {
+    createComponent();
+
+    expect(findModal().props()).toMatchObject({ visible: true });
+  });
+
+  it('renders work item title', () => {
+    createComponent();
+
+    expect(findWorkItemTitle().exists()).toBe(true);
+  });
+});
diff --git a/spec/frontend/work_items/mock_data.js b/spec/frontend/work_items/mock_data.js
index a98722bc465..832795fc4ac 100644
--- a/spec/frontend/work_items/mock_data.js
+++ b/spec/frontend/work_items/mock_data.js
@@ -1,8 +1,12 @@
 export const workItemQueryResponse = {
   workItem: {
-    __typename: 'LocalWorkItem',
+    __typename: 'WorkItem',
     id: '1',
-    type: 'FEATURE',
+    title: 'Test',
+    workItemType: {
+      __typename: 'WorkItemType',
+      id: 'work-item-type-1',
+    },
     widgets: {
       __typename: 'LocalWorkItemWidgetConnection',
       nodes: [
@@ -17,20 +21,29 @@ export const workItemQueryResponse = {
 };
 
 export const updateWorkItemMutationResponse = {
-  __typename: 'LocalUpdateWorkItemPayload',
-  workItem: {
-    __typename: 'LocalWorkItem',
-    id: '1',
-    widgets: {
-      __typename: 'LocalWorkItemWidgetConnection',
-      nodes: [
-        {
-          __typename: 'LocalTitleWidget',
-          type: 'TITLE',
-          enabled: true,
-          contentText: 'Updated title',
+  data: {
+    workItemUpdate: {
+      __typename: 'LocalUpdateWorkItemPayload',
+      workItem: {
+        __typename: 'LocalWorkItem',
+        id: '1',
+        title: 'Updated title',
+        workItemType: {
+          __typename: 'WorkItemType',
+          id: 'work-item-type-1',
         },
-      ],
+        widgets: {
+          __typename: 'LocalWorkItemWidgetConnection',
+          nodes: [
+            {
+              __typename: 'LocalTitleWidget',
+              type: 'TITLE',
+              enabled: true,
+              contentText: 'Updated title',
+            },
+          ],
+        },
+      },
     },
   },
 };
@@ -48,3 +61,20 @@ export const projectWorkItemTypesQueryResponse = {
     },
   },
 };
+
+export const createWorkItemMutationResponse = {
+  data: {
+    workItemCreate: {
+      __typename: 'WorkItemCreatePayload',
+      workItem: {
+        __typename: 'WorkItem',
+        id: '1',
+        title: 'Updated title',
+        workItemType: {
+          __typename: 'WorkItemType',
+          id: 'work-item-type-1',
+        },
+      },
+    },
+  },
+};
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 b9fef0eaa6a..185b05c5191 100644
--- a/spec/frontend/work_items/pages/create_work_item_spec.js
+++ b/spec/frontend/work_items/pages/create_work_item_spec.js
@@ -8,7 +8,10 @@ import CreateWorkItem from '~/work_items/pages/create_work_item.vue';
 import ItemTitle from '~/work_items/components/item_title.vue';
 import { resolvers } from '~/work_items/graphql/resolvers';
 import projectWorkItemTypesQuery from '~/work_items/graphql/project_work_item_types.query.graphql';
-import { projectWorkItemTypesQueryResponse } from '../mock_data';
+import createWorkItemMutation from '~/work_items/graphql/create_work_item.mutation.graphql';
+import { projectWorkItemTypesQueryResponse, createWorkItemMutationResponse } from '../mock_data';
+
+jest.mock('~/lib/utils/uuids', () => ({ uuids: () => ['testuuid'] }));
 
 Vue.use(VueApollo);
 
@@ -17,6 +20,7 @@ describe('Create work item component', () => {
   let fakeApollo;
 
   const querySuccessHandler = jest.fn().mockResolvedValue(projectWorkItemTypesQueryResponse);
+  const mutationSuccessHandler = jest.fn().mockResolvedValue(createWorkItemMutationResponse);
 
   const findAlert = () => wrapper.findComponent(GlAlert);
   const findTitleInput = () => wrapper.findComponent(ItemTitle);
@@ -28,8 +32,19 @@ describe('Create work item component', () => {
   const findContent = () => wrapper.find('[data-testid="content"]');
   const findLoadingTypesIcon = () => wrapper.find('[data-testid="loading-types"]');
 
-  const createComponent = ({ data = {}, props = {}, queryHandler = querySuccessHandler } = {}) => {
-    fakeApollo = createMockApollo([[projectWorkItemTypesQuery, queryHandler]], resolvers);
+  const createComponent = ({
+    data = {},
+    props = {},
+    queryHandler = querySuccessHandler,
+    mutationHandler = mutationSuccessHandler,
+  } = {}) => {
+    fakeApollo = createMockApollo(
+      [
+        [projectWorkItemTypesQuery, queryHandler],
+        [createWorkItemMutation, mutationHandler],
+      ],
+      resolvers,
+    );
     wrapper = shallowMount(CreateWorkItem, {
       apolloProvider: fakeApollo,
       data() {
@@ -124,7 +139,8 @@ describe('Create work item component', () => {
       wrapper.find('form').trigger('submit');
       await waitForPromises();
 
-      expect(wrapper.emitted('onCreate')).toEqual([[mockTitle]]);
+      const expected = { id: '1', title: mockTitle };
+      expect(wrapper.emitted('onCreate')).toEqual([[expected]]);
     });
 
     it('does not right margin for create button', () => {
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 d0e40680b55..728495e0e23 100644
--- a/spec/frontend/work_items/pages/work_item_root_spec.js
+++ b/spec/frontend/work_items/pages/work_item_root_spec.js
@@ -9,11 +9,12 @@ import updateWorkItemMutation from '~/work_items/graphql/update_work_item.mutati
 import WorkItemsRoot from '~/work_items/pages/work_item_root.vue';
 import ItemTitle from '~/work_items/components/item_title.vue';
 import { resolvers } from '~/work_items/graphql/resolvers';
-import { workItemQueryResponse } from '../mock_data';
+import { workItemQueryResponse, updateWorkItemMutationResponse } from '../mock_data';
 
 Vue.use(VueApollo);
 
 const WORK_ITEM_ID = '1';
+const WORK_ITEM_GID = `gid://gitlab/WorkItem/${WORK_ITEM_ID}`;
 
 describe('Work items root component', () => {
   const mockUpdatedTitle = 'Updated title';
@@ -23,15 +24,19 @@ describe('Work items root component', () => {
   const findTitle = () => wrapper.findComponent(ItemTitle);
 
   const createComponent = ({ queryResponse = workItemQueryResponse } = {}) => {
-    fakeApollo = createMockApollo([], resolvers, {
-      possibleTypes: {
-        LocalWorkItemWidget: ['LocalTitleWidget'],
+    fakeApollo = createMockApollo(
+      [[updateWorkItemMutation, jest.fn().mockResolvedValue(updateWorkItemMutationResponse)]],
+      resolvers,
+      {
+        possibleTypes: {
+          LocalWorkItemWidget: ['LocalTitleWidget'],
+        },
       },
-    });
+    );
     fakeApollo.clients.defaultClient.cache.writeQuery({
       query: workItemQuery,
       variables: {
-        id: WORK_ITEM_ID,
+        id: WORK_ITEM_GID,
       },
       data: queryResponse,
     });
@@ -49,7 +54,7 @@ describe('Work items root component', () => {
     fakeApollo = null;
   });
 
-  it('renders the title if title is in the widgets list', () => {
+  it('renders the title', () => {
     createComponent();
 
     expect(findTitle().exists()).toBe(true);
@@ -66,35 +71,11 @@ describe('Work items root component', () => {
       mutation: updateWorkItemMutation,
       variables: {
         input: {
-          id: WORK_ITEM_ID,
+          id: WORK_ITEM_GID,
           title: mockUpdatedTitle,
         },
       },
     });
-
-    await waitForPromises();
-    expect(findTitle().props('initialTitle')).toBe(mockUpdatedTitle);
-  });
-
-  it('does not render the title if title is not in the widgets list', () => {
-    const queryResponse = {
-      workItem: {
-        ...workItemQueryResponse.workItem,
-        widgets: {
-          __typename: 'WorkItemWidgetConnection',
-          nodes: [
-            {
-              __typename: 'SomeOtherWidget',
-              type: 'OTHER',
-              contentText: 'Test',
-            },
-          ],
-        },
-      },
-    };
-    createComponent({ queryResponse });
-
-    expect(findTitle().exists()).toBe(false);
   });
 
   describe('tracking', () => {
diff --git a/spec/frontend/work_items/router_spec.js b/spec/frontend/work_items/router_spec.js
index c583b5a5d4f..8c9054920a8 100644
--- a/spec/frontend/work_items/router_spec.js
+++ b/spec/frontend/work_items/router_spec.js
@@ -21,6 +21,7 @@ describe('Work items router', () => {
       mocks: {
         $apollo: {
           queries: {
+            workItem: {},
             workItemTypes: {},
           },
         },