[bugfix] CouponList: incorrectly render when disabled list empty (#2845)

This commit is contained in:
neverland 2019-02-26 11:57:23 +08:00 committed by GitHub
parent 8f3dc3f9ca
commit 2dcd64c515
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 50 additions and 1 deletions

View File

@ -190,7 +190,7 @@ export default sfc({
{this.disabledCoupons.map(coupon => (
<Coupon disabled key={coupon.id} coupon={coupon} currency={this.currency} />
))}
{!this.disabledCoupons.length && this.renderEmpty}
{!this.disabledCoupons.length && this.renderEmpty()}
</div>
</Tab>
);

View File

@ -140,3 +140,40 @@ exports[`render disabled coupon 1`] = `
<p class="van-coupon__description">reason</p>
</div>
`;
exports[`render empty coupon list 1`] = `
<div class="van-coupon-list">
<div class="van-cell van-cell--borderless van-field van-coupon-list__field">
<div class="van-cell__value van-cell__value--alone">
<div class="van-field__body"><input type="text" placeholder="请输入优惠码" maxlength="20" class="van-field__control">
<div class="van-field__button"><button disabled="disabled" class="van-button van-button--danger van-button--small van-button--disabled van-coupon-list__exchange"><span class="van-button__text">兑换</span></button></div>
</div>
</div>
</div>
<div class="van-tabs van-tabs--line van-coupon-list__tab">
<div class="van-tabs__wrap van-hairline--top-bottom">
<div class="van-tabs__nav van-tabs__nav--line">
<div class="van-tabs__line"></div>
<div class="van-tab"><span class="van-ellipsis">可使用优惠券 (0)</span></div>
<div class="van-tab van-tab--active"><span class="van-ellipsis">不可使用优惠券 (0)</span></div>
</div>
</div>
<div class="van-tabs__content">
<div class="van-tab__pane" style="display: none;">
<div class="van-coupon-list__list" style="height: 628px;">
<div class="van-coupon-list__empty"><img src="https://img.yzcdn.cn/v2/image/wap/trade/new_order/empty@2x.png">
<p>暂无优惠券</p>
</div>
</div>
</div>
<div class="van-tab__pane" style="">
<div class="van-coupon-list__list" style="height: 628px;">
<div class="van-coupon-list__empty"><img src="https://img.yzcdn.cn/v2/image/wap/trade/new_order/empty@2x.png">
<p>暂无优惠券</p>
</div>
</div>
</div>
</div>
</div><button class="van-button van-button--default van-button--large van-coupon-list__close"><span class="van-button__text">不使用优惠</span></button>
</div>
`;

View File

@ -75,6 +75,7 @@ test('render disabled coupon', () => {
disabled: true
}
});
expect(wrapper).toMatchSnapshot();
});
@ -90,6 +91,17 @@ test('render coupon list', async () => {
expect(wrapper).toMatchSnapshot();
});
test('render empty coupon list', () => {
const wrapper = mount(CouponList, {
propsData: {
coupons: [],
disabledCoupons: []
}
});
wrapper.findAll('.van-tab').at(1).trigger('click');
expect(wrapper).toMatchSnapshot();
});
test('exchange coupon', () => {
const wrapper = mount(CouponList);
const exchange = wrapper.find('.van-coupon-list__exchange');