test(fab): add test cases of fab

Author: Boomkaa

site/test-coverage.js

@@ -19,7 +19,7 @@ module.exports = {
   drawer: { statements: '98.63%', branches: '100%', functions: '96.42%', lines: '100%' },
   dropdownMenu: { statements: '92.94%', branches: '82.81%', functions: '100%', lines: '92.5%' },
   empty: { statements: '100%', branches: '100%', functions: '100%', lines: '100%' },
-  fab: { statements: '5.4%', branches: '0%', functions: '0%', lines: '5.4%' },
+  fab: { statements: '100%', branches: '100%', functions: '100%', lines: '100%' },
   footer: { statements: '100%', branches: '100%', functions: '100%', lines: '100%' },
   form: { statements: '2.79%', branches: '0%', functions: '0%', lines: '2.95%' },
   grid: { statements: '100%', branches: '100%', functions: '100%', lines: '100%' },

src/fab/Fab.tsx

@@ -41,31 +41,27 @@ const Fab: React.FC<FabProps> = (originProps) => {
     x: 16,
     y: 32,
   });
-  let switchPos = {
+  const switchPosRef = useRef({
     hasMoved: false, // exclude click event
     x: btnSwitchPos.x, // right
     y: btnSwitchPos.y, // bottom
     startX: 0,
     startY: 0,
     endX: 0,
     endY: 0,
-  };
+  });
 
   const onClickHandle = (e: React.MouseEvent<HTMLDivElement>) => {
     onClick({ e });
   };
 
-  const fabStyle = {
-    ...props.style,
-    right: `${btnSwitchPos.x}px`,
-    bottom: `${btnSwitchPos.y}px`,
-  };
-
   const onTouchStart = (e: React.TouchEvent<HTMLDivElement>) => {
     props.onDragStart?.({ e });
 
-    switchPos = {
-      ...switchPos,
+    switchPosRef.current = {
+      ...switchPosRef.current,
+      x: btnSwitchPos.x,
+      y: btnSwitchPos.y,
       startX: e.touches[0].clientX,
       startY: e.touches[0].clientY,
     };
@@ -88,14 +84,6 @@ const Fab: React.FC<FabProps> = (originProps) => {
   };
 
   const onTouchMove = (e: TouchEvent) => {
-    if (!switchPos.hasMoved) {
-      switchPos = {
-        ...switchPos,
-        startX: e.touches[0].clientX,
-        startY: e.touches[0].clientY,
-      };
-    }
-
     e.stopPropagation();
     e.preventDefault();
 
@@ -107,15 +95,15 @@ const Fab: React.FC<FabProps> = (originProps) => {
       return;
     }
 
-    const offsetX = e.touches[0].clientX - switchPos.startX;
-    const offsetY = e.touches[0].clientY - switchPos.startY;
-    const x = Math.floor(switchPos.x - offsetX);
-    const y = Math.floor(switchPos.y - offsetY);
+    const offsetX = e.touches[0].clientX - switchPosRef.current.startX;
+    const offsetY = e.touches[0].clientY - switchPosRef.current.startY;
+    const x = Math.floor(switchPosRef.current.x - offsetX);
+    const y = Math.floor(switchPosRef.current.y - offsetY);
 
     const [newX, newY] = getSwitchButtonSafeAreaXY(x, y);
 
     const toChangeData = { ...btnSwitchPos };
-    const toChangePos = { ...switchPos, hasMoved: true };
+    const toChangePos = { ...switchPosRef.current, hasMoved: true };
 
     if (props.draggable !== 'vertical') {
       toChangeData.x = newX;
@@ -125,50 +113,53 @@ const Fab: React.FC<FabProps> = (originProps) => {
       toChangeData.y = newY;
       toChangePos.endY = newY;
     }
-    switchPos = toChangePos;
+    switchPosRef.current = toChangePos;
     setBtnSwitchPos(toChangeData);
   };
 
   useEffect(() => {
     const fab = fabRef.current;
     fab?.addEventListener('touchmove', onTouchMove, { passive: false });
+
+    return () => {
+      fab?.removeEventListener('touchmove', onTouchMove);
+    };
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  }, [props.draggable, fabButtonSize.width, fabButtonSize.height]);
 
   const setSwitchPosition = (switchX: number, switchY: number) => {
     const [newSwitchX, newSwitchY] = getSwitchButtonSafeAreaXY(switchX, switchY);
-    switchPos = {
-      ...switchPos,
+    switchPosRef.current = {
+      ...switchPosRef.current,
       x: newSwitchX,
       y: newSwitchY,
     };
 
-    if (props.draggable !== 'vertical') {
-      setBtnSwitchPos({
-        ...btnSwitchPos,
-        x: switchX,
-      });
-    }
-    if (props.draggable !== 'horizontal') {
-      setBtnSwitchPos({
-        ...btnSwitchPos,
-        y: switchY,
-      });
-    }
+    // 使用函数式更新避免闭包陷阱
+    setBtnSwitchPos((prev) => {
+      const newPos = { ...prev };
+      if (props.draggable !== 'vertical') {
+        newPos.x = newSwitchX;
+      }
+      if (props.draggable !== 'horizontal') {
+        newPos.y = newSwitchY;
+      }
+      return newPos;
+    });
   };
 
   const onTouchEnd = (e: React.TouchEvent<HTMLDivElement>) => {
-    if (!switchPos.hasMoved) {
+    if (!switchPosRef.current.hasMoved) {
       return;
     }
     props.onDragEnd?.({ e });
-    switchPos = {
-      ...switchPos,
+    switchPosRef.current = {
+      ...switchPosRef.current,
       startX: 0,
       startY: 0,
       hasMoved: false,
     };
-    setSwitchPosition(switchPos.endX, switchPos.endY);
+    setSwitchPosition(switchPosRef.current.endX, switchPosRef.current.endY);
   };
   const defaultContent = (
     <Button
@@ -183,11 +174,21 @@ const Fab: React.FC<FabProps> = (originProps) => {
     </Button>
   );
 
+  const fabStyle = props.draggable
+    ? {
+        right: `${btnSwitchPos.x}px`,
+        bottom: `${btnSwitchPos.y}px`,
+      }
+    : props.style || {
+        right: `${btnSwitchPos.x}px`,
+        bottom: `${btnSwitchPos.y}px`,
+      };
+
   return (
     <div
       ref={fabRef}
       className={fabClass}
-      style={props.draggable && fabButtonSize.width ? { ...fabStyle } : props.style}
+      style={fabStyle}
       onClick={onClickHandle}
       onTouchStart={onTouchStart}
       onTouchEnd={onTouchEnd}