Add tests

src/components/Datagrid/Datagrid.tsx

@@ -1,5 +1,6 @@
 import "@glideapps/glide-data-grid/dist/index.css";
 
+import { useRowAnchorHandler } from "@dashboard/components/Datagrid/hooks/useRowAnchorHandler";
 import useNavigator, { NavigatorOpts } from "@dashboard/hooks/useNavigator";
 import { usePreventHistoryBack } from "@dashboard/hooks/usePreventHistoryBack";
 import { getCellAction } from "@dashboard/products/components/ProductListDatagrid/datagrid";
@@ -152,6 +153,7 @@ export const Datagrid: React.FC<DatagridProps> = ({
     rowMarkers,
     availableColumns,
   });
+  const rowAnchorHandler = useRowAnchorHandler(navigate, navigatorOpts);
 
   const { handleRowHover, hoverRow } = useRowHover({
     hasRowHover,
@@ -529,19 +531,7 @@ export const Datagrid: React.FC<DatagridProps> = ({
           tabIndex={-1}
           aria-hidden={true}
           onWheelCapture={hideLinkAndShowAfterDelay}
-          onClick={e => {
-            // When someone clicks with CMD key to open in new tab we should not prevent default
-            if (e.metaKey || e.ctrlKey) {
-              return;
-            }
-
-            // Prevent default when navigate with react-router
-            e.preventDefault();
-
-            if (e.currentTarget.dataset.reactRouterPath) {
-              navigate(e.currentTarget.dataset.reactRouterPath, navigatorOpts);
-            }
-          }}
+          onClick={rowAnchorHandler}
         />
       )}
     </FullScreenContainer>

src/components/Datagrid/hooks/useRowAnchorHandler.test.ts

@@ -0,0 +1,63 @@
+import { renderHook } from "@testing-library/react-hooks";
+
+import { useRowAnchorHandler } from "./useRowAnchorHandler";
+
+describe("useRowAnchorHandler", () => {
+  it("should navigate to the given path", () => {
+    // Arrange
+    const navigate = jest.fn();
+    const navigatorOpts = { replace: true };
+    const handler = renderHook(() => useRowAnchorHandler(navigate, navigatorOpts)).result.current;
+    const event = {
+      preventDefault: jest.fn(),
+      currentTarget: {
+        dataset: {
+          reactRouterPath: "/some-path",
+        },
+      },
+    };
+
+    // Act
+    handler(event as any);
+
+    // Assert
+    expect(event.preventDefault).toHaveBeenCalled();
+    expect(navigate).toHaveBeenCalledWith("/some-path", navigatorOpts);
+  });
+
+  it("should not prevent default when CMD key is pressed", () => {
+    // Arrange
+    const navigate = jest.fn();
+    const handler = renderHook(() => useRowAnchorHandler(navigate)).result.current;
+    const event = {
+      preventDefault: jest.fn(),
+      metaKey: true,
+      ctrlKey: false,
+    };
+
+    // Act
+    handler(event as any);
+
+    // Assert
+    expect(event.preventDefault).not.toHaveBeenCalled();
+    expect(navigate).not.toHaveBeenCalled();
+  });
+
+  it("should not prevent default when CTRL key is pressed", () => {
+    // Arrange
+    const navigate = jest.fn();
+    const handler = renderHook(() => useRowAnchorHandler(navigate)).result.current;
+    const event = {
+      preventDefault: jest.fn(),
+      metaKey: false,
+      ctrlKey: true,
+    };
+
+    // Act
+    handler(event as any);
+
+    // Assert
+    expect(event.preventDefault).not.toHaveBeenCalled();
+    expect(navigate).not.toHaveBeenCalled();
+  });
+});

src/components/Datagrid/hooks/useRowAnchorHandler.ts

@@ -0,0 +1,23 @@
+import { NavigatorOpts, UseNavigatorResult } from "@dashboard/hooks/useNavigator";
+import { MouseEvent } from "react";
+
+export const useRowAnchorHandler = (
+  navigate: UseNavigatorResult,
+  navigatorOpts?: NavigatorOpts,
+) => {
+  return (e: MouseEvent<HTMLAnchorElement>) => {
+    // When someone clicks with CMD key to open in new tab, we should not prevent default
+    if (e.metaKey || e.ctrlKey) {
+      return;
+    }
+
+    // Prevent default when navigate with browser router
+    e.preventDefault();
+
+    if (e.currentTarget.dataset.reactRouterPath) {
+      // Navigate gets only a path to navigate, for example, /products/1
+      // Navigate use browser router and cover case when url is with /dashboard or not
+      navigate(e.currentTarget.dataset.reactRouterPath, navigatorOpts);
+    }
+  };
+};