[Improvement] PullRefresh: add test cases (#1189)

This commit is contained in:
neverland 2018-05-30 10:39:47 +08:00 committed by GitHub
parent 6f74201b29
commit fc3f3bc7e0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 148 additions and 0 deletions

View File

@ -0,0 +1,77 @@
// 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">
<div class="van-pull-refresh__head">
<!----><span class="van-pull-refresh__text">下拉即可刷新...</span>
<!---->
<!---->
</div>
</div>
</div>
`;
exports[`change head content when pulling down 2`] = `
<div class="van-pull-refresh">
<div class="van-pull-refresh__track">
<div class="van-pull-refresh__head">
<!---->
<!----><span class="van-pull-refresh__text">释放即可刷新...</span>
<!---->
</div>
</div>
</div>
`;
exports[`change head content when pulling down 3`] = `
<div class="van-pull-refresh">
<div class="van-pull-refresh__track">
<div class="van-pull-refresh__head">
<!---->
<!---->
<!---->
<div class="van-pull-refresh__loading">
<div class="van-loading van-loading--circular van-loading--black"><span class="van-loading__spinner van-loading__spinner--circular"> <svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div> <span>加载中...</span></div>
</div>
</div>
</div>
`;
exports[`change head content when pulling down 4`] = `
<div class="van-pull-refresh">
<div class="van-pull-refresh__track">
<div class="van-pull-refresh__head">
<!---->
<!---->
<!---->
<div class="van-pull-refresh__loading">
<div class="van-loading van-loading--circular van-loading--black"><span class="van-loading__spinner van-loading__spinner--circular"> <svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div> <span>加载中...</span></div>
</div>
</div>
</div>
`;
exports[`change head content when pulling down 5`] = `
<div class="van-pull-refresh">
<div class="van-pull-refresh__track">
<div class="van-pull-refresh__head">
<!---->
<!---->
<!---->
</div>
</div>
</div>
`;
exports[`not in page top 1`] = `
<div class="van-pull-refresh">
<div class="van-pull-refresh__track">
<div class="van-pull-refresh__head">
<!---->
<!---->
<!---->
</div>
</div>
</div>
`;

View File

@ -0,0 +1,71 @@
import PullRefresh from '..';
import { mount } from '@vue/test-utils';
import { triggerTouch, triggerDrag } from '../../../test/touch-utils';
test('change head content when pulling down', () => {
const wrapper = mount(PullRefresh, {
propsData: {
value: false
}
});
wrapper.vm.$on('input', value => {
wrapper.vm.value = value;
});
const track = wrapper.find('.van-pull-refresh__track');
// pulling
triggerTouch(track, 'touchstart', 0, 0);
triggerTouch(track, 'touchmove', 0, 10);
expect(wrapper.html()).toMatchSnapshot();
// loosing
triggerTouch(track, 'touchmove', 0, 100);
expect(wrapper.html()).toMatchSnapshot();
// loading
triggerTouch(track, 'touchend', 0, 100);
expect(wrapper.html()).toMatchSnapshot();
// still loading
triggerDrag(track, 0, 100);
expect(wrapper.html()).toMatchSnapshot();
expect(wrapper.emitted('input')).toBeTruthy();
expect(wrapper.emitted('refresh')).toBeTruthy();
// end loading
wrapper.vm.value = false;
expect(wrapper.html()).toMatchSnapshot();
});
test('pull a short distance', () => {
const wrapper = mount(PullRefresh, {
propsData: {
value: false
}
});
const track = wrapper.find('.van-pull-refresh__track');
triggerDrag(track, 0, 10);
expect(wrapper.emitted('input')).toBeFalsy();
});
test('not in page top', () => {
const wrapper = mount(PullRefresh, {
propsData: {
value: false
}
});
window.scrollTop = 100;
const track = wrapper.find('.van-pull-refresh__track');
// ignore touch event when not at page top
triggerDrag(track, 0, 100);
window.scrollTop = 0;
triggerTouch(track, 'touchmove', 0, 100);
expect(wrapper.html()).toMatchSnapshot();
});