blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-06 03:57:59 +08:00
Code Issues Projects Releases Wiki Activity

test(Form): migrate props test cases (#9734)

Browse Source
This commit is contained in:
neverland 2021-10-27 10:39:43 +08:00 committed by GitHub
parent bfc5b16c6d
commit 4778b07d40
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 576 additions and 533 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

100
packages/vant/src/form/test/__snapshots__/props.legacy.js.snap
View File

@ -1,100 +0,0 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`colon prop 1`] = `
<form class="van-form">
<div class="van-cell van-field">
<div class="van-cell__title van-field__label"><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">Custom Label:</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[`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">
<div class="van-button__content"></div>
</button>
</form>
`;

171
packages/vant/src/form/test/__snapshots__/props.spec.tsx.snap Normal file
View File

@ -0,0 +1,171 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`should render colon when using colon prop 1`] = `
<form class="van-form">
<div class="van-cell van-field">
<div class="van-cell__title van-field__label">
<label>
Label:
</label>
</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">
Custom Label:
</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[`should render error-message-align prop correctly 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[`should render input-align prop correctly 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[`should render label-align prop correctly 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">
<label>
Label
</label>
</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">
<label>
Label
</label>
</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[`should render label-width prop correctly 1`] = `
<form class="van-form">
<div class="van-cell van-field">
<div class="van-cell__title van-field__label"
style="width: 5rem;"
>
<label>
Label
</label>
</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;"
>
<label>
Label
</label>
</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[`should validate first field when using validate-first 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"
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>
</form>
`;

433
packages/vant/src/form/test/props.legacy.js
View File

@ -1,433 +0,0 @@
import { later, mockScrollIntoView } from '../../../test';
import { mountForm, submitForm, getSimpleRules } from './shared';
test('rules prop - execute order', async () => {
const onFailed = jest.fn();
const wrapper = mountForm({
template: `
<van-form @failed="onFailed">
<van-field name="A" :rules="rules" value="123" />
<van-button native-type="submit" />
</van-form>
`,
data() {
return {
rules: [
{ required: true, message: 'A' },
{ validator: (val) => val.length > 6, message: 'B' },
{ validator: (val) => val !== 'foo', message: 'C' },
],
};
},
methods: {
onFailed,
},
});
await submitForm(wrapper);
expect(onFailed).toHaveBeenCalledWith({
errors: [{ message: 'B', name: 'A' }],
values: { A: '123' },
});
});
test('rules prop - pattern', async () => {
const onFailed = jest.fn();
const wrapper = mountForm({
template: `
<van-form @failed="onFailed">
<van-field name="A" :rules="rules" value="123" />
<van-button native-type="submit" />
</van-form>
`,
data() {
return {
rules: [{ pattern: /\d{6}/, message: 'foo' }],
};
},
methods: {
onFailed,
},
});
await submitForm(wrapper);
expect(onFailed).toHaveBeenCalledWith({
errors: [{ message: 'foo', name: 'A' }],
values: { A: '123' },
});
});
test('rules prop - message function', async () => {
const onFailed = jest.fn();
const wrapper = mountForm({
template: `
<van-form @failed="onFailed">
<van-field name="A" :rules="rules" value="123" />
<van-button native-type="submit" />
</van-form>
`,
data() {
return {
rules: [{ pattern: /\d{6}/, message: (val) => val }],
};
},
methods: {
onFailed,
},
});
await submitForm(wrapper);
expect(onFailed).toHaveBeenCalledWith({
errors: [{ message: '123', name: 'A' }],
values: { A: '123' },
});
});
test('rules prop - formatter', async () => {
const onFailed = jest.fn();
const wrapper = mountForm({
template: `
<van-form @failed="onFailed">
<van-field name="A" :rules="rules" value=" " />
<van-button native-type="submit" />
</van-form>
`,
data() {
return {
rules: [
{
message: 'foo',
required: true,
formatter: (val, rule) => {
expect(rule.message).toEqual('foo');
return val.trim();
},
},
],
};
},
methods: {
onFailed,
},
});
await submitForm(wrapper);
expect(onFailed).toHaveBeenCalledWith({
errors: [{ message: 'foo', name: 'A' }],
values: { A: ' ' },
});
});
test('rules prop - async validator', async () => {
const onFailed = jest.fn();
const wrapper = mountForm({
template: `
<van-form @failed="onFailed">
<van-field name="A" :rules="rules" value="123" />
<van-button native-type="submit" />
</van-form>
`,
data() {
return {
rules: [
{
validator: (value, rule) => {
expect(value).toEqual('123');
expect(typeof rule).toEqual('object');
return new Promise((resolve) => resolve(true));
},
message: 'should pass',
},
{
validator: () => new Promise((resolve) => resolve(false)),
message: 'should fail',
},
],
};
},
methods: {
onFailed,
},
});
await submitForm(wrapper);
expect(onFailed).toHaveBeenCalledWith({
errors: [{ message: 'should fail', name: 'A' }],
values: { A: '123' },
});
});
test('validate-first prop', async () => {
const onSubmit = jest.fn();
const onFailed = jest.fn();
const wrapper = mountForm({
template: `
<van-form validate-first @submit="onSubmit" @failed="onFailed">
<van-field name="A" :rules="rulesA" :value="value" />
<van-field name="B" :rules="rulesB" :value="value" />
<van-button native-type="submit" />
</van-form>
`,
data() {
return {
...getSimpleRules(),
value: '',
};
},
methods: {
onSubmit,
onFailed,
},
});
await submitForm(wrapper);
expect(wrapper.html()).toMatchSnapshot();
expect(onFailed).toHaveBeenCalledWith({
errors: [{ message: 'A failed', name: 'A' }],
values: { A: '', B: '' },
});
wrapper.setData({ value: 'foo' });
await submitForm(wrapper);
expect(onSubmit).toHaveBeenCalledWith({ A: 'foo', B: 'foo' });
});
test('colon prop', () => {
const wrapper = mountForm({
template: `
<van-form colon>
<van-field label="Label" />
<van-field>
<template #label>Custom Label</template>
</van-field>
</van-form>
`,
});
expect(wrapper.html()).toMatchSnapshot();
});
test('label-align prop', () => {
const wrapper = mountForm({
template: `
<van-form label-align="right">
<van-field label="Label" />
<van-field label="Label" label-align="center" />
</van-form>
`,
});
expect(wrapper.html()).toMatchSnapshot();
});
test('label-width prop', () => {
const wrapper = mountForm({
template: `
<van-form label-width="5rem">
<van-field label="Label" />
<van-field label="Label" label-width="10vw" />
</van-form>
`,
});
expect(wrapper.html()).toMatchSnapshot();
});
test('input-align prop', () => {
const wrapper = mountForm({
template: `
<van-form input-align="right">
<van-field />
<van-field>
<template #input>
<div />
</template>
</van-field>
</van-form>
`,
});
expect(wrapper.html()).toMatchSnapshot();
});
test('error-message-align prop', () => {
const wrapper = mountForm({
template: `
<van-form error-message-align="right">
<van-field error-message="Error" />
</van-form>
`,
});
expect(wrapper.html()).toMatchSnapshot();
});
test('validate-trigger - onBlur', async () => {
const wrapper = mountForm({
template: `
<van-form ref="form">
<van-field name="A" :rules="rulesA" value="" />
</van-form>
`,
data: getSimpleRules,
});
const input = wrapper.find('input');
input.trigger('input');
await later();
expect(wrapper.contains('.van-field__error-message')).toBeFalsy();
input.trigger('blur');
await later();
expect(wrapper.contains('.van-field__error-message')).toBeTruthy();
});
test('validate-trigger - onChange', async () => {
const wrapper = mountForm({
template: `
<van-form validate-trigger="onChange" ref="form">
<van-field v-model="value" name="A" :rules="rulesA" />
</van-form>
`,
data() {
return {
...getSimpleRules(),
value: '',
};
},
});
const input = wrapper.find('input');
input.trigger('blur');
await later();
expect(wrapper.contains('.van-field__error-message')).toBeFalsy();
wrapper.setData({ value: '1' });
await later();
expect(wrapper.contains('.van-field__error-message')).toBeFalsy();
wrapper.setData({ value: '' });
await later();
expect(wrapper.contains('.van-field__error-message')).toBeTruthy();
});
test('validate-trigger - custom trigger in rules', async () => {
const wrapper = mountForm({
template: `
<van-form validate-trigger="none" ref="form">
<van-field name="A" :rules="rulesA" :value="valueA" />
<van-field name="B" :rules="rulesB" :value="valueB" />
</van-form>
`,
data() {
return {
valueA: '',
valueB: '',
rulesA: [
{
message: 'A',
required: true,
trigger: 'onChange',
},
],
rulesB: [
{
message: 'B',
required: true,
trigger: 'onBlur',
},
],
};
},
});
const inputs = wrapper.findAll('input');
inputs[0].trigger('blur');
wrapper.setData({ valueB: '1' });
await later();
wrapper.setData({ valueB: '' });
await later();
expect(wrapper.contains('.van-field__error-message')).toBeFalsy();
inputs[1].trigger('blur');
wrapper.setData({ valueA: '1' });
await later();
wrapper.setData({ valueA: '' });
await later();
expect(
wrapper.element.querySelectorAll('.van-field__error-message').length
).toEqual(2);
});
test('scroll-to-error prop', async () => {
const fn = mockScrollIntoView();
const wrapper = mountForm({
template: `
<van-form scroll-to-error>
<van-field name="A" :rules="rulesA" value="" />
<van-button native-type="submit" />
</van-form>
`,
data: getSimpleRules,
});
await submitForm(wrapper);
expect(fn).toHaveBeenCalledTimes(1);
});
test('show-error-message prop', async () => {
const wrapper = mountForm({
template: `
<van-form :show-error-message="showErrorMessage">
<van-field name="A" :rules="rulesA" value="" />
<van-button native-type="submit" />
</van-form>
`,
data() {
return {
...getSimpleRules(),
showErrorMessage: false,
};
},
});
await submitForm(wrapper);
expect(wrapper.contains('.van-field__error-message')).toBeFalsy();
wrapper.setData({ showErrorMessage: true });
await submitForm(wrapper);
expect(wrapper.contains('.van-field__error-message')).toBeTruthy();
});
test('show-error prop', async () => {
const wrapper = mountForm({
template: `
<van-form :show-error="showError">
<van-field name="A" :rules="rulesA" value="" />
<van-button native-type="submit" />
</van-form>
`,
data() {
return {
...getSimpleRules(),
showError: false,
};
},
});
await submitForm(wrapper);
expect(wrapper.contains('.van-field--error')).toBeFalsy();
wrapper.setData({ showError: true });
await submitForm(wrapper);
expect(wrapper.contains('.van-field--error')).toBeTruthy();
});

405
packages/vant/src/form/test/props.spec.tsx Normal file
View File

@ -0,0 +1,405 @@
import { mount, later, mockScrollIntoView } from '../../../test';
import { submitForm, getSimpleRules } from './shared';
import { Form } from '..';
import { Field, FieldRule } from '../../field';
test('should ensure execute order of rules prop', async () => {
const onFailed = jest.fn();
const rules: FieldRule[] = [
{ required: true, message: 'A' },
{ validator: (val) => val.length > 6, message: 'B' },
{ validator: (val) => val !== 'foo', message: 'C' },
];
const wrapper = mount({
render() {
return (
<Form onFailed={onFailed}>
<Field name="A" rules={rules} modelValue="123" />
</Form>
);
},
});
await submitForm(wrapper);
expect(onFailed).toHaveBeenCalledWith({
errors: [{ message: 'B', name: 'A' }],
values: { A: '123' },
});
});
test('should support pattern in rules prop', async () => {
const onFailed = jest.fn();
const rules: FieldRule[] = [{ pattern: /\d{6}/, message: 'foo' }];
const wrapper = mount({
render() {
return (
<Form onFailed={onFailed}>
<Field name="A" rules={rules} modelValue="123" />
</Form>
);
},
});
await submitForm(wrapper);
expect(onFailed).toHaveBeenCalledWith({
errors: [{ message: 'foo', name: 'A' }],
values: { A: '123' },
});
});
test('should support message function in rules prop', async () => {
const onFailed = jest.fn();
const rules: FieldRule[] = [{ pattern: /\d{6}/, message: (val) => val }];
const wrapper = mount({
render() {
return (
<Form onFailed={onFailed}>
<Field name="A" rules={rules} modelValue="123" />
</Form>
);
},
});
await submitForm(wrapper);
expect(onFailed).toHaveBeenCalledWith({
errors: [{ message: '123', name: 'A' }],
values: { A: '123' },
});
});
test('should support formatter in rules prop', async () => {
const onFailed = jest.fn();
const rules: FieldRule[] = [
{
message: 'foo',
required: true,
formatter: (val, rule) => {
expect(rule.message).toEqual('foo');
return val.trim();
},
},
];
const wrapper = mount({
render() {
return (
<Form onFailed={onFailed}>
<Field name="A" rules={rules} modelValue=" " />
</Form>
);
},
});
await submitForm(wrapper);
expect(onFailed).toHaveBeenCalledWith({
errors: [{ message: 'foo', name: 'A' }],
values: { A: ' ' },
});
});
test('should support async validator in rules prop', async () => {
const onFailed = jest.fn();
const rules: FieldRule[] = [
{
validator: (value, rule) => {
expect(value).toEqual('123');
expect(typeof rule).toEqual('object');
return new Promise((resolve) => resolve(true));
},
message: 'should pass',
},
{
validator: () => new Promise((resolve) => resolve(false)),
message: 'should fail',
},
];
const wrapper = mount({
render() {
return (
<Form onFailed={onFailed}>
<Field name="A" rules={rules} modelValue="123" />
</Form>
);
},
});
await submitForm(wrapper);
expect(onFailed).toHaveBeenCalledWith({
errors: [{ message: 'should fail', name: 'A' }],
values: { A: '123' },
});
});
test('should validate first field when using validate-first prop', async () => {
const onSubmit = jest.fn();
const onFailed = jest.fn();
const wrapper = mount({
data() {
return {
...getSimpleRules(),
value: '',
};
},
render() {
return (
<Form validateFirst onSubmit={onSubmit} onFailed={onFailed}>
<Field name="A" rules={this.rulesA} modelValue={this.value} />
<Field name="B" rules={this.rulesB} modelValue={this.value} />
</Form>
);
},
});
await submitForm(wrapper);
expect(wrapper.html()).toMatchSnapshot();
expect(onFailed).toHaveBeenCalledWith({
errors: [{ message: 'A failed', name: 'A' }],
values: { A: '', B: '' },
});
await wrapper.setData({ value: 'foo' });
await submitForm(wrapper);
expect(onSubmit).toHaveBeenCalledWith({ A: 'foo', B: 'foo' });
});
test('should render colon when using colon prop', () => {
const wrapper = mount({
render() {
return (
<Form colon>
<Field label="Label" />
<Field v-slots={{ label: () => 'Custom Label' }} />
</Form>
);
},
});
expect(wrapper.html()).toMatchSnapshot();
});
test('should render label-align prop correctly', () => {
const wrapper = mount({
render() {
return (
<Form labelAlign="right">
<Field label="Label" />
<Field label="Label" labelAlign="center" />
</Form>
);
},
});
expect(wrapper.html()).toMatchSnapshot();
});
test('should render label-width prop correctly', () => {
const wrapper = mount({
render() {
return (
<Form labelWidth="5rem">
<Field label="Label" />
<Field label="Label" labelWidth="10vw" />
</Form>
);
},
});
expect(wrapper.html()).toMatchSnapshot();
});
test('should render input-align prop correctly', () => {
const wrapper = mount({
render() {
return (
<Form inputAlign="right">
<Field />
<Field v-slots={{ input: () => <div /> }} />
</Form>
);
},
});
expect(wrapper.html()).toMatchSnapshot();
});
test('should render error-message-align prop correctly', () => {
const wrapper = mount({
render() {
return (
<Form errorMessageAlign="right">
<Field errorMessage="Error" />
</Form>
);
},
});
expect(wrapper.html()).toMatchSnapshot();
});
test('should trigger validate after blurring when validate-trigger prop is onBlur', async () => {
const wrapper = mount({
data: getSimpleRules,
render() {
return (
<Form ref="form" validateTrigger="onBlur">
<Field name="A" rules={this.rulesA} modelValue="" />
</Form>
);
},
});
const input = wrapper.find('input');
await input.trigger('input');
expect(wrapper.find('.van-field__error-message').exists()).toBeFalsy();
await input.trigger('blur');
expect(wrapper.find('.van-field__error-message').exists()).toBeTruthy();
});
test('should trigger validate after inputting when validate-trigger prop is onChange', async () => {
const wrapper = mount({
data() {
return {
...getSimpleRules(),
value: '',
};
},
render() {
return (
<Form validateTrigger="onChange" ref="form">
<Field v-model={this.value} name="A" rules={this.rulesA} />
</Form>
);
},
});
const input = wrapper.find('input');
await input.trigger('blur');
expect(wrapper.find('.van-field__error-message').exists()).toBeFalsy();
await wrapper.setData({ value: '1' });
expect(wrapper.find('.van-field__error-message').exists()).toBeFalsy();
await wrapper.setData({ value: '' });
expect(wrapper.find('.van-field__error-message').exists).toBeTruthy();
});
test('should allow to custom trigger in rules', async () => {
const rulesA = [
{
message: 'A',
required: true,
trigger: 'onChange' as const,
},
];
const rulesB = [
{
message: 'B',
required: true,
trigger: 'onBlur' as const,
},
];
const wrapper = mount({
data() {
return {
valueA: '',
valueB: '',
};
},
render() {
return (
<Form validate-trigger="none" ref="form">
<Field name="A" rules={rulesA} modelValue={this.valueA} />
<Field name="B" rules={rulesB} modelValue={this.valueB} />
</Form>
);
},
});
const inputs = wrapper.findAll('input');
await inputs[0].trigger('blur');
await wrapper.setData({ valueB: '1' });
await wrapper.setData({ valueB: '' });
expect(wrapper.find('.van-field__error-message').exists()).toBeFalsy();
await inputs[1].trigger('blur');
await wrapper.setData({ valueA: '1' });
await wrapper.setData({ valueA: '' });
await later();
expect(
wrapper.element.querySelectorAll('.van-field__error-message').length
).toEqual(2);
});
test('should trigger scroll when using scroll-to-error prop', async () => {
const fn = mockScrollIntoView();
const wrapper = mount({
data: getSimpleRules,
render() {
return (
<Form scrollToError>
<Field name="A" rules={this.rulesA} modelValue="" />
</Form>
);
},
});
await submitForm(wrapper);
expect(fn).toHaveBeenCalledTimes(1);
});
test('should allow to control the display of error message by show-error-message prop', async () => {
const wrapper = mount({
data() {
return {
...getSimpleRules(),
showErrorMessage: false,
};
},
render() {
return (
<Form showErrorMessage={this.showErrorMessage}>
<Field name="A" rules={this.rulesA} modelValue="" />
</Form>
);
},
});
await submitForm(wrapper);
expect(wrapper.find('.van-field__error-message').exists()).toBeFalsy();
await wrapper.setData({ showErrorMessage: true });
await submitForm(wrapper);
expect(wrapper.find('.van-field__error-message').exists()).toBeTruthy();
});
test('should allow to control the display of error status by show-error prop', async () => {
const wrapper = mount({
data() {
return {
...getSimpleRules(),
showError: false,
};
},
render() {
return (
<Form showError={this.showError}>
<Field name="A" rules={this.rulesA} modelValue="" />
</Form>
);
},
});
await submitForm(wrapper);
expect(wrapper.find('.van-field--error').exists()).toBeFalsy();
await wrapper.setData({ showError: true });
await submitForm(wrapper);
expect(wrapper.find('.van-field--error').exists()).toBeTruthy();
});