test(Form): migrate some legacy test cases (#9696)

packages/vant/src/form/test/__snapshots__/events.legacy.js.snap

@@ -1,20 +0,0 @@
-// 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">
-    <div class="van-button__content"></div>
-  </button>
-</form>
-`;

packages/vant/src/form/test/__snapshots__/events.spec.tsx.snap

@@ -0,0 +1,32 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should emit failed event when validating failed 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 class="van-field__error-message">
+        B failed
+      </div>
+    </div>
+  </div>
+</form>
+`;

packages/vant/src/form/test/events.legacy.js

@@ -1,67 +0,0 @@
-import { mountForm, submitForm, mountSimpleRulesForm } from './shared';
-
-test('submit event', async () => {
-  const onSubmit = jest.fn();
-  const wrapper = mountForm({
-    template: `
-      <van-form @submit="onSubmit">
-        <van-field name="A" value="bar" />
-        <van-button native-type="submit" />
-      </van-form>
-    `,
-    methods: {
-      onSubmit,
-    },
-  });
-
-  await submitForm(wrapper);
-
-  expect(onSubmit).toHaveBeenCalledWith({ A: 'bar' });
-});
-
-test('failed event', async () => {
-  const onFailed = jest.fn();
-  const wrapper = mountSimpleRulesForm({
-    methods: {
-      onFailed,
-    },
-  });
-
-  await submitForm(wrapper);
-
-  expect(wrapper.html()).toMatchSnapshot();
-  expect(onFailed).toHaveBeenCalledWith({
-    errors: [
-      { name: 'A', message: 'A failed' },
-      { name: 'B', message: 'B failed' },
-    ],
-    values: { A: '', B: '' },
-  });
-});
-
-test('failed event when rule message is empty', async () => {
-  const onFailed = jest.fn();
-  const wrapper = mountForm({
-    template: `
-      <van-form ref="form" @failed="onFailed">
-        <van-field name="A" :rules="rulesA" value="" />
-        <van-button native-type="submit" />
-      </van-form>
-    `,
-    data() {
-      return {
-        rulesA: [{ required: true }],
-      };
-    },
-    methods: {
-      onFailed,
-    },
-  });
-
-  await submitForm(wrapper);
-
-  expect(onFailed).toHaveBeenCalledWith({
-    errors: [{ name: 'A' }],
-    values: { A: '' },
-  });
-});

packages/vant/src/form/test/events.spec.tsx

@@ -0,0 +1,66 @@
+import { mount } from '../../../test';
+import { submitForm, mountSimpleRulesForm } from './shared';
+import { Form } from '..';
+import { Field } from '../../field';
+
+test('should emit submit event when submitting form', async () => {
+  const onSubmit = jest.fn();
+  const wrapper = mount({
+    render() {
+      return (
+        <Form onSubmit={onSubmit}>
+          <Field name="A" modelValue="bar" />
+        </Form>
+      );
+    },
+  });
+
+  await submitForm(wrapper);
+
+  expect(onSubmit).toHaveBeenCalledWith({ A: 'bar' });
+});
+
+test('should emit failed event when validating failed', async () => {
+  const onFailed = jest.fn();
+  const wrapper = mountSimpleRulesForm({
+    methods: {
+      onFailed,
+    },
+  });
+
+  await submitForm(wrapper);
+
+  expect(wrapper.html()).toMatchSnapshot();
+  expect(onFailed).toHaveBeenCalledWith({
+    errors: [
+      { name: 'A', message: 'A failed' },
+      { name: 'B', message: 'B failed' },
+    ],
+    values: { A: '', B: '' },
+  });
+});
+
+test('should emit failed event correctly when rule message is empty', async () => {
+  const onFailed = jest.fn();
+  const wrapper = mount({
+    render() {
+      return (
+        <Form ref="form" onFailed={onFailed}>
+          <Field name="A" rules={this.rulesA} modelValue="" />
+        </Form>
+      );
+    },
+    data() {
+      return {
+        rulesA: [{ required: true }],
+      };
+    },
+  });
+
+  await submitForm(wrapper);
+
+  expect(onFailed).toHaveBeenCalledWith({
+    errors: [{ name: 'A', message: '' }],
+    values: { A: '' },
+  });
+});

packages/vant/src/form/test/index.legacy.js

@@ -1,75 +0,0 @@
-import { mountForm, submitForm } 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,
-    },
-  });
-
-  await submitForm(wrapper);
-  expect(onSubmit).toHaveBeenCalledWith({ A: '' });
-
-  wrapper.setData({ list: ['A', 'B'] });
-
-  await submitForm(wrapper);
-  expect(onSubmit).toHaveBeenCalledWith({ A: '', B: '' });
-
-  wrapper.setData({ list: ['B'] });
-
-  await submitForm(wrapper);
-  expect(onSubmit).toHaveBeenCalledWith({ B: '' });
-});
-
-test('dynamic add fileds when validate-first', async () => {
-  const onFailed = jest.fn();
-  const wrapper = mountForm({
-    template: `
-      <van-form validate-first @failed="onFailed">
-        <van-field
-          v-if="show"
-          name="A"
-          value=""
-          :rules="[{ required: true, message: 'A' }]"
-        />
-        <van-field
-          name="B"
-          value=""
-          :rules="[{ required: true, message: 'B' }]"
-        />
-        <van-button native-type="submit" />
-      </van-form>
-    `,
-    data() {
-      return {
-        show: false,
-      };
-    },
-    methods: {
-      onFailed,
-    },
-  });
-
-  await submitForm(wrapper);
-  expect(onFailed.mock.calls[0][0].errors[0].name).toEqual('B');
-
-  wrapper.setData({ show: true });
-
-  await submitForm(wrapper);
-  expect(onFailed.mock.calls[1][0].errors[0].name).toEqual('A');
-});

