Add latest changes from gitlab-org/gitlab@master

1 files changed, 123 insertions, 12 deletions

diff --git a/spec/frontend/vue_shared/directives/validation_spec.js b/spec/frontend/vue_shared/directives/validation_spec.js
index 0c84be9354f..80c283c1a91 100644
--- a/spec/frontend/vue_shared/directives/validation_spec.js
+++ b/spec/frontend/vue_shared/directives/validation_spec.js
@@ -1,10 +1,10 @@
 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 },
+      },
+    });
+  });
 });