1 files changed, 54 insertions, 4 deletions

diff --git a/spec/frontend/boards/components/sidebar/board_sidebar_title_spec.js b/spec/frontend/boards/components/sidebar/board_sidebar_title_spec.js
index b71d6b7e138..fae3b0c5d1a 100644
--- a/spec/frontend/boards/components/sidebar/board_sidebar_title_spec.js
+++ b/spec/frontend/boards/components/sidebar/board_sidebar_title_spec.js
@@ -1,10 +1,17 @@
 import { GlAlert, GlFormInput, GlForm, GlLink } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
-import { nextTick } from 'vue';
+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 BoardEditableItem from '~/boards/components/sidebar/board_editable_item.vue';
 import BoardSidebarTitle from '~/boards/components/sidebar/board_sidebar_title.vue';
 import { createStore } from '~/boards/stores';
+import issueSetTitleMutation from '~/boards/graphql/issue_set_title.mutation.graphql';
+import updateEpicTitleMutation from '~/sidebar/queries/update_epic_title.mutation.graphql';
+import { updateIssueTitleResponse, updateEpicTitleResponse } from '../../mock_data';
+
+Vue.use(VueApollo);
 
 const TEST_TITLE = 'New item title';
 const TEST_ISSUE_A = {
@@ -25,22 +32,37 @@ const TEST_ISSUE_B = {
 describe('BoardSidebarTitle', () => {
   let wrapper;
   let store;
+  let mockApollo;
+
+  const issueSetTitleMutationHandlerSuccess = jest.fn().mockResolvedValue(updateIssueTitleResponse);
+  const updateEpicTitleMutationHandlerSuccess = jest
+    .fn()
+    .mockResolvedValue(updateEpicTitleResponse);
 
   afterEach(() => {
     localStorage.clear();
     store = null;
   });
 
-  const createWrapper = (item = TEST_ISSUE_A) => {
+  const createWrapper = ({ item = TEST_ISSUE_A, provide = {} } = {}) => {
     store = createStore();
     store.state.boardItems = { [item.id]: { ...item } };
     store.dispatch('setActiveId', { id: item.id });
+    mockApollo = createMockApollo([
+      [issueSetTitleMutation, issueSetTitleMutationHandlerSuccess],
+      [updateEpicTitleMutation, updateEpicTitleMutationHandlerSuccess],
+    ]);
 
     wrapper = shallowMount(BoardSidebarTitle, {
       store,
+      apolloProvider: mockApollo,
       provide: {
         canUpdate: true,
+        fullPath: 'gitlab-org',
+        issuableType: 'issue',
+        isEpicBoard: false,
         isApolloBoard: false,
+        ...provide,
       },
       propsData: {
         activeItem: item,
@@ -155,7 +177,7 @@ describe('BoardSidebarTitle', () => {
 
   describe('when cancel button is clicked', () => {
     beforeEach(async () => {
-      createWrapper(TEST_ISSUE_B);
+      createWrapper({ item: TEST_ISSUE_B });
 
       jest.spyOn(wrapper.vm, 'setActiveItemTitle').mockImplementation(() => {
         store.state.boardItems[TEST_ISSUE_B.id].title = TEST_TITLE;
@@ -174,7 +196,7 @@ describe('BoardSidebarTitle', () => {
 
   describe('when the mutation fails', () => {
     beforeEach(async () => {
-      createWrapper(TEST_ISSUE_B);
+      createWrapper({ item: TEST_ISSUE_B });
 
       jest.spyOn(wrapper.vm, 'setActiveItemTitle').mockImplementation(() => {
         throw new Error(['failed mutation']);
@@ -191,4 +213,32 @@ describe('BoardSidebarTitle', () => {
       expect(wrapper.vm.setError).toHaveBeenCalled();
     });
   });
+
+  describe('Apollo boards', () => {
+    it.each`
+      issuableType | isEpicBoard | queryHandler                             | notCalledHandler
+      ${'issue'}   | ${false}    | ${issueSetTitleMutationHandlerSuccess}   | ${updateEpicTitleMutationHandlerSuccess}
+      ${'epic'}    | ${true}     | ${updateEpicTitleMutationHandlerSuccess} | ${issueSetTitleMutationHandlerSuccess}
+    `(
+      'updates $issuableType title',
+      async ({ issuableType, isEpicBoard, queryHandler, notCalledHandler }) => {
+        createWrapper({
+          provide: {
+            issuableType,
+            isEpicBoard,
+            isApolloBoard: true,
+          },
+        });
+
+        await nextTick();
+
+        findFormInput().vm.$emit('input', TEST_TITLE);
+        findForm().vm.$emit('submit', { preventDefault: () => {} });
+        await nextTick();
+
+        expect(queryHandler).toHaveBeenCalled();
+        expect(notCalledHandler).not.toHaveBeenCalled();
+      },
+    );
+  });
 });