Merge branch '336844-start-and-due-dates-are-incorrectly-set-on-epic-creation' into 'master'

Resolve "Start and due dates are incorrectly set on epic creation"

See merge request gitlab-org/gitlab!66809

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

@@ -8,6 +8,7 @@ import {
   GlFormInput,
 } from '@gitlab/ui';
 import createFlash from '~/flash';
+import { formatDate } from '~/lib/utils/datetime_utility';
 import { visitUrl } from '~/lib/utils/url_utility';
 import { s__ } from '~/locale';
 import MarkdownField from '~/vue_shared/components/markdown/field.vue';
@@ -70,9 +71,11 @@ export default {
               title: this.title,
               description: this.description,
               confidential: this.confidential,
-              startDateFixed: this.startDateFixed,
+              startDateFixed: this.startDateFixed
+                ? formatDate(this.startDateFixed, 'yyyy-mm-dd')
+                : null,
               startDateIsFixed: Boolean(this.startDateFixed),
-              dueDateFixed: this.dueDateFixed,
+              dueDateFixed: this.dueDateFixed ? formatDate(this.dueDateFixed, 'yyyy-mm-dd') : null,
               dueDateIsFixed: Boolean(this.dueDateFixed),
             },
           },

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

 import { GlForm } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
+import { nextTick } from 'vue';
 import { ApolloMutation } from 'vue-apollo';
 import EpicForm from 'ee/epic/components/epic_form.vue';
 import createEpic from 'ee/epic/queries/createEpic.mutation.graphql';
@@ -85,31 +86,38 @@ describe('ee/epic/components/epic_form.vue', () => {
 
       findResetter().vm.$emit('click');
 
-      return wrapper.vm.$nextTick().then(() => {
+      return nextTick().then(() => {
         expect(wrapper.vm[field]).toBe(null);
       });
     });
   });
 
   describe('save', () => {
-    it('submits successfully if form data is provided', async () => {
-      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;
+
+    it.each`
+      startDateFixed  | dueDateFixed    | startDateIsFixed | dueDateIsFixed
+      ${null}         | ${null}         | ${false}         | ${false}
+      ${'2021-07-01'} | ${null}         | ${true}          | ${false}
+      ${null}         | ${'2021-07-02'} | ${false}         | ${true}
+      ${'2021-07-01'} | ${'2021-07-02'} | ${true}          | ${true}
+    `(
+      'requests mutation with correct data with all start and due date configurations',
+      async ({ startDateFixed, dueDateFixed, startDateIsFixed, dueDateIsFixed }) => {
+        createWrapper();
 
         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);
+
+        // Make sure the submitted values for start and due dates are date strings without timezone info.
+        // (Datepicker emits a Date object but the submitted value must be a date string).
+        findStartDate().vm.$emit('input', startDateFixed ? new Date(startDateFixed) : null);
+        findDueDate().vm.$emit('input', dueDateFixed ? new Date(dueDateFixed) : null);
 
         findForm().vm.$emit('submit', { preventDefault: () => {} });
 
@@ -130,10 +138,11 @@ describe('ee/epic/components/epic_form.vue', () => {
           },
         });
 
-      await wrapper.vm.$nextTick();
+        await nextTick();
 
         expect(visitUrl).toHaveBeenCalled();
-    });
+      },
+    );
 
     it.each`
       status        | result           | loading