fix: 浮动气泡组件测试案例修改 (#72)

LingYyu · web-flow · commit eb7e65e50ffd · 2023-08-21T15:02:22.000+08:00
diff --git a/packages/rc-ui-lib/src/floating-bubble/FloatingBubble.tsx b/packages/rc-ui-lib/src/floating-bubble/FloatingBubble.tsx
@@ -29,7 +29,7 @@ const FloatingBubble: React.FC<FloatingBubbleProps> = (props) => {
   });
 
   const [dragging, setDragging] = useState(false);
-  const [show, setShow] = useState(false);
+  const [show, setShow] = useState(true);
   const [initialized, setInitialized] = useState(false);
   const boundary = useMemo(() => {
     return {
@@ -71,7 +71,6 @@ const FloatingBubble: React.FC<FloatingBubbleProps> = (props) => {
     if (axis === 'lock') return;
     if (!touch.isTap.current) {
       if (axis === 'x' || axis === 'xy') {
-        if (touch.deltaX.current === 0) return;
         let nextX = prevX.current + touch.deltaX.current;
         if (nextX < boundary.left) nextX = boundary.left;
         if (nextX > boundary.right) nextX = boundary.right;
@@ -90,29 +89,30 @@ const FloatingBubble: React.FC<FloatingBubbleProps> = (props) => {
   });
   const onTouchEnd = () => {
     setDragging(false);
-    setTimeout(() => {
-      if (magnetic === 'x') {
-        const nextX = closest([boundary.left, boundary.right], state.x);
-        setState({ x: nextX });
-      }
-      if (magnetic === 'y') {
-        const nextY = closest([boundary.top, boundary.bottom], state.y);
-        setState({ y: nextY });
-      }
-      if (!touch.isTap.current) {
-        const updateOffset = pick(state, ['x', 'y']);
-        if (prevX.current !== updateOffset.x || prevY.current !== updateOffset.y) {
-          props?.onOffsetChange?.(updateOffset);
-        }
+    // setTimeout(() => {
+    if (magnetic === 'x') {
+      const nextX = closest([boundary.left, boundary.right], state.x);
+      setState({ x: nextX });
+    }
+    if (magnetic === 'y') {
+      const nextY = closest([boundary.top, boundary.bottom], state.y);
+      setState({ y: nextY });
+    }
+    if (!touch.isTap.current) {
+      const updateOffset = pick(state, ['x', 'y']);
+
+      if (prevX.current !== updateOffset.x || prevY.current !== updateOffset.y) {
+        props?.onOffsetChange?.(updateOffset);
       }
-    }, 0);
+    }
+    // }, 0);
   };
   useEffect(() => {
-    setShow(true);
-    setTimeout(() => {
-      updateState();
-      setInitialized(true);
-    }, 0);
+    // setShow(true);
+    // setTimeout(() => {
+    updateState();
+    setInitialized(true);
+    // }, 0);
     return () => {
       if (teleport) setShow(false);
     };
@@ -129,7 +129,7 @@ const FloatingBubble: React.FC<FloatingBubbleProps> = (props) => {
           onTouchCancel={onTouchEnd}
           onClick={(e) => {
             if (touch.isTap.current) {
-              onClick(e);
+              onClick?.(e);
             }
           }}
           style={rootStyle}
diff --git a/packages/rc-ui-lib/src/floating-bubble/__test__/__snapshots__/index.spec.tsx.snap b/packages/rc-ui-lib/src/floating-bubble/__test__/__snapshots__/index.spec.tsx.snap
@@ -1,5 +1,14 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`FloatingBubble should render correctly when icon set 1`] = `<div />`;
+exports[`FloatingBubble should render correctly when icon set 1`] = `
+<div
+  class="rc-floating-bubble"
+  style="transform: translate3d(952px, 696px, 0);"
+>
+  <i
+    class="rc-badge__wrapper rc-floating-bubble__icon van-icon van-icon-chat-o"
+  />
+</div>
+`;
 
 exports[`FloatingBubble should teleport body when default 1`] = `<div />`;
diff --git a/packages/rc-ui-lib/src/floating-bubble/__test__/index.spec.tsx b/packages/rc-ui-lib/src/floating-bubble/__test__/index.spec.tsx
@@ -1,4 +1,4 @@
-import { render, cleanup, fireEvent } from '@testing-library/react';
+import { render, cleanup, fireEvent, act, waitFor } from '@testing-library/react';
 import React from 'react';
 import { sleep } from '../../../tests/utils';
 import TestsEvent from '../../../tests/events';
@@ -7,6 +7,7 @@ import FloatingBubble from '../FloatingBubble';
 
 describe('FloatingBubble', () => {
   beforeEach(() => {
+    jest.useFakeTimers();
     Object.defineProperty(window, 'inBrowser', { value: true });
   });
   afterEach(() => {
@@ -16,14 +17,14 @@ describe('FloatingBubble', () => {
   it('should render correctly when icon set', async () => {
     const restore = mockGetBoundingClientRect({ width: 48, height: 48 });
     const root = document.createElement('div');
-    const { container } = render(<FloatingBubble icon="chat-o" teleport={root} />);
+    render(<FloatingBubble icon="chat-o" teleport={root} />);
     await sleep(10);
     const floatingBubbleEl = root.querySelector<HTMLDivElement>('.rc-floating-bubble')!;
     expect(floatingBubbleEl.style.transform).toEqual(
       `translate3d(${window.innerWidth - 48 - 24}px, ${window.innerHeight - 48 - 24}px, 0)`,
     );
     expect(floatingBubbleEl.querySelector('.van-icon-chat-o')).not.toBeNull();
-    expect(container).toMatchSnapshot();
+    expect(floatingBubbleEl).toMatchSnapshot();
     restore();
   });
   it('should render correctly when offset set', async () => {
@@ -45,53 +46,93 @@ describe('FloatingBubble', () => {
     const restore = mockGetBoundingClientRect({ width: 48, height: 48 });
     const root = document.createElement('div');
     render(<FloatingBubble icon="chat-o" teleport={root} />);
+    await act(() => {
+      jest.useRealTimers();
+    });
     const floatingBubbleEl = root.querySelector<HTMLDivElement>('.rc-floating-bubble')!;
-    await TestsEvent.triggerDrag(floatingBubbleEl, [-100, -100]);
-    expect(floatingBubbleEl.style.transform).toEqual(
-      `translate3d(${window.innerWidth - 48 - 24}px, 24px, 0)`,
-    );
+    await act(async () => {
+      await TestsEvent.triggerDrag(floatingBubbleEl, [-100, -100]);
+    });
+    await sleep(1000);
+    await waitFor(() => {
+      expect(floatingBubbleEl.style.transform).toEqual(
+        `translate3d(${window.innerWidth - 48 - 24}px, ${window.innerHeight - 48 - 24 - 100}px, 0)`,
+      );
+    });
     restore();
   });
   it('should only x axis direction move when axis is x', async () => {
     const restore = mockGetBoundingClientRect({ width: 48, height: 48 });
     const root = document.createElement('div');
-    render(<FloatingBubble icon="chat-o" axis="x" teleport={root} />);
+    render(<FloatingBubble icon="chat-o" teleport={root} axis="x" />);
+    await act(() => {
+      jest.useRealTimers();
+    });
     const floatingBubbleEl = root.querySelector<HTMLDivElement>('.rc-floating-bubble')!;
-    await TestsEvent.triggerDrag(floatingBubbleEl, [2000, -100]);
-    expect(floatingBubbleEl.style.transform).toEqual(
-      `translate3d(${window.innerWidth - 24}px, ${window.innerHeight - 48 - 24}px, 0)`,
-    );
+    await act(async () => {
+      await TestsEvent.triggerDrag(floatingBubbleEl, [100, -100]);
+    });
+
+    await sleep(1000);
+    await waitFor(() => {
+      expect(floatingBubbleEl.style.transform).toEqual(
+        `translate3d(${window.innerWidth - 48 - 24}px, ${window.innerHeight - 48 - 24}px, 0)`,
+      );
+    });
     restore();
   });
   it('should free direction move when axis is "xy"', async () => {
     const restore = mockGetBoundingClientRect({ width: 48, height: 48 });
     const root = document.createElement('div');
     render(<FloatingBubble icon="chat-o" axis="xy" teleport={root} />);
     const floatingBubbleEl = root.querySelector<HTMLDivElement>('.rc-floating-bubble')!;
-    await TestsEvent.triggerDrag(floatingBubbleEl, [-1000, 24]);
+    await act(async () => {
+      await TestsEvent.triggerDrag(floatingBubbleEl, [-100, -100]);
+    });
     expect(floatingBubbleEl.style.transform).toEqual(
-      `translate3d(${window.innerWidth - 48 - 24}px, ${window.innerHeight - 48 - 24}px, 0)`,
+      `translate3d(${window.innerWidth - 48 - 24}px, ${window.innerHeight - 48 - 24 - 100}px, 0)`,
     );
     restore();
   });
   it('should magnetic to x axios when magnetic is "x" ', async () => {
     const restore = mockGetBoundingClientRect({ width: 48, height: 48 });
     const root = document.createElement('div');
     render(<FloatingBubble icon="chat-o" axis="xy" magnetic="x" teleport={root} />);
+    await act(() => {
+      jest.useRealTimers();
+    });
     const floatingBubbleEl = root.querySelector<HTMLDivElement>('.rc-floating-bubble')!;
-    await TestsEvent.triggerDrag(floatingBubbleEl, [100, 100]);
-    await sleep(100);
-    expect(floatingBubbleEl.style.transform).toEqual(`translate3d(24px, 100px, 0)`);
+    await act(async () => {
+      await TestsEvent.triggerDrag(floatingBubbleEl, [-100, -100]);
+    });
+    await act(() => {
+      jest.useRealTimers();
+    });
+    await sleep(400);
+    await waitFor(() => {
+      expect(floatingBubbleEl.style.transform).toEqual(
+        `translate3d(${window.innerWidth - 48 - 24}px, ${window.innerHeight - 48 - 24 - 100}px, 0)`,
+      );
+    });
     restore();
   });
   it('should magnetic to y axios when magnetic is "y" ', async () => {
     const restore = mockGetBoundingClientRect({ width: 48, height: 48 });
     const root = document.createElement('div');
     render(<FloatingBubble icon="chat-o" axis="xy" magnetic="y" teleport={root} />);
     const floatingBubbleEl = root.querySelector<HTMLDivElement>('.rc-floating-bubble')!;
-    await TestsEvent.triggerDrag(floatingBubbleEl, [100, 100]);
-    await sleep(100);
-    expect(floatingBubbleEl.style.transform).toEqual(`translate3d(100px, 24px, 0)`);
+    await act(async () => {
+      await TestsEvent.triggerDrag(floatingBubbleEl, [-100, -100]);
+    });
+    await act(() => {
+      jest.useRealTimers();
+    });
+    await sleep(1000);
+    await waitFor(() => {
+      expect(floatingBubbleEl.style.transform).toEqual(
+        `translate3d(${window.innerWidth - 48 - 24}px, ${window.innerHeight - 48 - 24}px, 0)`,
+      );
+    });
     restore();
   });
   it('should emit click when click wrapper', async () => {
@@ -121,18 +162,27 @@ describe('FloatingBubble', () => {
     );
     const floatingBubbleEl = root.querySelector<HTMLDivElement>('.rc-floating-bubble')!;
 
-    await TestsEvent.triggerDrag(floatingBubbleEl, [10, 10]);
+    // await act(async () => {
+    await TestsEvent.triggerDrag(floatingBubbleEl, [-100, -100]);
+    // });
     expect(onClick).not.toHaveBeenCalled();
-    await sleep(10);
+    // await act(() => {
+    //   jest.useRealTimers();
+    // });
+    await sleep(400);
+    // await waitFor(() => {
     expect(onOffsetChange).toHaveBeenCalled();
+    // });
     restore();
   });
   it('should lock drag when axis is "lock"', async () => {
     const restore = mockGetBoundingClientRect({ width: 48, height: 48 });
     const root = document.createElement('div');
     render(<FloatingBubble icon="chat-o" axis="lock" magnetic="y" teleport={root} />);
     const floatingBubbleEl = root.querySelector<HTMLDivElement>('.rc-floating-bubble')!;
-    await TestsEvent.triggerDrag(floatingBubbleEl, [0, 0]);
+    await act(async () => {
+      await TestsEvent.triggerDrag(floatingBubbleEl, [0, 0]);
+    });
     expect(floatingBubbleEl.style.transform).toEqual(
       `translate3d(${window.innerWidth - 48 - 24}px, ${window.innerHeight - 48 - 24}px, 0)`,
     );
@@ -141,17 +191,19 @@ describe('FloatingBubble', () => {
   it('should not move when drag distance belove TAP_OFFSET"', async () => {
     const restore = mockGetBoundingClientRect({ width: 48, height: 48 });
     const root = document.createElement('div');
-    render(<FloatingBubble icon="chat-o" axis="x" magnetic="y" teleport={root} />);
+    render(<FloatingBubble icon="chat-o" axis="xy" teleport={root} />);
     const floatingBubbleEl = root.querySelector<HTMLDivElement>('.rc-floating-bubble')!;
-    await TestsEvent.triggerDrag(floatingBubbleEl, [4, 4]);
+    await act(async () => {
+      await TestsEvent.triggerDrag(floatingBubbleEl, [4, 4]);
+    });
     expect(floatingBubbleEl.style.transform).toEqual(
       `translate3d(${window.innerWidth - 48 - 24}px, ${window.innerHeight - 48 - 24}px, 0)`,
     );
     restore();
   });
 
   it('should teleport body when default', async () => {
-    const { container } = render(<FloatingBubble icon="chat-o" axis="xy" magnetic="y" />);
+    const { container } = render(<FloatingBubble icon="chat-o" axis="xy" />);
     expect(container.parentNode).toEqual(document.body);
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/rc-ui-lib/src/hooks/use-touch.ts b/packages/rc-ui-lib/src/hooks/use-touch.ts
@@ -45,7 +45,7 @@ export function useTouch() {
   const move = ((event: TouchEvent) => {
     const touch = event.touches[0];
     // Fix: Safari back will set clientX to negative number
-    deltaX.current = touch.clientX < 0 ? 0 : touch.clientX - startX.current;
+    deltaX.current = (touch.clientX < 0 ? 0 : touch.clientX) - startX.current;
     deltaY.current = touch.clientY - startY.current;
     offsetX.current = Math.abs(deltaX.current);
     offsetY.current = Math.abs(deltaY.current);
