test: useLockScroll with strict params #6253

ant-design · Aug 9, 2023 · ff93b4a · ff93b4a
1 parent 782bdfb
commit ff93b4a
Showing 1 changed file with 80 additions and 5 deletions.
diff --git 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<HTMLDivElement>(null)
 
-      useLockScroll(divRef, true)
+      useLockScroll(divRef, props.scrollParams)
 
       return (
         <div
@@ -41,7 +47,9 @@ describe('useLockScroll', () => {
   test('onTouchMove', async () => {
     const handleTouch = jest.fn()
 
-    const { getByTestId } = render(<TestComponent handleTouch={handleTouch} />)
+    const { getByTestId } = render(
+      <TestComponent scrollParams={true} handleTouch={handleTouch} />
+    )
 
     const testEl = getByTestId('lock')
 
@@ -59,7 +67,7 @@ describe('useLockScroll', () => {
   })
 
   test('Scroll To Bottom', async () => {
-    const { getByTestId } = render(<TestComponent />)
+    const { getByTestId } = render(<TestComponent scrollParams={true} />)
 
     const testEl = getByTestId('lock')
 
@@ -100,4 +108,71 @@ describe('useLockScroll', () => {
     // 滚动事件被取消
     expect(triggerFalsy).toBeFalsy()
   })
+
+  test('Scroll To Top', async () => {
+    const { getByTestId } = render(<TestComponent scrollParams={true} />)
+
+    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(<TestComponent scrollParams='strict' />)
+
+    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()
+  })
 })