diff --git a/src/hooks/useTarget.ts b/src/hooks/useTarget.ts index 840cbf3..10d4c11 100644 --- a/src/hooks/useTarget.ts +++ b/src/hooks/useTarget.ts @@ -85,8 +85,12 @@ export default function useTarget( updatePos(); // update when window resize window.addEventListener('resize', updatePos); + // update when `document.body.style.overflow` is set to visible + // by default, it will be set to hidden + window.addEventListener('scroll', updatePos); return () => { window.removeEventListener('resize', updatePos); + window.removeEventListener('scroll', updatePos); }; }, [targetElement, open, updatePos]); diff --git a/tests/__snapshots__/index.test.tsx.snap b/tests/__snapshots__/index.test.tsx.snap index 281c083..f4c6b02 100644 --- a/tests/__snapshots__/index.test.tsx.snap +++ b/tests/__snapshots__/index.test.tsx.snap @@ -1280,6 +1280,161 @@ exports[`Tour should update position when window resize 1`] = ` `; +exports[`Tour should update position when window scroll 1`] = ` + +
+
+ +
+
+
+
+ + + + + + + + + + + + + +
+
+
+
+
+
+
+
+
+
+ +
+
+ 创建 +
+
+
+ 创建一条数据 +
+
+
+
+ +
+
+
+
+
+
+ +`; + exports[`Tour showArrow should show tooltip arrow default 1`] = `
diff --git a/tests/index.test.tsx b/tests/index.test.tsx index 0dffea0..6f27163 100644 --- a/tests/index.test.tsx +++ b/tests/index.test.tsx @@ -7,7 +7,7 @@ import type { TourProps } from '../src/index'; import Tour from '../src/index'; import { getPlacements, placements } from '../src/placements'; import { getPlacement } from '../src/util'; -import { resizeWindow } from './utils'; +import { resizeWindow, scrollWindow } from './utils'; const mockBtnRect = ( rect: { @@ -1225,4 +1225,68 @@ describe('Tour', () => { // Check container has children expect(children).toBeTruthy(); }); + + it('should update position when window scroll', async () => { + mockBtnRect({ + x: 80, + y: 333, + width: 230, + height: 180, + }); + const Demo = () => { + const btnRef = useRef(null); + + return ( +
+ + btnRef.current, + }, + ]} + /> +
+ ); + }; + const { baseElement, unmount } = render(); + expect( + baseElement.querySelector('.rc-tour-target-placeholder'), + ).toHaveStyle('left: 74px; top: 327px; width: 242px; height: 192px;'); + fireEvent.click(baseElement.querySelector('.btn2')); + await act(() => { + jest.runAllTimers(); + }); + expect( + baseElement.querySelector('.rc-tour-target-placeholder'), + ).toHaveStyle('left: 74px; top: 794px; width: 242px; height: 192px;'); + + expect(baseElement).toMatchSnapshot(); + + unmount(); + mockBtnRect({ + x: 0, + y: 0, + width: 0, + height: 0, + }); + }); }); diff --git a/tests/utils.ts b/tests/utils.ts index 523b7e9..fb3bc6b 100644 --- a/tests/utils.ts +++ b/tests/utils.ts @@ -4,4 +4,10 @@ export const resizeWindow = (x: number, y: number) => { // @ts-ignore window.innerHeight = y; window.dispatchEvent(new Event('resize')); -}; \ No newline at end of file +}; + + +export const scrollWindow = (x: number, y: number) => { + window.scrollTo(x, y); + window.dispatchEvent(new Event('scroll')) +} \ No newline at end of file