Add latest changes from gitlab-org/gitlab@14-10-stable-eev14.10.0-rc42

3 files changed, 151 insertions, 112 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 185b05c5191..fb1f1d56356 100644
--- a/spec/frontend/work_items/pages/create_work_item_spec.js
+++ b/spec/frontend/work_items/pages/create_work_item_spec.js
@@ -1,15 +1,19 @@
 import Vue, { nextTick } from 'vue';
 import VueApollo from 'vue-apollo';
-import { GlAlert, GlDropdown, GlDropdownItem } from '@gitlab/ui';
+import { GlAlert, GlFormSelect } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 import createMockApollo from 'helpers/mock_apollo_helper';
 import waitForPromises from 'helpers/wait_for_promises';
 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 createWorkItemMutation from '~/work_items/graphql/create_work_item.mutation.graphql';
-import { projectWorkItemTypesQueryResponse, createWorkItemMutationResponse } from '../mock_data';
+import createWorkItemFromTaskMutation from '~/work_items/graphql/create_work_item_from_task.mutation.graphql';
+import {
+  projectWorkItemTypesQueryResponse,
+  createWorkItemMutationResponse,
+  createWorkItemFromTaskMutationResponse,
+} from '../mock_data';
 
 jest.mock('~/lib/utils/uuids', () => ({ uuids: () => ['testuuid'] }));
 
