test(Form): improve test coverage

src/field/test/index.spec.js

@@ -300,3 +300,17 @@ test('name prop', () => {
   });
   expect(wrapper).toMatchSnapshot();
 });
+
+test('call focus method before mounted', done => {
+  mount(Field, {
+    created() {
+      this.focus();
+      this.blur();
+      done();
+    },
+  });
+});
+
+test('destroy field', () => {
+  mount(Field).destroy();
+});

src/form/index.js

@@ -138,3 +138,4 @@ export default createComponent({
     );
   },
 });
+//

src/form/test/events.spec.js

@@ -5,11 +5,11 @@ test('submit event', async () => {
   const onSubmit = jest.fn();
   const wrapper = mountForm({
     template: `
-        <van-form @submit="onSubmit">
+      <van-form @submit="onSubmit">
-          <van-field name="A" value="bar" />
+        <van-field name="A" value="bar" />
-          <van-button native-type="submit" />
+        <van-button native-type="submit" />
-        </van-form>
+      </van-form>
-      `,
+    `,
     methods: {
       onSubmit,
     },

src/form/test/index.spec.js

@@ -0,0 +1,39 @@
+import { later } from '../../../test';
+import { mountForm } from './shared';
+
+test('dynamic add/remove fileds', async () => {
+  const onSubmit = jest.fn();
+  const wrapper = mountForm({
+    template: `
+      <van-form @submit="onSubmit">
+        <van-field
+          v-for="item in list"
+          :key="item"
+          :name="item"
+          value=""
+        />
+        <van-button native-type="submit" />
+      </van-form>
+    `,
+    data() {
+      return { list: ['A'] };
+    },
+    methods: {
+      onSubmit,
+    },
+  });
+
+  wrapper.find('.van-button').trigger('click');
+  await later();
+  expect(onSubmit).toHaveBeenCalledWith({ A: '' });
+
+  wrapper.setData({ list: ['A', 'B'] });
+  wrapper.find('.van-button').trigger('click');
+  await later();
+  expect(onSubmit).toHaveBeenCalledWith({ A: '', B: '' });
+
+  wrapper.setData({ list: ['B'] });
+  wrapper.find('.van-button').trigger('click');
+  await later();
+  expect(onSubmit).toHaveBeenCalledWith({ B: '' });
+});

src/form/test/methods.spec.js

@@ -1,5 +1,5 @@
 import { later } from '../../../test';
-import { mountForm, mountSimpleRulesForm } from './shared';
+import { mountForm, mountSimpleRulesForm, getSimpleRules } from './shared';
 
 test('submit method', async () => {
   const onSubmit = jest.fn();
@@ -37,7 +37,7 @@ test('validate method - validate all fields', done => {
   });
 });
 
-test('validate method - validate one field', done => {
+test('validate method - validate one field and passed', done => {
   mountSimpleRulesForm({
     mounted() {
       this.$refs.form.validate('A').catch(err => {
@@ -48,6 +48,30 @@ test('validate method - validate one field', done => {
   });
 });
 
+test('validate method - validate one field and failed', done => {
+  mountForm({
+    template: `
+      <van-form ref="form" @failed="onFailed">
+        <van-field name="A" :rules="rulesA" value="123" />
+        <van-field name="B" :rules="rulesB" value="" />
+        <van-button native-type="submit" />
+      </van-form>
+    `,
+    data: getSimpleRules,
+    mounted() {
+      this.$refs.form.validate('A').then(done);
+    },
+  });
+});
+
+test('validate method - unexisted name', done => {
+  mountSimpleRulesForm({
+    mounted() {
+      this.$refs.form.validate('unexisted').catch(done);
+    },
+  });
+});
+
 test('resetValidation method - reset all fields', done => {
   const wrapper = mountSimpleRulesForm({
     mounted() {

src/form/test/props.spec.js

@@ -71,19 +71,25 @@ test('rules prop - async validator', async () => {
 });
 
 test('validate-first prop', async () => {
+  const onSubmit = jest.fn();
   const onFailed = jest.fn();
+
   const wrapper = mountForm({
     template: `
-      <van-form validate-first @failed="onFailed">
+      <van-form validate-first @submit="onSubmit" @failed="onFailed">
-        <van-field name="A" :rules="rulesA" value="" />
+        <van-field name="A" :rules="rulesA" :value="value" />
-        <van-field name="B" :rules="rulesB" value="" />
+        <van-field name="B" :rules="rulesB" :value="value" />
         <van-button native-type="submit" />
       </van-form>
     `,
     data() {
-      return getSimpleRules();
+      return {
+        ...getSimpleRules(),
+        value: '',
+      };
     },
     methods: {
+      onSubmit,
       onFailed,
     },
   });
@@ -96,6 +102,12 @@ test('validate-first prop', async () => {
     errors: [{ message: 'A failed', name: 'A' }],
     values: { A: '', B: '' },
   });
+
+  wrapper.setData({ value: 'foo' });
+  wrapper.find('.van-button').trigger('click');
+  await later();
+
+  expect(onSubmit).toHaveBeenCalledWith({ A: 'foo', B: 'foo' });
 });
 
 test('label-align prop', () => {

src/form/test/shared.js

@@ -1,4 +1,9 @@
-import { mount } from '../../../test';
+import { mount, later } from '../../../test';
+
+export async function submitForm(wrapper) {
+  wrapper.find('.van-button').trigger('click');
+  return later();
+}
 
 export function mountForm(options) {
   return mount(options, { attachToDocument: true });
@@ -20,9 +25,7 @@ export function mountSimpleRulesForm(options) {
         <van-button native-type="submit" />
       </van-form>
     `,
-    data() {
+    data: getSimpleRules,
-      return getSimpleRules();
-    },
     ...options,
   });
 }