packages/vant/src/form/test/index.spec.tsx

@@ -1,11 +1,11 @@
 import { Form } from '..';
 import { Field } from '../../field';
-import { mountForm } from './shared';
+import { later, mount } from '../../../test';
-import { later } from '../../../test';
+import { submitForm } from './shared';
 
 test('should not reset validation after blurred when validate-trigger is onChange', async () => {
   const validator = (val: string) => val.length > 4;
-  const wrapper = mountForm({
+  const wrapper = mount({
     data() {
       return {
         value: '',
@@ -34,3 +34,68 @@ test('should not reset validation after blurred when validate-trigger is onChang
   await input.trigger('blur');
   expect(wrapper.find('.van-field__error-message').exists()).toBeTruthy();
 });
+
+test('should render correctly when dynamically add/remove fields', async () => {
+  const onSubmit = jest.fn();
+  const wrapper = mount({
+    render() {
+      return (
+        <Form onSubmit={onSubmit}>
+          {this.list.map((item) => (
+            <Field key={item} name={item} modelValue="" />
+          ))}
+        </Form>
+      );
+    },
+    data() {
+      return { list: ['A'] };
+    },
+  });
+
+  await submitForm(wrapper);
+  expect(onSubmit).toHaveBeenCalledWith({ A: '' });
+
+  await wrapper.setData({ list: ['A', 'B'] });
+  await submitForm(wrapper);
+  expect(onSubmit).toHaveBeenCalledWith({ A: '', B: '' });
+
+  await wrapper.setData({ list: ['B'] });
+  await submitForm(wrapper);
+  expect(onSubmit).toHaveBeenCalledWith({ B: '' });
+});
+
+test('should validate first correctly when dynamically add field', async () => {
+  const onFailed = jest.fn();
+  const wrapper = mount({
+    render() {
+      return (
+        <Form validateFirst onFailed={onFailed}>
+          {this.show && (
+            <Field
+              name="A"
+              rules={[{ required: true, message: 'A' }]}
+              modelValue=""
+            />
+          )}
+          <Field
+            name="B"
+            rules={[{ required: true, message: 'B' }]}
+            modelValue=""
+          />
+        </Form>
+      );
+    },
+    data() {
+      return {
+        show: false,
+      };
+    },
+  });
+
+  await submitForm(wrapper);
+  expect(onFailed.mock.calls[0][0].errors[0].name).toEqual('B');
+
+  await wrapper.setData({ show: true });
+  await submitForm(wrapper);
+  expect(onFailed.mock.calls[1][0].errors[0].name).toEqual('A');
+});

packages/vant/src/form/test/shared.js

@@ -1,31 +0,0 @@
-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 });
-}
-
-export function getSimpleRules() {
-  return {
-    rulesA: [{ required: true, message: 'A failed' }],
-    rulesB: [{ required: true, message: 'B failed' }],
-  };
-}
-
-export function mountSimpleRulesForm(options) {
-  return mountForm({
-    template: `
-      <van-form ref="form" @failed="onFailed">
-        <van-field name="A" :rules="rulesA" value="" />
-        <van-field name="B" :rules="rulesB" value="" />
-        <van-button native-type="submit" />
-      </van-form>
-    `,
-    data: getSimpleRules,
-    ...options,
-  });
-}

packages/vant/src/form/test/shared.tsx

@@ -0,0 +1,31 @@
+import { mount, later } from '../../../test';
+import { Form } from '..';
+import { Field } from '../../field';
+import type { VueWrapper } from '@vue/test-utils';
+
+export async function submitForm(wrapper: VueWrapper<any>) {
+  await wrapper.find('form').trigger('submit');
+  return later();
+}
+
+export function getSimpleRules() {
+  return {
+    rulesA: [{ required: true, message: 'A failed' }],
+    rulesB: [{ required: true, message: 'B failed' }],
+  };
+}
+
+export function mountSimpleRulesForm(options: any) {
+  return mount({
+    render() {
+      return (
+        <Form ref="form" onFailed={this.onFailed}>
+          <Field name="A" rules={this.rulesA} modelValue="" />
+          <Field name="B" rules={this.rulesB} modelValue="" />
+        </Form>
+      );
+    },
+    data: getSimpleRules,
+    ...options,
+  });
+}