mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-05-25 07:49:15 +08:00
test(Coupon): add test cases (#8231)
This commit is contained in:
nemo-shen
GitHub
parent
4d51c1524a
commit
0cd9052a6f
61
src/coupon-cell/test/__snapshots__/index.spec.ts.snap
Normal file
61
src/coupon-cell/test/__snapshots__/index.spec.ts.snap
Normal file
@ -0,0 +1,61 @@
|
|||||||
|
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||||
|
|
||||||
|
exports[`should render CouponCell correctly 1`] = `
|
||||||
|
<div class="van-cell van-cell--clickable van-coupon-cell"
|
||||||
|
role="button"
|
||||||
|
tabindex="0"
|
||||||
|
>
|
||||||
|
<div class="van-cell__title">
|
||||||
|
<span>
|
||||||
|
Coupon
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div class="van-cell__value van-coupon-cell__value">
|
||||||
|
<span>
|
||||||
|
No coupons
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<i class="van-badge__wrapper van-icon van-icon-arrow van-cell__right-icon">
|
||||||
|
</i>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
|
||||||
|
exports[`should render CouponCell correctly with zero discount 1`] = `
|
||||||
|
<div class="van-cell van-cell--clickable van-coupon-cell"
|
||||||
|
role="button"
|
||||||
|
tabindex="0"
|
||||||
|
>
|
||||||
|
<div class="van-cell__title">
|
||||||
|
<span>
|
||||||
|
Coupon
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div class="van-cell__value van-coupon-cell__value van-coupon-cell__value--selected">
|
||||||
|
<span>
|
||||||
|
-¥ 0.00
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<i class="van-badge__wrapper van-icon van-icon-arrow van-cell__right-icon">
|
||||||
|
</i>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
|
||||||
|
exports[`should render CouponCell with chosenCoupon correctly 1`] = `
|
||||||
|
<div class="van-cell van-cell--clickable van-coupon-cell"
|
||||||
|
role="button"
|
||||||
|
tabindex="0"
|
||||||
|
>
|
||||||
|
<div class="van-cell__title">
|
||||||
|
<span>
|
||||||
|
Coupon
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div class="van-cell__value van-coupon-cell__value van-coupon-cell__value--selected">
|
||||||
|
<span>
|
||||||
|
-¥ 1.50
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<i class="van-badge__wrapper van-icon van-icon-arrow van-cell__right-icon">
|
||||||
|
</i>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
53
src/coupon-cell/test/index.spec.ts
Normal file
53
src/coupon-cell/test/index.spec.ts
Normal file
@ -0,0 +1,53 @@
|
|||||||
|
import { mount } from '../../../test';
|
||||||
|
import CouponCell from '../index';
|
||||||
|
|
||||||
|
const coupon = {
|
||||||
|
id: 1,
|
||||||
|
discount: 0,
|
||||||
|
denominations: 150,
|
||||||
|
originCondition: 0,
|
||||||
|
reason: '',
|
||||||
|
value: 150,
|
||||||
|
name: 'name',
|
||||||
|
description: 'description',
|
||||||
|
startAt: 1489104000,
|
||||||
|
endAt: 1514592000,
|
||||||
|
};
|
||||||
|
|
||||||
|
test('should render CouponCell correctly', () => {
|
||||||
|
const wrapper = mount(CouponCell);
|
||||||
|
expect(wrapper.html()).toMatchSnapshot();
|
||||||
|
});
|
||||||
|
|
||||||
|
test('should render CouponCell with chosenCoupon correctly', () => {
|
||||||
|
const wrapper = mount(CouponCell, {
|
||||||
|
props: {
|
||||||
|
coupons: [coupon],
|
||||||
|
chosenCoupon: 0,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
expect(wrapper.html()).toMatchSnapshot();
|
||||||
|
});
|
||||||
|
|
||||||
|
test('should render CouponCell correctly with zero discount', () => {
|
||||||
|
const wrapper = mount(CouponCell, {
|
||||||
|
props: {
|
||||||
|
coupons: [{ ...coupon, value: 0, denominations: 150 }],
|
||||||
|
chosenCoupon: 0,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
expect(wrapper.html()).toMatchSnapshot();
|
||||||
|
});
|
||||||
|
|
||||||
|
test('should click one time when coupon cell is clicked', () => {
|
||||||
|
const onClick = jest.fn();
|
||||||
|
const wrapper = mount(CouponCell, {
|
||||||
|
props: {
|
||||||
|
onClick,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
wrapper.trigger('click');
|
||||||
|
expect(onClick).toHaveBeenCalledTimes(1);
|
||||||
|
});
|
||||||
@ -1,256 +0,0 @@
|
|||||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
|
||||||
|
|
||||||
exports[`empty-image prop 1`] = `
|
|
||||||
<div class="van-coupon-list">
|
|
||||||
<div class="van-coupon-list__exchange-bar">
|
|
||||||
<div class="van-cell van-cell--borderless van-field van-coupon-list__field">
|
|
||||||
<div class="van-cell__value van-cell__value--alone van-field__value">
|
|
||||||
<div class="van-field__body"><input type="text" placeholder="请输入优惠码" class="van-field__control"></div>
|
|
||||||
</div>
|
|
||||||
</div><button disabled="disabled" class="van-button van-button--danger van-button--normal van-button--plain van-button--disabled van-coupon-list__exchange">
|
|
||||||
<div class="van-button__content"><span class="van-button__text">兑换</span></div>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<div class="van-tabs van-tabs--line van-coupon-list__tab">
|
|
||||||
<div class="van-tabs__wrap">
|
|
||||||
<div role="tablist" class="van-tabs__nav van-tabs__nav--line">
|
|
||||||
<div role="tab" aria-selected="true" class="van-tab van-tab--active"><span class="van-tab__text van-tab__text--ellipsis">可用 (0)</span></div>
|
|
||||||
<div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">不可用 (0)</span></div>
|
|
||||||
<div class="van-tabs__line"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="van-tabs__content">
|
|
||||||
<div role="tabpanel" class="van-tab__pane">
|
|
||||||
<div class="van-coupon-list__list van-coupon-list__list--with-bottom" style="height: 628px;">
|
|
||||||
<div class="van-coupon-list__empty"><img src="https://img.yzcdn.com/xxx.png">
|
|
||||||
<p>暂无优惠券</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div role="tabpanel" class="van-tab__pane" style="display: none;">
|
|
||||||
<!---->
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="van-coupon-list__bottom"><button class="van-button van-button--danger van-button--normal van-button--block van-button--round van-coupon-list__close">
|
|
||||||
<div class="van-button__content"><span class="van-button__text">不使用优惠券</span></div>
|
|
||||||
</button></div>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
|
|
||||||
exports[`render coupon cell 1`] = `
|
|
||||||
<div role="button" tabindex="0" class="van-cell van-cell--clickable van-coupon-cell">
|
|
||||||
<div class="van-cell__title"><span>优惠券</span></div>
|
|
||||||
<div class="van-cell__value van-coupon-cell__value"><span>暂无可用</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
|
|
||||||
<!----></i>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
|
|
||||||
exports[`render coupon cell with coupon 1`] = `
|
|
||||||
<div role="button" tabindex="0" class="van-cell van-cell--clickable van-coupon-cell">
|
|
||||||
<div class="van-cell__title"><span>优惠券</span></div>
|
|
||||||
<div class="van-cell__value van-coupon-cell__value van-coupon-cell__value--selected"><span>-¥ 1.00</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
|
|
||||||
<!----></i>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
|
|
||||||
|
|
||||||
exports[`render coupon cell with zero discount 1`] = `
|
|
||||||
<div role="button" tabindex="0" class="van-cell van-cell--clickable van-coupon-cell">
|
|
||||||
<div class="van-cell__title"><span>优惠券</span></div>
|
|
||||||
<div class="van-cell__value van-coupon-cell__value van-coupon-cell__value--selected"><span>-¥ 0.00</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
|
|
||||||
<!----></i>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
|
|
||||||
exports[`render coupon list 1`] = `
|
|
||||||
<div class="van-coupon-list">
|
|
||||||
<div class="van-coupon-list__exchange-bar">
|
|
||||||
<div class="van-cell van-cell--borderless van-field van-coupon-list__field">
|
|
||||||
<div class="van-cell__value van-cell__value--alone van-field__value">
|
|
||||||
<div class="van-field__body"><input type="text" placeholder="请输入优惠码" class="van-field__control"></div>
|
|
||||||
</div>
|
|
||||||
</div><button disabled="disabled" class="van-button van-button--danger van-button--normal van-button--plain van-button--disabled van-coupon-list__exchange">
|
|
||||||
<div class="van-button__content"><span class="van-button__text">兑换</span></div>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<div class="van-tabs van-tabs--line van-coupon-list__tab">
|
|
||||||
<div class="van-tabs__wrap">
|
|
||||||
<div role="tablist" class="van-tabs__nav van-tabs__nav--line">
|
|
||||||
<div role="tab" aria-selected="true" class="van-tab van-tab--active"><span class="van-tab__text van-tab__text--ellipsis">可用 (6)</span></div>
|
|
||||||
<div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">不可用 (2)</span></div>
|
|
||||||
<div class="van-tabs__line"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="van-tabs__content">
|
|
||||||
<div role="tabpanel" class="van-tab__pane">
|
|
||||||
<div class="van-coupon-list__list van-coupon-list__list--with-bottom" style="height: 628px;">
|
|
||||||
<div class="van-coupon">
|
|
||||||
<div class="van-coupon__content">
|
|
||||||
<div class="van-coupon__head">
|
|
||||||
<h2 class="van-coupon__amount"></h2>
|
|
||||||
<p class="van-coupon__condition">无使用门槛</p>
|
|
||||||
</div>
|
|
||||||
<div class="van-coupon__body">
|
|
||||||
<p class="van-coupon__name"></p>
|
|
||||||
<p class="van-coupon__valid">2017.03.10 - 2017.12.30</p>
|
|
||||||
<div role="checkbox" tabindex="0" aria-checked="false" class="van-checkbox van-coupon__corner" size="18">
|
|
||||||
<div class="van-checkbox__icon van-checkbox__icon--round"><i class="van-icon van-icon-success">
|
|
||||||
<!----></i></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="van-coupon">
|
|
||||||
<div class="van-coupon__content">
|
|
||||||
<div class="van-coupon__head">
|
|
||||||
<h2 class="van-coupon__amount"><span>¥</span> 1.5</h2>
|
|
||||||
<p class="van-coupon__condition">无使用门槛</p>
|
|
||||||
</div>
|
|
||||||
<div class="van-coupon__body">
|
|
||||||
<p class="van-coupon__name">name</p>
|
|
||||||
<p class="van-coupon__valid">2017.03.10 - 2017.12.30</p>
|
|
||||||
<div role="checkbox" tabindex="0" aria-checked="true" class="van-checkbox van-coupon__corner" size="18">
|
|
||||||
<div class="van-checkbox__icon van-checkbox__icon--round van-checkbox__icon--checked"><i class="van-icon van-icon-success" style="border-color: #ee0a24; background-color: rgb(238, 10, 36);">
|
|
||||||
<!----></i></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<p class="van-coupon__description">description</p>
|
|
||||||
</div>
|
|
||||||
<div class="van-coupon">
|
|
||||||
<div class="van-coupon__content">
|
|
||||||
<div class="van-coupon__head">
|
|
||||||
<h2 class="van-coupon__amount"><span>¥</span> 1</h2>
|
|
||||||
<p class="van-coupon__condition">无使用门槛</p>
|
|
||||||
</div>
|
|
||||||
<div class="van-coupon__body">
|
|
||||||
<p class="van-coupon__name">name</p>
|
|
||||||
<p class="van-coupon__valid">2017.03.10 - 2017.12.30</p>
|
|
||||||
<div role="checkbox" tabindex="0" aria-checked="false" class="van-checkbox van-coupon__corner" size="18">
|
|
||||||
<div class="van-checkbox__icon van-checkbox__icon--round"><i class="van-icon van-icon-success">
|
|
||||||
<!----></i></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<p class="van-coupon__description">description</p>
|
|
||||||
</div>
|
|
||||||
<div class="van-coupon">
|
|
||||||
<div class="van-coupon__content">
|
|
||||||
<div class="van-coupon__head">
|
|
||||||
<h2 class="van-coupon__amount"><span>¥</span> 1.23</h2>
|
|
||||||
<p class="van-coupon__condition">无使用门槛</p>
|
|
||||||
</div>
|
|
||||||
<div class="van-coupon__body">
|
|
||||||
<p class="van-coupon__name">name</p>
|
|
||||||
<p class="van-coupon__valid">2017.03.10 - 2017.12.30</p>
|
|
||||||
<div role="checkbox" tabindex="0" aria-checked="false" class="van-checkbox van-coupon__corner" size="18">
|
|
||||||
<div class="van-checkbox__icon van-checkbox__icon--round"><i class="van-icon van-icon-success">
|
|
||||||
<!----></i></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<p class="van-coupon__description">description</p>
|
|
||||||
</div>
|
|
||||||
<div class="van-coupon">
|
|
||||||
<div class="van-coupon__content">
|
|
||||||
<div class="van-coupon__head">
|
|
||||||
<h2 class="van-coupon__amount">8.8折</h2>
|
|
||||||
<p class="van-coupon__condition">满0.5元可用</p>
|
|
||||||
</div>
|
|
||||||
<div class="van-coupon__body">
|
|
||||||
<p class="van-coupon__name">name</p>
|
|
||||||
<p class="van-coupon__valid">2017.03.10 - 2017.12.30</p>
|
|
||||||
<div role="checkbox" tabindex="0" aria-checked="false" class="van-checkbox van-coupon__corner" size="18">
|
|
||||||
<div class="van-checkbox__icon van-checkbox__icon--round"><i class="van-icon van-icon-success">
|
|
||||||
<!----></i></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="van-coupon">
|
|
||||||
<div class="van-coupon__content">
|
|
||||||
<div class="van-coupon__head">
|
|
||||||
<h2 class="van-coupon__amount">9折</h2>
|
|
||||||
<p class="van-coupon__condition">满0.5元可用</p>
|
|
||||||
</div>
|
|
||||||
<div class="van-coupon__body">
|
|
||||||
<p class="van-coupon__name">name</p>
|
|
||||||
<p class="van-coupon__valid">2017.03.10 - 2017.12.30</p>
|
|
||||||
<div role="checkbox" tabindex="0" aria-checked="false" class="van-checkbox van-coupon__corner" size="18">
|
|
||||||
<div class="van-checkbox__icon van-checkbox__icon--round"><i class="van-icon van-icon-success">
|
|
||||||
<!----></i></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div role="tabpanel" class="van-tab__pane" style="display: none;">
|
|
||||||
<!---->
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="van-coupon-list__bottom"><button class="van-button van-button--danger van-button--normal van-button--block van-button--round van-coupon-list__close">
|
|
||||||
<div class="van-button__content"><span class="van-button__text">不使用优惠券</span></div>
|
|
||||||
</button></div>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
|
|
||||||
exports[`render disabled coupon 1`] = `
|
|
||||||
<div class="van-coupon van-coupon--disabled">
|
|
||||||
<div class="van-coupon__content">
|
|
||||||
<div class="van-coupon__head">
|
|
||||||
<h2 class="van-coupon__amount"><span>¥</span> 1.5</h2>
|
|
||||||
<p class="van-coupon__condition">无使用门槛</p>
|
|
||||||
</div>
|
|
||||||
<div class="van-coupon__body">
|
|
||||||
<p class="van-coupon__name">name</p>
|
|
||||||
<p class="van-coupon__valid">2017.03.10 - 2017.12.30</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<p class="van-coupon__description">reason</p>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
|
|
||||||
exports[`render empty coupon list 1`] = `
|
|
||||||
<div class="van-coupon-list">
|
|
||||||
<div class="van-coupon-list__exchange-bar">
|
|
||||||
<div class="van-cell van-cell--borderless van-field van-coupon-list__field">
|
|
||||||
<div class="van-cell__value van-cell__value--alone van-field__value">
|
|
||||||
<div class="van-field__body"><input type="text" placeholder="请输入优惠码" class="van-field__control"></div>
|
|
||||||
</div>
|
|
||||||
</div><button disabled="disabled" class="van-button van-button--danger van-button--normal van-button--plain van-button--disabled van-coupon-list__exchange">
|
|
||||||
<div class="van-button__content"><span class="van-button__text">兑换</span></div>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<div class="van-tabs van-tabs--line van-coupon-list__tab">
|
|
||||||
<div class="van-tabs__wrap">
|
|
||||||
<div role="tablist" class="van-tabs__nav van-tabs__nav--line">
|
|
||||||
<div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">可用 (0)</span></div>
|
|
||||||
<div role="tab" class="van-tab van-tab--active" aria-selected="true"><span class="van-tab__text van-tab__text--ellipsis">不可用 (0)</span></div>
|
|
||||||
<div class="van-tabs__line"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="van-tabs__content">
|
|
||||||
<div role="tabpanel" class="van-tab__pane" style="display: none;">
|
|
||||||
<div class="van-coupon-list__list van-coupon-list__list--with-bottom" style="height: 628px;">
|
|
||||||
<div class="van-coupon-list__empty"><img src="https://img01.yzcdn.cn/vant/coupon-empty.png">
|
|
||||||
<p>暂无优惠券</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div role="tabpanel" class="van-tab__pane" style="">
|
|
||||||
<div class="van-coupon-list__list van-coupon-list__list--with-bottom" style="height: 628px;">
|
|
||||||
<div class="van-coupon-list__empty"><img src="https://img01.yzcdn.cn/vant/coupon-empty.png">
|
|
||||||
<p>暂无优惠券</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="van-coupon-list__bottom"><button class="van-button van-button--danger van-button--normal van-button--block van-button--round van-coupon-list__close">
|
|
||||||
<div class="van-button__content"><span class="van-button__text">不使用优惠券</span></div>
|
|
||||||
</button></div>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
473
src/coupon-list/test/__snapshots__/index.spec.ts.snap
Normal file
473
src/coupon-list/test/__snapshots__/index.spec.ts.snap
Normal file
@ -0,0 +1,473 @@
|
|||||||
|
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||||
|
|
||||||
|
exports[`should be the sames as the last snapshot when render coupon list 1`] = `
|
||||||
|
<div class="van-coupon-list">
|
||||||
|
<div class="van-coupon-list__exchange-bar">
|
||||||
|
<div class="van-cell van-cell--borderless van-field van-coupon-list__field">
|
||||||
|
<div class="van-cell__value van-cell__value--alone van-field__value">
|
||||||
|
<div class="van-field__body">
|
||||||
|
<input type="text"
|
||||||
|
class="van-field__control"
|
||||||
|
placeholder="Coupon code"
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<button type="button"
|
||||||
|
class="van-button van-button--danger van-button--normal van-button--plain van-button--disabled van-coupon-list__exchange"
|
||||||
|
disabled
|
||||||
|
>
|
||||||
|
<div class="van-button__content">
|
||||||
|
<span class="van-button__text">
|
||||||
|
Exchange
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="van-tabs van-tabs--line van-coupon-list__tab"
|
||||||
|
modelvalue="0"
|
||||||
|
>
|
||||||
|
<div class="van-tabs__wrap">
|
||||||
|
<div role="tablist"
|
||||||
|
class="van-tabs__nav van-tabs__nav--line"
|
||||||
|
>
|
||||||
|
<div role="tab"
|
||||||
|
class="van-tab van-tab--active"
|
||||||
|
aria-selected="true"
|
||||||
|
>
|
||||||
|
<span class="van-tab__text van-tab__text--ellipsis">
|
||||||
|
Available (6)
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div role="tab"
|
||||||
|
class="van-tab"
|
||||||
|
aria-selected="false"
|
||||||
|
>
|
||||||
|
<span class="van-tab__text van-tab__text--ellipsis">
|
||||||
|
Unavailable (2)
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div class="van-tabs__line"
|
||||||
|
style="transform: translateX(0px) translateX(-50%);"
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="van-tabs__content">
|
||||||
|
<div role="tabpanel"
|
||||||
|
class="van-tab__pane"
|
||||||
|
style
|
||||||
|
>
|
||||||
|
<div class="van-coupon-list__list van-coupon-list__list--with-bottom"
|
||||||
|
style="height: 628px;"
|
||||||
|
>
|
||||||
|
<div class="van-coupon">
|
||||||
|
<div class="van-coupon__content">
|
||||||
|
<div class="van-coupon__head">
|
||||||
|
<h2 class="van-coupon__amount">
|
||||||
|
</h2>
|
||||||
|
<p class="van-coupon__condition">
|
||||||
|
Unlimited
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="van-coupon__body">
|
||||||
|
<p class="van-coupon__name">
|
||||||
|
</p>
|
||||||
|
<p class="van-coupon__valid">
|
||||||
|
2017.03.10 - 2017.12.30
|
||||||
|
</p>
|
||||||
|
<div role="checkbox"
|
||||||
|
class="van-checkbox van-coupon__corner"
|
||||||
|
tabindex="0"
|
||||||
|
aria-checked="false"
|
||||||
|
>
|
||||||
|
<div class="van-checkbox__icon van-checkbox__icon--round">
|
||||||
|
<i class="van-badge__wrapper van-icon van-icon-success">
|
||||||
|
</i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="van-coupon">
|
||||||
|
<div class="van-coupon__content">
|
||||||
|
<div class="van-coupon__head">
|
||||||
|
<h2 class="van-coupon__amount">
|
||||||
|
<span>
|
||||||
|
¥
|
||||||
|
</span>
|
||||||
|
1.5
|
||||||
|
</h2>
|
||||||
|
<p class="van-coupon__condition">
|
||||||
|
Unlimited
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="van-coupon__body">
|
||||||
|
<p class="van-coupon__name">
|
||||||
|
name
|
||||||
|
</p>
|
||||||
|
<p class="van-coupon__valid">
|
||||||
|
2017.03.10 - 2017.12.30
|
||||||
|
</p>
|
||||||
|
<div role="checkbox"
|
||||||
|
class="van-checkbox van-coupon__corner"
|
||||||
|
tabindex="0"
|
||||||
|
aria-checked="true"
|
||||||
|
>
|
||||||
|
<div class="van-checkbox__icon van-checkbox__icon--round van-checkbox__icon--checked">
|
||||||
|
<i class="van-badge__wrapper van-icon van-icon-success"
|
||||||
|
style="border-color: #ee0a24; background-color: rgb(238, 10, 36);"
|
||||||
|
>
|
||||||
|
</i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p class="van-coupon__description">
|
||||||
|
description
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="van-coupon">
|
||||||
|
<div class="van-coupon__content">
|
||||||
|
<div class="van-coupon__head">
|
||||||
|
<h2 class="van-coupon__amount">
|
||||||
|
<span>
|
||||||
|
¥
|
||||||
|
</span>
|
||||||
|
1
|
||||||
|
</h2>
|
||||||
|
<p class="van-coupon__condition">
|
||||||
|
Unlimited
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="van-coupon__body">
|
||||||
|
<p class="van-coupon__name">
|
||||||
|
name
|
||||||
|
</p>
|
||||||
|
<p class="van-coupon__valid">
|
||||||
|
2017.03.10 - 2017.12.30
|
||||||
|
</p>
|
||||||
|
<div role="checkbox"
|
||||||
|
class="van-checkbox van-coupon__corner"
|
||||||
|
tabindex="0"
|
||||||
|
aria-checked="false"
|
||||||
|
>
|
||||||
|
<div class="van-checkbox__icon van-checkbox__icon--round">
|
||||||
|
<i class="van-badge__wrapper van-icon van-icon-success">
|
||||||
|
</i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p class="van-coupon__description">
|
||||||
|
description
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="van-coupon">
|
||||||
|
<div class="van-coupon__content">
|
||||||
|
<div class="van-coupon__head">
|
||||||
|
<h2 class="van-coupon__amount">
|
||||||
|
<span>
|
||||||
|
¥
|
||||||
|
</span>
|
||||||
|
1.23
|
||||||
|
</h2>
|
||||||
|
<p class="van-coupon__condition">
|
||||||
|
Unlimited
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="van-coupon__body">
|
||||||
|
<p class="van-coupon__name">
|
||||||
|
name
|
||||||
|
</p>
|
||||||
|
<p class="van-coupon__valid">
|
||||||
|
2017.03.10 - 2017.12.30
|
||||||
|
</p>
|
||||||
|
<div role="checkbox"
|
||||||
|
class="van-checkbox van-coupon__corner"
|
||||||
|
tabindex="0"
|
||||||
|
aria-checked="false"
|
||||||
|
>
|
||||||
|
<div class="van-checkbox__icon van-checkbox__icon--round">
|
||||||
|
<i class="van-badge__wrapper van-icon van-icon-success">
|
||||||
|
</i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p class="van-coupon__description">
|
||||||
|
description
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="van-coupon">
|
||||||
|
<div class="van-coupon__content">
|
||||||
|
<div class="van-coupon__head">
|
||||||
|
<h2 class="van-coupon__amount">
|
||||||
|
88% off
|
||||||
|
</h2>
|
||||||
|
<p class="van-coupon__condition">
|
||||||
|
At least 0.5
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="van-coupon__body">
|
||||||
|
<p class="van-coupon__name">
|
||||||
|
name
|
||||||
|
</p>
|
||||||
|
<p class="van-coupon__valid">
|
||||||
|
2017.03.10 - 2017.12.30
|
||||||
|
</p>
|
||||||
|
<div role="checkbox"
|
||||||
|
class="van-checkbox van-coupon__corner"
|
||||||
|
tabindex="0"
|
||||||
|
aria-checked="false"
|
||||||
|
>
|
||||||
|
<div class="van-checkbox__icon van-checkbox__icon--round">
|
||||||
|
<i class="van-badge__wrapper van-icon van-icon-success">
|
||||||
|
</i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="van-coupon">
|
||||||
|
<div class="van-coupon__content">
|
||||||
|
<div class="van-coupon__head">
|
||||||
|
<h2 class="van-coupon__amount">
|
||||||
|
90% off
|
||||||
|
</h2>
|
||||||
|
<p class="van-coupon__condition">
|
||||||
|
At least 0.5
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="van-coupon__body">
|
||||||
|
<p class="van-coupon__name">
|
||||||
|
name
|
||||||
|
</p>
|
||||||
|
<p class="van-coupon__valid">
|
||||||
|
2017.03.10 - 2017.12.30
|
||||||
|
</p>
|
||||||
|
<div role="checkbox"
|
||||||
|
class="van-checkbox van-coupon__corner"
|
||||||
|
tabindex="0"
|
||||||
|
aria-checked="false"
|
||||||
|
>
|
||||||
|
<div class="van-checkbox__icon van-checkbox__icon--round">
|
||||||
|
<i class="van-badge__wrapper van-icon van-icon-success">
|
||||||
|
</i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div role="tabpanel"
|
||||||
|
class="van-tab__pane"
|
||||||
|
style="display: none;"
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="van-coupon-list__bottom">
|
||||||
|
<button type="button"
|
||||||
|
class="van-button van-button--danger van-button--normal van-button--block van-button--round van-coupon-list__close"
|
||||||
|
>
|
||||||
|
<div class="van-button__content">
|
||||||
|
<span class="van-button__text">
|
||||||
|
Close
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
|
||||||
|
exports[`should have two "van-coupon-list__empty" classes when render coupon list is empty 1`] = `
|
||||||
|
<div class="van-coupon-list">
|
||||||
|
<div class="van-coupon-list__exchange-bar">
|
||||||
|
<div class="van-cell van-cell--borderless van-field van-coupon-list__field">
|
||||||
|
<div class="van-cell__value van-cell__value--alone van-field__value">
|
||||||
|
<div class="van-field__body">
|
||||||
|
<input type="text"
|
||||||
|
class="van-field__control"
|
||||||
|
placeholder="Coupon code"
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<button type="button"
|
||||||
|
class="van-button van-button--danger van-button--normal van-button--plain van-button--disabled van-coupon-list__exchange"
|
||||||
|
disabled
|
||||||
|
>
|
||||||
|
<div class="van-button__content">
|
||||||
|
<span class="van-button__text">
|
||||||
|
Exchange
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="van-tabs van-tabs--line van-coupon-list__tab"
|
||||||
|
modelvalue="0"
|
||||||
|
>
|
||||||
|
<div class="van-tabs__wrap">
|
||||||
|
<div role="tablist"
|
||||||
|
class="van-tabs__nav van-tabs__nav--line"
|
||||||
|
>
|
||||||
|
<div role="tab"
|
||||||
|
class="van-tab"
|
||||||
|
aria-selected="false"
|
||||||
|
>
|
||||||
|
<span class="van-tab__text van-tab__text--ellipsis">
|
||||||
|
Available (0)
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div role="tab"
|
||||||
|
class="van-tab van-tab--active"
|
||||||
|
aria-selected="true"
|
||||||
|
>
|
||||||
|
<span class="van-tab__text van-tab__text--ellipsis">
|
||||||
|
Unavailable (0)
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div class="van-tabs__line"
|
||||||
|
style="transform: translateX(0px) translateX(-50%);"
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="van-tabs__content">
|
||||||
|
<div role="tabpanel"
|
||||||
|
class="van-tab__pane"
|
||||||
|
style="display: none;"
|
||||||
|
>
|
||||||
|
<div class="van-coupon-list__list van-coupon-list__list--with-bottom"
|
||||||
|
style="height: 628px;"
|
||||||
|
>
|
||||||
|
<div class="van-coupon-list__empty">
|
||||||
|
<img src="https://img01.yzcdn.cn/vant/coupon-empty.png">
|
||||||
|
<p>
|
||||||
|
No coupons
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div role="tabpanel"
|
||||||
|
class="van-tab__pane"
|
||||||
|
style
|
||||||
|
>
|
||||||
|
<div class="van-coupon-list__list van-coupon-list__list--with-bottom"
|
||||||
|
style="height: 628px;"
|
||||||
|
>
|
||||||
|
<div class="van-coupon-list__empty">
|
||||||
|
<img src="https://img01.yzcdn.cn/vant/coupon-empty.png">
|
||||||
|
<p>
|
||||||
|
No coupons
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="van-coupon-list__bottom">
|
||||||
|
<button type="button"
|
||||||
|
class="van-button van-button--danger van-button--normal van-button--block van-button--round van-coupon-list__close"
|
||||||
|
>
|
||||||
|
<div class="van-button__content">
|
||||||
|
<span class="van-button__text">
|
||||||
|
Close
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
|
||||||
|
exports[`should use custom src when using empty-image prop 1`] = `
|
||||||
|
<div class="van-coupon-list">
|
||||||
|
<div class="van-coupon-list__exchange-bar">
|
||||||
|
<div class="van-cell van-cell--borderless van-field van-coupon-list__field">
|
||||||
|
<div class="van-cell__value van-cell__value--alone van-field__value">
|
||||||
|
<div class="van-field__body">
|
||||||
|
<input type="text"
|
||||||
|
class="van-field__control"
|
||||||
|
placeholder="Coupon code"
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<button type="button"
|
||||||
|
class="van-button van-button--danger van-button--normal van-button--plain van-button--disabled van-coupon-list__exchange"
|
||||||
|
disabled
|
||||||
|
>
|
||||||
|
<div class="van-button__content">
|
||||||
|
<span class="van-button__text">
|
||||||
|
Exchange
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="van-tabs van-tabs--line van-coupon-list__tab"
|
||||||
|
modelvalue="0"
|
||||||
|
>
|
||||||
|
<div class="van-tabs__wrap">
|
||||||
|
<div role="tablist"
|
||||||
|
class="van-tabs__nav van-tabs__nav--line"
|
||||||
|
>
|
||||||
|
<div role="tab"
|
||||||
|
class="van-tab van-tab--active"
|
||||||
|
aria-selected="true"
|
||||||
|
>
|
||||||
|
<span class="van-tab__text van-tab__text--ellipsis">
|
||||||
|
Available (0)
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div role="tab"
|
||||||
|
class="van-tab"
|
||||||
|
aria-selected="false"
|
||||||
|
>
|
||||||
|
<span class="van-tab__text van-tab__text--ellipsis">
|
||||||
|
Unavailable (0)
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div class="van-tabs__line"
|
||||||
|
style="transform: translateX(0px) translateX(-50%);"
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="van-tabs__content">
|
||||||
|
<div role="tabpanel"
|
||||||
|
class="van-tab__pane"
|
||||||
|
style
|
||||||
|
>
|
||||||
|
<div class="van-coupon-list__list van-coupon-list__list--with-bottom"
|
||||||
|
style="height: 628px;"
|
||||||
|
>
|
||||||
|
<div class="van-coupon-list__empty">
|
||||||
|
<img src="https://img.yzcdn.com/xxx.png">
|
||||||
|
<p>
|
||||||
|
No coupons
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div role="tabpanel"
|
||||||
|
class="van-tab__pane"
|
||||||
|
style="display: none;"
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="van-coupon-list__bottom">
|
||||||
|
<button type="button"
|
||||||
|
class="van-button van-button--danger van-button--normal van-button--block van-button--round van-coupon-list__close"
|
||||||
|
>
|
||||||
|
<div class="van-button__content">
|
||||||
|
<span class="van-button__text">
|
||||||
|
Close
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
@ -1,16 +1,14 @@
|
|||||||
import Coupon from '../../coupon';
|
|
||||||
import CouponList from '..';
|
|
||||||
import CouponCell from '../../coupon-cell';
|
|
||||||
import { later, mount } from '../../../test';
|
import { later, mount } from '../../../test';
|
||||||
|
import CouponList from '..';
|
||||||
|
|
||||||
const coupon = {
|
const coupon = {
|
||||||
id: 1,
|
id: 1,
|
||||||
|
name: 'name',
|
||||||
discount: 0,
|
discount: 0,
|
||||||
denominations: 150,
|
denominations: 150,
|
||||||
originCondition: 0,
|
originCondition: 0,
|
||||||
reason: '',
|
reason: '',
|
||||||
value: 150,
|
value: 150,
|
||||||
name: 'name',
|
|
||||||
description: 'description',
|
description: 'description',
|
||||||
startAt: 1489104000,
|
startAt: 1489104000,
|
||||||
endAt: 1514592000,
|
endAt: 1514592000,
|
||||||
@ -26,19 +24,10 @@ const coupon3 = {
|
|||||||
denominations: 123,
|
denominations: 123,
|
||||||
};
|
};
|
||||||
|
|
||||||
const coupon4 = {
|
const disabledCoupon = {
|
||||||
...coupon,
|
...coupon,
|
||||||
startAt: 1600327871,
|
id: 3,
|
||||||
endAt: 1700327871,
|
reason: 'reason',
|
||||||
};
|
|
||||||
|
|
||||||
const emptyCoupon = {
|
|
||||||
id: 0,
|
|
||||||
discount: 0,
|
|
||||||
denominations: 0,
|
|
||||||
originCondition: 0,
|
|
||||||
startAt: 1489104000,
|
|
||||||
endAt: 1514592000,
|
|
||||||
};
|
};
|
||||||
|
|
||||||
const discountCoupon = {
|
const discountCoupon = {
|
||||||
@ -61,31 +50,26 @@ const discountCoupon2 = {
|
|||||||
description: '',
|
description: '',
|
||||||
};
|
};
|
||||||
|
|
||||||
const disabledCoupon = {
|
|
||||||
...coupon,
|
|
||||||
id: 3,
|
|
||||||
reason: 'reason',
|
|
||||||
};
|
|
||||||
|
|
||||||
const disabledDiscountCoupon = {
|
const disabledDiscountCoupon = {
|
||||||
...discountCoupon,
|
...discountCoupon,
|
||||||
discount: 10,
|
|
||||||
id: 4,
|
id: 4,
|
||||||
|
discount: 10,
|
||||||
reason: '',
|
reason: '',
|
||||||
};
|
};
|
||||||
|
|
||||||
test('render disabled coupon', () => {
|
const emptyCoupon = {
|
||||||
const wrapper = mount(Coupon, {
|
id: 0,
|
||||||
props: {
|
name: '',
|
||||||
coupon: disabledCoupon,
|
discount: 0,
|
||||||
disabled: true,
|
value: 0,
|
||||||
},
|
description: '',
|
||||||
});
|
denominations: 0,
|
||||||
|
originCondition: 0,
|
||||||
|
startAt: 1489104000,
|
||||||
|
endAt: 1514592000,
|
||||||
|
};
|
||||||
|
|
||||||
expect(wrapper.html()).toMatchSnapshot();
|
test('should be the sames as the last snapshot when render coupon list', async () => {
|
||||||
});
|
|
||||||
|
|
||||||
test('render coupon list', async () => {
|
|
||||||
const wrapper = mount(CouponList, {
|
const wrapper = mount(CouponList, {
|
||||||
props: {
|
props: {
|
||||||
chosenCoupon: 1,
|
chosenCoupon: 1,
|
||||||
@ -100,81 +84,63 @@ test('render coupon list', async () => {
|
|||||||
disabledCoupons: [disabledCoupon, disabledDiscountCoupon],
|
disabledCoupons: [disabledCoupon, disabledDiscountCoupon],
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
await later();
|
await later();
|
||||||
expect(wrapper.html()).toMatchSnapshot();
|
expect(wrapper.html()).toMatchSnapshot();
|
||||||
});
|
});
|
||||||
|
|
||||||
test('render empty coupon list', () => {
|
test('should have two "van-coupon-list__empty" classes when render coupon list is empty', async () => {
|
||||||
const wrapper = mount(CouponList, {
|
const wrapper = mount(CouponList, {
|
||||||
props: {
|
props: {
|
||||||
coupons: [],
|
coupons: [],
|
||||||
disabledCoupons: [],
|
disabledCoupons: [],
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
wrapper.findAll('.van-tab')[1].trigger('click');
|
|
||||||
|
await later();
|
||||||
|
const tabs = wrapper.findAll('.van-tab');
|
||||||
|
await tabs.forEach((tab) => tab.trigger('click'));
|
||||||
expect(wrapper.html()).toMatchSnapshot();
|
expect(wrapper.html()).toMatchSnapshot();
|
||||||
});
|
});
|
||||||
|
|
||||||
test('empty-image prop', () => {
|
test('should use custom src when using empty-image prop', async () => {
|
||||||
const wrapper = mount(CouponList, {
|
const wrapper = mount(CouponList, {
|
||||||
props: {
|
props: {
|
||||||
emptyImage: 'https://img.yzcdn.com/xxx.png',
|
emptyImage: 'https://img.yzcdn.com/xxx.png',
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
|
await later();
|
||||||
expect(wrapper.html()).toMatchSnapshot();
|
expect(wrapper.html()).toMatchSnapshot();
|
||||||
});
|
});
|
||||||
|
|
||||||
test('exchange coupon', () => {
|
test('should emit "exchange" event when exchange button is clicked', async () => {
|
||||||
|
const wrapper = mount(CouponList);
|
||||||
|
const exchange = wrapper.find('.van-coupon-list__exchange');
|
||||||
|
const field = wrapper.find('.van-field__control');
|
||||||
|
|
||||||
|
await exchange.trigger('click');
|
||||||
|
expect(wrapper.emitted('exchange')).toBeFalsy();
|
||||||
|
|
||||||
|
await field.setValue('1');
|
||||||
|
await exchange.trigger('click');
|
||||||
|
expect(wrapper.emitted('exchange')![0]).toEqual(['1']);
|
||||||
|
|
||||||
|
await wrapper.setProps({ code: '2' });
|
||||||
|
await exchange.trigger('click');
|
||||||
|
expect(wrapper.emitted('exchange')![1]).toEqual(['2']);
|
||||||
|
});
|
||||||
|
|
||||||
|
test('should emit "update:code" event when input a code', async () => {
|
||||||
const wrapper = mount(CouponList);
|
const wrapper = mount(CouponList);
|
||||||
const exchange = wrapper.find('.van-coupon-list__exchange');
|
const exchange = wrapper.find('.van-coupon-list__exchange');
|
||||||
|
|
||||||
wrapper.setData({
|
const field = wrapper.find('.van-field__control');
|
||||||
currentCode: '1',
|
await field.setValue('1');
|
||||||
displayedCouponIndex: 1,
|
await exchange.trigger('click');
|
||||||
});
|
expect(wrapper.emitted('update:code')![0]).toEqual(['1']);
|
||||||
exchange.trigger('click');
|
expect(wrapper.emitted('update:code')![1]).toEqual(['']);
|
||||||
wrapper.setProps({ code: '2' });
|
|
||||||
exchange.trigger('click');
|
|
||||||
|
|
||||||
expect(wrapper.emitted('exchange')[0][0]).toBe('1');
|
await wrapper.setProps({ code: '2' });
|
||||||
expect(wrapper.emitted('exchange')[1][0]).toBe('2');
|
expect(wrapper.emitted('update:code')![2]).toEqual(['2']);
|
||||||
expect(wrapper.emitted('input')[0][0]).toBe('1');
|
|
||||||
expect(wrapper.emitted('input')[1][0]).toBe('');
|
|
||||||
expect(wrapper.emitted('input')[2][0]).toBe('2');
|
|
||||||
});
|
|
||||||
|
|
||||||
test('render coupon cell', () => {
|
|
||||||
const onClick = jest.fn();
|
|
||||||
const wrapper = mount(CouponCell, {
|
|
||||||
context: {
|
|
||||||
on: {
|
|
||||||
click: onClick,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
expect(wrapper.html()).toMatchSnapshot();
|
|
||||||
wrapper.trigger('click');
|
|
||||||
expect(onClick).toHaveBeenCalledTimes(1);
|
|
||||||
});
|
|
||||||
|
|
||||||
test('render coupon cell with coupon', () => {
|
|
||||||
const wrapper = mount(CouponCell, {
|
|
||||||
props: {
|
|
||||||
coupons: [{ value: 100 }],
|
|
||||||
chosenCoupon: 0,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
expect(wrapper.html()).toMatchSnapshot();
|
|
||||||
});
|
|
||||||
|
|
||||||
test('render coupon cell with zero discount', () => {
|
|
||||||
const wrapper = mount(CouponCell, {
|
|
||||||
props: {
|
|
||||||
coupons: [{ ...coupon4, value: 0, denominations: 150 }],
|
|
||||||
chosenCoupon: 0,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
expect(wrapper.html()).toMatchSnapshot();
|
|
||||||
});
|
});
|
||||||
@ -4,7 +4,7 @@ import { RED } from '../utils/constant';
|
|||||||
import Checkbox from '../checkbox';
|
import Checkbox from '../checkbox';
|
||||||
|
|
||||||
export type CouponInfo = {
|
export type CouponInfo = {
|
||||||
id: string;
|
id: string | number;
|
||||||
name: string;
|
name: string;
|
||||||
endAt: number;
|
endAt: number;
|
||||||
value: number;
|
value: number;
|
||||||
|
|||||||
27
src/coupon/test/index.spec.ts
Normal file
27
src/coupon/test/index.spec.ts
Normal file
@ -0,0 +1,27 @@
|
|||||||
|
import { mount } from '../../../test';
|
||||||
|
import Coupon from '..';
|
||||||
|
|
||||||
|
const coupon = {
|
||||||
|
id: 1,
|
||||||
|
name: 'name',
|
||||||
|
discount: 0,
|
||||||
|
denominations: 150,
|
||||||
|
originCondition: 0,
|
||||||
|
reason: '',
|
||||||
|
value: 150,
|
||||||
|
valueDesc: '1.5',
|
||||||
|
description: 'description',
|
||||||
|
startAt: 1489104000,
|
||||||
|
endAt: 1514592000,
|
||||||
|
};
|
||||||
|
|
||||||
|
test('should render "van-coupon--disabled" class when using disabled prop', () => {
|
||||||
|
const wrapper = mount(Coupon, {
|
||||||
|
props: {
|
||||||
|
coupon,
|
||||||
|
disabled: true,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
expect(wrapper.classes()).toContain('van-coupon--disabled');
|
||||||
|
});
|
||||||
Loading…
x
Reference in New Issue
Block a user