Tidy up create epic form markup and add tests

This also updates used strings

ee/app/assets/javascripts/epic/components/epic_form.vue

@@ -39,12 +39,12 @@ export default {
   },
   data() {
     return {
-      labels: [],
-      confidential: false,
-      description: '',
       title: '',
-      dueDateFixed: null,
+      description: '',
+      confidential: false,
+      labels: [],
       startDateFixed: null,
+      dueDateFixed: null,
       loading: false,
     };
   },
@@ -60,7 +60,7 @@ export default {
     save() {
       this.loading = true;
 
-      this.$apollo
+      return this.$apollo
         .mutate({
           mutation: createEpic,
           variables: {
@@ -133,7 +133,6 @@ export default {
           />
         </div>
       </div>
-
       <div class="form-group row">
         <div class="col-form-label col-sm-2">
           <label for="epic-description">{{ __('Description') }}</label>
@@ -165,10 +164,9 @@ export default {
           </markdown-field>
         </div>
       </div>
-
       <div class="form-group row gl-mt-7">
         <div class="col-sm-10 offset-sm-2">
-          <gl-form-checkbox v-model="confidential">{{
+          <gl-form-checkbox v-model="confidential" data-testid="epic-confidentiality">{{
             __(
               'This epic and any containing child epics are confidential and should only be visible to team members with at least Reporter access.',
             )
@@ -180,7 +178,7 @@ export default {
         <div class="col-lg-6">
           <div class="form-group row">
             <div class="col-form-label col-md-2 col-lg-4">
-              <label for="epic-title">{{ __('Labels') }}</label>
+              <label>{{ __('Labels') }}</label>
             </div>
             <div class="col-md-8 col-sm-10">
               <div class="issuable-form-select-holder">
@@ -207,41 +205,43 @@ export default {
         <div class="col-lg-6">
           <div class="form-group row">
             <div class="col-form-label col-md-2 col-lg-4">
-              <label for="epic-start-date">{{ __('Start date') }}</label>
+              <label>{{ __('Start date') }}</label>
             </div>
             <div class="col-md-8 col-sm-10">
               <div class="issuable-form-select-holder gl-mr-2">
-                <gl-datepicker v-model="startDateFixed" />
+                <gl-datepicker v-model="startDateFixed" data-testid="epic-start-date" />
               </div>
               <a
                 v-show="startDateFixed"
-                class="gl-white-space-nowrap js-clear-start-date"
+                class="gl-white-space-nowrap"
+                data-testid="clear-start-date"
                 href="#"
                 @click="updateStartDate(null)"
                 >{{ __('Clear start date') }}</a
               >
-              <span class="block gl-text-gray-400">{{
-                __('An empty date will inherit from milestone dates')
+              <span class="block gl-line-height-normal gl-mt-3 gl-text-gray-500">{{
+                __('Leave empty to inherit from milestone dates')
               }}</span>
             </div>
           </div>
           <div class="form-group row">
             <div class="col-form-label col-md-2 col-lg-4">
-              <label for="epic-due-date">{{ __('Due Date') }}</label>
+              <label>{{ __('Due Date') }}</label>
             </div>
             <div class="col-md-8 col-sm-10">
               <div class="issuable-form-select-holder gl-mr-2">
-                <gl-datepicker v-model="dueDateFixed" />
+                <gl-datepicker v-model="dueDateFixed" data-testid="epic-due-date" />
               </div>
               <a
                 v-show="dueDateFixed"
-                class="gl-white-space-nowrap js-clear-due-date"
+                class="gl-white-space-nowrap"
+                data-testid="clear-due-date"
                 href="#"
                 @click="updateDueDate(null)"
                 >{{ __('Clear due date') }}</a
               >
-              <span class="block gl-text-gray-400">{{
-                __('An empty date will inherit from milestone dates')
+              <span class="block gl-line-height-normal gl-mt-3 gl-text-gray-500">{{
+                __('Leave empty to inherit from milestone dates')
               }}</span>
             </div>
           </div>
@@ -259,7 +259,7 @@ export default {
       >
         {{ __('Create epic') }}
       </gl-button>
-      <gl-button class="ml-auto" data-testid="cancel-epic" :href="groupEpicsPath">{{
+      <gl-button class="gl-ml-auto" data-testid="cancel-epic" :href="groupEpicsPath">{{
         __('Cancel')
       }}</gl-button>
     </div>

ee/app/assets/stylesheets/pages/epics.scss

@@ -84,10 +84,16 @@
 
 .md-area.gfm-form {
   @include gl-rounded-base;
-  @include gl-border-gray-400;
+  @include gl-border-none;
+  @include gl-inset-border-1-gray-400;
 
   &.is-focused {
-    border-color: $gray-900;
+    @include gl-focus($gl-border-size-1, $gray-900);
+    @include gl-text-gray-900;
+  }
+
+  .markdown-area::placeholder {
+    color: $gray-400;
   }
 }
 

ee/spec/frontend/epic/components/epic_form_spec.js

+import { shallowMount } from '@vue/test-utils';
+import { GlForm } from '@gitlab/ui';
+import { ApolloMutation } from 'vue-apollo';
+import EpicForm from 'ee/epic/components/epic_form.vue';
+import LabelsSelectVue from '~/vue_shared/components/sidebar/labels_select_vue/labels_select_root.vue';
+import createEpic from 'ee/epic/queries/createEpic.mutation.graphql';
+import { TEST_HOST } from 'helpers/test_constants';
+
+jest.mock('~/lib/utils/url_utility');
+
+const TEST_GROUP_PATH = 'gitlab-org';
+const TEST_NEW_EPIC = { data: { createEpic: { epic: { webUrl: TEST_HOST } } } };
+const TEST_FAILED = { data: { createEpic: { errors: ['mutation failed'] } } };
+
+describe('ee/epic/components/epic_form.vue', () => {
+  let wrapper;
+
+  const createWrapper = ({ mutationResult = TEST_NEW_EPIC } = {}) => {
+    wrapper = shallowMount(EpicForm, {
+      propsData: {
+        groupPath: TEST_GROUP_PATH,
+        groupEpicsPath: TEST_HOST,
+      },
+      stubs: {
+        ApolloMutation,
+        MarkdownField: '<div><slot name="textarea"></slot></div>',
+      },
+      mocks: {
+        $apollo: {
+          mutate: jest.fn().mockResolvedValue(mutationResult),
+        },
+      },
+    });
+  };
+
+  afterEach(() => {
+    wrapper.destroy();
+    wrapper = null;
+  });
+
+  const findTitle = () => wrapper.find('#epic-title');
+  const findDescription = () => wrapper.find('#epic-description');
+  const findLabels = () => wrapper.find(LabelsSelectVue);
+  const findConfidentialityCheck = () => wrapper.find('[data-testid="epic-confidentiality"]');
+  const findStartDate = () => wrapper.find('[data-testid="epic-start-date"]');
+  const findStartDateReset = () => wrapper.find('[data-testid="clear-start-date"]');
+  const findDueDate = () => wrapper.find('[data-testid="epic-due-date"]');
+  const findDueDateReset = () => wrapper.find('[data-testid="clear-due-date"]');
+  const findSaveButton = () => wrapper.find('[data-testid="save-epic"]');
+  const findCancelButton = () => wrapper.find('[data-testid="cancel-epic"]');
+
+  describe('when mounted', () => {
+    beforeEach(() => {
+      createWrapper();
+    });
+
+    it('should render the form', () => {
+      expect(wrapper.find(GlForm).exists()).toBe(true);
+    });
+
+    it('can be canceled', () => {
+      expect(findCancelButton().attributes('href')).toBe(TEST_HOST);
+    });
+
+    it('disables submit button if no title is provided', () => {
+      expect(findSaveButton().attributes('disabled')).toBeTruthy();
+    });
+
+    it.each`
+      field               | findInput        | findResetter
+      ${'startDateFixed'} | ${findStartDate} | ${findStartDateReset}
+      ${'dueDateFixed'}   | ${findDueDate}   | ${findDueDateReset}
+    `('can clear $field with side control', ({ field, findInput, findResetter }) => {
+      findInput().vm.$emit('input', new Date());
+
+      expect(wrapper.vm[field]).toBeTruthy();
+
+      findResetter().trigger('click');
+
+      expect(wrapper.vm[field]).toBe(null);
+    });
+  });
+
+  describe('save', () => {
+    it('submits successfully if form data is provided', () => {
+      createWrapper();
+
+      const addLabelIds = [1];
+      const title = 'Status page MVP';
+      const description = '### Goal\n\n- [ ] Item';
+      const confidential = true;
+      const startDateFixed = new Date();
+      const startDateIsFixed = true;
+      const dueDateFixed = null;
+      const dueDateIsFixed = false;
+
+      findTitle().vm.$emit('input', title);
+      findDescription().setValue(description);
+      findConfidentialityCheck().vm.$emit('input', confidential);
+      findLabels().vm.$emit('updateSelectedLabels', [{ id: 1, set: 1 }]);
+      findStartDate().vm.$emit('input', startDateFixed);
+      findDueDate().vm.$emit('input', dueDateFixed);
+
+      findSaveButton().vm.$emit('click');
+
+      expect(wrapper.vm.$apollo.mutate).toHaveBeenCalledWith({
+        mutation: createEpic,
+        variables: {
+          input: {
+            groupPath: TEST_GROUP_PATH,
+            addLabelIds,
+            title,
+            description,
+            confidential,
+            startDateFixed,
+            startDateIsFixed,
+            dueDateFixed,
+            dueDateIsFixed,
+          },
+        },
+      });
+    });
+
+    it.each`
+      status        | result
+      ${'succeeds'} | ${TEST_NEW_EPIC}
+      ${'fails'}    | ${TEST_FAILED}
+    `('resets loading indicator when $status', ({ result }) => {
+      createWrapper({ mutationResult: result });
+
+      const savePromise = wrapper.vm.save();
+
+      expect(wrapper.vm.loading).toBeTruthy();
+
+      return savePromise.then(() => {
+        expect(findSaveButton().props('loading')).toBe(false);
+      });
+    });
+  });
+});

locale/gitlab.pot

@@ -2408,9 +2408,6 @@ msgstr ""
 msgid "An empty GitLab User field will add the FogBugz user's full name (e.g. \"By John Smith\") in the description of all issues and comments. It will also associate and/or assign these issues and comments with the project creator."
 msgstr ""
 
-msgid "An empty date will inherit from milestone dates"
-msgstr ""
-
 msgid "An error has occurred"
 msgstr ""
 
@@ -13643,6 +13640,9 @@ msgstr ""
 msgid "Leave edit mode? All unsaved changes will be lost."
 msgstr ""
 
+msgid "Leave empty to inherit from milestone dates"
+msgstr ""
+
 msgid "Leave group"
 msgstr ""
 
@@ -15419,6 +15419,9 @@ msgstr ""
 msgid "New Environment"
 msgstr ""
 
+msgid "New Epic"
+msgstr ""
+
 msgid "New File"
 msgstr ""