blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-06 03:57:59 +08:00
Code Issues Projects Releases Wiki Activity

test(Sticky): typing (#8444)

Browse Source
This commit is contained in:
neverland 2021-04-01 16:04:39 +08:00 committed by GitHub
parent aab3646972
commit b594ab1192
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 68 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

0
src/sticky/test/__snapshots__/index.spec.js.snap → src/sticky/test/__snapshots__/index.spec.tsx.snap
View File

133
src/sticky/test/index.spec.js → src/sticky/test/index.spec.tsx
View File

@ -1,28 +1,39 @@
import { nextTick, ref } from 'vue'; import { nextTick, ref } from 'vue';
import { VueWrapper } from '@vue/test-utils';
import { mockScrollTop, mount } from '../../../test'; import { mockScrollTop, mount } from '../../../test';
import { Sticky } from '..'; import { Sticky } from '..';
import { ComponentInstance } from '../../utils';
Object.defineProperty(window.HTMLElement.prototype, 'clientHeight', { Object.defineProperty(window.HTMLElement.prototype, 'clientHeight', {
value: 640, value: 640,
}); });
function mockStickyRect(
wrapper: VueWrapper<ComponentInstance>,
rect: Partial<DOMRect>
) {
const mocked = jest
.spyOn(wrapper.element, 'getBoundingClientRect')
.mockReturnValue(rect as DOMRect);
return () => mocked.mockRestore();
}
test('should sticky to top after scrolling', async () => { test('should sticky to top after scrolling', async () => {
const wrapper = mount({ const wrapper = mount({
render() { render() {
return <Sticky style="height: 10px;">Content</Sticky>; return <Sticky style="height: 10px;">Content</Sticky>;
}, },
}); });
const mockStickyRect = jest const restore = mockStickyRect(wrapper, {
.spyOn(wrapper.element, 'getBoundingClientRect') top: -100,
.mockReturnValue({ bottom: -90,
top: -100, });
bottom: -90,
});
await mockScrollTop(100); await mockScrollTop(100);
expect(wrapper.html()).toMatchSnapshot(); expect(wrapper.html()).toMatchSnapshot();
mockStickyRect.mockRestore(); restore();
}); });
test('should sticky to bottom after scrolling', async () => { test('should sticky to bottom after scrolling', async () => {
@ -35,17 +46,15 @@ test('should sticky to bottom after scrolling', async () => {
); );
}, },
}); });
const mockStickyRect = jest const restore = mockStickyRect(wrapper, {
.spyOn(wrapper.element, 'getBoundingClientRect') top: 640,
.mockReturnValue({ bottom: 650,
top: 640, });
bottom: 650,
});
await mockScrollTop(0); await mockScrollTop(0);
expect(wrapper.html()).toMatchSnapshot(); expect(wrapper.html()).toMatchSnapshot();
mockStickyRect.mockRestore(); restore();
}); });
test('should update z-index when using z-index prop', async () => { test('should update z-index when using z-index prop', async () => {
@ -59,17 +68,15 @@ test('should update z-index when using z-index prop', async () => {
}, },
}); });
const mockStickyRect = jest const restore = mockStickyRect(wrapper, {
.spyOn(wrapper.element, 'getBoundingClientRect') top: -100,
.mockReturnValue({ bottom: -90,
top: -100, });
bottom: -90,
});
await mockScrollTop(100); await mockScrollTop(100);
expect(wrapper.html()).toMatchSnapshot(); expect(wrapper.html()).toMatchSnapshot();
mockStickyRect.mockRestore(); restore();
}); });
test('should add offset top when using offset-top prop', async () => { test('should add offset top when using offset-top prop', async () => {
@ -83,23 +90,21 @@ test('should add offset top when using offset-top prop', async () => {
}, },
}); });
const mockStickyRect = jest const restore = mockStickyRect(wrapper, {
.spyOn(wrapper.element, 'getBoundingClientRect') top: -100,
.mockReturnValue({ bottom: -90,
top: -100, });
bottom: -90,
});
await mockScrollTop(100); await mockScrollTop(100);
expect(wrapper.html()).toMatchSnapshot(); expect(wrapper.html()).toMatchSnapshot();
mockStickyRect.mockRestore(); restore();
}); });
test('should allow to using offset-top prop with rem unit', async () => { test('should allow to using offset-top prop with rem unit', async () => {
const originGetComputedStyle = window.getComputedStyle; const originGetComputedStyle = window.getComputedStyle;
window.getComputedStyle = () => ({ fontSize: '16px' }); window.getComputedStyle = () => ({ fontSize: '16px' } as CSSStyleDeclaration);
const wrapper = mount({ const wrapper = mount({
render() { render() {
@ -111,22 +116,20 @@ test('should allow to using offset-top prop with rem unit', async () => {
}, },
}); });
const mockStickyRect = jest const restore = mockStickyRect(wrapper, {
.spyOn(wrapper.element, 'getBoundingClientRect') top: -100,
.mockReturnValue({ bottom: -90,
top: -100, });
bottom: -90,
});
await mockScrollTop(100); await mockScrollTop(100);
expect(wrapper.html()).toMatchSnapshot(); expect(wrapper.html()).toMatchSnapshot();
mockStickyRect.mockRestore(); restore();
window.getComputedStyle = originGetComputedStyle; window.getComputedStyle = originGetComputedStyle;
}); });
test('should allow to using offset-top prop with vw unit', async () => { test('should allow to using offset-top prop with vw unit', async () => {
window.innerWidth = 300; Object.defineProperty(window, 'innerWidth', { value: 300 });
const wrapper = mount({ const wrapper = mount({
render() { render() {
@ -138,17 +141,15 @@ test('should allow to using offset-top prop with vw unit', async () => {
}, },
}); });
const mockStickyRect = jest const restore = mockStickyRect(wrapper, {
.spyOn(wrapper.element, 'getBoundingClientRect') top: -100,
.mockReturnValue({ bottom: -90,
top: -100, });
bottom: -90,
});
await mockScrollTop(100); await mockScrollTop(100);
expect(wrapper.html()).toMatchSnapshot(); expect(wrapper.html()).toMatchSnapshot();
mockStickyRect.mockRestore(); restore();
}); });
test('should not trigger scroll event when hidden', () => { test('should not trigger scroll event when hidden', () => {
@ -187,19 +188,19 @@ test('should sticky inside container when using container prop', async () => {
}); });
const mockStickyRect = jest const mockStickyRect = jest
.spyOn(wrapper.element.firstElementChild, 'getBoundingClientRect') .spyOn(wrapper.element.firstElementChild!, 'getBoundingClientRect')
.mockReturnValue({ .mockReturnValue({
height: 44, height: 44,
width: 88, width: 88,
top: -100, top: -100,
bottom: -56, bottom: -56,
}); } as DOMRect);
const mockContainerRect = jest const mockContainerRect = jest
.spyOn(wrapper.element, 'getBoundingClientRect') .spyOn(wrapper.element, 'getBoundingClientRect')
.mockReturnValue({ .mockReturnValue({
top: -100, top: -100,
bottom: 50, bottom: 50,
}); } as DOMRect);
await mockScrollTop(100); await mockScrollTop(100);
expect(wrapper.html()).toMatchSnapshot(); expect(wrapper.html()).toMatchSnapshot();
@ -209,11 +210,11 @@ test('should sticky inside container when using container prop', async () => {
width: 88, width: 88,
top: -120, top: -120,
bottom: -76, bottom: -76,
}); } as DOMRect);
mockContainerRect.mockReturnValue({ mockContainerRect.mockReturnValue({
top: -120, top: -120,
bottom: 30, bottom: 30,
}); } as DOMRect);
await mockScrollTop(120); await mockScrollTop(120);
expect(wrapper.html()).toMatchSnapshot(); expect(wrapper.html()).toMatchSnapshot();
mockContainerRect.mockRestore(); mockContainerRect.mockRestore();
@ -252,13 +253,13 @@ test('should sticky inside container bottom when using container prop', async ()
width: 88, width: 88,
top: 690, top: 690,
bottom: 734, bottom: 734,
}); } as DOMRect);
const mockContainerRect = jest const mockContainerRect = jest
.spyOn(wrapper.element, 'getBoundingClientRect') .spyOn(wrapper.element, 'getBoundingClientRect')
.mockReturnValue({ .mockReturnValue({
top: 540, top: 540,
bottom: 734, bottom: 734,
}); } as DOMRect);
await mockScrollTop(100); await mockScrollTop(100);
expect(wrapper.html()).toMatchSnapshot(); expect(wrapper.html()).toMatchSnapshot();
@ -268,11 +269,11 @@ test('should sticky inside container bottom when using container prop', async ()
width: 88, width: 88,
top: 770, top: 770,
bottom: 814, bottom: 814,
}); } as DOMRect);
mockContainerRect.mockReturnValue({ mockContainerRect.mockReturnValue({
top: 620, top: 620,
bottom: 814, bottom: 814,
}); } as DOMRect);
await mockScrollTop(20); await mockScrollTop(20);
expect(wrapper.html()).toMatchSnapshot(); expect(wrapper.html()).toMatchSnapshot();
mockContainerRect.mockRestore(); mockContainerRect.mockRestore();
@ -286,10 +287,13 @@ test('should emit scroll event when visibility changed', async () => {
const unobserve = jest.fn(); const unobserve = jest.fn();
const onScroll = jest.fn(); const onScroll = jest.fn();
let observerCallback; type ObserverCallback = (
entries: Partial<IntersectionObserverEntry>[]
) => void;
let observerCallback: ObserverCallback = () => {};
window.IntersectionObserver = class IntersectionObserver { window.IntersectionObserver = class MockIntersectionObserver {
constructor(callback) { constructor(callback: ObserverCallback) {
observerCallback = callback; observerCallback = callback;
} }
@ -300,7 +304,7 @@ test('should emit scroll event when visibility changed', async () => {
unobserve() { unobserve() {
unobserve(); unobserve();
} }
}; } as any;
const wrapper = mount({ const wrapper = mount({
render() { render() {
@ -337,15 +341,14 @@ test('should emit change event when sticky status changed', async () => {
style: 'height: 10px', style: 'height: 10px',
}, },
}); });
const mockStickyRect = jest
.spyOn(wrapper.element, 'getBoundingClientRect') const restore = mockStickyRect(wrapper as any, {
.mockReturnValue({ top: -100,
top: -100, bottom: -90,
bottom: -90, });
});
await mockScrollTop(100); await mockScrollTop(100);
expect(wrapper.emitted('change')[0]).toEqual([true]); expect(wrapper.emitted('change')![0]).toEqual([true]);
mockStickyRect.mockRestore(); restore();
}); });