diff --git a/src/form/index.js b/src/form/index.js index e392406e2..9138364da 100644 --- a/src/form/index.js +++ b/src/form/index.js @@ -138,4 +138,3 @@ export default createComponent({ ); }, }); -// diff --git a/src/form/test/events.spec.js b/src/form/test/events.spec.js index e55873c9a..9c28e69f0 100644 --- a/src/form/test/events.spec.js +++ b/src/form/test/events.spec.js @@ -1,5 +1,4 @@ -import { later } from '../../../test'; -import { mountForm, mountSimpleRulesForm } from './shared'; +import { mountForm, submitForm, 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 later(); + await submitForm(wrapper); expect(wrapper).toMatchSnapshot(); expect(onFailed).toHaveBeenCalledWith({ diff --git a/src/form/test/field-type.spec.js b/src/form/test/field-type.spec.js new file mode 100644 index 000000000..b41aedef5 --- /dev/null +++ b/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: ` + + + + + + + `, + data, + methods: { + onSubmit, + onFailed, + }, + }); + + return { + wrapper, + onSubmit, + onFailed, + }; +} + +test('use switch', async () => { + const { wrapper, onSubmit, onFailed } = mountFormWithChild({ + template: '', + 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: '', + 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: ` + + 1 + 2 + + `, + 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: ` + + 1 + 2 + + `, + 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: '', + 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: '', + 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: '', + 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: '', + 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' }] }); +}); diff --git a/src/form/test/index.spec.js b/src/form/test/index.spec.js index 70789ddea..47ff652b7 100644 --- a/src/form/test/index.spec.js +++ b/src/form/test/index.spec.js @@ -1,5 +1,4 @@ -import { later } from '../../../test'; -import { mountForm } from './shared'; +import { mountForm, submitForm } 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 later(); + await submitForm(wrapper); 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: '' }); }); diff --git a/src/form/test/props.spec.js b/src/form/test/props.spec.js index fea8101f0..7cdcba121 100644 --- a/src/form/test/props.spec.js +++ b/src/form/test/props.spec.js @@ -1,5 +1,4 @@ -import { mount, later } from '../../../test'; -import { mountForm, getSimpleRules } from './shared'; +import { mountForm, submitForm, 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 later(); + await submitForm(wrapper); 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 later(10); + await submitForm(wrapper); 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 later(); + await submitForm(wrapper); 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 later(); + await submitForm(wrapper); expect(onSubmit).toHaveBeenCalledWith({ A: 'foo', B: 'foo' }); }); test('label-align prop', () => { - const wrapper = mount({ + const wrapper = mountForm({ template: ` @@ -123,7 +118,7 @@ test('label-align prop', () => { }); test('label-width prop', () => { - const wrapper = mount({ + const wrapper = mountForm({ template: ` @@ -135,7 +130,7 @@ test('label-width prop', () => { }); test('input-align prop', () => { - const wrapper = mount({ + const wrapper = mountForm({ template: ` @@ -149,7 +144,7 @@ test('input-align prop', () => { }); test('error-message-align prop', () => { - const wrapper = mount({ + const wrapper = mountForm({ template: `