1 files changed, 66 insertions, 11 deletions
diff --git a/spec/frontend/vue_shared/components/sidebar/labels_select_widget/labels_select_root_spec.js b/spec/frontend/vue_shared/components/sidebar/labels_select_widget/labels_select_root_spec.js
index d4203528874..a4199bb3e27 100644
--- a/spec/frontend/vue_shared/components/sidebar/labels_select_widget/labels_select_root_spec.js
+++ b/spec/frontend/vue_shared/components/sidebar/labels_select_widget/labels_select_root_spec.js
@@ -1,25 +1,34 @@
-import { shallowMount, createLocalVue } from '@vue/test-utils';
-import { nextTick } from 'vue';
+import { shallowMount } from '@vue/test-utils';
+import Vue, { nextTick } from 'vue';
 import VueApollo from 'vue-apollo';
 import createMockApollo from 'helpers/mock_apollo_helper';
 import waitForPromises from 'helpers/wait_for_promises';
 import createFlash from '~/flash';
-import { IssuableType } from '~/issue_show/constants';
+import { IssuableType } from '~/issues/constants';
 import SidebarEditableItem from '~/sidebar/components/sidebar_editable_item.vue';
 import DropdownContents from '~/vue_shared/components/sidebar/labels_select_widget/dropdown_contents.vue';
 import DropdownValue from '~/vue_shared/components/sidebar/labels_select_widget/dropdown_value.vue';
 import issueLabelsQuery from '~/vue_shared/components/sidebar/labels_select_widget/graphql/issue_labels.query.graphql';
+import updateIssueLabelsMutation from '~/boards/graphql/issue_set_labels.mutation.graphql';
+import updateMergeRequestLabelsMutation from '~/sidebar/queries/update_merge_request_labels.mutation.graphql';
+import updateEpicLabelsMutation from '~/vue_shared/components/sidebar/labels_select_widget/graphql/epic_update_labels.mutation.graphql';
 import LabelsSelectRoot from '~/vue_shared/components/sidebar/labels_select_widget/labels_select_root.vue';
-import { mockConfig, issuableLabelsQueryResponse } from './mock_data';
+import { mockConfig, issuableLabelsQueryResponse, updateLabelsMutationResponse } from './mock_data';
 
 jest.mock('~/flash');
 
-const localVue = createLocalVue();
-localVue.use(VueApollo);
+Vue.use(VueApollo);
 
 const successfulQueryHandler = jest.fn().mockResolvedValue(issuableLabelsQueryResponse);
+const successfulMutationHandler = jest.fn().mockResolvedValue(updateLabelsMutationResponse);
 const errorQueryHandler = jest.fn().mockRejectedValue('Houston, we have a problem');
 
+const updateLabelsMutation = {
+  [IssuableType.Issue]: updateIssueLabelsMutation,
+  [IssuableType.MergeRequest]: updateMergeRequestLabelsMutation,
+  [IssuableType.Epic]: updateEpicLabelsMutation,
+};
+
 describe('LabelsSelectRoot', () => {
   let wrapper;
 
@@ -30,17 +39,21 @@ describe('LabelsSelectRoot', () => {
   const createComponent = ({
     config = mockConfig,
     slots = {},
+    issuableType = IssuableType.Issue,
     queryHandler = successfulQueryHandler,
+    mutationHandler = successfulMutationHandler,
   } = {}) => {
-    const mockApollo = createMockApollo([[issueLabelsQuery, queryHandler]]);
+    const mockApollo = createMockApollo([
+      [issueLabelsQuery, queryHandler],
+      [updateLabelsMutation[issuableType], mutationHandler],
+    ]);
 
     wrapper = shallowMount(LabelsSelectRoot, {
       slots,
       apolloProvider: mockApollo,
-      localVue,
       propsData: {
         ...config,
-        issuableType: IssuableType.Issue,
+        issuableType,
         labelCreateType: 'project',
         workspaceType: 'project',
       },
@@ -60,9 +73,9 @@ describe('LabelsSelectRoot', () => {
     wrapper.destroy();
   });
 
-  it('renders component with classes `labels-select-wrapper position-relative`', () => {
+  it('renders component with classes `labels-select-wrapper gl-relative`', () => {
     createComponent();
-    expect(wrapper.classes()).toEqual(['labels-select-wrapper', 'position-relative']);
+    expect(wrapper.classes()).toEqual(['labels-select-wrapper', 'gl-relative']);
   });
 
   it.each`
@@ -130,4 +143,46 @@ describe('LabelsSelectRoot', () => {
     findDropdownContents().vm.$emit('setLabels', [label]);
     expect(wrapper.emitted('updateSelectedLabels')).toEqual([[{ labels: [label] }]]);
   });
+
+  describe.each`
+    issuableType
+    ${IssuableType.Issue}
+    ${IssuableType.MergeRequest}
+    ${IssuableType.Epic}
+  `('when updating labels for $issuableType', ({ issuableType }) => {
+    const label = { id: 'gid://gitlab/ProjectLabel/2' };
+
+    it('sets the loading state', async () => {
+      createComponent({ issuableType });
+      await nextTick();
+      findDropdownContents().vm.$emit('setLabels', [label]);
+      await nextTick();
+
+      expect(findSidebarEditableItem().props('loading')).toBe(true);
+    });
+
+    it('updates labels correctly after successful mutation', async () => {
+      createComponent({ issuableType });
+      await nextTick();
+      findDropdownContents().vm.$emit('setLabels', [label]);
+      await waitForPromises();
+
+      expect(findDropdownValue().props('selectedLabels')).toEqual(
+        updateLabelsMutationResponse.data.updateIssuableLabels.issuable.labels.nodes,
+      );
+    });
+
+    it('displays an error if mutation was rejected', async () => {
+      createComponent({ issuableType, mutationHandler: errorQueryHandler });
+      await nextTick();
+      findDropdownContents().vm.$emit('setLabels', [label]);
+      await waitForPromises();
+
+      expect(createFlash).toHaveBeenCalledWith({
+        captureError: true,
+        error: expect.anything(),
+        message: 'An error occurred while updating labels.',
+      });
+    });
+  });
 });