Add latest changes from gitlab-org/gitlab@14-6-stable-eev14.6.0-rc42

2 files changed, 125 insertions, 7 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
new file mode 100644
index 00000000000..71e153d30c3
--- /dev/null
+++ b/spec/frontend/work_items/pages/create_work_item_spec.js
@@ -0,0 +1,94 @@
+import Vue, { nextTick } from 'vue';
+import VueApollo from 'vue-apollo';
+import { GlAlert } 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';
+
+Vue.use(VueApollo);
+
+describe('Create work item component', () => {
+  let wrapper;
+  let fakeApollo;
+
+  const findAlert = () => wrapper.findComponent(GlAlert);
+  const findTitleInput = () => wrapper.findComponent(ItemTitle);
+  const findCreateButton = () => wrapper.find('[data-testid="create-button"]');
+  const findCancelButton = () => wrapper.find('[data-testid="cancel-button"]');
+
+  const createComponent = ({ data = {} } = {}) => {
+    fakeApollo = createMockApollo([], resolvers);
+    wrapper = shallowMount(CreateWorkItem, {
+      apolloProvider: fakeApollo,
+      data() {
+        return {
+          ...data,
+        };
+      },
+      mocks: {
+        $router: {
+          go: jest.fn(),
+          push: jest.fn(),
+        },
+      },
+    });
+  };
+
+  afterEach(() => {
+    wrapper.destroy();
+    fakeApollo = null;
+  });
+
+  it('does not render error by default', () => {
+    createComponent();
+
+    expect(findAlert().exists()).toBe(false);
+  });
+
+  it('renders a disabled Create button when title input is empty', () => {
+    createComponent();
+
+    expect(findCreateButton().props('disabled')).toBe(true);
+  });
+
+  it('redirects to the previous page on Cancel button click', () => {
+    createComponent();
+    findCancelButton().vm.$emit('click');
+
+    expect(wrapper.vm.$router.go).toHaveBeenCalledWith(-1);
+  });
+
+  it('hides the alert on dismissing the error', async () => {
+    createComponent({ data: { error: true } });
+    expect(findAlert().exists()).toBe(true);
+
+    findAlert().vm.$emit('dismiss');
+    await nextTick();
+    expect(findAlert().exists()).toBe(false);
+  });
+
+  describe('when title input field has a text', () => {
+    beforeEach(async () => {
+      const mockTitle = 'Test title';
+      createComponent();
+      await findTitleInput().vm.$emit('title-input', mockTitle);
+    });
+
+    it('renders a non-disabled Create button', () => {
+      expect(findCreateButton().props('disabled')).toBe(false);
+    });
+
+    it('redirects to the work item page on successful mutation', async () => {
+      wrapper.find('form').trigger('submit');
+      await waitForPromises();
+
+      expect(wrapper.vm.$router.push).toHaveBeenCalled();
+    });
+
+    // TODO: write a proper test here when we have a backend implementation
+    it.todo('shows an alert on mutation error');
+  });
+});
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 64d02baed36..02795751f33 100644
--- a/spec/frontend/work_items/pages/work_item_root_spec.js
+++ b/spec/frontend/work_items/pages/work_item_root_spec.js
@@ -1,12 +1,16 @@
-import { shallowMount, createLocalVue } from '@vue/test-utils';
+import Vue from 'vue';
+import { shallowMount } from '@vue/test-utils';
 import VueApollo from 'vue-apollo';
 import createMockApollo from 'helpers/mock_apollo_helper';
+import waitForPromises from 'helpers/wait_for_promises';
 import workItemQuery from '~/work_items/graphql/work_item.query.graphql';
+import updateWorkItemMutation from '~/work_items/graphql/update_work_item.mutation.graphql';
 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';
 
-const localVue = createLocalVue();
-localVue.use(VueApollo);
+Vue.use(VueApollo);
 
 const WORK_ITEM_ID = '1';
 
@@ -14,10 +18,10 @@ describe('Work items root component', () => {
   let wrapper;
   let fakeApollo;
 
-  const findTitle = () => wrapper.find('[data-testid="title"]');
+  const findTitle = () => wrapper.findComponent(ItemTitle);
 
   const createComponent = ({ queryResponse = workItemQueryResponse } = {}) => {
-    fakeApollo = createMockApollo();
+    fakeApollo = createMockApollo([], resolvers);
     fakeApollo.clients.defaultClient.cache.writeQuery({
       query: workItemQuery,
       variables: {
@@ -30,7 +34,6 @@ describe('Work items root component', () => {
       propsData: {
         id: WORK_ITEM_ID,
       },
-      localVue,
       apolloProvider: fakeApollo,
     });
   };
@@ -44,7 +47,28 @@ describe('Work items root component', () => {
     createComponent();
 
     expect(findTitle().exists()).toBe(true);
-    expect(findTitle().text()).toBe('Test');
+    expect(findTitle().props('initialTitle')).toBe('Test');
+  });
+
+  it('updates the title when it is edited', async () => {
+    createComponent();
+    jest.spyOn(wrapper.vm.$apollo, 'mutate');
+    const mockUpdatedTitle = 'Updated title';
+
+    await findTitle().vm.$emit('title-changed', mockUpdatedTitle);
+
+    expect(wrapper.vm.$apollo.mutate).toHaveBeenCalledWith({
+      mutation: updateWorkItemMutation,
+      variables: {
+        input: {
+          id: WORK_ITEM_ID,
+          title: mockUpdatedTitle,
+        },
+      },
+    });
+
+    await waitForPromises();
+    expect(findTitle().props('initialTitle')).toBe(mockUpdatedTitle);
   });
 
   it('does not render the title if title is not in the widgets list', () => {