1 files changed, 179 insertions, 22 deletions

diff --git a/spec/frontend/vue_shared/directives/validation_spec.js b/spec/frontend/vue_shared/directives/validation_spec.js
index 2764a71d204..51ee73cabde 100644
--- a/spec/frontend/vue_shared/directives/validation_spec.js
+++ b/spec/frontend/vue_shared/directives/validation_spec.js
@@ -1,15 +1,21 @@
 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 } = {}) => {
+  const createComponentFactory = ({ inputAttributes, template, data }) => {
     const defaultInputAttributes = {
       type: 'text',
       required: true,
     };
 
+    const defaultTemplate = `
+      <form>
+        <input v-validation:[showValidation] name="exampleField" v-bind="attributes" />
+      </form>
+    `;
+
     const component = {
       directives: {
         validation: validation(),
@@ -17,27 +23,52 @@ describe('validation directive', () => {
       data() {
         return {
           attributes: inputAttributes || defaultInputAttributes,
-          showValidation,
-          form: {
-            state: null,
-            fields: {
-              exampleField: {
-                state: null,
-                feedback: '',
-              },
+          ...data,
+        };
+      },
+      template: template || defaultTemplate,
+    };
+
+    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:[showValidation] name="exampleField" v-bind="attributes" />
+          <input v-validation:[form.showValidation] name="exampleField" v-bind="attributes" />
         </form>
       `,
-    };
-
-    wrapper = shallowMount(component, { attachTo: document.body });
-  };
+    });
 
   afterEach(() => {
     wrapper.destroy();
@@ -48,6 +79,12 @@ describe('validation directive', () => {
   const findForm = () => wrapper.find('form');
   const findInput = () => wrapper.find('input');
 
+  const setValueAndTriggerValidation = (value) => {
+    const input = findInput();
+    input.setValue(value);
+    input.trigger('blur');
+  };
+
   describe.each([true, false])(
     'with fields untouched and "showValidation" set to "%s"',
     (showValidation) => {
@@ -78,12 +115,6 @@ describe('validation directive', () => {
   `(
     'with input-attributes set to $inputAttributes',
     ({ inputAttributes, validValue, invalidValue }) => {
-      const setValueAndTriggerValidation = (value) => {
-        const input = findInput();
-        input.setValue(value);
-        input.trigger('blur');
-      };
-
       beforeEach(() => {
         createComponent({ inputAttributes });
       });
@@ -129,4 +160,130 @@ describe('validation directive', () => {
       });
     },
   );
+
+  describe('with group elements', () => {
+    const template = `
+      <form>
+        <div v-validation:[showValidation]>
+          <input name="exampleField" v-bind="attributes" />
+        </div>
+      </form>
+    `;
+    beforeEach(() => {
+      createComponent({
+        template,
+        inputAttributes: {
+          required: true,
+        },
+      });
+    });
+
+    describe('with invalid value', () => {
+      beforeEach(() => {
+        setValueAndTriggerValidation('');
+      });
+
+      it('should set correct field state', () => {
+        expect(getFormData().fields.exampleField).toEqual({
+          state: false,
+          feedback: expect.any(String),
+        });
+      });
+
+      it('should set correct feedback', () => {
+        expect(getFormData().fields.exampleField.feedback).toBe('Please fill out this field.');
+      });
+    });
+
+    describe('with valid value', () => {
+      beforeEach(() => {
+        setValueAndTriggerValidation('hello');
+      });
+
+      it('set the correct state', () => {
+        expect(getFormData().fields.exampleField).toEqual({
+          state: true,
+          feedback: '',
+        });
+      });
+    });
+  });
+
+  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,
+      },
+    },
+  };
+
+  const EXPECTED_FIELDS = {
+    name: { value: 'lorem', required: true, state: null, feedback: null },
+    description: { value: 'ipsum', required: false, state: true, feedback: null },
+  };
+
+  it('returns form object', () => {
+    expect(initForm(MOCK_FORM)).toMatchObject({
+      state: false,
+      showValidation: false,
+      fields: EXPECTED_FIELDS,
+    });
+  });
+
+  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: EXPECTED_FIELDS,
+      ...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: EXPECTED_FIELDS,
+    });
+  });
 });