alighasami/vant
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

feat(CouponList): add list-footer、disabled-list-footer slot (#8801)

Browse Source
This commit is contained in:
neverland
2021-06-03 14:08:05 +08:00
committed by GitHub
parent 21e763b42a
commit dc2e40c4cc
5 changed files with 144 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/coupon-list/test/__snapshots__/index.spec.ts.snap
+102
View File
@@ -380,6 +380,108 @@ exports[`should have two "van-coupon-list__empty" classes when render coupon lis
</div>
`;
exports[`should render list-footer slot correctly 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%); transition-duration: 0.3s;"
>
</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://img.yzcdn.cn/vant/coupon-empty.png">
<p>
No coupons
</p>
</div>
List Footer
</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://img.yzcdn.cn/vant/coupon-empty.png">
<p>
No coupons
</p>
</div>
Disabled List Footer
</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">
src/coupon-list/test/index.spec.ts
+15
View File
@@ -144,3 +144,18 @@ test('should emit "update:code" event when input a code', async () => {
await wrapper.setProps({ code: '2' });
expect(wrapper.emitted('update:code')![2]).toEqual(['2']);
});
test('should render list-footer slot correctly', async () => {
const wrapper = mount(CouponList, {
slots: {
'list-footer': () => 'List Footer',
'disabled-list-footer': () => 'Disabled List Footer',
},
});
await later();
const tabs = wrapper.findAll('.van-tab');
await tabs[1].trigger('click');
expect(wrapper.html()).toMatchSnapshot();
});