mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
test(Form): add test cases of props
This commit is contained in:
陈嘉涵
parent
4e21be94c2
commit
2970599c27
@ -2,7 +2,7 @@
|
||||
|
||||
### 介绍
|
||||
|
||||
用于数据录入、校验，支持输入框、单选框、复选框、文件上传等类型
|
||||
用于数据录入、校验，支持输入框、单选框、复选框、文件上传等类型，2.5 版本开始支持此组件
|
||||
|
||||
### 引入
|
||||
|
||||
|
||||
18
src/form/test/__snapshots__/events.spec.js.snap
Normal file
18
src/form/test/__snapshots__/events.spec.js.snap
Normal file
@ -0,0 +1,18 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`failed event 1`] = `
|
||||
<form class="van-form">
|
||||
<div class="van-cell van-field van-field--error">
|
||||
<div class="van-cell__value van-cell__value--alone van-field__value">
|
||||
<div class="van-field__body"><input type="text" name="A" class="van-field__control"></div>
|
||||
<div class="van-field__error-message">A failed</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-cell van-field van-field--error">
|
||||
<div class="van-cell__value van-cell__value--alone van-field__value">
|
||||
<div class="van-field__body"><input type="text" name="B" class="van-field__control"></div>
|
||||
<div class="van-field__error-message">B failed</div>
|
||||
</div>
|
||||
</div> <button type="submit" class="van-button van-button--default van-button--normal"></button>
|
||||
</form>
|
||||
`;
|
||||
81
src/form/test/__snapshots__/props.spec.js.snap
Normal file
81
src/form/test/__snapshots__/props.spec.js.snap
Normal file
@ -0,0 +1,81 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`error-message-align prop 1`] = `
|
||||
<form class="van-form">
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__value van-cell__value--alone van-field__value">
|
||||
<div class="van-field__body"><input type="text" class="van-field__control"></div>
|
||||
<div class="van-field__error-message van-field__error-message--right">Error</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
`;
|
||||
|
||||
exports[`input-align prop 1`] = `
|
||||
<form class="van-form">
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__value van-cell__value--alone van-field__value">
|
||||
<div class="van-field__body"><input type="text" class="van-field__control van-field__control--right"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__value van-cell__value--alone van-field__value">
|
||||
<div class="van-field__body">
|
||||
<div class="van-field__control van-field__control--right van-field__control--custom">
|
||||
<div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
`;
|
||||
|
||||
exports[`label-align prop 1`] = `
|
||||
<form class="van-form">
|
||||
<div class="van-cell van-field van-field--label-right">
|
||||
<div class="van-cell__title van-field__label van-field__label--right"><span>Label</span></div>
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body"><input type="text" class="van-field__control"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-cell van-field van-field--label-center">
|
||||
<div class="van-cell__title van-field__label van-field__label--center"><span>Label</span></div>
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body"><input type="text" class="van-field__control"></div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
`;
|
||||
|
||||
exports[`label-width prop 1`] = `
|
||||
<form class="van-form">
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__title van-field__label" style="width: 5rem;"><span>Label</span></div>
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body"><input type="text" class="van-field__control"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__title van-field__label" style="width: 10vw;"><span>Label</span></div>
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body"><input type="text" class="van-field__control"></div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
`;
|
||||
|
||||
exports[`validate-first prop 1`] = `
|
||||
<form class="van-form">
|
||||
<div class="van-cell van-field van-field--error">
|
||||
<div class="van-cell__value van-cell__value--alone van-field__value">
|
||||
<div class="van-field__body"><input type="text" name="A" class="van-field__control"></div>
|
||||
<div class="van-field__error-message">A failed</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__value van-cell__value--alone van-field__value">
|
||||
<div class="van-field__body"><input type="text" name="B" class="van-field__control"></div>
|
||||
</div>
|
||||
</div> <button type="submit" class="van-button van-button--default van-button--normal"></button>
|
||||
</form>
|
||||
`;
|
||||
@ -1,8 +1,5 @@
|
||||
import { mount, later } from '../../../test';
|
||||
|
||||
function mountForm(options) {
|
||||
return mount(options, { attachToDocument: true });
|
||||
}
|
||||
import { later } from '../../../test';
|
||||
import { mountForm } from './shared';
|
||||
|
||||
test('submit event', async () => {
|
||||
const onSubmit = jest.fn();
|
||||
@ -46,8 +43,9 @@ test('failed event', async () => {
|
||||
});
|
||||
|
||||
wrapper.find('.van-button').trigger('click');
|
||||
|
||||
await later();
|
||||
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
expect(onFailed).toHaveBeenCalledWith({
|
||||
errors: [
|
||||
{ name: 'A', message: 'A failed' },
|
||||
82
src/form/test/props.spec.js
Normal file
82
src/form/test/props.spec.js
Normal file
@ -0,0 +1,82 @@
|
||||
import { mount, later } from '../../../test';
|
||||
import { mountForm } from './shared';
|
||||
|
||||
test('validate-first prop', async () => {
|
||||
const onFailed = jest.fn();
|
||||
const wrapper = mountForm({
|
||||
template: `
|
||||
<van-form validate-first @failed="onFailed">
|
||||
<van-field name="A" :rules="rulesA" value="" />
|
||||
<van-field name="B" :rules="rulesB" value="" />
|
||||
<van-button native-type="submit" />
|
||||
</van-form>
|
||||
`,
|
||||
data() {
|
||||
return {
|
||||
rulesA: [{ required: true, message: 'A failed' }],
|
||||
rulesB: [{ required: true, message: 'B failed' }],
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
onFailed,
|
||||
},
|
||||
});
|
||||
|
||||
wrapper.find('.van-button').trigger('click');
|
||||
await later();
|
||||
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
expect(onFailed).toHaveBeenCalledWith({
|
||||
errors: [{ message: 'A failed', name: 'A' }],
|
||||
values: { A: '', B: '' },
|
||||
});
|
||||
});
|
||||
|
||||
test('label-align prop', () => {
|
||||
const wrapper = mount({
|
||||
template: `
|
||||
<van-form label-align="right">
|
||||
<van-field label="Label" />
|
||||
<van-field label="Label" label-align="center" />
|
||||
</van-form>
|
||||
`,
|
||||
});
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('label-width prop', () => {
|
||||
const wrapper = mount({
|
||||
template: `
|
||||
<van-form label-width="5rem">
|
||||
<van-field label="Label" />
|
||||
<van-field label="Label" label-width="10vw" />
|
||||
</van-form>
|
||||
`,
|
||||
});
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('input-align prop', () => {
|
||||
const wrapper = mount({
|
||||
template: `
|
||||
<van-form input-align="right">
|
||||
<van-field />
|
||||
<van-field>
|
||||
<div slot="input" />
|
||||
</van-field>
|
||||
</van-form>
|
||||
`,
|
||||
});
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('error-message-align prop', () => {
|
||||
const wrapper = mount({
|
||||
template: `
|
||||
<van-form error-message-align="right">
|
||||
<van-field error-message="Error" />
|
||||
</van-form>
|
||||
`,
|
||||
});
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
});
|
||||
5
src/form/test/shared.js
Normal file
5
src/form/test/shared.js
Normal file
@ -0,0 +1,5 @@
|
||||
import { mount } from '../../../test';
|
||||
|
||||
export function mountForm(options) {
|
||||
return mount(options, { attachToDocument: true });
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user