test(Form): add test cases of props

src/form/README.zh-CN.md

@@ -2,7 +2,7 @@
 
 ### 介绍
 
-用于数据录入、校验，支持输入框、单选框、复选框、文件上传等类型
+用于数据录入、校验，支持输入框、单选框、复选框、文件上传等类型，2.5 版本开始支持此组件
 
 ### 引入
 

src/form/test/__snapshots__/events.spec.js.snap

@@ -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>
+`;

src/form/test/__snapshots__/props.spec.js.snap

@@ -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>
+`;

src/form/test/events.spec.js

@@ -1,8 +1,5 @@
-import { mount, later } from '../../../test';
+import { later } from '../../../test';
-
+import { mountForm } from './shared';
-function mountForm(options) {
-  return mount(options, { attachToDocument: true });
-}
 
 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' },

src/form/test/props.spec.js

@@ -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();
+});

src/form/test/shared.js

@@ -0,0 +1,5 @@
+import { mount } from '../../../test';
+
+export function mountForm(options) {
+  return mount(options, { attachToDocument: true });
+}