blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-05 19:41:42 +08:00
Code Issues Projects Releases Wiki Activity

test(Sticky): update test cases

Browse Source
This commit is contained in:
chenjiahan 2021-01-03 16:20:24 +08:00
parent ccc7f3be31
commit eed972d99a
7 changed files with 286 additions and 254 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
src/index-bar/test/index.spec.js
View File

@ -1,5 +1,11 @@
import { nextTick, onMounted, ref } from 'vue';
import { mount, trigger, triggerDrag, mockScrollIntoView } from '../../../test';
import {
mount,
trigger,
triggerDrag,
mockScrollTop,
mockScrollIntoView,
} from '../../../test';
import IndexBar from '..';
import IndexAnchor from '../../index-anchor';
@ -108,8 +114,7 @@ test('should update active anchor after page scroll', async () => {
},
});
window.scrollTop = 0;
await trigger(window, 'scroll');
await mockScrollTop(0);
expect(wrapper.html()).toMatchSnapshot();
wrapper.vm.sticky = true;
@ -146,13 +151,11 @@ test('should emit change event when active index changed', async () => {
},
});
window.scrollTop = 0;
await trigger(window, 'scroll');
await mockScrollTop(0);
expect(onChange).toHaveBeenCalledTimes(1);
expect(onChange).toHaveBeenLastCalledWith('B');
window.scrollTop = 100;
await trigger(window, 'scroll');
await mockScrollTop(100);
expect(onChange).toHaveBeenCalledTimes(2);
expect(onChange).toHaveBeenLastCalledWith('D');

12
src/pull-refresh/test/index.spec.js
View File

@ -1,5 +1,11 @@
import PullRefresh from '..';
import { mount, later, trigger, triggerDrag } from '../../../test';
import {
mount,
later,
trigger,
triggerDrag,
mockScrollTop,
} from '../../../test';
test('should render different head content in different pulling status', async () => {
const wrapper = mount(PullRefresh);
@ -82,11 +88,11 @@ test('should not trigger pull refresh when not in page top', async () => {
const track = wrapper.find('.van-pull-refresh__track');
// ignore touch event when not at page top
window.scrollTop = 1;
await mockScrollTop(1);
triggerDrag(track, 0, 100);
expect(wrapper.emitted('update:modelValue')).toBeFalsy();
window.scrollTop = 0;
await mockScrollTop(0);
triggerDrag(track, 0, 100);
expect(wrapper.emitted('update:modelValue')).toBeTruthy();
});

69
src/sticky/test/__snapshots__/index.legacy.js.snap
View File

@ -1,69 +0,0 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`container prop 1`] = `
<div style="height: 20px;">
<div style="height: 10px;">
<div class="van-sticky van-sticky--fixed" style="transform: translate3d(0, -5px, 0);">
Content
</div>
</div>
</div>
`;
exports[`container prop 2`] = `
<div style="height: 20px;">
<div style="height: 10px;">
<div class="van-sticky" style="">
Content
</div>
</div>
</div>
`;
exports[`offset-top prop 1`] = `
<div style="height: 10px;">
<div class="van-sticky van-sticky--fixed" style="top: 10px;">
Content
</div>
</div>
`;
exports[`offset-top with rem unit 1`] = `
<div style="height: 10px;">
<div class="van-sticky van-sticky--fixed" style="top: 16px;">
Content
</div>
</div>
`;
exports[`offset-top with vw unit 1`] = `
<div style="height: 10px;">
<div class="van-sticky van-sticky--fixed" style="top: 30px;">
Content
</div>
</div>
`;
exports[`sticky to top 1`] = `
<div style="height: 10px;">
<div class="van-sticky">
Content
</div>
</div>
`;
exports[`sticky to top 2`] = `
<div style="height: 10px;">
<div class="van-sticky van-sticky--fixed">
Content
</div>
</div>
`;
exports[`z-index prop 1`] = `
<div style="height: 10px;">
<div class="van-sticky van-sticky--fixed" style="z-index: 0;">
Content
</div>
</div>
`;

79
src/sticky/test/__snapshots__/index.spec.js.snap Normal file
View File

@ -0,0 +1,79 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`should add offset top when using offset-top prop 1`] = `
<div style="height: 10px;">
<div class="van-sticky van-sticky--fixed"
style="top: 10px;"
>
Content
</div>
</div>
`;
exports[`should allow to using offset-top prop with rem unit 1`] = `
<div style="height: 10px;">
<div class="van-sticky van-sticky--fixed"
style="top: 32px;"
>
Content
</div>
</div>
`;
exports[`should allow to using offset-top prop with vw unit 1`] = `
<div style="height: 10px;">
<div class="van-sticky van-sticky--fixed"
style="top: 30px;"
>
Content
</div>
</div>
`;
exports[`should sticky inside container when using container prop 1`] = `
<div style="height: 20px;">
<div style="height: 10px;">
<div class="van-sticky van-sticky--fixed"
style="transform: translate3d(0, -5px, 0);"
>
Content
</div>
</div>
</div>
`;
exports[`should sticky inside container when using container prop 2`] = `
<div style="height: 20px;">
<div style="height: 10px;">
<div class="van-sticky">
Content
</div>
</div>
</div>
`;
exports[`should sticky to top after scrolling 1`] = `
<div style="height: 10px;">
<div class="van-sticky">
Content
</div>
</div>
`;
exports[`should sticky to top after scrolling 2`] = `
<div style="height: 10px;">
<div class="van-sticky van-sticky--fixed">
Content
</div>
</div>
`;
exports[`should update z-index when using z-index prop 1`] = `
<div style="height: 10px;">
<div class="van-sticky van-sticky--fixed"
style="z-index: 0;"
>
Content
</div>
</div>
`;

