Merge branch '327842-ship-initformfield-with-validation-directive' into 'master'

Add validation initForm helper

See merge request gitlab-org/gitlab!61213

app/assets/javascripts/vue_shared/directives/validation.js

@@ -136,3 +136,59 @@ export default function initValidation(customFeedbackMap = {}) {
     },
   };
 }
+
+/**
+ * This is a helper that initialize the form fields structure to be used in initForm
+ * @param {*} fieldValues
+ * @returns formObject
+ */
+const initFormField = ({ value, required = true, skipValidation = false }) => ({
+  value,
+  required,
+  state: skipValidation ? true : null,
+  feedback: null,
+});
+
+/**
+ * This is a helper that initialize the form structure that is compliant to be used with the validation directive
+ *
+ * @example
+ * const form initForm = initForm({
+ *   fields: {
+ *     name: {
+ *       value: 'lorem'
+ *     },
+ *     description: {
+ *       value: 'ipsum',
+ *       required: false,
+ *       skipValidation: true
+ *     }
+ *   }
+ * })
+ *
+ * @example
+ * const form initForm = initForm({
+ *   state: true,   // to override
+ *   foo: {         // something custom
+ *     bar: 'lorem'
+ *   },
+ *   fields: {...}
+ * })
+ *
+ * @param {*} formObject
+ * @returns form
+ */
+export const initForm = ({ fields = {}, ...rest } = {}) => {
+  const initFields = Object.fromEntries(
+    Object.entries(fields).map(([fieldName, fieldValues]) => {
+      return [fieldName, initFormField(fieldValues)];
+    }),
+  );
+
+  return {
+    state: false,
+    showValidation: false,
+    ...rest,
+    fields: initFields,
+  };
+};

spec/frontend/vue_shared/directives/validation_spec.js

 import { shallowMount } from '@vue/test-utils';
-import validation from '~/vue_shared/directives/validation';
+import validation, { initForm } from '~/vue_shared/directives/validation';
 
 describe('validation directive', () => {
   let wrapper;
 
-  const createComponent = ({ inputAttributes, showValidation, template } = {}) => {
+  const createComponentFactory = ({ inputAttributes, template, data }) => {
     const defaultInputAttributes = {
       type: 'text',
       required: true,
@@ -23,16 +23,7 @@ describe('validation directive', () => {
       data() {
         return {
           attributes: inputAttributes || defaultInputAttributes,
-          showValidation,
-          form: {
-            state: null,
-            fields: {
-              exampleField: {
-                state: null,
-                feedback: '',
-              },
-            },
-          },
+          ...data,
         };
       },
       template: template || defaultTemplate,
@@ -41,6 +32,44 @@ describe('validation directive', () => {
     wrapper = shallowMount(component, { attachTo: document.body });
   };
 
+  const createComponent = ({ inputAttributes, showValidation, template } = {}) =>
+    createComponentFactory({
+      inputAttributes,
+      data: {
+        showValidation,
+        form: {
+          state: null,
+          fields: {
+            exampleField: {
+              state: null,
+              feedback: '',
+            },
+          },
+        },
+      },
+      template,
+    });
+
+  const createComponentWithInitForm = ({ inputAttributes } = {}) =>
+    createComponentFactory({
+      inputAttributes,
+      data: {
+        form: initForm({
+          fields: {
+            exampleField: {
+              state: null,
+              value: 'lorem',
+            },
+          },
+        }),
+      },
+      template: `
+        <form>
+          <input v-validation:[form.showValidation] name="exampleField" v-bind="attributes" />
+        </form>
+      `,
+    });
+
   afterEach(() => {
     wrapper.destroy();
     wrapper = null;
@@ -179,4 +208,86 @@ describe('validation directive', () => {
       });
     });
   });
+
+  describe('component using initForm', () => {
+    it('sets the form fields correctly', () => {
+      createComponentWithInitForm();
+
+      expect(getFormData().state).toBe(false);
+      expect(getFormData().showValidation).toBe(false);
+
+      expect(getFormData().fields.exampleField).toMatchObject({
+        value: 'lorem',
+        state: null,
+        required: true,
+        feedback: expect.any(String),
+      });
+    });
+  });
+});
+
+describe('initForm', () => {
+  const MOCK_FORM = {
+    fields: {
+      name: {
+        value: 'lorem',
+      },
+      description: {
+        value: 'ipsum',
+        required: false,
+        skipValidation: true,
+      },
+    },
+  };
+
+  it('returns form object', () => {
+    expect(initForm(MOCK_FORM)).toMatchObject({
+      state: false,
+      showValidation: false,
+      fields: {
+        name: { value: 'lorem', required: true, state: null, feedback: null },
+        description: { value: 'ipsum', required: false, state: true, feedback: null },
+      },
+    });
+  });
+
+  it('returns form object with additional parameters', () => {
+    const customFormObject = {
+      foo: {
+        bar: 'lorem',
+      },
+    };
+
+    const form = {
+      ...MOCK_FORM,
+      ...customFormObject,
+    };
+
+    expect(initForm(form)).toMatchObject({
+      state: false,
+      showValidation: false,
+      fields: {
+        name: { value: 'lorem', required: true, state: null, feedback: null },
+        description: { value: 'ipsum', required: false, state: true, feedback: null },
+      },
+      ...customFormObject,
+    });
+  });
+
+  it('can override existing state and showValidation values', () => {
+    const form = {
+      ...MOCK_FORM,
+      state: true,
+      showValidation: true,
+    };
+
+    expect(initForm(form)).toMatchObject({
+      state: true,
+      showValidation: true,
+      fields: {
+        name: { value: 'lorem', required: true, state: null, feedback: null },
+        description: { value: 'ipsum', required: false, state: true, feedback: null },
+      },
+    });
+  });
 });