mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-05 19:41:42 +08:00
fix(AddressEdit): should expose setAreaCode method
This commit is contained in:
chenjiahan
parent
dc93ef3f20
commit
6a184f8e93
@ -294,6 +294,7 @@ export default createComponent({
|
||||
|
||||
useExpose({
|
||||
getArea,
|
||||
setAreaCode,
|
||||
setAddressDetail,
|
||||
});
|
||||
|
||||
|
||||
@ -1,297 +0,0 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`create a AddressEdit 1`] = `
|
||||
<div class="van-address-edit">
|
||||
<div class="van-address-edit__fields">
|
||||
<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" 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 van-field__value">
|
||||
<div class="van-field__body"><input type="tel" placeholder="收货人手机号" class="van-field__control"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div role="button" tabindex="0" class="van-cell van-cell--clickable 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" readonly="readonly" placeholder="选择省 / 市 / 区" class="van-field__control">
|
||||
<div class="van-field__right-icon"><i class="van-icon van-icon-arrow">
|
||||
<!----></i></div>
|
||||
</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 van-field__value">
|
||||
<div class="van-field__body"><textarea rows="1" placeholder="街道门牌、楼层房间号等信息" class="van-field__control"></textarea></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!---->
|
||||
<div class="van-address-edit__buttons"><button class="van-button van-button--danger van-button--normal van-button--block van-button--round">
|
||||
<div class="van-button__content"><span class="van-button__text">保存</span></div>
|
||||
</button></div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`create a AddressEdit with props 1`] = `
|
||||
<div class="van-address-edit">
|
||||
<div class="van-address-edit__fields">
|
||||
<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" 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 van-field__value">
|
||||
<div class="van-field__body"><input type="tel" placeholder="收货人手机号" class="van-field__control"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div role="button" tabindex="0" class="van-cell van-cell--clickable 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" readonly="readonly" placeholder="选择省 / 市 / 区" class="van-field__control">
|
||||
<div class="van-field__right-icon"><i class="van-icon van-icon-arrow">
|
||||
<!----></i></div>
|
||||
</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 van-field__value">
|
||||
<div class="van-field__body"><textarea rows="1" 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 van-field__value">
|
||||
<div class="van-field__body"><input type="tel" placeholder="邮政编码" class="van-field__control"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-cell van-cell--center van-address-edit__default">
|
||||
<div class="van-cell__title"><span>设为默认收货地址</span></div>
|
||||
<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 class="van-address-edit__buttons"><button class="van-button van-button--danger van-button--normal van-button--block van-button--round">
|
||||
<div class="van-button__content"><span class="van-button__text">保存</span></div>
|
||||
</button></div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`set-default 1`] = `
|
||||
<div class="van-address-edit">
|
||||
<div class="van-address-edit__fields">
|
||||
<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" 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 van-field__value">
|
||||
<div class="van-field__body"><input type="tel" placeholder="收货人手机号" class="van-field__control"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div role="button" tabindex="0" class="van-cell van-cell--clickable 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" readonly="readonly" placeholder="选择省 / 市 / 区" class="van-field__control">
|
||||
<div class="van-field__right-icon"><i class="van-icon van-icon-arrow">
|
||||
<!----></i></div>
|
||||
</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 van-field__value">
|
||||
<div class="van-field__body"><textarea rows="1" 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 van-field__value">
|
||||
<div class="van-field__body"><input type="tel" placeholder="邮政编码" class="van-field__control"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-cell van-cell--center van-address-edit__default">
|
||||
<div class="van-cell__title"><span>设为默认收货地址</span></div>
|
||||
<div role="switch" aria-checked="false" class="van-switch" style="font-size: 24px;">
|
||||
<div class="van-switch__node"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-address-edit__buttons"><button class="van-button van-button--danger van-button--normal van-button--block van-button--round">
|
||||
<div class="van-button__content"><span class="van-button__text">保存</span></div>
|
||||
</button></div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`show area component 1`] = `
|
||||
<div class="van-address-edit">
|
||||
<div class="van-address-edit__fields">
|
||||
<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" 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 van-field__value">
|
||||
<div class="van-field__body"><input type="tel" placeholder="收货人手机号" class="van-field__control"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div role="button" tabindex="0" class="van-cell van-cell--clickable 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" readonly="readonly" placeholder="选择省 / 市 / 区" class="van-field__control">
|
||||
<div class="van-field__right-icon"><i class="van-icon van-icon-arrow">
|
||||
<!----></i></div>
|
||||
</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 van-field__value">
|
||||
<div class="van-field__body"><textarea rows="1" 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 van-field__value">
|
||||
<div class="van-field__body"><input type="tel" placeholder="邮政编码" class="van-field__control"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-cell van-cell--center van-address-edit__default">
|
||||
<div class="van-cell__title"><span>设为默认收货地址</span></div>
|
||||
<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 class="van-address-edit__buttons"><button class="van-button van-button--danger van-button--normal van-button--block van-button--round">
|
||||
<div class="van-button__content"><span class="van-button__text">保存</span></div>
|
||||
</button></div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`show area component 2`] = `
|
||||
<div class="van-address-edit">
|
||||
<div class="van-address-edit__fields">
|
||||
<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" 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 van-field__value">
|
||||
<div class="van-field__body"><input type="tel" placeholder="收货人手机号" class="van-field__control"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div role="button" tabindex="0" class="van-cell van-cell--clickable 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" readonly="readonly" placeholder="选择省 / 市 / 区" class="van-field__control">
|
||||
<div class="van-field__right-icon"><i class="van-icon van-icon-arrow">
|
||||
<!----></i></div>
|
||||
</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 van-field__value">
|
||||
<div class="van-field__body"><textarea rows="1" 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 van-field__value">
|
||||
<div class="van-field__body"><input type="tel" placeholder="邮政编码" class="van-field__control"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-cell van-cell--center van-address-edit__default">
|
||||
<div class="van-cell__title"><span>设为默认收货地址</span></div>
|
||||
<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 class="van-address-edit__buttons"><button class="van-button van-button--danger van-button--normal van-button--block van-button--round">
|
||||
<div class="van-button__content"><span class="van-button__text">保存</span></div>
|
||||
</button></div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`valid area placeholder confirm 1`] = `
|
||||
<div class="van-address-edit">
|
||||
<div class="van-address-edit__fields">
|
||||
<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" 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 van-field__value">
|
||||
<div class="van-field__body"><input type="tel" placeholder="收货人手机号" class="van-field__control"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div role="button" tabindex="0" class="van-cell van-cell--clickable 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" readonly="readonly" placeholder="选择省 / 市 / 区" class="van-field__control">
|
||||
<div class="van-field__right-icon"><i class="van-icon van-icon-arrow">
|
||||
<!----></i></div>
|
||||
</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 van-field__value">
|
||||
<div class="van-field__body"><textarea rows="1" placeholder="街道门牌、楼层房间号等信息" class="van-field__control" style="height: auto;"></textarea></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!---->
|
||||
<div class="van-address-edit__buttons"><button class="van-button van-button--danger van-button--normal van-button--block van-button--round">
|
||||
<div class="van-button__content"><span class="van-button__text">保存</span></div>
|
||||
</button></div>
|
||||
</div>
|
||||
`;
|
||||
211
src/address-edit/test/__snapshots__/index.spec.js.snap
Normal file
211
src/address-edit/test/__snapshots__/index.spec.js.snap
Normal file
@ -0,0 +1,211 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`should allow to custom validator with validator prop 1`] = `
|
||||
<div class="van-field__error-message">
|
||||
foo name
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`should render AddressEdit correctly 1`] = `
|
||||
<div class="van-address-edit">
|
||||
<div class="van-address-edit__fields">
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-address-edit__buttons">
|
||||
<button type="button"
|
||||
class="van-button van-button--danger van-button--normal van-button--block van-button--round"
|
||||
>
|
||||
<div class="van-button__content">
|
||||
<span class="van-button__text">
|
||||
保存
|
||||
</span>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`should render AddressEdit with props correctly 1`] = `
|
||||
<div class="van-address-edit">
|
||||
<div class="van-address-edit__fields">
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
</div>
|
||||
<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>
|
||||
</div>
|
||||
<div class="van-cell van-cell--center van-address-edit__default">
|
||||
<div class="van-cell__title">
|
||||
<span>
|
||||
设为默认收货地址
|
||||
</span>
|
||||
</div>
|
||||
<div role="switch"
|
||||
class="van-switch van-switch--on"
|
||||
style="font-size: 24px;"
|
||||
aria-checked="true"
|
||||
>
|
||||
<div class="van-switch__node">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-address-edit__buttons">
|
||||
<button type="button"
|
||||
class="van-button van-button--danger van-button--normal van-button--block van-button--round"
|
||||
>
|
||||
<div class="van-button__content">
|
||||
<span class="van-button__text">
|
||||
保存
|
||||
</span>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
@ -1,322 +0,0 @@
|
||||
import AddressEdit from '..';
|
||||
import areaList from '../../area/demo/area-simple';
|
||||
import { mount, later, trigger } from '../../../test';
|
||||
|
||||
const addressInfo = {
|
||||
name: '测试',
|
||||
tel: '13000000000',
|
||||
province: '北京市',
|
||||
city: '北京市',
|
||||
county: '朝阳区',
|
||||
addressDetail: '详细地址',
|
||||
areaCode: '110101',
|
||||
postalCode: '10000',
|
||||
isDefault: true,
|
||||
};
|
||||
|
||||
const createComponent = () => {
|
||||
const wrapper = mount(AddressEdit, {
|
||||
props: {
|
||||
areaList,
|
||||
addressInfo,
|
||||
showPostal: true,
|
||||
showSetDefault: true,
|
||||
},
|
||||
});
|
||||
|
||||
const button = wrapper.find('.van-button');
|
||||
const field = wrapper.findAll('.van-field__control');
|
||||
const { errorInfo, data } = wrapper.vm;
|
||||
return {
|
||||
vm: wrapper.vm,
|
||||
data,
|
||||
field,
|
||||
button,
|
||||
wrapper,
|
||||
errorInfo,
|
||||
};
|
||||
};
|
||||
|
||||
test('create a AddressEdit', () => {
|
||||
expect(mount(AddressEdit)).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('create a AddressEdit with props', () => {
|
||||
const wrapper = mount(AddressEdit, {
|
||||
props: {
|
||||
areaList,
|
||||
addressInfo,
|
||||
showPostal: true,
|
||||
showSetDefault: true,
|
||||
showSearchResult: true,
|
||||
},
|
||||
});
|
||||
|
||||
expect(wrapper.html()).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('valid area placeholder confirm', async () => {
|
||||
const wrapper = mount(AddressEdit, {
|
||||
props: {
|
||||
areaList,
|
||||
areaColumnsPlaceholder: ['请选择', '请选择', '请选择'],
|
||||
},
|
||||
});
|
||||
|
||||
const { data } = wrapper.vm;
|
||||
|
||||
wrapper.find('.van-picker__confirm').trigger('click');
|
||||
|
||||
expect(data.areaCode).toBe('');
|
||||
await later(50);
|
||||
expect(wrapper.html()).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('show area component', async () => {
|
||||
const { wrapper } = createComponent();
|
||||
|
||||
const field = wrapper.findAll('.van-field')[2];
|
||||
field.trigger('click');
|
||||
|
||||
await later(50);
|
||||
expect(wrapper.html()).toMatchSnapshot();
|
||||
|
||||
wrapper.find('.van-picker__cancel').trigger('click');
|
||||
|
||||
await later(50);
|
||||
expect(wrapper.html()).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('set-default', () => {
|
||||
const { wrapper } = createComponent();
|
||||
wrapper.find('.van-switch').trigger('click');
|
||||
|
||||
expect(wrapper.html()).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('validator props', async () => {
|
||||
const wrapper = mount(AddressEdit, {
|
||||
props: {
|
||||
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();
|
||||
|
||||
// name empty
|
||||
data.name = '';
|
||||
button.trigger('click');
|
||||
expect(errorInfo.name).toBeTruthy();
|
||||
field[0].trigger('focus');
|
||||
expect(errorInfo.name).toBeFalsy();
|
||||
});
|
||||
|
||||
test('valid tel', () => {
|
||||
const { data, field, button, errorInfo } = createComponent();
|
||||
data.tel = '';
|
||||
button.trigger('click');
|
||||
expect(errorInfo.tel).toBeTruthy();
|
||||
field[1].trigger('focus');
|
||||
expect(errorInfo.tel).toBeFalsy();
|
||||
});
|
||||
|
||||
test('valid areaCode', () => {
|
||||
const { data, button, errorInfo } = createComponent();
|
||||
// areaCode empty
|
||||
data.areaCode = '';
|
||||
button.trigger('click');
|
||||
expect(errorInfo.areaCode).toBeTruthy();
|
||||
|
||||
// areaCode invalid
|
||||
data.areaCode = '-1';
|
||||
button.trigger('click');
|
||||
expect(errorInfo.areaCode).toBeTruthy();
|
||||
});
|
||||
|
||||
test('valid addressDetail', () => {
|
||||
const { data, field, button, errorInfo } = createComponent();
|
||||
data.addressDetail = '';
|
||||
button.trigger('click');
|
||||
expect(errorInfo.addressDetail).toBeTruthy();
|
||||
field[3].trigger('focus');
|
||||
expect(errorInfo.addressDetail).toBeFalsy();
|
||||
});
|
||||
|
||||
test('valid postal code', () => {
|
||||
const { vm, data, field, button, errorInfo } = createComponent();
|
||||
|
||||
// postalCode invalid
|
||||
data.postalCode = '123';
|
||||
button.trigger('click');
|
||||
expect(errorInfo.postalCode).toBeTruthy();
|
||||
field[4].trigger('focus');
|
||||
expect(errorInfo.postalCode).toBeFalsy();
|
||||
|
||||
// valid result
|
||||
data.postalCode = '123456';
|
||||
button.trigger('click');
|
||||
|
||||
// not show postalCode
|
||||
data.postalCode = '156';
|
||||
vm.showPostal = false;
|
||||
button.trigger('click');
|
||||
expect(errorInfo.postalCode).toBeFalsy();
|
||||
});
|
||||
|
||||
test('on change detail', () => {
|
||||
const wrapper = mount(AddressEdit);
|
||||
const field = wrapper.findAll('.van-field__control')[3];
|
||||
|
||||
field.element.value = '123';
|
||||
field.trigger('input');
|
||||
expect(wrapper.emitted('change-detail')[0][0]).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', async () => {
|
||||
const wrapper = mount(AddressEdit, {
|
||||
props: { areaList },
|
||||
});
|
||||
|
||||
expect(wrapper.vm.getArea()).toEqual([
|
||||
{ code: '110000', name: '北京市' },
|
||||
{ code: '110100', name: '北京市' },
|
||||
{ code: '110101', name: '东城区' },
|
||||
]);
|
||||
|
||||
wrapper.vm.setAreaCode('110102');
|
||||
|
||||
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('watch area code', async () => {
|
||||
const wrapper = mount(AddressEdit, {
|
||||
props: {
|
||||
areaList: {},
|
||||
addressInfo: {
|
||||
areaCode: '110101',
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
expect(wrapper.vm.data.city).toEqual('');
|
||||
wrapper.vm.areaList = areaList;
|
||||
|
||||
await later(50);
|
||||
expect(wrapper.vm.data.city).toEqual('北京市');
|
||||
});
|
||||
|
||||
test('show search result', async () => {
|
||||
const wrapper = mount(AddressEdit, {
|
||||
props: {
|
||||
showSearchResult: true,
|
||||
searchResult: [
|
||||
{ name: 'name1', address: 'address1' },
|
||||
{ name: 'name2' },
|
||||
{ address: 'address2' },
|
||||
],
|
||||
},
|
||||
});
|
||||
|
||||
const field = wrapper.findAll('.van-field__control')[3];
|
||||
const input = field.element;
|
||||
field.trigger('focus');
|
||||
|
||||
const items = wrapper.findAll('.van-icon-location-o');
|
||||
items[0].element.parentNode.click();
|
||||
expect(input.value).toEqual('address1 name1');
|
||||
items[1].element.parentNode.click();
|
||||
expect(input.value).toEqual('name2');
|
||||
items[2].element.parentNode.click();
|
||||
expect(input.value).toEqual('address2');
|
||||
|
||||
field.trigger('blur');
|
||||
await later(150);
|
||||
expect(wrapper.vm.detailFocused).toBeFalsy();
|
||||
});
|
||||
|
||||
test('delete address', async () => {
|
||||
const wrapper = mount(AddressEdit, {
|
||||
attachToDocument: true,
|
||||
props: {
|
||||
showDelete: true,
|
||||
},
|
||||
});
|
||||
|
||||
const deleteButton = wrapper.findAll('.van-button')[1];
|
||||
deleteButton.trigger('click');
|
||||
|
||||
await later();
|
||||
document.querySelector('.van-dialog__cancel').click();
|
||||
deleteButton.trigger('click');
|
||||
document.querySelector('.van-dialog__confirm').click();
|
||||
|
||||
await later();
|
||||
expect(wrapper.emitted('delete')).toBeTruthy();
|
||||
expect(wrapper.emitted('cancel-delete')).toBeTruthy();
|
||||
});
|
||||
|
||||
test('setAddressDetail method', () => {
|
||||
const { vm, data } = createComponent();
|
||||
vm.setAddressDetail('test');
|
||||
expect(data.addressDetail).toEqual('test');
|
||||
});
|
||||
|
||||
test('select area', () => {
|
||||
const { wrapper, data } = createComponent();
|
||||
wrapper.find('.van-picker__confirm').trigger('click');
|
||||
expect(data.areaCode).toEqual('110101');
|
||||
});
|
||||
|
||||
test('click-area event', () => {
|
||||
const wrapper = mount(AddressEdit, {
|
||||
props: {
|
||||
disableArea: true,
|
||||
},
|
||||
});
|
||||
|
||||
const field = wrapper.findAll('.van-field')[2];
|
||||
field.trigger('click');
|
||||
expect(wrapper.emitted('click-area')[0]).toBeTruthy();
|
||||
});
|
||||
|
||||
test('tel-maxlength prop', () => {
|
||||
const wrapper = mount(AddressEdit, {
|
||||
props: {
|
||||
telMaxlength: 4,
|
||||
},
|
||||
});
|
||||
|
||||
const telInput = wrapper.find('input[type="tel"]');
|
||||
telInput.element.value = '123456';
|
||||
trigger(telInput, 'input');
|
||||
|
||||
expect(telInput.element.value).toEqual('1234');
|
||||
});
|
||||
278
src/address-edit/test/index.spec.js
Normal file
278
src/address-edit/test/index.spec.js
Normal file
@ -0,0 +1,278 @@
|
||||
import AddressEdit from '..';
|
||||
import areaList from '../../area/demo/area-simple';
|
||||
import { mount, later, trigger } from '../../../test';
|
||||
|
||||
const addressInfo = {
|
||||
name: '测试',
|
||||
tel: '13000000000',
|
||||
province: '北京市',
|
||||
city: '北京市',
|
||||
county: '朝阳区',
|
||||
addressDetail: 'address detail',
|
||||
areaCode: '110101',
|
||||
postalCode: '10000',
|
||||
isDefault: true,
|
||||
};
|
||||
|
||||
const createComponent = () => {
|
||||
const wrapper = mount(AddressEdit, {
|
||||
props: {
|
||||
areaList,
|
||||
addressInfo,
|
||||
showPostal: true,
|
||||
showSetDefault: true,
|
||||
},
|
||||
});
|
||||
|
||||
const button = wrapper.find('.van-button');
|
||||
const field = wrapper.findAll('.van-field__control');
|
||||
return {
|
||||
vm: wrapper.vm,
|
||||
field,
|
||||
button,
|
||||
wrapper,
|
||||
};
|
||||
};
|
||||
|
||||
test('should render AddressEdit correctly', () => {
|
||||
expect(mount(AddressEdit).html()).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('should render AddressEdit with props correctly', () => {
|
||||
const wrapper = mount(AddressEdit, {
|
||||
props: {
|
||||
areaList,
|
||||
addressInfo,
|
||||
showPostal: true,
|
||||
showSetDefault: true,
|
||||
showSearchResult: true,
|
||||
},
|
||||
});
|
||||
|
||||
expect(wrapper.html()).toMatchSnapshot();
|
||||
});
|
||||
|
||||
// test('set-default', () => {
|
||||
// const { wrapper } = createComponent();
|
||||
// wrapper.find('.van-switch').trigger('click');
|
||||
|
||||
// expect(wrapper.html()).toMatchSnapshot();
|
||||
// });
|
||||
|
||||
test('should allow to custom validator with validator prop', async () => {
|
||||
const wrapper = mount(AddressEdit, {
|
||||
props: {
|
||||
areaList,
|
||||
validator: (key, value) => `foo ${key}${value}`,
|
||||
},
|
||||
});
|
||||
|
||||
const button = wrapper.find('.van-button');
|
||||
await button.trigger('click');
|
||||
expect(wrapper.find('.van-field__error-message').html()).toMatchSnapshot();
|
||||
});
|
||||
|
||||
// test('should valid name', () => {
|
||||
// const { data, field, button, errorInfo } = createComponent();
|
||||
|
||||
// // name empty
|
||||
// data.name = '';
|
||||
// button.trigger('click');
|
||||
// expect(errorInfo.name).toBeTruthy();
|
||||
// field[0].trigger('focus');
|
||||
// expect(errorInfo.name).toBeFalsy();
|
||||
// });
|
||||
|
||||
// test('valid tel', () => {
|
||||
// const { data, field, button, errorInfo } = createComponent();
|
||||
// data.tel = '';
|
||||
// button.trigger('click');
|
||||
// expect(errorInfo.tel).toBeTruthy();
|
||||
// field[1].trigger('focus');
|
||||
// expect(errorInfo.tel).toBeFalsy();
|
||||
// });
|
||||
|
||||
// test('valid areaCode', () => {
|
||||
// const { data, button, errorInfo } = createComponent();
|
||||
// // areaCode empty
|
||||
// data.areaCode = '';
|
||||
// button.trigger('click');
|
||||
// expect(errorInfo.areaCode).toBeTruthy();
|
||||
|
||||
// // areaCode invalid
|
||||
// data.areaCode = '-1';
|
||||
// button.trigger('click');
|
||||
// expect(errorInfo.areaCode).toBeTruthy();
|
||||
// });
|
||||
|
||||
// test('valid addressDetail', () => {
|
||||
// const { data, field, button, errorInfo } = createComponent();
|
||||
// data.addressDetail = '';
|
||||
// button.trigger('click');
|
||||
// expect(errorInfo.addressDetail).toBeTruthy();
|
||||
// field[3].trigger('focus');
|
||||
// expect(errorInfo.addressDetail).toBeFalsy();
|
||||
// });
|
||||
|
||||
// test('valid postal code', () => {
|
||||
// const { vm, data, field, button, errorInfo } = createComponent();
|
||||
|
||||
// // postalCode invalid
|
||||
// data.postalCode = '123';
|
||||
// button.trigger('click');
|
||||
// expect(errorInfo.postalCode).toBeTruthy();
|
||||
// field[4].trigger('focus');
|
||||
// expect(errorInfo.postalCode).toBeFalsy();
|
||||
|
||||
// // valid result
|
||||
// data.postalCode = '123456';
|
||||
// button.trigger('click');
|
||||
|
||||
// // not show postalCode
|
||||
// data.postalCode = '156';
|
||||
// vm.showPostal = false;
|
||||
// button.trigger('click');
|
||||
// expect(errorInfo.postalCode).toBeFalsy();
|
||||
// });
|
||||
|
||||
// test('on change detail', () => {
|
||||
// const wrapper = mount(AddressEdit);
|
||||
// const field = wrapper.findAll('.van-field__control')[3];
|
||||
|
||||
// field.element.value = '123';
|
||||
// field.trigger('input');
|
||||
// expect(wrapper.emitted('change-detail')[0][0]).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', async () => {
|
||||
const wrapper = mount(AddressEdit, {
|
||||
props: { areaList },
|
||||
});
|
||||
|
||||
expect(wrapper.vm.getArea()).toEqual([
|
||||
{ code: '110000', name: '北京市' },
|
||||
{ code: '110100', name: '北京市' },
|
||||
{ code: '110101', name: '东城区' },
|
||||
]);
|
||||
|
||||
wrapper.vm.setAreaCode('110102');
|
||||
|
||||
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 () => {
|
||||
const wrapper = mount(AddressEdit, {
|
||||
props: {
|
||||
showSearchResult: true,
|
||||
searchResult: [
|
||||
{ name: 'name1', address: 'address1' },
|
||||
{ name: 'name2' },
|
||||
{ address: 'address2' },
|
||||
],
|
||||
},
|
||||
});
|
||||
|
||||
const field = wrapper.findAll('.van-field__control')[3];
|
||||
const input = field.element;
|
||||
await field.trigger('focus');
|
||||
|
||||
const items = wrapper.findAll('.van-icon-location-o');
|
||||
items[0].element.parentNode.click();
|
||||
await later();
|
||||
expect(input.value).toEqual('address1 name1');
|
||||
|
||||
items[1].element.parentNode.click();
|
||||
await later();
|
||||
expect(input.value).toEqual('name2');
|
||||
|
||||
items[2].element.parentNode.click();
|
||||
await later();
|
||||
expect(input.value).toEqual('address2');
|
||||
|
||||
await field.trigger('blur');
|
||||
await later(150);
|
||||
expect(wrapper.vm.detailFocused).toBeFalsy();
|
||||
});
|
||||
|
||||
test('should emit delete event after clicking the delete button', async () => {
|
||||
const wrapper = mount(AddressEdit, {
|
||||
props: {
|
||||
showDelete: true,
|
||||
},
|
||||
});
|
||||
|
||||
const deleteButton = wrapper.findAll('.van-button')[1];
|
||||
deleteButton.trigger('click');
|
||||
await later();
|
||||
document.querySelector('.van-dialog__confirm').click();
|
||||
await later();
|
||||
expect(wrapper.emitted('delete')).toBeTruthy();
|
||||
});
|
||||
|
||||
test('should emit cancel-delete event after canceling deletion', async () => {
|
||||
const wrapper = mount(AddressEdit, {
|
||||
props: {
|
||||
showDelete: true,
|
||||
},
|
||||
});
|
||||
|
||||
const deleteButton = wrapper.findAll('.van-button')[1];
|
||||
deleteButton.trigger('click');
|
||||
await later();
|
||||
document.querySelector('.van-dialog__cancel').click();
|
||||
await later();
|
||||
expect(wrapper.emitted('cancel-delete')).toBeTruthy();
|
||||
});
|
||||
|
||||
test('should update address detail after calling the setAddressDetail method', async () => {
|
||||
const { vm, wrapper } = createComponent();
|
||||
const textarea = wrapper.find('.van-address-edit-detail').find('textarea');
|
||||
|
||||
expect(textarea.element.value).toEqual('address detail');
|
||||
|
||||
vm.setAddressDetail('test');
|
||||
await later();
|
||||
expect(textarea.element.value).toEqual('test');
|
||||
});
|
||||
|
||||
test('should emit click-area event after clicking the area field', () => {
|
||||
const wrapper = mount(AddressEdit, {
|
||||
props: {
|
||||
disableArea: true,
|
||||
},
|
||||
});
|
||||
|
||||
const field = wrapper.findAll('.van-field')[2];
|
||||
field.trigger('click');
|
||||
expect(wrapper.emitted('click-area')[0]).toBeTruthy();
|
||||
});
|
||||
|
||||
test('should limit tel maxlength when using tel-maxlength prop', () => {
|
||||
const wrapper = mount(AddressEdit, {
|
||||
props: {
|
||||
telMaxlength: 4,
|
||||
},
|
||||
});
|
||||
|
||||
const telInput = wrapper.find('input[type="tel"]');
|
||||
telInput.element.value = '123456';
|
||||
trigger(telInput, 'input');
|
||||
|
||||
expect(telInput.element.value).toEqual('1234');
|
||||
});
|
||||
Loading…
x
Reference in New Issue
Block a user