test(Form): add test cases of all field types

src/form/index.js

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

src/form/test/events.spec.js

@@ -1,5 +1,4 @@
-import { later } from '../../../test';
+import { mountForm, submitForm, mountSimpleRulesForm } from './shared';
-import { mountForm, mountSimpleRulesForm } from './shared';
 
 test('submit event', async () => {
   const onSubmit = jest.fn();
@@ -15,9 +14,8 @@ test('submit event', async () => {
     },
   });
 
-  wrapper.find('.van-button').trigger('click');
+  await submitForm(wrapper);
 
-  await later();
   expect(onSubmit).toHaveBeenCalledWith({ A: 'bar' });
 });
 
@@ -29,8 +27,7 @@ test('failed event', async () => {
     },
   });
 
-  wrapper.find('.van-button').trigger('click');
+  await submitForm(wrapper);
-  await later();
 
   expect(wrapper).toMatchSnapshot();
   expect(onFailed).toHaveBeenCalledWith({

src/form/test/field-type.spec.js

@@ -0,0 +1,198 @@
+import { mountForm, submitForm } from './shared';
+
+function mountFormWithChild({ template, data }) {
+  const onSubmit = jest.fn();
+  const onFailed = jest.fn();
+
+  const wrapper = mountForm({
+    template: `
+      <van-form @submit="onSubmit" @failed="onFailed">
+        <van-field name="A" :rules="[{ required: true, message: 'foo' }]">
+          <template #input>${template}</template>
+        </van-field>
+        <van-button native-type="submit" />
+      </van-form>
+    `,
+    data,
+    methods: {
+      onSubmit,
+      onFailed,
+    },
+  });
+
+  return {
+    wrapper,
+    onSubmit,
+    onFailed,
+  };
+}
+
+test('use switch', async () => {
+  const { wrapper, onSubmit, onFailed } = mountFormWithChild({
+    template: '<van-switch v-model="value" />',
+    data() {
+      return { value: false };
+    },
+  });
+
+  await submitForm(wrapper);
+  expect(onFailed).toHaveBeenCalledWith({
+    errors: [{ message: 'foo', name: 'A' }],
+    values: { A: false },
+  });
+
+  wrapper.setData({ value: true });
+
+  await submitForm(wrapper);
+  expect(onSubmit).toHaveBeenCalledWith({ A: true });
+});
+
+test('use checkbox', async () => {
+  const { wrapper, onSubmit, onFailed } = mountFormWithChild({
+    template: '<van-checkbox v-model="value" />',
+    data() {
+      return { value: false };
+    },
+  });
+
+  await submitForm(wrapper);
+  expect(onFailed).toHaveBeenCalledWith({
+    errors: [{ message: 'foo', name: 'A' }],
+    values: { A: false },
+  });
+
+  wrapper.setData({ value: true });
+
+  await submitForm(wrapper);
+  expect(onSubmit).toHaveBeenCalledWith({ A: true });
+});
+
+test('use checkbox-group', async () => {
+  const { wrapper, onSubmit, onFailed } = mountFormWithChild({
+    template: `
+      <van-checkbox-group v-model="checkboxGroup">
+        <van-checkbox name="1">1</van-checkbox>
+        <van-checkbox name="2">2</van-checkbox>
+      </van-checkbox-group>
+    `,
+    data() {
+      return { checkboxGroup: [] };
+    },
+  });
+
+  await submitForm(wrapper);
+  expect(onFailed).toHaveBeenCalledWith({
+    errors: [{ message: 'foo', name: 'A' }],
+    values: { A: [] },
+  });
+
+  wrapper.setData({ checkboxGroup: ['1'] });
+
+  await submitForm(wrapper);
+  expect(onSubmit).toHaveBeenCalledWith({ A: ['1'] });
+});
+
+test('use radio', async () => {
+  const { wrapper, onSubmit, onFailed } = mountFormWithChild({
+    template: `
+      <van-radio-group v-model="radio">
+        <van-radio name="1">1</van-radio>
+        <van-radio name="2">2</van-radio>
+      </van-radio-group>
+    `,
+    data() {
+      return { radio: '' };
+    },
+  });
+
+  await submitForm(wrapper);
+  expect(onFailed).toHaveBeenCalledWith({
+    errors: [{ message: 'foo', name: 'A' }],
+    values: { A: '' },
+  });
+
+  wrapper.setData({ radio: '1' });
+
+  await submitForm(wrapper);
+  expect(onSubmit).toHaveBeenCalledWith({ A: '1' });
+});
+
+test('use stepper', async () => {
+  const { wrapper, onSubmit, onFailed } = mountFormWithChild({
+    template: '<van-stepper v-model="value" :min="0" />',
+    data() {
+      return { value: 0 };
+    },
+  });
+
+  await submitForm(wrapper);
+  expect(onFailed).toHaveBeenCalledWith({
+    errors: [{ message: 'foo', name: 'A' }],
+    values: { A: 0 },
+  });
+
+  wrapper.setData({ value: 1 });
+
+  await submitForm(wrapper);
+  expect(onSubmit).toHaveBeenCalledWith({ A: 1 });
+});
+
+test('use rate', async () => {
+  const { wrapper, onSubmit, onFailed } = mountFormWithChild({
+    template: '<van-rate v-model="value" />',
+    data() {
+      return { value: 0 };
+    },
+  });
+
+  await submitForm(wrapper);
+  expect(onFailed).toHaveBeenCalledWith({
+    errors: [{ message: 'foo', name: 'A' }],
+    values: { A: 0 },
+  });
+
+  wrapper.setData({ value: 1 });
+
+  await submitForm(wrapper);
+  expect(onSubmit).toHaveBeenCalledWith({ A: 1 });
+});
+
+test('use slider', async () => {
+  const { wrapper, onSubmit, onFailed } = mountFormWithChild({
+    template: '<van-slider v-model="value" />',
+    data() {
+      return { value: 0 };
+    },
+  });
+
+  await submitForm(wrapper);
+  expect(onFailed).toHaveBeenCalledWith({
+    errors: [{ message: 'foo', name: 'A' }],
+    values: { A: 0 },
+  });
+
+  wrapper.setData({ value: 50 });
+
+  await submitForm(wrapper);
+  expect(onSubmit).toHaveBeenCalledWith({ A: 50 });
+});
+
+test('use uploader', async () => {
+  const { wrapper, onSubmit, onFailed } = mountFormWithChild({
+    template: '<van-uploader v-model="value" />',
+    data() {
+      return { value: [] };
+    },
+  });
+
+  await submitForm(wrapper);
+  expect(onFailed).toHaveBeenCalledWith({
+    errors: [{ message: 'foo', name: 'A' }],
+    values: { A: [] },
+  });
+
+  wrapper.setData({ value: [{ url: 'foo' }] });
+
+  await submitForm(wrapper);
+  expect(onSubmit).toHaveBeenCalledWith({ A: [{ url: 'foo' }] });
+});

src/form/test/index.spec.js

@@ -1,5 +1,4 @@
-import { later } from '../../../test';
+import { mountForm, submitForm } from './shared';
-import { mountForm } from './shared';
 
 test('dynamic add/remove fileds', async () => {
   const onSubmit = jest.fn();
@@ -23,17 +22,16 @@ test('dynamic add/remove fileds', async () => {
     },
   });
 
-  wrapper.find('.van-button').trigger('click');
+  await submitForm(wrapper);
-  await later();
   expect(onSubmit).toHaveBeenCalledWith({ A: '' });
 
   wrapper.setData({ list: ['A', 'B'] });
-  wrapper.find('.van-button').trigger('click');
+
-  await later();
+  await submitForm(wrapper);
   expect(onSubmit).toHaveBeenCalledWith({ A: '', B: '' });
 
   wrapper.setData({ list: ['B'] });
-  wrapper.find('.van-button').trigger('click');
+
-  await later();
+  await submitForm(wrapper);
   expect(onSubmit).toHaveBeenCalledWith({ B: '' });
 });

src/form/test/props.spec.js

@@ -1,5 +1,4 @@
-import { mount, later } from '../../../test';
+import { mountForm, submitForm, getSimpleRules } from './shared';
-import { mountForm, getSimpleRules } from './shared';
 
 test('rules prop - execute order', async () => {
   const onFailed = jest.fn();
@@ -24,8 +23,7 @@ test('rules prop - execute order', async () => {
     },
   });
 
-  wrapper.find('.van-button').trigger('click');
+  await submitForm(wrapper);
-  await later();
 
   expect(onFailed).toHaveBeenCalledWith({
     errors: [{ message: 'B', name: 'A' }],
@@ -61,8 +59,7 @@ test('rules prop - async validator', async () => {
     },
   });
 
-  wrapper.find('.van-button').trigger('click');
+  await submitForm(wrapper);
-  await later(10);
 
   expect(onFailed).toHaveBeenCalledWith({
     errors: [{ message: 'should fail', name: 'A' }],
@@ -94,8 +91,7 @@ test('validate-first prop', async () => {
     },
   });
 
-  wrapper.find('.van-button').trigger('click');
+  await submitForm(wrapper);
-  await later();
 
   expect(wrapper).toMatchSnapshot();
   expect(onFailed).toHaveBeenCalledWith({
@@ -104,14 +100,13 @@ test('validate-first prop', async () => {
   });
 
   wrapper.setData({ value: 'foo' });
-  wrapper.find('.van-button').trigger('click');
+  await submitForm(wrapper);
-  await later();
 
   expect(onSubmit).toHaveBeenCalledWith({ A: 'foo', B: 'foo' });
 });
 
 test('label-align prop', () => {
-  const wrapper = mount({
+  const wrapper = mountForm({
     template: `
       <van-form label-align="right">
         <van-field label="Label" />
@@ -123,7 +118,7 @@ test('label-align prop', () => {
 });
 
 test('label-width prop', () => {
-  const wrapper = mount({
+  const wrapper = mountForm({
     template: `
       <van-form label-width="5rem">
         <van-field label="Label" />
@@ -135,7 +130,7 @@ test('label-width prop', () => {
 });
 
 test('input-align prop', () => {
-  const wrapper = mount({
+  const wrapper = mountForm({
     template: `
       <van-form input-align="right">
         <van-field />
@@ -149,7 +144,7 @@ test('input-align prop', () => {
 });
 
 test('error-message-align prop', () => {
-  const wrapper = mount({
+  const wrapper = mountForm({
     template: `
       <van-form error-message-align="right">
         <van-field error-message="Error" />