feat(AddressEdit): add area confirmation verification (#4724)

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

@@ -81,3 +81,181 @@ exports[`create a AddressEdit with props 1`] = `
   <div class="van-address-edit__buttons"><button class="van-button van-button--danger van-button--normal van-button--block"><span class="van-button__text">保存</span></button></div>
 </div>
 `;
+
+exports[`set-default 1`] = `
+<div class="van-address-edit">
+  <div class="van-cell van-field">
+    <div class="van-cell__title van-field__label"><span>姓名</span></div>
+    <div class="van-cell__value">
+      <div class="van-field__body"><input type="text" placeholder="收货人姓名" class="van-field__control"></div>
+    </div>
+  </div>
+  <div class="van-cell van-field">
+    <div class="van-cell__title van-field__label"><span>电话</span></div>
+    <div class="van-cell__value">
+      <div class="van-field__body"><input type="tel" placeholder="收货人手机号" class="van-field__control"></div>
+    </div>
+  </div>
+  <div class="van-cell van-field">
+    <div class="van-cell__title van-field__label"><span>地区</span></div>
+    <div class="van-cell__value">
+      <div class="van-field__body"><input type="text" placeholder="选择省 / 市 / 区" readonly="readonly" class="van-field__control"></div>
+    </div>
+  </div>
+  <div class="van-cell van-address-edit-detail">
+    <div class="van-cell__value van-cell__value--alone">
+      <div class="van-cell van-field">
+        <div class="van-cell__title van-field__label"><span>详细地址</span></div>
+        <div class="van-cell__value">
+          <div class="van-field__body"><textarea rows="1" maxlength="200" placeholder="街道门牌、楼层房间号等信息" class="van-field__control"></textarea></div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="van-cell van-field">
+    <div class="van-cell__title van-field__label"><span>邮政编码</span></div>
+    <div class="van-cell__value">
+      <div class="van-field__body"><input type="tel" maxlength="6" placeholder="邮政编码" class="van-field__control"></div>
+    </div>
+  </div>
+  <div class="van-cell van-cell--center van-switch-cell">
+    <div class="van-cell__title"><span>设为默认收货地址</span></div>
+    <div class="van-cell__value">
+      <div role="switch" aria-checked="false" class="van-switch" style="font-size: 24px;">
+        <div class="van-switch__node"></div>
+      </div>
+    </div>
+  </div>
+  <div class="van-address-edit__buttons"><button class="van-button van-button--danger van-button--normal van-button--block"><span class="van-button__text">保存</span></button></div>
+</div>
+`;
+
+exports[`show area component 1`] = `
+<div class="van-address-edit">
+  <div class="van-cell van-field">
+    <div class="van-cell__title van-field__label"><span>姓名</span></div>
+    <div class="van-cell__value">
+      <div class="van-field__body"><input type="text" placeholder="收货人姓名" class="van-field__control"></div>
+    </div>
+  </div>
+  <div class="van-cell van-field">
+    <div class="van-cell__title van-field__label"><span>电话</span></div>
+    <div class="van-cell__value">
+      <div class="van-field__body"><input type="tel" placeholder="收货人手机号" class="van-field__control"></div>
+    </div>
+  </div>
+  <div class="van-cell van-field">
+    <div class="van-cell__title van-field__label"><span>地区</span></div>
+    <div class="van-cell__value">
+      <div class="van-field__body"><input type="text" placeholder="选择省 / 市 / 区" readonly="readonly" class="van-field__control"></div>
+    </div>
+  </div>
+  <div class="van-cell van-address-edit-detail">
+    <div class="van-cell__value van-cell__value--alone">
+      <div class="van-cell van-field">
+        <div class="van-cell__title van-field__label"><span>详细地址</span></div>
+        <div class="van-cell__value">
+          <div class="van-field__body"><textarea rows="1" maxlength="200" placeholder="街道门牌、楼层房间号等信息" class="van-field__control" style="height: auto;"></textarea></div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="van-cell van-field">
+    <div class="van-cell__title van-field__label"><span>邮政编码</span></div>
+    <div class="van-cell__value">
+      <div class="van-field__body"><input type="tel" maxlength="6" placeholder="邮政编码" class="van-field__control"></div>
+    </div>
+  </div>
+  <div class="van-cell van-cell--center van-switch-cell">
+    <div class="van-cell__title"><span>设为默认收货地址</span></div>
+    <div class="van-cell__value">
+      <div role="switch" aria-checked="true" class="van-switch van-switch--on" style="font-size: 24px;">
+        <div class="van-switch__node"></div>
+      </div>
+    </div>
+  </div>
+  <div class="van-address-edit__buttons"><button class="van-button van-button--danger van-button--normal van-button--block"><span class="van-button__text">保存</span></button></div>
+</div>
+`;
+
+exports[`show area component 2`] = `
+<div class="van-address-edit">
+  <div class="van-cell van-field">
+    <div class="van-cell__title van-field__label"><span>姓名</span></div>
+    <div class="van-cell__value">
+      <div class="van-field__body"><input type="text" placeholder="收货人姓名" class="van-field__control"></div>
+    </div>
+  </div>
+  <div class="van-cell van-field">
+    <div class="van-cell__title van-field__label"><span>电话</span></div>
+    <div class="van-cell__value">
+      <div class="van-field__body"><input type="tel" placeholder="收货人手机号" class="van-field__control"></div>
+    </div>
+  </div>
+  <div class="van-cell van-field">
+    <div class="van-cell__title van-field__label"><span>地区</span></div>
+    <div class="van-cell__value">
+      <div class="van-field__body"><input type="text" placeholder="选择省 / 市 / 区" readonly="readonly" class="van-field__control"></div>
+    </div>
+  </div>
+  <div class="van-cell van-address-edit-detail">
+    <div class="van-cell__value van-cell__value--alone">
+      <div class="van-cell van-field">
+        <div class="van-cell__title van-field__label"><span>详细地址</span></div>
+        <div class="van-cell__value">
+          <div class="van-field__body"><textarea rows="1" maxlength="200" placeholder="街道门牌、楼层房间号等信息" class="van-field__control" style="height: auto;"></textarea></div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="van-cell van-field">
+    <div class="van-cell__title van-field__label"><span>邮政编码</span></div>
+    <div class="van-cell__value">
+      <div class="van-field__body"><input type="tel" maxlength="6" placeholder="邮政编码" class="van-field__control"></div>
+    </div>
+  </div>
+  <div class="van-cell van-cell--center van-switch-cell">
+    <div class="van-cell__title"><span>设为默认收货地址</span></div>
+    <div class="van-cell__value">
+      <div role="switch" aria-checked="true" class="van-switch van-switch--on" style="font-size: 24px;">
+        <div class="van-switch__node"></div>
+      </div>
+    </div>
+  </div>
+  <div class="van-address-edit__buttons"><button class="van-button van-button--danger van-button--normal van-button--block"><span class="van-button__text">保存</span></button></div>
+</div>
+`;
+
+exports[`valid area placeholder confirm 1`] = `
+<div class="van-address-edit">
+  <div class="van-cell van-field">
+    <div class="van-cell__title van-field__label"><span>姓名</span></div>
+    <div class="van-cell__value">
+      <div class="van-field__body"><input type="text" placeholder="收货人姓名" class="van-field__control"></div>
+    </div>
+  </div>
+  <div class="van-cell van-field">
+    <div class="van-cell__title van-field__label"><span>电话</span></div>
+    <div class="van-cell__value">
+      <div class="van-field__body"><input type="tel" placeholder="收货人手机号" class="van-field__control"></div>
+    </div>
+  </div>
+  <div class="van-cell van-field">
+    <div class="van-cell__title van-field__label"><span>地区</span></div>
+    <div class="van-cell__value">
+      <div class="van-field__body"><input type="text" placeholder="选择省 / 市 / 区" readonly="readonly" class="van-field__control"></div>
+    </div>
+  </div>
+  <div class="van-cell van-address-edit-detail">
+    <div class="van-cell__value van-cell__value--alone">
+      <div class="van-cell van-field">
+        <div class="van-cell__title van-field__label"><span>详细地址</span></div>
+        <div class="van-cell__value">
+          <div class="van-field__body"><textarea rows="1" maxlength="200" placeholder="街道门牌、楼层房间号等信息" class="van-field__control" style="height: auto;"></textarea></div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="van-address-edit__buttons"><button class="van-button van-button--danger van-button--normal van-button--block"><span class="van-button__text">保存</span></button></div>
+</div>
+`;

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();