AddressEdit: add test cases

docs/examples-docs/address-edit.md

@@ -4,14 +4,23 @@ import areaList from '../mock/area.json';
 
 export default {
   data() {
+    setTimeout(() => {
+      this.test.user_name = 'b';
+    }, 1000);
     return {
       areaList,
-      searchResult: []
+      searchResult: [],
+      test: {
+        user_name: 'a'
+      }
     }
   },
 
   methods: {
     onSave() {
+      this.test = {
+        user_name: 'b'
+      };
       Toast('save');
     },
     onDelete() {
@@ -52,6 +61,7 @@ Vue.component(AddressEdit.name, AddressEdit);
 :::demo 基础用法
 ```html
 <van-address-edit
+  :address-info="test"
   :area-list="areaList"
   :show-postal="true"
   :show-set-default="true"
@@ -65,7 +75,31 @@ Vue.component(AddressEdit.name, AddressEdit);
 
 ```javascript
 export default {
-  
+  data() {
+    return {
+      areaList,
+      searchResult: []
+    }
+  },
+
+  methods: {
+    onSave() {
+      Toast('save');
+    },
+    onDelete() {
+      Toast('delete');
+    },
+    onChangeDetail(val) {
+      if (val) {
+        this.searchResult = [{
+          name: '黄龙万科中心',
+          address: '杭州市西湖区'
+        }];
+      } else {
+        this.searchResult = [];
+      }
+    }
+  }
 }
 ```
 :::
@@ -74,23 +108,45 @@ export default {
 
 | 参数       | 说明      | 类型       | 默认值       | 可选值       |
 |-----------|-----------|-----------|-------------|-------------|
-| v-model | 当前选中地址的 id | String | - | - |
+| areaList | 地区列表 | `Object` | - | - |
-| list | 地址列表 | Array | `[]` | - |
+| addressInfo | 收货人信息 | `Object` | `{}` | - |
-| addButtonText | 底部按钮文字 | String | `新增收货地址` | - |
+| searchResult | 详细地址搜索结果 | `Array` | `[]` | - |
+| addressText | "地址"文案前缀 | `String` | `收货` | - |
+| showPostal | 是否显示邮政编码 | `Boolean` | `false` | - |
+| showSetDefault | 是否显示默认地址栏 | `Boolean` | `false` | - |
+| showSearchResult | 是否显示搜索结果 | `Boolean` | `false` | - |
+| isSaving | 是否显示保存按钮加载动画 | `Boolean` | `false` | - |
+| isDeleting | 是否显示删除按钮加载动画 | `Boolean` | `false` | - |
 
 ### Event
 
 | 事件名       | 说明      | 参数       |
 |-----------|-----------|-----------|
-| add | 点击新增按钮时触发 | - |
+| save | 点击保存按钮时触发 | content：表单内容 |
-| edit | 点击编辑按钮时触发 | item: 当前地址对象，index: 索引 |
+| delete | 点击删除按钮时触发 | content：表单内容 |
-| change | 切换选中的地址时触发 | item: 当前地址对象，index: 索引 |
+| change-detail | 修改详细地址时触发 | value: 详细地址内容 |
 
 ### 数据格式
-#### 地址列表字段说明
+
+#### addressInfo 数据格式
 | key       | 说明      | 类型       |
 |-----------|-----------|-----------|
 | id | 每条地址的唯一标识 | `String | Number` |
 | name | 收货人姓名 | `String` |
 | tel | 收货人手机号 | `String` |
-| address | 收货地址 | `String` |
+| province | 省份 | `String` |
+| city | 城市 | `String` |
+| county | 区县 | `String` |
+| address_detail | 详细地址 | `String` |
+| area_code | 地区编码，通过省市区选择获取 | `String` |
+| postal_code | 邮政编码 | `String` |
+| is_default | 是否为默认地址 | `String` |
+
+#### searchResult 数据格式
+| key       | 说明      | 类型       |
+|-----------|-----------|-----------|
+| name | 地名 | `String` |
+| address | 详细地址 | `String` |
+
+#### 省市县列表数据格式
+请参考 [Area](/zanui/vue/component/area) 组件。

packages/address-edit/Detail.vue

@@ -14,9 +14,9 @@
       @focus="handleFocus"
       @blur="handleBlur"
       >
-      <template v-if="value && isFocused" slot="icon">
+      <template slot="icon">
-        <span v-if="isAndroid" class="van-address-edit-detail__finish-edit van-font--12">完成</span>
+        <span v-if="showIcon && isAndroid" class="van-address-edit-detail__finish-edit">完成</span>
-        <van-icon v-else name="clear" />
+        <van-icon v-else-if="showIcon" name="clear"  />
       </template>
     </van-field>
 
@@ -70,6 +70,10 @@ export default {
   computed: {
     showSearchList() {
       return this.showSearchResult && this.isFocused && this.searchResult.length > 0;
+    },
+
+    showIcon() {
+      return this.value && this.isFocused;
     }
   },
 
@@ -89,11 +93,11 @@ export default {
     },
 
     onIconClick() {
-      // 安卓直接完成，不触发清除
       if (this.isAndroid) {
-        return;
+        this.$refs.root.querySelector('.van-field__control').blur();
+      } else {
+        this.$emit('input', '');
       }
-      this.$emit('input', '');
     },
 
     onSuggestSelect(express) {

packages/address-edit/index.vue

@@ -105,7 +105,17 @@ export default {
     },
     addressInfo: {
       type: Object,
-      default: () => ({})
+      default: () => ({
+        user_name: '',
+        tel: '',
+        province: '',
+        city: '',
+        county: '',
+        area_code: '',
+        postal_code: '',
+        address_detail: '',
+        is_default: false
+      })
     },
     searchResult: {
       type: Array,
@@ -129,9 +139,12 @@ export default {
   },
 
   watch: {
-    addressInfo(val) {
+    addressInfo: {
-      this.currentInfo = val;
+      handler(val) {
-      this.isEdit = !!val.id;
+        this.currentInfo = val;
+        this.isEdit = !!val.id;
+      },
+      deep: true
     }
   },
 
@@ -191,8 +204,8 @@ export default {
         return !msg;
       });
 
-      if (isValid) {
+      if (isValid && !this.isSaving) {
-        this.$emit('save', this.currentInfo, this.isEdit);
+        this.$emit('save', this.currentInfo);
       }
     },
 

packages/field/index.vue

@@ -15,11 +15,12 @@
     <textarea
       v-if="type === 'textarea'"
       v-bind="$attrs"
-      v-on="$listeners"
       ref="textarea"
       class="van-field__control"
       :value="value"
       @input="onInput"
+      @focus="$emit('focus')"
+      @blur="$emit('blur')"
     />
     <input
       v-else
@@ -29,6 +30,8 @@
       :type="type"
       :value="value"
       @input="onInput"
+      @focus="$emit('focus')"
+      @blur="$emit('blur')"
     />
     <div
       v-if="hasIcon"

packages/vant-css/src/address-edit.css

@@ -23,9 +23,14 @@
     margin-bottom: 10px;
   }
 
+  .van-icon-clear {
+    color: $gray-dark;
+  }
+
   &-detail {
     &__finish-edit {
       color: $blue;
+      font-size: 12px;
     }
 
     &__suggest-list {
@@ -39,7 +44,7 @@
     &__location {
       float: left;
       font-size: 18px;
-      color: #666;
+      color: $gray-darker;
     }
 
     &__item-info {
@@ -54,7 +59,7 @@
 
     &__subtitle {
       font-size: 12px;
-      color: #666;
+      color: $gray-darker;
     }
   }
 }

test/unit/specs/address-edit.spec.js

@@ -0,0 +1,327 @@
+import { mount } from 'avoriaz';
+import AddressEdit from 'packages/address-edit';
+import AddressDetail from 'packages/address-edit/Detail';
+import areaList from '../../../docs/mock/area.json';
+
+describe('AddressEdit', () => {
+  let wrapper;
+  afterEach(() => {
+    wrapper && wrapper.destroy();
+  });
+
+  it('create a AddressEdit', () => {
+    wrapper = mount(AddressEdit);
+    expect(wrapper.hasClass('van-address-edit')).to.be.true;
+    expect(wrapper.find('.van-field__control')[0].element.value).to.equal('');
+    expect(wrapper.find('.van-field__control')[1].element.value).to.equal('');
+    expect(wrapper.find('.van-field__control')[2].element.value).to.equal('');
+    expect(wrapper.find('.van-address-edit__area .van-cell__value span')[0].text()).to.equal('选择省');
+    expect(wrapper.find('.van-address-edit__area .van-cell__value span')[1].text()).to.equal('选择市');
+    expect(wrapper.find('.van-address-edit__area .van-cell__value span')[2].text()).to.equal('选择区');
+  });
+
+  it('create a AddressEdit with props', () => {
+    const addressInfo = {
+      user_name: '测试',
+      tel: '123123213',
+      province: '浙江省',
+      city: '杭州市',
+      county: '西湖区',
+      address_detail: '详细地址',
+      postal_code: '10000',
+      is_default: true
+    };
+
+    wrapper = mount(AddressEdit, {
+      propsData: {
+        areaList,
+        addressInfo: addressInfo,
+        showPostal: true,
+        showSetDefault: true,
+        showSearchResult: true,
+        searchResult: []
+      }
+    });
+
+    expect(wrapper.find('.van-field__control')[0].element.value).to.equal(addressInfo.user_name);
+    expect(wrapper.find('.van-field__control')[1].element.value).to.equal(addressInfo.tel);
+    expect(wrapper.find('.van-field__control')[2].element.value).to.equal(addressInfo.address_detail);
+    expect(wrapper.find('.van-field__control')[3].element.value).to.equal(addressInfo.postal_code);
+    expect(wrapper.find('.van-address-edit__area .van-cell__value span')[0].text()).to.equal(addressInfo.province);
+    expect(wrapper.find('.van-address-edit__area .van-cell__value span')[1].text()).to.equal(addressInfo.city);
+    expect(wrapper.find('.van-address-edit__area .van-cell__value span')[2].text()).to.equal(addressInfo.county);
+    expect(wrapper.find('.van-switch-cell').length).to.equal(1);
+  });
+
+  it('save AddressInfo', () => {
+    const addressInfo = {
+      user_name: '',
+      tel: '123123213',
+      province: '浙江省',
+      city: '杭州市',
+      county: '西湖区',
+      address_detail: '详细地址',
+      postal_code: '10000',
+      is_default: true
+    };
+
+    wrapper = mount(AddressEdit, {
+      propsData: {
+        areaList,
+        addressInfo: addressInfo,
+        showPostal: true,
+        showSetDefault: true,
+        showSearchResult: true,
+        searchResult: []
+      }
+    });
+
+    const saveButton = wrapper.find('.van-button')[0];
+
+    // name empty
+    wrapper.vm.addressInfo.user_name = '';
+    saveButton.trigger('click');
+    expect(wrapper.vm.errorInfo['user_name']).to.be.true;
+    wrapper.find('.van-field__control')[0].trigger('focus');
+    expect(wrapper.vm.errorInfo['user_name']).to.be.false;
+
+    // name too long
+    wrapper.vm.addressInfo.user_name = '111111111111111111111111111';
+    saveButton.trigger('click');
+    expect(wrapper.vm.errorInfo['user_name']).to.be.true;
+    wrapper.find('.van-field__control')[0].trigger('focus');
+    expect(wrapper.vm.errorInfo['user_name']).to.be.false;
+
+    // tel empty
+    wrapper.vm.addressInfo.user_name = '123';
+    wrapper.vm.addressInfo.tel = '';
+    saveButton.trigger('click');
+    expect(wrapper.vm.errorInfo['tel']).to.be.true;
+    wrapper.find('.van-field__control')[1].trigger('focus');
+    expect(wrapper.vm.errorInfo['tel']).to.be.false;
+
+    // area_code empty
+    wrapper.vm.addressInfo.tel = '13000000000';
+    wrapper.vm.addressInfo.area_code = '';
+    saveButton.trigger('click');
+    expect(wrapper.vm.errorInfo['area_code']).to.be.true;
+
+    // area_code invalid
+    wrapper.vm.addressInfo.tel = '13000000000';
+    wrapper.vm.addressInfo.area_code = '-1';
+    saveButton.trigger('click');
+    expect(wrapper.vm.errorInfo['area_code']).to.be.true;
+
+    // address_detail empty
+    wrapper.vm.addressInfo.area_code = '100000';
+    wrapper.vm.addressInfo.address_detail = '';
+    saveButton.trigger('click');
+    expect(wrapper.vm.errorInfo['address_detail']).to.be.true;
+    wrapper.find('.van-field__control')[2].trigger('focus');
+    expect(wrapper.vm.errorInfo['address_detail']).to.be.false;
+
+    // address_detail too long
+    let longAddress = '1';
+    for (let i = 0; i < 300; i++) {
+      longAddress += '1';
+    }
+    wrapper.vm.addressInfo.address_detail = longAddress;
+    saveButton.trigger('click');
+    expect(wrapper.vm.errorInfo['address_detail']).to.be.true;
+    wrapper.find('.van-field__control')[2].trigger('focus');
+    expect(wrapper.vm.errorInfo['address_detail']).to.be.false;
+
+    // postal_code invalid
+    wrapper.vm.addressInfo.address_detail = '123';
+    wrapper.vm.addressInfo.postal_code = '123';
+    saveButton.trigger('click');
+    expect(wrapper.vm.errorInfo['postal_code']).to.be.true;
+    wrapper.find('.van-field__control')[3].trigger('focus');
+    expect(wrapper.vm.errorInfo['postal_code']).to.be.false;
+
+    // valid result
+    wrapper.vm.addressInfo.postal_code = '123456';
+    saveButton.trigger('click');
+
+    // not show postal_code
+    wrapper.vm.addressInfo.postal_code = '156';
+    wrapper.vm.showPostal = false;
+    saveButton.trigger('click');
+    expect(wrapper.vm.errorInfo['postal_code']).to.be.false;
+  });
+
+  it('show search result', done => {
+    wrapper = mount(AddressEdit, {
+      propsData: {
+        addressInfo: {},
+        showSearchResult: true,
+        searchResult: [{
+          name: '黄龙万科中心',
+          address: '杭州市西湖区'
+        }, {
+          name: '黄龙万科中心H座'
+        }, {
+          address: '杭州市西湖区'
+        }]
+      }
+    });
+
+    wrapper.find('.van-field__control')[2].trigger('focus');
+    wrapper.vm.$nextTick(() => {
+      const items = wrapper.find('.van-address-edit-detail__suggest-item');
+      expect(items.length).to.equal(3);
+
+      items[0].trigger('click');
+      wrapper.vm.$nextTick(() => {
+        expect(wrapper.find('.van-field__control')[2].element.value).to.equal('杭州市西湖区 黄龙万科中心');
+
+        items[1].trigger('click');
+        wrapper.vm.$nextTick(() => {
+          expect(wrapper.find('.van-field__control')[2].element.value).to.equal('黄龙万科中心H座');
+          items[2].trigger('click');
+
+          wrapper.vm.$nextTick(() => {
+            expect(wrapper.find('.van-field__control')[2].element.value).to.equal('杭州市西湖区');
+
+            wrapper.find('.van-field__control')[2].trigger('blur');
+            setTimeout(() => {
+              done();
+            }, 300);
+          });
+        });
+      });
+    });
+  });
+
+  it('select area', () => {
+    wrapper = mount(AddressEdit, {
+      propsData: {
+        areaList,
+        addressInfo: {}
+      }
+    });
+
+    wrapper.vm.onAreaConfirm([]);
+    wrapper.vm.onAreaConfirm([{ code: -1 }]);
+    wrapper.vm.onAreaConfirm([{ code: 1 }, { code: -1 }]);
+    wrapper.vm.onAreaConfirm([{ code: 1 }, { code: 1 }, { code: -1 }]);
+    expect(wrapper.vm.addressInfo['area_code']).to.equal(undefined);
+
+    wrapper.vm.onAreaConfirm([{ name: '浙江省' }, { name: '杭州市' }, { name: '西湖区', code: '123456' }]);
+    expect(wrapper.vm.addressInfo['province']).to.equal('浙江省');
+    expect(wrapper.vm.addressInfo['city']).to.equal('杭州市');
+    expect(wrapper.vm.addressInfo['county']).to.equal('西湖区');
+    expect(wrapper.vm.addressInfo['area_code']).to.equal('123456');
+  });
+
+  it('delete address', done => {
+    wrapper = mount(AddressEdit, {
+      attachToDocument: true,
+      propsData: {
+        areaList,
+        isDeleting: true,
+        addressInfo: {
+          id: '123'
+        }
+      }
+    });
+
+    const deleteButton = wrapper.find('.van-button')[1];
+    deleteButton.trigger('click');
+    wrapper.vm.onDeleteAddress();
+
+    setTimeout(() => {
+      expect(document.querySelectorAll('.van-dialog').length).to.equal(0);
+      wrapper.vm.isDeleting = false;
+      wrapper.vm.$nextTick(() => {
+        deleteButton.trigger('click');
+        setTimeout(() => {
+          expect(document.querySelectorAll('.van-dialog').length).to.equal(1);
+
+          wrapper.vm.$on('delete', () => {
+            done();
+          });
+          document.querySelector('.van-dialog__confirm').click();
+          done();
+        }, 300);
+      });
+    }, 300);
+  });
+
+  it('on change detail', done => {
+    wrapper = mount(AddressEdit);
+
+    wrapper.vm.$on('change-detail', (val) => {
+      expect(val).to.equal('123');
+      done();
+    });
+
+    const field = wrapper.find('.van-field__control')[2];
+    field.element.value = '123';
+    field.trigger('input');
+  });
+
+  it('clear address detail in ios', done => {
+    wrapper = mount(AddressEdit, {
+      propsData: {
+        addressInfo: {
+          address_detail: '123'
+        }
+      }
+    });
+
+    wrapper.vm.isAndriod = false;
+    wrapper.find('.van-field__control')[2].trigger('focus');
+
+    wrapper.vm.$nextTick(() => {
+      wrapper.find('.van-field__icon')[0].trigger('touchstart');
+      wrapper.vm.$nextTick(() => {
+        expect(wrapper.vm.addressInfo.address_detail).to.equal('');
+        done();
+      });
+    });
+  });
+
+  it('finish edit address detail in andriod', done => {
+    wrapper = mount(AddressDetail, {
+      propsData: {
+        value: '123'
+      }
+    });
+
+    wrapper.vm.$on('input', val => {
+      wrapper.vm.value = val;
+    });
+
+    wrapper.setData({
+      isAndroid: true
+    });
+    wrapper.find('.van-field__control')[0].trigger('focus');
+
+    wrapper.vm.$nextTick(() => {
+      wrapper.find('.van-field__icon')[0].trigger('touchstart');
+      wrapper.vm.$nextTick(() => {
+        expect(wrapper.vm.value).to.equal('123');
+        done();
+      });
+    });
+  });
+
+  it('watch address info', done => {
+    const addressInfo = {
+      user_name: '123'
+    };
+
+    wrapper = mount(AddressEdit, {
+      propsData: {
+        addressInfo: {}
+      }
+    });
+
+    wrapper.setProps({ addressInfo });
+    wrapper.vm.$nextTick(() => {
+      expect(wrapper.vm.currentInfo.user_name).to.equal('123');
+      done();
+    });
+  });
+});