Clean up and refactor

ee/app/assets/javascripts/iterations/components/iteration_form_without_vue_router.vue

@@ -51,8 +51,7 @@ export default {
       description: this.iteration.description ?? '',
       startDate: this.iteration.startDate,
       dueDate: this.iteration.dueDate,
-      isValidTitle: true,
-      isValidStartDate: true,
+      showValidation: false,
     };
   },
   computed: {
@@ -70,28 +69,21 @@ export default {
     invalidFeedback() {
       return __('This field is required.');
     },
+    isValid() {
+      return this.titleState && this.startDateState;
+    },
+    titleState() {
+      return !this.showValidation || Boolean(this.title);
+    },
+    startDateState() {
+      return !this.showValidation || Boolean(this.startDate);
+    },
   },
   methods: {
-    checkValidations() {
-      let isValid = true;
-
-      if (!this.title) {
-        this.isValidTitle = false;
-        isValid = false;
-      } else {
-        this.isValidTitle = true;
-      }
-
-      if (!this.startDate) {
-        this.isValidStartDate = false;
-        isValid = false;
-      } else {
-        this.isValidStartDate = true;
-      }
-      return isValid;
-    },
     save() {
-      if (!this.checkValidations()) {
+      this.showValidation = true;
+
+      if (!this.isValid) {
         return {};
       }
 
@@ -185,7 +177,7 @@ export default {
           :label="__('Title')"
           class="gl-flex-grow-1"
           label-for="iteration-title"
-          :state="isValidTitle"
+          :state="titleState"
           :invalid-feedback="invalidFeedback"
         >
           <gl-form-input
@@ -193,7 +185,7 @@ export default {
             v-model="title"
             autocomplete="off"
             data-qa-selector="iteration_title_field"
-            :state="isValidTitle"
+            :state="titleState"
             required
           />
         </gl-form-group>
@@ -228,14 +220,14 @@ export default {
       <div class="col-md-6">
         <gl-form-group
           :label="__('Start date')"
-          :state="isValidStartDate"
+          :state="startDateState"
           :invalid-feedback="invalidFeedback"
         >
           <div class="gl-display-inline-block gl-mr-2">
             <gl-datepicker
               id="iteration-start-date"
               v-model="startDate"
-              :state="isValidStartDate"
+              :state="startDateState"
               required
             />
           </div>

ee/spec/frontend/iterations/components/iteration_form_without_vue_router_spec.js

@@ -23,6 +23,11 @@ describe('Iteration Form', () => {
     dueDate: new Date('2020-07-05'),
   };
 
+  const title = 'Updated title';
+  const description = 'Updated description';
+  const startDate = '2020-05-06';
+  const dueDate = '2020-05-26';
+
   const createMutationSuccess = { data: { createIteration: { iteration, errors: [] } } };
   const createMutationFailure = {
     data: { createIteration: { iteration, errors: ['alas, your data is unchanged'] } },
@@ -63,6 +68,16 @@ describe('Iteration Form', () => {
   const clickSave = () => findSaveButton().vm.$emit('click');
   const clickCancel = () => findCancelButton().vm.$emit('click');
 
+  const inputFormData = () => {
+    findTitle().vm.$emit('input', title);
+    findDescription().setValue( description);
+    findStartDate().vm.$emit('input', startDate ? new Date(startDate) : null);
+    findDueDate().vm.$emit('input', dueDate ? new Date(dueDate) : null);
+
+    findTitle().trigger('change');
+    findStartDate().trigger('change');
+  };
+
   it('renders a form', () => {
     createComponent();
     expect(wrapper.findComponent(GlForm).exists()).toBe(true);
@@ -81,19 +96,7 @@ describe('Iteration Form', () => {
 
     describe('save', () => {
       it('triggers mutation with form data', () => {
-        const title = 'Iteration 5';
-        const description = 'The fifth iteration';
-        const startDate = '2020-05-05';
-        const dueDate = '2020-05-25';
-
-        findTitle().vm.$emit('input', title);
-        findDescription().setValue(description);
-        findStartDate().vm.$emit('input', startDate ? new Date(startDate) : null);
-        findDueDate().vm.$emit('input', dueDate ? new Date(dueDate) : null);
-
-        findTitle().trigger('change');
-        findStartDate().trigger('change');
-
+        inputFormData();
         clickSave();
 
         expect(wrapper.vm.$apollo.mutate).toHaveBeenCalledWith({
@@ -112,20 +115,7 @@ describe('Iteration Form', () => {
 
       it('redirects to Iteration page on success', async () => {
         createComponent();
-
-        const title = 'Iteration 5';
-        const description = 'The fifth iteration';
-        const startDate = '2020-05-05';
-        const dueDate = '2020-05-25';
-
-        findTitle().vm.$emit('input', title);
-        findDescription().setValue(description);
-        findStartDate().vm.$emit('input', startDate ? new Date(startDate) : null);
-        findDueDate().vm.$emit('input', dueDate ? new Date(dueDate) : null);
-
-        findTitle().trigger('change');
-        findStartDate().trigger('change');
-
+        inputFormData();
         clickSave();
 
         await nextTick();
@@ -141,9 +131,9 @@ describe('Iteration Form', () => {
         await nextTick();
 
         expect(findSaveButton().props('loading')).toBe(false);
-        expect(wrapper.vm.checkValidations()).toBe(false);
-        expect(wrapper.vm.isValidTitle).toBe(false);
-        expect(wrapper.vm.isValidStartDate).toBe(false);
+        expect(wrapper.vm.isValid).toBe(false);
+        expect(wrapper.vm.titleState).toBe(false);
+        expect(wrapper.vm.startDateState).toBe(false);
         expect(visitUrl).not.toHaveBeenCalled();
       });
 
@@ -179,13 +169,11 @@ describe('Iteration Form', () => {
         props: propsWithIteration,
       });
 
-      const startDate = new Date(findStartDate().attributes('value'));
-      const dueDate = new Date(findDueDate().attributes('value'));
-
       expect(findTitle().attributes('value')).toBe(iteration.title);
       expect(findDescription().element.value).toBe(iteration.description);
-      expect(startDate).toEqual(iteration.startDate);
-      expect(dueDate).toEqual(iteration.dueDate);
+      
+      expect(new Date(findStartDate().attributes('value'))).toEqual(iteration.startDate);
+      expect(new Date(findDueDate().attributes('value'))).toEqual(iteration.dueDate);
     });
 
     it('shows update text on submit button', () => {
@@ -201,16 +189,7 @@ describe('Iteration Form', () => {
         props: propsWithIteration,
       });
 
-      const title = 'Updated title';
-      const description = 'Updated description';
-      const startDate = '2020-05-06';
-      const dueDate = '2020-05-26';
-
-      findTitle().vm.$emit('input', title);
-      findDescription().setValue(description);
-      findStartDate().vm.$emit('input', startDate ? new Date(startDate) : null);
-      findDueDate().vm.$emit('input', dueDate ? new Date(dueDate) : null);
-
+      inputFormData();
       clickSave();
 
       expect(wrapper.vm.$apollo.mutate).toHaveBeenCalledWith({
@@ -260,6 +239,7 @@ describe('Iteration Form', () => {
 
       findTitle().vm.$emit('input', '');
       findStartDate().vm.$emit('input', null);
+      
       findTitle().trigger('change');
       findStartDate().trigger('change');
 
@@ -268,9 +248,9 @@ describe('Iteration Form', () => {
       await nextTick();
 
       expect(findSaveButton().props('loading')).toBe(false);
-      expect(wrapper.vm.checkValidations()).toBe(false);
-      expect(wrapper.vm.isValidTitle).toBe(false);
-      expect(wrapper.vm.isValidStartDate).toBe(false);
+      expect(wrapper.vm.isValid).toBe(false);
+      expect(wrapper.vm.titleState).toBe(false);
+      expect(wrapper.vm.startDateState).toBe(false);
       expect(visitUrl).not.toHaveBeenCalled();
     });