@@ -20,12 +24,15 @@ describe('Create work item component', () => {
   let fakeApollo;
 
   const querySuccessHandler = jest.fn().mockResolvedValue(projectWorkItemTypesQueryResponse);
-  const mutationSuccessHandler = jest.fn().mockResolvedValue(createWorkItemMutationResponse);
+  const createWorkItemSuccessHandler = jest.fn().mockResolvedValue(createWorkItemMutationResponse);
+  const createWorkItemFromTaskSuccessHandler = jest
+    .fn()
+    .mockResolvedValue(createWorkItemFromTaskMutationResponse);
+  const errorHandler = jest.fn().mockRejectedValue('Houston, we have a problem');
 
   const findAlert = () => wrapper.findComponent(GlAlert);
   const findTitleInput = () => wrapper.findComponent(ItemTitle);
-  const findDropdown = () => wrapper.findComponent(GlDropdown);
-  const findDropdownItems = () => wrapper.findAllComponents(GlDropdownItem);
+  const findSelect = () => wrapper.findComponent(GlFormSelect);
 
   const findCreateButton = () => wrapper.find('[data-testid="create-button"]');
   const findCancelButton = () => wrapper.find('[data-testid="cancel-button"]');
@@ -36,15 +43,13 @@ describe('Create work item component', () => {
     data = {},
     props = {},
     queryHandler = querySuccessHandler,
-    mutationHandler = mutationSuccessHandler,
+    mutationHandler = createWorkItemSuccessHandler,
   } = {}) => {
-    fakeApollo = createMockApollo(
-      [
-        [projectWorkItemTypesQuery, queryHandler],
-        [createWorkItemMutation, mutationHandler],
-      ],
-      resolvers,
-    );
+    fakeApollo = createMockApollo([
+      [projectWorkItemTypesQuery, queryHandler],
+      [createWorkItemMutation, mutationHandler],
+      [createWorkItemFromTaskMutation, mutationHandler],
+    ]);
     wrapper = shallowMount(CreateWorkItem, {
       apolloProvider: fakeApollo,
       data() {
@@ -123,6 +128,7 @@ describe('Create work item component', () => {
         props: {
           isModal: true,
         },
+        mutationHandler: createWorkItemFromTaskSuccessHandler,
       });
     });
 
@@ -133,14 +139,12 @@ describe('Create work item component', () => {
     });
 
     it('emits `onCreate` on successful mutation', async () => {
-      const mockTitle = 'Test title';
       findTitleInput().vm.$emit('title-input', 'Test title');
 
       wrapper.find('form').trigger('submit');
       await waitForPromises();
 
-      const expected = { id: '1', title: mockTitle };
-      expect(wrapper.emitted('onCreate')).toEqual([[expected]]);
+      expect(wrapper.emitted('onCreate')).toEqual([['<p>New description</p>']]);
     });
 
     it('does not right margin for create button', () => {
@@ -177,16 +181,14 @@ describe('Create work item component', () => {
     });
 
     it('displays a list of work item types', () => {
-      expect(findDropdownItems()).toHaveLength(2);
-      expect(findDropdownItems().at(0).text()).toContain('Issue');
+      expect(findSelect().attributes('options').split(',')).toHaveLength(3);
     });
 
     it('selects a work item type on click', async () => {
-      expect(findDropdown().props('text')).toBe('Type');
-      findDropdownItems().at(0).vm.$emit('click');
+      const mockId = 'work-item-1';
+      findSelect().vm.$emit('input', mockId);
       await nextTick();
-
-      expect(findDropdown().props('text')).toBe('Issue');
+      expect(findSelect().attributes('value')).toBe(mockId);
     });
   });
 
@@ -206,21 +208,36 @@ describe('Create work item component', () => {
     createComponent({
       props: { initialTitle },
     });
-    expect(findTitleInput().props('initialTitle')).toBe(initialTitle);
+    expect(findTitleInput().props('title')).toBe(initialTitle);
   });
 
   describe('when title input field has a text', () => {
-    beforeEach(() => {
+    beforeEach(async () => {
       const mockTitle = 'Test title';
       createComponent();
+      await waitForPromises();
       findTitleInput().vm.$emit('title-input', mockTitle);
     });
 
-    it('renders a non-disabled Create button', () => {
+    it('renders a disabled Create button', () => {
+      expect(findCreateButton().props('disabled')).toBe(true);
+    });
+
+    it('renders a non-disabled Create button when work item type is selected', async () => {
+      findSelect().vm.$emit('input', 'work-item-1');
+      await nextTick();
       expect(findCreateButton().props('disabled')).toBe(false);
     });
+  });
+
+  it('shows an alert on mutation error', async () => {
+    createComponent({ mutationHandler: errorHandler });
+    await waitForPromises();
+    findTitleInput().vm.$emit('title-input', 'some title');
+    findSelect().vm.$emit('input', 'work-item-1');
+    wrapper.find('form').trigger('submit');
+    await waitForPromises();
 
-    // TODO: write a proper test here when we have a backend implementation
-    it.todo('shows an alert on mutation error');
+    expect(findAlert().text()).toBe(CreateWorkItem.createErrorText);
   });
 });
diff --git a/spec/frontend/work_items/pages/work_item_detail_spec.js b/spec/frontend/work_items/pages/work_item_detail_spec.js
new file mode 100644
index 00000000000..1eb6c0145e7
--- /dev/null
+++ b/spec/frontend/work_items/pages/work_item_detail_spec.js
@@ -0,0 +1,99 @@
+import { GlAlert } 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 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';
+import workItemTitleSubscription from '~/work_items/graphql/work_item_title.subscription.graphql';
+import { workItemTitleSubscriptionResponse, workItemQueryResponse } from '../mock_data';
+
+describe('WorkItemDetail component', () => {
+  let wrapper;
+
+  Vue.use(VueApollo);
+
+  const successHandler = jest.fn().mockResolvedValue(workItemQueryResponse);
+  const initialSubscriptionHandler = jest.fn().mockResolvedValue(workItemTitleSubscriptionResponse);
+
+  const findAlert = () => wrapper.findComponent(GlAlert);
+  const findWorkItemTitle = () => wrapper.findComponent(WorkItemTitle);
+
+  const createComponent = ({
+    workItemId = workItemQueryResponse.data.workItem.id,
+    handler = successHandler,
+    subscriptionHandler = initialSubscriptionHandler,
+  } = {}) => {
+    wrapper = shallowMount(WorkItemDetail, {
+      apolloProvider: createMockApollo([
+        [workItemQuery, handler],
+        [workItemTitleSubscription, subscriptionHandler],
+      ]),
+      propsData: { workItemId },
+    });
+  };
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  describe('when there is no `workItemId` prop', () => {
+    beforeEach(() => {
+      createComponent({ workItemId: null });
+    });
+
+    it('skips the work item query', () => {
+      expect(successHandler).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('when loading', () => {
+    beforeEach(() => {
+      createComponent();
+    });
+
+    it('renders WorkItemTitle in loading state', () => {
+      expect(findWorkItemTitle().props('loading')).toBe(true);
+    });
+  });
+
+  describe('when loaded', () => {
+    beforeEach(() => {
+      createComponent();
+      return waitForPromises();
+    });
+
+    it('does not render WorkItemTitle in loading state', () => {
+      expect(findWorkItemTitle().props('loading')).toBe(false);
+    });
+  });
+
+  it('shows an error message when the work item query was unsuccessful', async () => {
+    const errorHandler = jest.fn().mockRejectedValue('Oops');
+    createComponent({ handler: errorHandler });
+    await waitForPromises();
+
+    expect(errorHandler).toHaveBeenCalled();
+    expect(findAlert().text()).toBe(i18n.fetchError);
+  });
+
+  it('shows an error message when WorkItemTitle emits an `error` event', async () => {
+    createComponent();
+
+    findWorkItemTitle().vm.$emit('error', i18n.updateError);
+    await waitForPromises();
+
+    expect(findAlert().text()).toBe(i18n.updateError);
+  });
+
+  it('calls the subscription', () => {
+    createComponent();
+
+    expect(initialSubscriptionHandler).toHaveBeenCalledWith({
+      issuableId: workItemQueryResponse.data.workItem.id,
+    });
+  });
+});
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 728495e0e23..2803724b9af 100644
--- a/spec/frontend/work_items/pages/work_item_root_spec.js
+++ b/spec/frontend/work_items/pages/work_item_root_spec.js
@@ -1,108 +1,31 @@
-import Vue from 'vue';
 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 { mockTracking, unmockTracking } from 'helpers/tracking_helper';
-import workItemQuery from '~/work_items/graphql/work_item.query.graphql';
-import updateWorkItemMutation from '~/work_items/graphql/update_work_item.mutation.graphql';
+import WorkItemDetail from '~/work_items/components/work_item_detail.vue';
 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, 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';
   let wrapper;
-  let fakeApollo;
-
-  const findTitle = () => wrapper.findComponent(ItemTitle);
 
-  const createComponent = ({ queryResponse = workItemQueryResponse } = {}) => {
-    fakeApollo = createMockApollo(
-      [[updateWorkItemMutation, jest.fn().mockResolvedValue(updateWorkItemMutationResponse)]],
-      resolvers,
-      {
-        possibleTypes: {
-          LocalWorkItemWidget: ['LocalTitleWidget'],
-        },
-      },
-    );
-    fakeApollo.clients.defaultClient.cache.writeQuery({
-      query: workItemQuery,
-      variables: {
-        id: WORK_ITEM_GID,
-      },
-      data: queryResponse,
-    });
+  const findWorkItemDetail = () => wrapper.findComponent(WorkItemDetail);
 
+  const createComponent = () => {
     wrapper = shallowMount(WorkItemsRoot, {
       propsData: {
-        id: WORK_ITEM_ID,
+        id: '1',
       },
-      apolloProvider: fakeApollo,
     });
   };
 
   afterEach(() => {
     wrapper.destroy();
-    fakeApollo = null;
   });
 
-  it('renders the title', () => {
+  it('renders WorkItemDetail', () => {
     createComponent();
 
-    expect(findTitle().exists()).toBe(true);
-    expect(findTitle().props('initialTitle')).toBe('Test');
-  });
-
-  it('updates the title when it is edited', async () => {
-    createComponent();
-    jest.spyOn(wrapper.vm.$apollo, 'mutate');
-
-    await findTitle().vm.$emit('title-changed', mockUpdatedTitle);
-
-    expect(wrapper.vm.$apollo.mutate).toHaveBeenCalledWith({
-      mutation: updateWorkItemMutation,
-      variables: {
-        input: {
-          id: WORK_ITEM_GID,
-          title: mockUpdatedTitle,
-        },
-      },
-    });
-  });
-
-  describe('tracking', () => {
-    let trackingSpy;
-
-    beforeEach(() => {
-      trackingSpy = mockTracking('_category_', undefined, jest.spyOn);
-
-      createComponent();
-    });
-
-    afterEach(() => {
-      unmockTracking();
-    });
-
-    it('tracks item title updates', async () => {
-      await findTitle().vm.$emit('title-changed', mockUpdatedTitle);
-
-      await waitForPromises();
-
-      expect(trackingSpy).toHaveBeenCalledTimes(1);
-      expect(trackingSpy).toHaveBeenCalledWith('workItems:show', undefined, {
-        action: 'updated_title',
-        category: 'workItems:show',
-        label: 'item_title',
-        property: '[type_work_item]',
-      });
-    });
+    expect(findWorkItemDetail().props()).toEqual({ workItemId: 'gid://gitlab/WorkItem/1' });
   });
 });