171
src/sticky/test/index.legacy.js
View File

@ -1,171 +0,0 @@
import { mount, mockScrollTop } from '../../../test';
test('sticky to top', () => {
const wrapper = mount({
template: `
<van-sticky style="height: 10px;">
Content
</van-sticky>
`,
});
expect(wrapper.html()).toMatchSnapshot();
mockScrollTop(100);
expect(wrapper.html()).toMatchSnapshot();
mockScrollTop(0);
});
test('z-index prop', () => {
const wrapper = mount({
template: `
<van-sticky style="height: 10px;" :z-index="0">
Content
</van-sticky>
`,
});
mockScrollTop(100);
expect(wrapper.html()).toMatchSnapshot();
mockScrollTop(0);
});
test('offset-top prop', () => {
const wrapper = mount({
template: `
<van-sticky style="height: 10px;" :offset-top="10">
Content
</van-sticky>
`,
});
mockScrollTop(100);
expect(wrapper.html()).toMatchSnapshot();
mockScrollTop(0);
});
test('offset-top with rem unit', () => {
const originGetComputedStyle = window.getComputedStyle;
window.getComputedStyle = () => ({ fontSize: '16px' });
const wrapper = mount({
template: `
<van-sticky style="height: 10px;" offset-top="1rem">
Content
</van-sticky>
`,
});
mockScrollTop(100);
expect(wrapper.html()).toMatchSnapshot();
mockScrollTop(0);
window.getComputedStyle = originGetComputedStyle;
});
test('offset-top with vw unit', () => {
window.innerWidth = 300;
const wrapper = mount({
template: `
<van-sticky style="height: 10px;" offset-top="10vw">
Content
</van-sticky>
`,
});
mockScrollTop(100);
expect(wrapper.html()).toMatchSnapshot();
mockScrollTop(0);
});
test('should not trigger scroll event when hidden', () => {
const scroll = jest.fn();
mount({
template: `
<van-sticky style="height: 10px; display: none;" @scroll="scroll">
Content
</van-sticky>
`,
methods: {
scroll,
},
});
expect(scroll).toHaveBeenCalledTimes(0);
});
test('container prop', () => {
const wrapper = mount({
template: `
<div ref="container" style="height: 20px;">
<van-sticky ref="sticky" style="height: 10px;" :container="container">
Content
</van-sticky>
</div>
`,
data() {
return {
container: null,
};
},
mounted() {
this.container = this.$refs.container;
},
});
mockScrollTop(15);
expect(wrapper.html()).toMatchSnapshot();
mockScrollTop(25);
expect(wrapper.html()).toMatchSnapshot();
mockScrollTop(0);
});
test('trigger scroll when visibility changed', () => {
const originIntersectionObserver = window.IntersectionObserver;
const observe = jest.fn();
const unobserve = jest.fn();
const scroll = jest.fn();
let observerCallback;
window.IntersectionObserver = class IntersectionObserver {
constructor(callback) {
observerCallback = callback;
}
observe() {
observe();
}
unobserve() {
unobserve();
}
};
const wrapper = mount({
template: `
<van-sticky style="height: 10px;" @scroll="scroll">
Content
</van-sticky>
`,
methods: {
scroll,
},
});
expect(observe).toHaveBeenCalledTimes(1);
expect(scroll).toHaveBeenCalledTimes(1);
observerCallback([{ intersectionRatio: 1 }]);
expect(scroll).toHaveBeenCalledTimes(2);
observerCallback([{ intersectionRatio: 0 }]);
expect(scroll).toHaveBeenCalledTimes(2);
wrapper.unmount();
expect(unobserve).toHaveBeenCalledTimes(1);
window.IntersectionObserver = originIntersectionObserver;
});

184
src/sticky/test/index.spec.js Normal file
View File

