test(PullRefresh): update test cases

This commit is contained in:
chenjiahan 2020-12-28 20:02:33 +08:00
parent 89ecc5f20e
commit c4214b96a2
3 changed files with 212 additions and 176 deletions

View File

@ -1,115 +0,0 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`change head content when pulling down 1`] = `
<div class="van-pull-refresh">
<div class="van-pull-refresh__track" style="transition-duration: 0ms; transform: translate3d(0,20px, 0);">
<div class="van-pull-refresh__head">
<div class="van-pull-refresh__text">下拉即可刷新...</div>
</div>
</div>
</div>
`;
exports[`change head content when pulling down 2`] = `
<div class="van-pull-refresh">
<div class="van-pull-refresh__track" style="transition-duration: 0ms; transform: translate3d(0,75px, 0);">
<div class="van-pull-refresh__head">
<div class="van-pull-refresh__text">释放即可刷新...</div>
</div>
</div>
</div>
`;
exports[`change head content when pulling down 3`] = `
<div class="van-pull-refresh">
<div class="van-pull-refresh__track" style="transition-duration: 300ms; transform: translate3d(0,50px, 0);">
<div class="van-pull-refresh__head">
<div class="van-loading van-loading--circular"><span class="van-loading__spinner van-loading__spinner--circular" style="width: 16px; height: 16px;"><svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span><span class="van-loading__text">加载中...</span></div>
</div>
</div>
</div>
`;
exports[`change head content when pulling down 4`] = `
<div class="van-pull-refresh">
<div class="van-pull-refresh__track" style="transition-duration: 300ms; transform: translate3d(0,50px, 0);">
<div class="van-pull-refresh__head">
<div class="van-loading van-loading--circular"><span class="van-loading__spinner van-loading__spinner--circular" style="width: 16px; height: 16px;"><svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span><span class="van-loading__text">加载中...</span></div>
</div>
</div>
</div>
`;
exports[`change head content when pulling down 5`] = `
<div class="van-pull-refresh">
<div class="van-pull-refresh__track" style="transition-duration: 300ms;">
<div class="van-pull-refresh__head"></div>
</div>
</div>
`;
exports[`custom content by slots 1`] = `
<div class="van-pull-refresh">
<div class="van-pull-refresh__track" style="transition-duration: 0ms; transform: translate3d(0,20px, 0);">
<div class="van-pull-refresh__head">pulling 20</div>
</div>
</div>
`;
exports[`custom content by slots 2`] = `
<div class="van-pull-refresh">
<div class="van-pull-refresh__track" style="transition-duration: 0ms; transform: translate3d(0,75px, 0);">
<div class="van-pull-refresh__head">loosing 75</div>
</div>
</div>
`;
exports[`custom content by slots 3`] = `
<div class="van-pull-refresh">
<div class="van-pull-refresh__track" style="transition-duration: 300ms; transform: translate3d(0,50px, 0);">
<div class="van-pull-refresh__head">loading 50</div>
</div>
</div>
`;
exports[`not in page top 1`] = `
<div class="van-pull-refresh">
<div class="van-pull-refresh__track" style="transition-duration: 0ms;">
<div class="van-pull-refresh__head"></div>
</div>
</div>
`;
exports[`render success slot 1`] = `
<div class="van-pull-refresh">
<div class="van-pull-refresh__track" style="transition-duration: 300ms; transform: translate3d(0,50px, 0);">
<div class="van-pull-refresh__head">Custom Success</div>
</div>
</div>
`;
exports[`render success text 1`] = `
<div class="van-pull-refresh">
<div class="van-pull-refresh__track" style="transition-duration: 300ms; transform: translate3d(0,50px, 0);">
<div class="van-pull-refresh__head">
<div class="van-pull-refresh__text">success</div>
</div>
</div>
</div>
`;
exports[`render success text 2`] = `
<div class="van-pull-refresh">
<div class="van-pull-refresh__track" style="transition-duration: 300ms;">
<div class="van-pull-refresh__head"></div>
</div>
</div>
`;
exports[`should set height when using head-height 1`] = `
<div class="van-pull-refresh">
<div class="van-pull-refresh__track" style="transition-duration: 0ms;">
<div class="van-pull-refresh__head" style="height: 100px;"></div>
</div>
</div>
`;

