[Improvement] add AddressEdit test cases (#1083)

packages/address-edit/Detail.vue

@@ -75,6 +75,7 @@ export default create({
       this.$emit('focus', e);
 
       const { root } = this.$refs;
+      /* istanbul ignore if */
       if (root && root.scrollIntoView) {
         root.scrollIntoView();
       }
@@ -99,10 +100,6 @@ export default create({
     onSelect(express) {
       this.$emit('input', `${express.address || ''} ${express.name || ''}`.trim());
       this.$emit('select-search', express);
-    },
-
-    isString(str) {
-      return typeof str === 'string';
     }
   }
 });

packages/address-edit/index.vue

@@ -269,10 +269,6 @@ export default create({
     },
 
     onDelete() {
-      if (this.isDeleting) {
-        return;
-      }
-
       Dialog.confirm({
         message: this.$t('confirmDelete')
       }).then(() => {

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

@@ -119,7 +119,7 @@ exports[`create a AddressEdit with props 1`] = `
       <div class="van-cell__title"><span>收件地区</span>
         <!---->
       </div>
-      <div class="van-cell__value"><span>浙江省</span> <span>杭州市</span> <span>西湖区</span></div>
+      <div class="van-cell__value"><span>北京市</span> <span>北京市</span> <span>朝阳区</span></div>
       <!---->
     </div>
     <div>

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

@@ -1,14 +1,18 @@
-import { mount } from '@vue/test-utils';
+import Vue from 'vue';
+import { mount, TransitionStub } from '@vue/test-utils';
 import { renderToString } from '@vue/server-test-utils';
 import AddressEdit from '../';
+import AddressDetail from '../Detail';
 import areaList from '../../area/demo/area.simple';
 
+Vue.component('transition', TransitionStub);
+
 const addressInfo = {
   name: '测试',
   tel: '13000000000',
-  province: '浙江省',
+  province: '北京市',
-  city: '杭州市',
+  city: '北京市',
-  county: '西湖区',
+  county: '朝阳区',
   address_detail: '详细地址',
   area_code: '110101',
   postal_code: '10000',
@@ -86,26 +90,26 @@ it('valid area_code', () => {
   // area_code empty
   data.area_code = '';
   button.trigger('click');
-  expect(errorInfo['area_code']).toBeTruthy();
+  expect(errorInfo.area_code).toBeTruthy();
 
   // area_code invalid
   data.area_code = '-1';
   button.trigger('click');
-  expect(errorInfo['area_code']).toBeTruthy();
+  expect(errorInfo.area_code).toBeTruthy();
 });
 
 it('valid address_detail', () => {
   const { data, field, button, errorInfo } = createComponent();
   data.address_detail = '';
   button.trigger('click');
-  expect(errorInfo['address_detail']).toBeTruthy();
+  expect(errorInfo.address_detail).toBeTruthy();
   field.at(2).trigger('focus');
-  expect(errorInfo['address_detail']).toBeFalsy();
+  expect(errorInfo.address_detail).toBeFalsy();
 
   // // address_detail too long
   data.address_detail = '1'.repeat(300);
   button.trigger('click');
-  expect(errorInfo['address_detail']).toBeTruthy();
+  expect(errorInfo.address_detail).toBeTruthy();
 });
 
 test('valid postal code', () => {
@@ -114,9 +118,9 @@ test('valid postal code', () => {
   // postal_code invalid
   data.postal_code = '123';
   button.trigger('click');
-  expect(errorInfo['postal_code']).toBeTruthy();
+  expect(errorInfo.postal_code).toBeTruthy();
   field.at(3).trigger('focus');
-  expect(errorInfo['postal_code']).toBeFalsy();
+  expect(errorInfo.postal_code).toBeFalsy();
 
   // valid result
   data.postal_code = '123456';
@@ -126,5 +130,176 @@ test('valid postal code', () => {
   data.postal_code = '156';
   vm.showPostal = false;
   button.trigger('click');
-  expect(errorInfo['postal_code']).toBeFalsy();
+  expect(errorInfo.postal_code).toBeFalsy();
+});
+
+test('select area', () => {
+  const wrapper = mount(AddressEdit, {
+    propsData: {
+      areaList
+    }
+  });
+  const { vm } = wrapper;
+  const { data } = vm;
+
+  vm.onAreaConfirm([]);
+  vm.onAreaConfirm([{ code: -1 }]);
+  vm.onAreaConfirm([{ code: 1 }, { code: -1 }]);
+  vm.onAreaConfirm([{ code: 1 }, { code: 1 }, { code: -1 }]);
+  expect(data['area_code']).toEqual('');
+
+  vm.onAreaConfirm([
+    { name: '北京市' },
+    { name: '北京市' },
+    { name: '朝阳区', code: '123456' }
+  ]);
+  expect(data.province).toEqual('北京市');
+  expect(data.city).toEqual('北京市');
+  expect(data.county).toEqual('朝阳区');
+  expect(data.area_code).toEqual('123456');
+});
+
+test('on change detail', () => {
+  const wrapper = mount(AddressEdit);
+  const field = wrapper.findAll('.van-field__control').at(2);
+
+  field.element.value = '123';
+  field.trigger('input');
+  expect(wrapper.emitted('change-detail')[0][0]).toEqual('123');
+});
+
+test('clear address detail in ios', () => {
+  const wrapper = mount(AddressEdit, {
+    propsData: {
+      addressInfo: {
+        address_detail: '123'
+      }
+    }
+  });
+
+  wrapper.vm.isAndroid = false;
+  wrapper.findAll('.van-field__control').at(2).trigger('focus');
+  wrapper.find('.van-field__icon').trigger('touchstart');
+  expect(wrapper.vm.data.address_detail).toEqual('');
+});
+
+test('finish edit address detail in android', () => {
+  const wrapper = mount(AddressDetail, {
+    propsData: {
+      value: '123'
+    }
+  });
+
+  wrapper.vm.$on('input', val => {
+    wrapper.vm.value = val;
+  });
+
+  wrapper.setData({ isAndroid: true });
+  wrapper.find('.van-field__control').trigger('focus');
+  wrapper.find('.van-field__icon').trigger('touchstart');
+  expect(wrapper.vm.value).toEqual('123');
+});
+
+test('watch address info', () => {
+  const wrapper = mount(AddressEdit);
+  wrapper.setProps({ addressInfo: { name: '123' }});
+  expect(wrapper.vm.data.name).toEqual('123');
+});
+
+test('set/get area code', done => {
+  const wrapper = mount(AddressEdit, {
+    propsData: { areaList }
+  });
+
+  expect(wrapper.vm.getArea()).toEqual([
+    { code: '-1', name: '选择省份' },
+    { code: '-1', name: '选择城市' },
+    { code: '-1', name: '选择地区' }
+  ]);
+
+  wrapper.vm.setAreaCode('110101');
+  setTimeout(() => {
+    expect(wrapper.vm.data.area_code).toEqual('110101');
+    expect(wrapper.vm.getArea()).toEqual([
+      { code: '110000', name: '北京市' },
+      { code: '110100', name: '北京市' },
+      { code: '110101', name: '东城区' }
+    ]);
+
+    wrapper.vm.$refs = [];
+    wrapper.vm.setAreaCode('110102');
+    expect(wrapper.vm.getArea()).toEqual([]);
+    done();
+  }, 50);
+});
+
+test('watch area code', done => {
+  const wrapper = mount(AddressEdit, {
+    propsData: {
+      addressInfo: {
+        area_code: '110101'
+      }
+    }
+  });
+
+  expect(wrapper.vm.data.city).toEqual('');
+  wrapper.vm.areaList = areaList;
+
+  setTimeout(() => {
+    expect(wrapper.vm.data.city).toEqual('北京市');
+    done();
+  }, 50);
+});
+
+test('show search result', done => {
+  const wrapper = mount(AddressEdit, {
+    propsData: {
+      showSearchResult: true,
+      searchResult: [
+        { name: 'name1', address: 'address1' },
+        { name: 'name2' },
+        { address: 'address2' }
+      ]
+    }
+  });
+
+  const filed = wrapper.findAll('.van-field__control').at(2);
+  const input = filed.element;
+  filed.trigger('focus');
+
+  const items = wrapper.findAll('.van-icon-location');
+  items.at(0).element.parentNode.click();
+  expect(input.value).toEqual('address1 name1');
+  items.at(1).element.parentNode.click();
+  expect(input.value).toEqual('name2');
+  items.at(2).element.parentNode.click();
+  expect(input.value).toEqual('address2');
+
+  filed.trigger('blur');
+  setTimeout(() => {
+    done();
+  }, 150);
+});
+
+test('delete address', done => {
+  const wrapper = mount(AddressEdit, {
+    attachToDocument: true,
+    propsData: {
+      addressInfo: {
+        id: '123'
+      }
+    }
+  });
+
+  const deleteButton = wrapper.findAll('.van-button').at(1);
+  deleteButton.trigger('click');
+  document.querySelector('.van-dialog__cancel').click();
+  deleteButton.trigger('click');
+  document.querySelector('.van-dialog__confirm').click();
+
+  setTimeout(() => {
+    expect(wrapper.emitted('delete')).toBeTruthy();
+    expect(wrapper.emitted('cancel-delete')).toBeTruthy();
+    done();
+  });
 });