@ -0,0 +1,184 @@
import { nextTick, ref } from 'vue';
import { mount, mockScrollTop } from '../../../test';
import Sticky from '..';
test('should sticky to top after scrolling', async () => {
const wrapper = mount({
render() {
return <Sticky style="height: 10px;">Content</Sticky>;
},
});
expect(wrapper.html()).toMatchSnapshot();
await mockScrollTop(100);
expect(wrapper.html()).toMatchSnapshot();
await mockScrollTop(0);
});
test('should update z-index when using z-index prop', async () => {
const wrapper = mount({
render() {
return (
<Sticky style="height: 10px;" zIndex={0}>
Content
</Sticky>
);
},
});
await mockScrollTop(100);
expect(wrapper.html()).toMatchSnapshot();
await mockScrollTop(0);
});
test('should add offset top when using offset-top prop', async () => {
const wrapper = mount({
render() {
return (
<Sticky style="height: 10px;" offsetTop={10}>
Content
</Sticky>
);
},
});
await mockScrollTop(100);
expect(wrapper.html()).toMatchSnapshot();
await mockScrollTop(0);
});
test('should allow to using offset-top prop with rem unit', async () => {
const originGetComputedStyle = window.getComputedStyle;
window.getComputedStyle = () => ({ fontSize: '16px' });
const wrapper = mount({
render() {
return (
<Sticky style="height: 10px;" offsetTop="2rem">
Content
</Sticky>
);
},
});
await mockScrollTop(100);
expect(wrapper.html()).toMatchSnapshot();
await mockScrollTop(0);
window.getComputedStyle = originGetComputedStyle;
});
test('should allow to using offset-top prop with vw unit', async () => {
window.innerWidth = 300;
const wrapper = mount({
render() {
return (
<Sticky style="height: 10px;" offsetTop="10vw">
Content
</Sticky>
);
},
});
await mockScrollTop(100);
expect(wrapper.html()).toMatchSnapshot();
await mockScrollTop(0);
});
test('should not trigger scroll event when hidden', () => {
const onScroll = jest.fn();
mount({
render() {
return (
<Sticky style="height: 10px; display: none;" onScroll={onScroll}>
Content
</Sticky>
);
},
});
expect(onScroll).toHaveBeenCalledTimes(0);
});
test('should sticky inside container when using container prop', async () => {
const wrapper = mount({
setup() {
const container = ref();
return {
container,
};
},
render() {
return (
<div ref="container" style="height: 20px;">
<Sticky ref="sticky" style="height: 10px;" container={this.container}>
Content
</Sticky>
</div>
);
},
});
await nextTick();
await mockScrollTop(15);
expect(wrapper.html()).toMatchSnapshot();
await mockScrollTop(25);
expect(wrapper.html()).toMatchSnapshot();
await mockScrollTop(0);
});
test('should emit scroll event when visibility changed', async () => {
const originIntersectionObserver = window.IntersectionObserver;
const observe = jest.fn();
const unobserve = jest.fn();
const onScroll = jest.fn();
let observerCallback;
window.IntersectionObserver = class IntersectionObserver {
constructor(callback) {
observerCallback = callback;
}
observe() {
observe();
}
unobserve() {
unobserve();
}
};
const wrapper = mount({
render() {
return (
<Sticky style="height: 10px;" onScroll={onScroll}>
Content
</Sticky>
);
},
});
await nextTick();
await mockScrollTop(0);
expect(observe).toHaveBeenCalledTimes(1);
expect(onScroll).toHaveBeenCalledTimes(1);
observerCallback([{ intersectionRatio: 1 }]);
expect(onScroll).toHaveBeenCalledTimes(2);
wrapper.element.style.display = 'none';
observerCallback([{ intersectionRatio: 0 }]);
expect(onScroll).toHaveBeenCalledTimes(2);
wrapper.unmount();
expect(unobserve).toHaveBeenCalledTimes(1);
window.IntersectionObserver = originIntersectionObserver;
});

8
test/dom.ts
View File

@ -1,3 +1,4 @@
import { nextTick } from 'vue';
import { trigger } from './event';
function mockHTMLElementOffset() {
@ -36,9 +37,7 @@ export function mockScrollIntoView() {
return fn;
}
export function mockGetBoundingClientRect(
rect: DOMRect
): () => void {
export function mockGetBoundingClientRect(rect: DOMRect): () => void {
const originMethod = Element.prototype.getBoundingClientRect;
Element.prototype.getBoundingClientRect = jest.fn(() => rect);
@ -48,9 +47,10 @@ export function mockGetBoundingClientRect(
};
}
export function mockScrollTop(value: number) {
export async function mockScrollTop(value: number) {
Object.defineProperty(window, 'scrollTop', { value, writable: true });
trigger(window, 'scroll');
return nextTick();
}
mockScrollIntoView();