test(AddressEdit): update test cases

src/address-edit/test/__snapshots__/index.spec.js.snap

@@ -209,3 +209,217 @@ exports[`should render AddressEdit with props correctly 1`] = `
   </div>
 </div>
 `;
+
+exports[`should valid address detail and render error message correctly 1`] = `
+<div class="van-cell van-field van-address-edit-detail">
+  <div class="van-cell__title van-field__label">
+    <span>
+      详细地址
+    </span>
+  </div>
+  <div class="van-cell__value van-field__value">
+    <div class="van-field__body">
+      <textarea rows="1"
+                class="van-field__control"
+                placeholder="街道门牌、楼层房间号等信息"
+      >
+      </textarea>
+    </div>
+    <div class="van-field__error-message">
+      请填写详细地址
+    </div>
+  </div>
+</div>
+`;
+
+exports[`should valid address detail and render error message correctly 2`] = `
+<div class="van-cell van-field van-address-edit-detail">
+  <div class="van-cell__title van-field__label">
+    <span>
+      详细地址
+    </span>
+  </div>
+  <div class="van-cell__value van-field__value">
+    <div class="van-field__body">
+      <textarea rows="1"
+                class="van-field__control"
+                placeholder="街道门牌、楼层房间号等信息"
+                style="height: auto;"
+      >
+      </textarea>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`should valid area code and render error message correctly 1`] = `
+<div class="van-cell van-cell--clickable van-field"
+     role="button"
+     tabindex="0"
+>
+  <div class="van-cell__title van-field__label">
+    <span>
+      地区
+    </span>
+  </div>
+  <div class="van-cell__value van-field__value">
+    <div class="van-field__body">
+      <input type="text"
+             class="van-field__control"
+             readonly
+             placeholder="选择省 / 市 / 区"
+      >
+      <div class="van-field__right-icon">
+        <i class="van-badge__wrapper van-icon van-icon-arrow">
+        </i>
+      </div>
+    </div>
+    <div class="van-field__error-message">
+      请选择地区
+    </div>
+  </div>
+</div>
+`;
+
+exports[`should valid area code and render error message correctly 2`] = `
+<div class="van-cell van-cell--clickable van-field"
+     role="button"
+     tabindex="0"
+>
+  <div class="van-cell__title van-field__label">
+    <span>
+      地区
+    </span>
+  </div>
+  <div class="van-cell__value van-field__value">
+    <div class="van-field__body">
+      <input type="text"
+             class="van-field__control"
+             readonly
+             placeholder="选择省 / 市 / 区"
+      >
+      <div class="van-field__right-icon">
+        <i class="van-badge__wrapper van-icon van-icon-arrow">
+        </i>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`should valid name and render error message correctly 1`] = `
+<div class="van-cell van-field">
+  <div class="van-cell__title van-field__label">
+    <span>
+      姓名
+    </span>
+  </div>
+  <div class="van-cell__value van-field__value">
+    <div class="van-field__body">
+      <input type="text"
+             class="van-field__control"
+             placeholder="收货人姓名"
+      >
+    </div>
+    <div class="van-field__error-message">
+      请填写姓名
+    </div>
+  </div>
+</div>
+`;
+
+exports[`should valid name and render error message correctly 2`] = `
+<div class="van-cell van-field">
+  <div class="van-cell__title van-field__label">
+    <span>
+      姓名
+    </span>
+  </div>
+  <div class="van-cell__value van-field__value">
+    <div class="van-field__body">
+      <input type="text"
+             class="van-field__control"
+             placeholder="收货人姓名"
+      >
+    </div>
+  </div>
+</div>
+`;
+
+exports[`should valid postal code and render error message correctly 1`] = `
+<div class="van-cell van-field">
+  <div class="van-cell__title van-field__label">
+    <span>
+      邮政编码
+    </span>
+  </div>
+  <div class="van-cell__value van-field__value">
+    <div class="van-field__body">
+      <input type="tel"
+             class="van-field__control"
+             placeholder="邮政编码"
+      >
+    </div>
+    <div class="van-field__error-message">
+      邮政编码格式不正确
+    </div>
+  </div>
+</div>
+`;
+
+exports[`should valid postal code and render error message correctly 2`] = `
+<div class="van-cell van-field">
+  <div class="van-cell__title van-field__label">
+    <span>
+      邮政编码
+    </span>
+  </div>
+  <div class="van-cell__value van-field__value">
+    <div class="van-field__body">
+      <input type="tel"
+             class="van-field__control"
+             placeholder="邮政编码"
+      >
+    </div>
+  </div>
+</div>
+`;
+
+exports[`should valid tel and render error message correctly 1`] = `
+<div class="van-cell van-field">
+  <div class="van-cell__title van-field__label">
+    <span>
+      电话
+    </span>
+  </div>
+  <div class="van-cell__value van-field__value">
+    <div class="van-field__body">
+      <input type="tel"
+             class="van-field__control"
+             placeholder="收货人手机号"
+      >
+    </div>
+    <div class="van-field__error-message">
+      请输入正确的手机号
+    </div>
+  </div>
+</div>
+`;
+
+exports[`should valid tel and render error message correctly 2`] = `
+<div class="van-cell van-field">
+  <div class="van-cell__title van-field__label">
+    <span>
+      电话
+    </span>
+  </div>
+  <div class="van-cell__value van-field__value">
+    <div class="van-field__body">
+      <input type="tel"
+             class="van-field__control"
+             placeholder="收货人手机号"
+      >
+    </div>
+  </div>
+</div>
+`;

