From a65bd84e0a1eba6bc5c64dd5cb3aa1c15ac058c5 Mon Sep 17 00:00:00 2001 From: Jake Date: Wed, 16 Oct 2019 16:36:45 +0800 Subject: [PATCH] feat(AddressEdit): add area confirmation verification (#4724) --- src/address-edit/README.md | 1 + src/address-edit/README.zh-CN.md | 1 + src/address-edit/demo/index.vue | 3 + src/address-edit/index.js | 4 + .../test/__snapshots__/index.spec.js.snap | 178 ++++++++++++++++++ src/address-edit/test/index.spec.js | 60 +++++- src/area/index.js | 8 +- 7 files changed, 252 insertions(+), 3 deletions(-) diff --git a/src/address-edit/README.md b/src/address-edit/README.md index da3321afb..f29f72fbc 100644 --- a/src/address-edit/README.md +++ b/src/address-edit/README.md @@ -21,6 +21,7 @@ Vue.use(AddressEdit); show-set-default show-search-result :search-result="searchResult" + area-columns-placeholder="['Choose', 'Choose', 'Choose']" @save="onSave" @delete="onDelete" @change-detail="onChangeDetail" diff --git a/src/address-edit/README.zh-CN.md b/src/address-edit/README.zh-CN.md index 097b2b3a5..0b3a9b674 100644 --- a/src/address-edit/README.zh-CN.md +++ b/src/address-edit/README.zh-CN.md @@ -21,6 +21,7 @@ Vue.use(AddressEdit); show-set-default show-search-result :search-result="searchResult" + area-columns-placeholder="['请选择', '请选择', '请选择']" @save="onSave" @delete="onDelete" @change-detail="onChangeDetail" diff --git a/src/address-edit/demo/index.vue b/src/address-edit/demo/index.vue index c08225a0b..893c1d2c0 100644 --- a/src/address-edit/demo/index.vue +++ b/src/address-edit/demo/index.vue @@ -8,6 +8,7 @@ show-set-default show-search-result :search-result="searchResult" + :area-columns-placeholder="$t('areaColumnsPlaceholder')" @save="onSave" @delete="onDelete" @change-detail="onChangeDetail" @@ -22,6 +23,7 @@ import areaList from '../../area/demo/area'; export default { i18n: { 'zh-CN': { + areaColumnsPlaceholder: ['请选择', '请选择', '请选择'], searchResult: [{ name: '黄龙万科中心', address: '杭州市西湖区' @@ -33,6 +35,7 @@ export default { }] }, 'en-US': { + areaColumnsPlaceholder: ['Choose', 'Choose', 'Choose'], searchResult: [{ name: 'Name1', address: 'Address' diff --git a/src/address-edit/index.js b/src/address-edit/index.js index cb309e80e..43678d62c 100644 --- a/src/address-edit/index.js +++ b/src/address-edit/index.js @@ -139,6 +139,10 @@ export default createComponent({ }, onAreaConfirm(values) { + if (values.some(value => !value.code)) { + Toast(t('areaEmpty')); + return; + } this.showAreaPopup = false; this.assignAreaValues(); this.$emit('change-area', values); diff --git a/src/address-edit/test/__snapshots__/index.spec.js.snap b/src/address-edit/test/__snapshots__/index.spec.js.snap index 781e57442..43fcaefd3 100644 --- a/src/address-edit/test/__snapshots__/index.spec.js.snap +++ b/src/address-edit/test/__snapshots__/index.spec.js.snap @@ -81,3 +81,181 @@ exports[`create a AddressEdit with props 1`] = `
`; + +exports[`set-default 1`] = ` +
+
+
姓名
+
+
+
+
+
+
电话
+
+
+
+
+
+
地区
+
+
+
+
+
+
+
+
详细地址
+
+
+
+
+
+
+
+
邮政编码
+
+
+
+
+
+
设为默认收货地址
+
+
+
+
+
+
+
+
+`; + +exports[`show area component 1`] = ` +
+
+
姓名
+
+
+
+
+
+
电话
+
+
+
+
+
+
地区
+
+
+
+
+
+
+
+
详细地址
+
+
+
+
+
+
+
+
邮政编码
+
+
+
+
+
+
设为默认收货地址
+
+
+
+
+
+
+
+
+`; + +exports[`show area component 2`] = ` +
+
+
姓名
+
+
+
+
+
+
电话
+
+
+
+
+
+
地区
+
+
+
+
+
+
+
+
详细地址
+
+
+
+
+
+
+
+
邮政编码
+
+
+
+
+
+
设为默认收货地址
+
+
+
+
+
+
+
+
+`; + +exports[`valid area placeholder confirm 1`] = ` +
+
+
姓名
+
+
+
+
+
+
电话
+
+
+
+
+
+
地区
+
+
+
+
+
+
+
+
详细地址
+
+
+
+
+
+
+
+
+`; diff --git a/src/address-edit/test/index.spec.js b/src/address-edit/test/index.spec.js index eb4598661..c03e2cf97 100644 --- a/src/address-edit/test/index.spec.js +++ b/src/address-edit/test/index.spec.js @@ -19,7 +19,8 @@ const createComponent = () => { propsData: { areaList, addressInfo, - showPostal: true + showPostal: true, + showSetDefault: true } }); @@ -54,6 +55,63 @@ test('create a AddressEdit with props', () => { expect(wrapper).toMatchSnapshot(); }); +test('valid area placeholder confirm', async () => { + const wrapper = mount(AddressEdit, { + propsData: { + areaList, + areaColumnsPlaceholder: ['请选择', '请选择', '请选择'], + } + }); + + const { data } = wrapper.vm; + + wrapper.find('.van-picker__confirm').trigger('click'); + + expect(data.areaCode).toBe(''); + await later(50); + expect(wrapper).toMatchSnapshot(); +}); + +test('show area component', async () => { + const { wrapper } = createComponent(); + + const field = wrapper.findAll('.van-field').at(2); + field.trigger('click'); + + await later(50); + expect(wrapper).toMatchSnapshot(); + + wrapper.find('.van-picker__cancel').trigger('click'); + + await later(50); + expect(wrapper).toMatchSnapshot(); +}); + +test('set-default', () => { + const { wrapper } = createComponent(); + wrapper.find('.van-switch').trigger('click'); + + expect(wrapper).toMatchSnapshot(); +}); + +test('validator props', async () => { + const wrapper = mount(AddressEdit, { + propsData: { + areaList, + validator(key, value) { + return `${key}${value}`; + } + } + }); + + const { errorInfo, data } = wrapper.vm; + data.name = ''; + const button = wrapper.find('.van-button'); + button.trigger('click'); + + expect(errorInfo.name).toBeTruthy(); +}); + test('valid name', () => { const { data, field, button, errorInfo } = createComponent(); diff --git a/src/area/index.js b/src/area/index.js index b78f24db8..29ea728e1 100644 --- a/src/area/index.js +++ b/src/area/index.js @@ -206,7 +206,10 @@ export default createComponent({ }, getValues() { - return this.$refs.picker ? this.$refs.picker.getValues().filter(value => !!value) : []; + const { picker } = this.$refs; + let getValues = picker ? picker.getValues().filter(value => !!value) : []; + getValues = this.parseOutputValues(getValues); + return getValues; }, getArea() { @@ -224,8 +227,9 @@ export default createComponent({ } const names = values.map(item => item.name); + const filterCodeValues = values.filter(value => !!value.code); + area.code = filterCodeValues.length ? filterCodeValues[filterCodeValues.length - 1].code : ''; - area.code = values[values.length - 1].code; if (this.isOverseaCode(area.code)) { area.country = names[1] || ''; area.province = names[2] || '';