Added tests for initializeFormData function

Ensures we set the form fields and errors
correctly when the form loads.

ee/app/assets/javascripts/analytics/cycle_analytics/components/custom_stage_form.vue

@@ -32,6 +32,28 @@ const defaultFields = {
   endEventLabelId: null,
 };
 
+export const initializeFormData = ({ emptyFieldState, initialFields, errors }) => {
+  const defaultErrors = initialFields?.endEventIdentifier
+    ? { ...emptyFieldState, endEventIdentifier: null }
+    : {
+        ...emptyFieldState,
+        endEventIdentifier:
+          initialFields && !initialFields?.startEventIdentifier
+            ? [s__('CustomCycleAnalytics|Please select a start event first')]
+            : null,
+      };
+  return {
+    fields: {
+      ...emptyFieldState,
+      ...initialFields,
+    },
+    fieldErrors: {
+      ...defaultErrors,
+      ...errors,
+    },
+  };
+};
+
 export default {
   components: {
     GlFormGroup,
@@ -74,22 +96,11 @@ export default {
     },
   },
   data() {
-    const defaultErrors = this?.initialFields?.endEventIdentifier
-      ? { ...defaultFields, endEventIdentifier: null }
-      : {
-          ...defaultFields,
-          endEventIdentifier: [s__('CustomCycleAnalytics|Please select a start event first')],
-        };
+    const { initialFields = {}, errors = null } = this;
+    const formData = initializeFormData({ emptyFieldState: defaultFields, initialFields, errors });
     return {
       labelEvents: getLabelEventsIdentifiers(this.events),
-      fields: {
-        ...defaultFields,
-        ...this.initialFields,
-      },
-      fieldErrors: {
-        ...defaultErrors,
-        ...this.errors,
-      },
+      ...formData,
     };
   },
   computed: {
@@ -169,15 +180,15 @@ export default {
   },
   watch: {
     initialFields(newFields) {
-      console.log('newFields', newFields);
-
       this.fields = {
         ...defaultFields,
         ...newFields,
       };
+    },
+    errors(newErrors) {
       this.fieldErrors = {
         ...defaultFields,
-        ...this.errors,
+        ...newErrors,
       };
     },
   },

ee/spec/frontend/analytics/cycle_analytics/components/custom_stage_form_spec.js

@@ -2,7 +2,9 @@ import Vue from 'vue';
 import Vuex from 'vuex';
 import createStore from 'ee/analytics/cycle_analytics/store';
 import { createLocalVue, mount } from '@vue/test-utils';
-import CustomStageForm from 'ee/analytics/cycle_analytics/components/custom_stage_form.vue';
+import CustomStageForm, {
+  initializeFormData,
+} from 'ee/analytics/cycle_analytics/components/custom_stage_form.vue';
 import { STAGE_ACTIONS } from 'ee/analytics/cycle_analytics/constants';
 import {
   groupLabels,
@@ -749,4 +751,118 @@ describe('CustomStageForm', () => {
       });
     });
   });
+
+  describe('initializeFormData', () => {
+    describe('without a startEventIdentifier', () => {
+      it('with no errors', () => {
+        const res = initializeFormData({
+          initialFields: {},
+        });
+        expect(res.fields).toEqual({});
+        expect(res.fieldErrors).toEqual({
+          endEventIdentifier: ['Please select a start event first'],
+        });
+      });
+
+      it('with field errors', () => {
+        const res = initializeFormData({
+          initialFields: {},
+          errors: {
+            name: ['is reserved'],
+          },
+        });
+        expect(res.fields).toEqual({});
+        expect(res.fieldErrors).toEqual({
+          endEventIdentifier: ['Please select a start event first'],
+          name: ['is reserved'],
+        });
+      });
+    });
+
+    describe('with a startEventIdentifier', () => {
+      it('with no errors', () => {
+        const res = initializeFormData({
+          initialFields: {
+            startEventIdentifier: 'start-event',
+          },
+          errors: {},
+        });
+        expect(res.fields).toEqual({ startEventIdentifier: 'start-event' });
+        expect(res.fieldErrors).toEqual({
+          endEventIdentifier: null,
+        });
+      });
+
+      it('with field errors', () => {
+        const res = initializeFormData({
+          initialFields: {
+            startEventIdentifier: 'start-event',
+          },
+          errors: {
+            name: ['is reserved'],
+          },
+        });
+        expect(res.fields).toEqual({ startEventIdentifier: 'start-event' });
+        expect(res.fieldErrors).toEqual({
+          endEventIdentifier: null,
+          name: ['is reserved'],
+        });
+      });
+    });
+
+    describe('with all fields set', () => {
+      it('with no errors', () => {
+        const res = initializeFormData({
+          initialFields: {
+            id: 1,
+            name: 'cool-stage',
+            startEventIdentifier: 'start-event',
+            endEventIdentifier: 'end-event',
+            startEventLabelId: 10,
+            endEventLabelId: 20,
+          },
+          errors: {},
+        });
+        expect(res.fields).toEqual({
+          id: 1,
+          name: 'cool-stage',
+          startEventIdentifier: 'start-event',
+          endEventIdentifier: 'end-event',
+          startEventLabelId: 10,
+          endEventLabelId: 20,
+        });
+        expect(res.fieldErrors).toEqual({
+          endEventIdentifier: null,
+        });
+      });
+
+      it('with field errors', () => {
+        const res = initializeFormData({
+          initialFields: {
+            id: 1,
+            name: 'cool-stage',
+            startEventIdentifier: 'start-event',
+            endEventIdentifier: 'end-event',
+            startEventLabelId: 10,
+            endEventLabelId: 20,
+          },
+          errors: {
+            name: ['is reserved'],
+          },
+        });
+        expect(res.fields).toEqual({
+          id: 1,
+          name: 'cool-stage',
+          startEventIdentifier: 'start-event',
+          endEventIdentifier: 'end-event',
+          startEventLabelId: 10,
+          endEventLabelId: 20,
+        });
+        expect(res.fieldErrors).toEqual({
+          endEventIdentifier: null,
+          name: ['is reserved'],
+        });
+      });
+    });
+  });
 });