mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
test(PullRefresh): update test cases
This commit is contained in:
chenjiahan
parent
89ecc5f20e
commit
c4214b96a2
@ -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>
|
||||
`;
|
||||
173
src/pull-refresh/test/__snapshots__/index.spec.js.snap
Normal file
173
src/pull-refresh/test/__snapshots__/index.spec.js.snap
Normal 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>
|
||||
`;
|
||||
@ -1,49 +1,41 @@
|
||||
import PullRefresh from '..';
|
||||
import { mount, later, trigger, triggerDrag } from '../../../test';
|
||||
|
||||
test('change head content when pulling down', async () => {
|
||||
const wrapper = mount(PullRefresh, {
|
||||
props: {
|
||||
value: false,
|
||||
},
|
||||
listeners: {
|
||||
input(value) {
|
||||
wrapper.setProps({ value });
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
test('should render different head content in different pulling status', async () => {
|
||||
const wrapper = mount(PullRefresh);
|
||||
const track = wrapper.find('.van-pull-refresh__track');
|
||||
|
||||
// pulling
|
||||
trigger(track, 'touchstart', 0, 0);
|
||||
trigger(track, 'touchmove', 0, 20);
|
||||
await later();
|
||||
expect(wrapper.html()).toMatchSnapshot();
|
||||
|
||||
// loosing
|
||||
trigger(track, 'touchmove', 0, 100);
|
||||
await later();
|
||||
expect(wrapper.html()).toMatchSnapshot();
|
||||
|
||||
// loading
|
||||
trigger(track, 'touchend', 0, 100);
|
||||
await later();
|
||||
expect(wrapper.html()).toMatchSnapshot();
|
||||
|
||||
// still loading
|
||||
triggerDrag(track, 0, 100);
|
||||
await later();
|
||||
expect(wrapper.html()).toMatchSnapshot();
|
||||
|
||||
expect(wrapper.emitted('input')).toBeTruthy();
|
||||
expect(wrapper.emitted('refresh')).toBeFalsy();
|
||||
|
||||
await later();
|
||||
expect(wrapper.emitted('update:modelValue')).toBeTruthy();
|
||||
expect(wrapper.emitted('refresh')).toBeTruthy();
|
||||
|
||||
// end loading
|
||||
wrapper.vm.value = false;
|
||||
// // end loading
|
||||
await wrapper.setProps({ modelValue: true });
|
||||
await wrapper.setProps({ modelValue: false });
|
||||
expect(wrapper.html()).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('custom content by slots', async () => {
|
||||
test('should render status slots correctly', async () => {
|
||||
const wrapper = mount(PullRefresh, {
|
||||
slots: {
|
||||
pulling({ distance }) {
|
||||
@ -63,59 +55,48 @@ test('custom content by slots', async () => {
|
||||
// pulling
|
||||
trigger(track, 'touchstart', 0, 0);
|
||||
trigger(track, 'touchmove', 0, 20);
|
||||
await later();
|
||||
expect(wrapper.html()).toMatchSnapshot();
|
||||
|
||||
// loosing
|
||||
trigger(track, 'touchmove', 0, 75);
|
||||
trigger(track, 'touchmove', 0, 100);
|
||||
await later();
|
||||
expect(wrapper.html()).toMatchSnapshot();
|
||||
|
||||
// loading
|
||||
trigger(track, 'touchend', 0, 100);
|
||||
await later();
|
||||
expect(wrapper.html()).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('pull a short distance', () => {
|
||||
const wrapper = mount(PullRefresh, {
|
||||
props: {
|
||||
value: false,
|
||||
},
|
||||
});
|
||||
|
||||
test('shoud not emit update:modelValue event after pulling a short distance', () => {
|
||||
const wrapper = mount(PullRefresh);
|
||||
const track = wrapper.find('.van-pull-refresh__track');
|
||||
triggerDrag(track, 0, 10);
|
||||
expect(wrapper.emitted('input')).toBeFalsy();
|
||||
expect(wrapper.emitted('update:modelValue')).toBeFalsy();
|
||||
});
|
||||
|
||||
test('not in page top', () => {
|
||||
const wrapper = mount(PullRefresh, {
|
||||
props: {
|
||||
value: false,
|
||||
},
|
||||
});
|
||||
|
||||
window.scrollTop = 100;
|
||||
|
||||
test('should not trigger pull refresh when not in page top', async () => {
|
||||
const wrapper = mount(PullRefresh);
|
||||
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, {
|
||||
props: {
|
||||
successText: 'success',
|
||||
successDuration: 0,
|
||||
},
|
||||
listeners: {
|
||||
input(value) {
|
||||
wrapper.setProps({ value });
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
const track = wrapper.find('.van-pull-refresh__track');
|
||||
@ -124,10 +105,11 @@ test('render success text', async () => {
|
||||
await later();
|
||||
|
||||
// loading
|
||||
expect(wrapper.vm.value).toBeTruthy();
|
||||
wrapper.setProps({ value: false });
|
||||
expect(wrapper.emitted('update:modelValue')[0][0]).toBeTruthy();
|
||||
await wrapper.setProps({ modelValue: true });
|
||||
|
||||
// success
|
||||
await wrapper.setProps({ modelValue: false });
|
||||
expect(wrapper.html()).toMatchSnapshot();
|
||||
|
||||
// normal
|
||||
@ -135,25 +117,21 @@ test('render success text', async () => {
|
||||
expect(wrapper.html()).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('render success slot', async () => {
|
||||
test('should render success slot correctly', async () => {
|
||||
const wrapper = mount(PullRefresh, {
|
||||
slots: {
|
||||
success: () => 'Custom Success',
|
||||
},
|
||||
listeners: {
|
||||
input(value) {
|
||||
wrapper.setProps({ value });
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
// loading
|
||||
const track = wrapper.find('.van-pull-refresh__track');
|
||||
triggerDrag(track, 0, 100);
|
||||
expect(wrapper.emitted('update:modelValue')[0][0]).toBeTruthy();
|
||||
await wrapper.setProps({ modelValue: true });
|
||||
|
||||
await later();
|
||||
|
||||
expect(wrapper.vm.value).toBeTruthy();
|
||||
wrapper.setProps({ value: false });
|
||||
// success
|
||||
await wrapper.setProps({ modelValue: false });
|
||||
expect(wrapper.html()).toMatchSnapshot();
|
||||
});
|
||||
|
||||
@ -163,6 +141,6 @@ test('should set height when using head-height', async () => {
|
||||
headHeight: 100,
|
||||
},
|
||||
});
|
||||
|
||||
expect(wrapper.html()).toMatchSnapshot();
|
||||
const head = wrapper.find('.van-pull-refresh__head');
|
||||
expect(head.element.style.height).toEqual('100px');
|
||||
});
|
||||
Loading…
x
Reference in New Issue
Block a user