test(adaptor): add ant adaptor tests

Author: felixpy

jest.config.js

@@ -8,6 +8,7 @@ module.exports = {
     '^.*\\.(vue)$': 'vue-jest',
     '^.+\\.[t|j]sx?$': 'babel-jest'
   },
+  setupFilesAfterEnv: ['<rootDir>/test/unit/setup.js'],
   collectCoverage: true,
   collectCoverageFrom: [
     '**/src/**/*.{js,vue,jsx}',

test/unit/setup.js

@@ -0,0 +1,7 @@
+global.console = {
+  log: console.log,
+  error: console.error,
+  warn: jest.fn(),
+  info: console.info,
+  debug: console.debug
+};

test/unit/specs/antd-form-adaptor.spec.js

@@ -0,0 +1,145 @@
+import Vue from 'vue';
+import VueCompositionAPI from '@vue/composition-api';
+import { mount } from '@vue/test-utils';
+import { useForm, useFormElement } from '@fext/vue-use';
+import Antd from 'ant-design-vue';
+import {
+  ValidationProvider,
+  ValidationObserver
+} from 'vee-validate/dist/vee-validate.full';
+import { createFormBuilder } from 'src';
+import { AntFormAdaptor } from 'src/ant-form-adaptor';
+
+const TestComponent = {
+  template: `<a-form>
+    <form-builder
+      :form="form"
+      :shares="formShares"
+      :config="formConfig"
+      :metadata="metadata"
+    ></form-builder>
+  </a-form>`,
+
+  components: {
+    FormBuilder: createFormBuilder({
+      components: {
+        AntFormAdaptor
+      }
+    })
+  },
+
+  setup() {
+    const form = useForm();
+    const { formValues, updateFormValues } = form;
+
+    return {
+      form,
+      formValues,
+      updateFormValues
+    };
+  },
+
+  data() {
+    return {
+      showResultModal: false,
+
+      metadata: {},
+
+      formShares: {
+        size: 'medium'
+      },
+
+      formConfig: [
+        {
+          component: 'div',
+          fields: [
+            {
+              name: 'comment',
+              component: 'AntFormAdaptor',
+              label: 'comment-label',
+              tip: 'comment-tip',
+              rules: {
+                required: true,
+                max: 50,
+                min: 10
+              },
+              props: {
+                placeholder: 'comment-placeholder'
+              }
+            },
+            {
+              name: 'type',
+              component: 'AntFormAdaptor',
+              label: 'type-label',
+              tip: 'type-tip',
+              items: [
+                { text: 'Type-1', value: '1' },
+                { text: 'Type-2', value: '2' },
+                { text: 'Type-3', value: '3' }
+              ],
+              extend: {
+                component: 'a-checkbox-group'
+              }
+            }
+          ]
+        }
+      ]
+    };
+  }
+};
+
+let wrapper = null;
+let vm = null;
+beforeEach(() => {
+  wrapper = mount(TestComponent);
+  vm = wrapper.vm;
+});
+
+afterEach(() => {
+  wrapper.destroy();
+});
+
+beforeAll(() => {
+  Vue.use(VueCompositionAPI);
+  Vue.use(Antd);
+
+  Vue.component('ValidationProvider', ValidationProvider);
+  Vue.component('ValidationObserver', ValidationObserver);
+});
+
+describe('ant design vue form adaptor', () => {
+  test('render adaptors', () => {
+    const adaptorWrappers = wrapper.findAllComponents(AntFormAdaptor);
+
+    expect(adaptorWrappers.length).toBe(2);
+
+    expect(wrapper.findAll('.ant-input').length).toBe(1);
+    expect(wrapper.findAll('.ant-checkbox').length).toBe(3);
+  });
+
+  test('update value', async () => {
+    const inputWrapper = wrapper.findAllComponents(AntFormAdaptor).at(0);
+
+    inputWrapper.vm.updateAntLocalValue({
+      target: {
+        value: 'ant'
+      }
+    });
+
+    await Vue.nextTick();
+
+    expect(vm.formValues.comment).toBe('ant');
+
+    inputWrapper.vm.updateAntLocalValue('foo');
+
+    await Vue.nextTick();
+
+    expect(vm.formValues.comment).toBe('foo');
+
+    vm.formValues.comment = 'bar';
+
+    await Vue.nextTick();
+
+    expect(inputWrapper.vm.localValue).toBe('bar');
+  });
+});

test/unit/specs/plugin.spec.js

@@ -5,6 +5,7 @@ import { useForm, useFormElement } from '@fext/vue-use';
 import FormBuilder from 'src';
 import ElFormAdatpor from 'src/el-form-adaptor';
 import ViewFormAdatpor from 'src/view-form-adaptor';
+import AntFormAdatpor from 'src/ant-form-adaptor';
 
 const TestComponent = {
   template: `<div>
@@ -39,6 +40,7 @@ beforeAll(() => {
   Vue.use(FormBuilder);
   Vue.use(ElFormAdatpor);
   Vue.use(ViewFormAdatpor);
+  Vue.use(AntFormAdatpor);
 });
 
 describe('vue plugin', () => {
@@ -59,4 +61,10 @@ describe('vue plugin', () => {
 
     expect(component).toBeDefined();
   });
+
+  test('use ant design adaptor', () => {
+    const component = Vue.component('ant-form-adaptor');
+
+    expect(component).toBeDefined();
+  });
 });

test/unit/specs/view-form-adaptor.spec.js

@@ -79,9 +79,6 @@ const TestComponent = {
               ],
               extend: {
                 component: 'CheckboxGroup'
-              },
-              props: {
-                min: 1
               }
             }
           ]