mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-05-24 23:49:14 +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 CouponList from '..';
|
||||
|
||||
const coupon = {
|
||||
id: 1,
|
||||
name: 'name',
|
||||
discount: 0,
|
||||
denominations: 150,
|
||||
originCondition: 0,
|
||||
reason: '',
|
||||
value: 150,
|
||||
name: 'name',
|
||||
description: 'description',
|
||||
startAt: 1489104000,
|
||||
endAt: 1514592000,
|
||||
@ -26,19 +24,10 @@ const coupon3 = {
|
||||
denominations: 123,
|
||||
};
|
||||
|
||||
const coupon4 = {
|
||||
const disabledCoupon = {
|
||||
...coupon,
|
||||
startAt: 1600327871,
|
||||
endAt: 1700327871,
|
||||
};
|
||||
|
||||
const emptyCoupon = {
|
||||
id: 0,
|
||||
discount: 0,
|
||||
denominations: 0,
|
||||
originCondition: 0,
|
||||
startAt: 1489104000,
|
||||
endAt: 1514592000,
|
||||
id: 3,
|
||||
reason: 'reason',
|
||||
};
|
||||
|
||||
const discountCoupon = {
|
||||
@ -61,31 +50,26 @@ const discountCoupon2 = {
|
||||
description: '',
|
||||
};
|
||||
|
||||
const disabledCoupon = {
|
||||
...coupon,
|
||||
id: 3,
|
||||
reason: 'reason',
|
||||
};
|
||||
|
||||
const disabledDiscountCoupon = {
|
||||
...discountCoupon,
|
||||
discount: 10,
|
||||
id: 4,
|
||||
discount: 10,
|
||||
reason: '',
|
||||
};
|
||||
|
||||
test('render disabled coupon', () => {
|
||||
const wrapper = mount(Coupon, {
|
||||
props: {
|
||||
coupon: disabledCoupon,
|
||||
disabled: true,
|
||||
},
|
||||
});
|
||||
const emptyCoupon = {
|
||||
id: 0,
|
||||
name: '',
|
||||
discount: 0,
|
||||
value: 0,
|
||||
description: '',
|
||||
denominations: 0,
|
||||
originCondition: 0,
|
||||
startAt: 1489104000,
|
||||
endAt: 1514592000,
|
||||
};
|
||||
|
||||
expect(wrapper.html()).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('render coupon list', async () => {
|
||||
test('should be the sames as the last snapshot when render coupon list', async () => {
|
||||
const wrapper = mount(CouponList, {
|
||||
props: {
|
||||
chosenCoupon: 1,
|
||||
@ -100,81 +84,63 @@ test('render coupon list', async () => {
|
||||
disabledCoupons: [disabledCoupon, disabledDiscountCoupon],
|
||||
},
|
||||
});
|
||||
|
||||
await later();
|
||||
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, {
|
||||
props: {
|
||||
coupons: [],
|
||||
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();
|
||||
});
|
||||
|
||||
test('empty-image prop', () => {
|
||||
test('should use custom src when using empty-image prop', async () => {
|
||||
const wrapper = mount(CouponList, {
|
||||
props: {
|
||||
emptyImage: 'https://img.yzcdn.com/xxx.png',
|
||||
},
|
||||
});
|
||||
|
||||
await later();
|
||||
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 exchange = wrapper.find('.van-coupon-list__exchange');
|
||||
|
||||
wrapper.setData({
|
||||
currentCode: '1',
|
||||
displayedCouponIndex: 1,
|
||||
});
|
||||
exchange.trigger('click');
|
||||
wrapper.setProps({ code: '2' });
|
||||
exchange.trigger('click');
|
||||
const field = wrapper.find('.van-field__control');
|
||||
await field.setValue('1');
|
||||
await exchange.trigger('click');
|
||||
expect(wrapper.emitted('update:code')![0]).toEqual(['1']);
|
||||
expect(wrapper.emitted('update:code')![1]).toEqual(['']);
|
||||
|
||||
expect(wrapper.emitted('exchange')[0][0]).toBe('1');
|
||||
expect(wrapper.emitted('exchange')[1][0]).toBe('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();
|
||||
await wrapper.setProps({ code: '2' });
|
||||
expect(wrapper.emitted('update:code')![2]).toEqual(['2']);
|
||||
});
|
||||
@ -4,7 +4,7 @@ import { RED } from '../utils/constant';
|
||||
import Checkbox from '../checkbox';
|
||||
|
||||
export type CouponInfo = {
|
||||
id: string;
|
||||
id: string | number;
|
||||
name: string;
|
||||
endAt: 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