src/address-edit/test/index.spec.js

@@ -2,7 +2,7 @@ import AddressEdit from '..';
 import areaList from '../../area/demo/area-simple';
 import { mount, later, trigger } from '../../../test';
 
-const addressInfo = {
+const defaultAddressInfo = {
   name: '测试',
   tel: '13000000000',
   province: '北京市',
@@ -14,21 +14,24 @@ const addressInfo = {
   isDefault: true,
 };
 
-const createComponent = () => {
+const createComponent = (addressInfo = {}) => {
   const wrapper = mount(AddressEdit, {
     props: {
       areaList,
-      addressInfo,
+      addressInfo: {
+        ...defaultAddressInfo,
+        ...addressInfo,
+      },
       showPostal: true,
       showSetDefault: true,
     },
   });
 
   const button = wrapper.find('.van-button');
-  const field = wrapper.findAll('.van-field__control');
+  const fields = wrapper.findAll('.van-field');
   return {
     vm: wrapper.vm,
-    field,
+    fields,
     button,
     wrapper,
   };
@@ -42,7 +45,7 @@ test('should render AddressEdit with props correctly', () => {
   const wrapper = mount(AddressEdit, {
     props: {
       areaList,
-      addressInfo,
+      addressInfo: defaultAddressInfo,
       showPostal: true,
       showSetDefault: true,
       showSearchResult: true,
@@ -72,85 +75,71 @@ test('should allow to custom validator with validator prop', async () => {
   expect(wrapper.find('.van-field__error-message').html()).toMatchSnapshot();
 });
 
-// test('should valid name', () => {
+test('should valid name and render error message correctly', async () => {
-//   const { data, field, button, errorInfo } = createComponent();
+  const { fields, button } = createComponent({
+    name: '',
+  });
 
-//   // name empty
+  await button.trigger('click');
-//   data.name = '';
+  expect(fields[0].html()).toMatchSnapshot();
-//   button.trigger('click');
+  await fields[0].find('input').trigger('focus');
-//   expect(errorInfo.name).toBeTruthy();
+  expect(fields[0].html()).toMatchSnapshot();
-//   field[0].trigger('focus');
+});
-//   expect(errorInfo.name).toBeFalsy();
-// });
 
-// test('valid tel', () => {
+test('should valid tel and render error message correctly', async () => {
-//   const { data, field, button, errorInfo } = createComponent();
+  const { fields, button } = createComponent({
-//   data.tel = '';
+    tel: '',
-//   button.trigger('click');
+  });
-//   expect(errorInfo.tel).toBeTruthy();
-//   field[1].trigger('focus');
-//   expect(errorInfo.tel).toBeFalsy();
-// });
 
-// test('valid areaCode', () => {
+  await button.trigger('click');
-//   const { data, button, errorInfo } = createComponent();
+  expect(fields[1].html()).toMatchSnapshot();
-//   // areaCode empty
+  await fields[1].find('input').trigger('focus');
-//   data.areaCode = '';
+  expect(fields[1].html()).toMatchSnapshot();
-//   button.trigger('click');
+});
-//   expect(errorInfo.areaCode).toBeTruthy();
 
-//   // areaCode invalid
+test('should valid area code and render error message correctly', async () => {
-//   data.areaCode = '-1';
+  const { fields, button } = createComponent({
-//   button.trigger('click');
+    areaCode: '',
-//   expect(errorInfo.areaCode).toBeTruthy();
+  });
-// });
 
-// test('valid addressDetail', () => {
+  await button.trigger('click');
-//   const { data, field, button, errorInfo } = createComponent();
+  expect(fields[2].html()).toMatchSnapshot();
-//   data.addressDetail = '';
+  await fields[2].find('input').trigger('focus');
-//   button.trigger('click');
+  expect(fields[2].html()).toMatchSnapshot();
-//   expect(errorInfo.addressDetail).toBeTruthy();
+});
-//   field[3].trigger('focus');
-//   expect(errorInfo.addressDetail).toBeFalsy();
-// });
 
-// test('valid postal code', () => {
+test('should valid address detail and render error message correctly', async () => {
-//   const { vm, data, field, button, errorInfo } = createComponent();
+  const { fields, button } = createComponent({
+    addressDetail: '',
+  });
 
-//   // postalCode invalid
+  await button.trigger('click');
-//   data.postalCode = '123';
+  expect(fields[3].html()).toMatchSnapshot();
-//   button.trigger('click');
+  await fields[3].find('textarea').trigger('focus');
-//   expect(errorInfo.postalCode).toBeTruthy();
+  expect(fields[3].html()).toMatchSnapshot();
-//   field[4].trigger('focus');
+});
-//   expect(errorInfo.postalCode).toBeFalsy();
 
-//   // valid result
+test('should valid postal code and render error message correctly', async () => {
-//   data.postalCode = '123456';
+  const { fields, button } = createComponent({
-//   button.trigger('click');
+    postalCode: '123',
+  });
 
-//   // not show postalCode
+  await button.trigger('click');
-//   data.postalCode = '156';
+  expect(fields[4].html()).toMatchSnapshot();
-//   vm.showPostal = false;
+  await fields[4].find('input').trigger('focus');
-//   button.trigger('click');
+  expect(fields[4].html()).toMatchSnapshot();
-//   expect(errorInfo.postalCode).toBeFalsy();
+});
-// });
 
-// test('on change detail', () => {
+test('should emit change-detail event after changing address detail', () => {
-//   const wrapper = mount(AddressEdit);
+  const wrapper = mount(AddressEdit);
-//   const field = wrapper.findAll('.van-field__control')[3];
+  const field = wrapper.findAll('.van-field__control')[3];
 
-//   field.element.value = '123';
+  field.element.value = '123';
-//   field.trigger('input');
+  field.trigger('input');
-//   expect(wrapper.emitted('change-detail')[0][0]).toEqual('123');
+  expect(wrapper.emitted('change-detail')[0][0]).toEqual('123');
-// });
+});
 
-// test('watch address info', () => {
+test('should return current areas after calling getArea method', () => {
-//   const wrapper = mount(AddressEdit);
-//   wrapper.setProps({ addressInfo: { name: '123' } });
-//   expect(wrapper.vm.data.name).toEqual('123');
-// });
-
-test('set/get area code', async () => {
   const wrapper = mount(AddressEdit, {
     props: { areaList },
   });
@@ -160,20 +149,20 @@ test('set/get area code', async () => {
     { code: '110100', name: '北京市' },
     { code: '110101', name: '东城区' },
   ]);
+});
+
+test('should update current areas after calling setAreaCode method', async () => {
+  const wrapper = mount(AddressEdit, {
+    props: { areaList },
+  });
 
   wrapper.vm.setAreaCode('110102');
-
+  await later();
-  await later(50);
-  expect(wrapper.vm.data.areaCode).toEqual('110102');
   expect(wrapper.vm.getArea()).toEqual([
     { code: '110000', name: '北京市' },
     { code: '110100', name: '北京市' },
     { code: '110102', name: '西城区' },
   ]);
-
-  wrapper.vm.$refs = [];
-  wrapper.vm.setAreaCode('110102');
-  expect(wrapper.vm.getArea()).toEqual([]);
 });
 
 test('should show search result after focusing to address detail', async () => {