View File

@ -0,0 +1,173 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`should render different head content in different pulling status 1`] = `
<div class="van-pull-refresh">
<div class="van-pull-refresh__track"
style="transition-duration: 0ms; transform: translate3d(0,20px, 0);"
>
<div class="van-pull-refresh__head">
<div class="van-pull-refresh__text">
下拉即可刷新...
</div>
</div>
</div>
</div>
`;
exports[`should render different head content in different pulling status 2`] = `
<div class="van-pull-refresh">
<div class="van-pull-refresh__track"
style="transition-duration: 0ms; transform: translate3d(0,75px, 0);"
>
<div class="van-pull-refresh__head">
<div class="van-pull-refresh__text">
释放即可刷新...
</div>
</div>
</div>
</div>
`;
exports[`should render different head content in different pulling status 3`] = `
<div class="van-pull-refresh">
<div class="van-pull-refresh__track"
style="transition-duration: 300ms; transform: translate3d(0,50px, 0);"
>
<div class="van-pull-refresh__head">
<div class="van-loading van-loading--circular">
<span class="van-loading__spinner van-loading__spinner--circular"
style="width: 16px; height: 16px;"
>
<svg class="van-loading__circular"
viewbox="25 25 50 50"
>
<circle cx="50"
cy="50"
r="20"
fill="none"
>
</circle>
</svg>
</span>
<span class="van-loading__text">
加载中...
</span>
</div>
</div>
</div>
</div>
`;
exports[`should render different head content in different pulling status 4`] = `
<div class="van-pull-refresh">
<div class="van-pull-refresh__track"
style="transition-duration: 300ms; transform: translate3d(0,50px, 0);"
>
<div class="van-pull-refresh__head">
<div class="van-loading van-loading--circular">
<span class="van-loading__spinner van-loading__spinner--circular"
style="width: 16px; height: 16px;"
>
<svg class="van-loading__circular"
viewbox="25 25 50 50"
>
<circle cx="50"
cy="50"
r="20"
fill="none"
>
</circle>
</svg>
</span>
<span class="van-loading__text">
加载中...
</span>
</div>
</div>
</div>
</div>
`;
exports[`should render different head content in different pulling status 5`] = `
<div class="van-pull-refresh">
<div class="van-pull-refresh__track"
style="transition-duration: 300ms;"
>
<div class="van-pull-refresh__head">
</div>
</div>
</div>
`;
exports[`should render status slots correctly 1`] = `
<div class="van-pull-refresh">
<div class="van-pull-refresh__track"
style="transition-duration: 0ms; transform: translate3d(0,20px, 0);"
>
<div class="van-pull-refresh__head">
pulling 20
</div>
</div>
</div>
`;
exports[`should render status slots correctly 2`] = `
<div class="van-pull-refresh">
<div class="van-pull-refresh__track"
style="transition-duration: 0ms; transform: translate3d(0,75px, 0);"
>
<div class="van-pull-refresh__head">
loosing 75
</div>
</div>
</div>
`;
exports[`should render status slots correctly 3`] = `
<div class="van-pull-refresh">
<div class="van-pull-refresh__track"
style="transition-duration: 300ms; transform: translate3d(0,50px, 0);"
>
<div class="van-pull-refresh__head">
loading 50
</div>
</div>
</div>
`;
exports[`should render success slot correctly 1`] = `
<div class="van-pull-refresh">
<div class="van-pull-refresh__track"
style="transition-duration: 300ms; transform: translate3d(0,50px, 0);"
>
<div class="van-pull-refresh__head">
Custom Success
</div>
</div>
</div>
`;
exports[`should render success text correctly 1`] = `
<div class="van-pull-refresh">
<div class="van-pull-refresh__track"
style="transition-duration: 300ms; transform: translate3d(0,50px, 0);"
>
<div class="van-pull-refresh__head">
<div class="van-pull-refresh__text">
success
</div>
</div>
</div>
</div>
`;
exports[`should render success text correctly 2`] = `
<div class="van-pull-refresh">
<div class="van-pull-refresh__track"
style="transition-duration: 300ms;"
>
<div class="van-pull-refresh__head">
</div>
</div>
</div>
`;

