From ff93b4a93df4f5111df1967d3b2b187c60d9d219 Mon Sep 17 00:00:00 2001 From: hyu_wang Date: Wed, 9 Aug 2023 20:04:36 +0800 Subject: [PATCH] test: useLockScroll with strict params #6253 --- src/utils/tests/use-lock-scroll.test.tsx | 85 ++++++++++++++++++++++-- 1 file changed, 80 insertions(+), 5 deletions(-) diff --git a/src/utils/tests/use-lock-scroll.test.tsx b/src/utils/tests/use-lock-scroll.test.tsx index 56f76df04a..035783f995 100644 --- a/src/utils/tests/use-lock-scroll.test.tsx +++ b/src/utils/tests/use-lock-scroll.test.tsx @@ -3,13 +3,19 @@ import { render, fireEvent } from 'testing' import { useLockScroll } from '../use-lock-scroll' describe('useLockScroll', () => { - let TestComponent: React.FC<{ handleTouch?: () => void }> + let TestComponent: React.FC<{ + scrollParams: boolean | 'strict' + handleTouch?: () => void + }> beforeEach(() => { - TestComponent = (props: { handleTouch?: () => void }) => { + TestComponent = (props: { + scrollParams: boolean | 'strict' + handleTouch?: () => void + }) => { const divRef = useRef(null) - useLockScroll(divRef, true) + useLockScroll(divRef, props.scrollParams) return (
{ test('onTouchMove', async () => { const handleTouch = jest.fn() - const { getByTestId } = render() + const { getByTestId } = render( + + ) const testEl = getByTestId('lock') @@ -59,7 +67,7 @@ describe('useLockScroll', () => { }) test('Scroll To Bottom', async () => { - const { getByTestId } = render() + const { getByTestId } = render() const testEl = getByTestId('lock') @@ -100,4 +108,71 @@ describe('useLockScroll', () => { // 滚动事件被取消 expect(triggerFalsy).toBeFalsy() }) + + test('Scroll To Top', async () => { + const { getByTestId } = render() + + const testEl = getByTestId('lock') + + jest.spyOn(testEl, 'scrollHeight', 'get').mockImplementation(() => 200) + + const scrollTop = jest.spyOn(testEl, 'scrollTop', 'get') + scrollTop.mockImplementationOnce(() => 150) + + jest.spyOn(testEl, 'getBoundingClientRect').mockImplementation(() => ({ + height: 20, + top: 0, + left: 0, + x: 0, + y: 0, + bottom: 0, + right: 0, + width: 0, + toJSON: () => {}, + })) + + fireEvent.touchStart(testEl, { + touches: [{ clientX: 0, clientY: 100 }], + }) + + const triggerTruthy = fireEvent.touchMove(testEl, { + touches: [{ clientX: 0, clientY: 120 }], + }) + // 滚动事件正常触发 + expect(triggerTruthy).toBeTruthy() + + // 滚动高度到顶部 + scrollTop.mockImplementationOnce(() => 0) + + const triggerFalsy = fireEvent.touchMove(testEl, { + touches: [{ clientX: 0, clientY: 200 }], + }) + + // 滚动事件被取消 + expect(triggerFalsy).toBeFalsy() + }) + + test('Scroll With Strict Params', async () => { + const { getByTestId } = render() + + const testEl = getByTestId('lock') + + jest + .spyOn(document.body, 'clientHeight', 'get') + .mockImplementation(() => 20) + jest + .spyOn(document.body, 'scrollHeight', 'get') + .mockImplementation(() => 30) + + fireEvent.touchStart(testEl, { + touches: [{ clientX: 0, clientY: 100 }], + }) + + const cancelTrigger = fireEvent.touchMove(testEl, { + touches: [{ clientX: 0, clientY: 200 }], + }) + + // 事件被取消 + expect(cancelTrigger).toBeFalsy() + }) })