View File

@ -1,49 +1,41 @@
import PullRefresh from '..'; import PullRefresh from '..';
import { mount, later, trigger, triggerDrag } from '../../../test'; import { mount, later, trigger, triggerDrag } from '../../../test';
test('change head content when pulling down', async () => { test('should render different head content in different pulling status', async () => {
const wrapper = mount(PullRefresh, { const wrapper = mount(PullRefresh);
props: {
value: false,
},
listeners: {
input(value) {
wrapper.setProps({ value });
},
},
});
const track = wrapper.find('.van-pull-refresh__track'); const track = wrapper.find('.van-pull-refresh__track');
// pulling // pulling
trigger(track, 'touchstart', 0, 0); trigger(track, 'touchstart', 0, 0);
trigger(track, 'touchmove', 0, 20); trigger(track, 'touchmove', 0, 20);
await later();
expect(wrapper.html()).toMatchSnapshot(); expect(wrapper.html()).toMatchSnapshot();
// loosing // loosing
trigger(track, 'touchmove', 0, 100); trigger(track, 'touchmove', 0, 100);
await later();
expect(wrapper.html()).toMatchSnapshot(); expect(wrapper.html()).toMatchSnapshot();
// loading // loading
trigger(track, 'touchend', 0, 100); trigger(track, 'touchend', 0, 100);
await later();
expect(wrapper.html()).toMatchSnapshot(); expect(wrapper.html()).toMatchSnapshot();
// still loading // still loading
triggerDrag(track, 0, 100); triggerDrag(track, 0, 100);
await later();
expect(wrapper.html()).toMatchSnapshot(); expect(wrapper.html()).toMatchSnapshot();
expect(wrapper.emitted('input')).toBeTruthy(); expect(wrapper.emitted('update:modelValue')).toBeTruthy();
expect(wrapper.emitted('refresh')).toBeFalsy();
await later();
expect(wrapper.emitted('refresh')).toBeTruthy(); expect(wrapper.emitted('refresh')).toBeTruthy();
// end loading // // end loading
wrapper.vm.value = false; await wrapper.setProps({ modelValue: true });
await wrapper.setProps({ modelValue: false });
expect(wrapper.html()).toMatchSnapshot(); expect(wrapper.html()).toMatchSnapshot();
}); });
test('custom content by slots', async () => { test('should render status slots correctly', async () => {
const wrapper = mount(PullRefresh, { const wrapper = mount(PullRefresh, {
slots: { slots: {
pulling({ distance }) { pulling({ distance }) {
@ -63,59 +55,48 @@ test('custom content by slots', async () => {
// pulling // pulling
trigger(track, 'touchstart', 0, 0); trigger(track, 'touchstart', 0, 0);
trigger(track, 'touchmove', 0, 20); trigger(track, 'touchmove', 0, 20);
await later();
expect(wrapper.html()).toMatchSnapshot(); expect(wrapper.html()).toMatchSnapshot();
// loosing // loosing
trigger(track, 'touchmove', 0, 75); trigger(track, 'touchmove', 0, 75);
trigger(track, 'touchmove', 0, 100); trigger(track, 'touchmove', 0, 100);
await later();
expect(wrapper.html()).toMatchSnapshot(); expect(wrapper.html()).toMatchSnapshot();
// loading // loading
trigger(track, 'touchend', 0, 100); trigger(track, 'touchend', 0, 100);
await later();
expect(wrapper.html()).toMatchSnapshot(); expect(wrapper.html()).toMatchSnapshot();
}); });
test('pull a short distance', () => { test('shoud not emit update:modelValue event after pulling a short distance', () => {
const wrapper = mount(PullRefresh, { const wrapper = mount(PullRefresh);
props: {
value: false,
},
});
const track = wrapper.find('.van-pull-refresh__track'); const track = wrapper.find('.van-pull-refresh__track');
triggerDrag(track, 0, 10); triggerDrag(track, 0, 10);
expect(wrapper.emitted('input')).toBeFalsy(); expect(wrapper.emitted('update:modelValue')).toBeFalsy();
}); });
test('not in page top', () => { test('should not trigger pull refresh when not in page top', async () => {
const wrapper = mount(PullRefresh, { const wrapper = mount(PullRefresh);
props: {
value: false,
},
});
window.scrollTop = 100;
const track = wrapper.find('.van-pull-refresh__track'); const track = wrapper.find('.van-pull-refresh__track');
// ignore touch event when not at page top
triggerDrag(track, 0, 100);
window.scrollTop = 0;
trigger(track, 'touchmove', 0, 100);
expect(wrapper.html()).toMatchSnapshot(); // ignore touch event when not at page top
window.scrollTop = 1;
triggerDrag(track, 0, 100);
expect(wrapper.emitted('update:modelValue')).toBeFalsy();
window.scrollTop = 0;
triggerDrag(track, 0, 100);
expect(wrapper.emitted('update:modelValue')).toBeTruthy();
}); });
test('render success text', async () => { test('should render success text correctly', async () => {
const wrapper = mount(PullRefresh, { const wrapper = mount(PullRefresh, {
props: { props: {
successText: 'success', successText: 'success',
successDuration: 0, successDuration: 0,
}, },
listeners: {
input(value) {
wrapper.setProps({ value });
},
},
}); });
const track = wrapper.find('.van-pull-refresh__track'); const track = wrapper.find('.van-pull-refresh__track');
@ -124,10 +105,11 @@ test('render success text', async () => {
await later(); await later();
// loading // loading
expect(wrapper.vm.value).toBeTruthy(); expect(wrapper.emitted('update:modelValue')[0][0]).toBeTruthy();
wrapper.setProps({ value: false }); await wrapper.setProps({ modelValue: true });
// success // success
await wrapper.setProps({ modelValue: false });
expect(wrapper.html()).toMatchSnapshot(); expect(wrapper.html()).toMatchSnapshot();
// normal // normal
@ -135,25 +117,21 @@ test('render success text', async () => {
expect(wrapper.html()).toMatchSnapshot(); expect(wrapper.html()).toMatchSnapshot();
}); });
test('render success slot', async () => { test('should render success slot correctly', async () => {
const wrapper = mount(PullRefresh, { const wrapper = mount(PullRefresh, {
slots: { slots: {
success: () => 'Custom Success', success: () => 'Custom Success',
}, },
listeners: {
input(value) {
wrapper.setProps({ value });
},
},
}); });
// loading
const track = wrapper.find('.van-pull-refresh__track'); const track = wrapper.find('.van-pull-refresh__track');
triggerDrag(track, 0, 100); triggerDrag(track, 0, 100);
expect(wrapper.emitted('update:modelValue')[0][0]).toBeTruthy();
await wrapper.setProps({ modelValue: true });
await later(); // success
await wrapper.setProps({ modelValue: false });
expect(wrapper.vm.value).toBeTruthy();
wrapper.setProps({ value: false });
expect(wrapper.html()).toMatchSnapshot(); expect(wrapper.html()).toMatchSnapshot();
}); });
@ -163,6 +141,6 @@ test('should set height when using head-height', async () => {
headHeight: 100, headHeight: 100,
}, },
}); });
const head = wrapper.find('.van-pull-refresh__head');
expect(wrapper.html()).toMatchSnapshot(); expect(head.element.style.height).toEqual('100px');
}); });