@multiplatform.one/table 6.0.0

package/src/components/DataTableColumnPinning/DataTableColumnPinning.spec.tsx

@@ -0,0 +1,308 @@
+import { createColumnHelper, getCoreRowModel, useReactTable } from "@tanstack/react-table";
+import { fireEvent, screen, waitFor } from "@testing-library/react";
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import React from "react";
+import { describe, expect, it, vi } from "vitest";
+import { DataTableColumnPinning, useColumnPinning } from "./index";
+
+const mockData = [
+  {
+    id: 1,
+    name: "John Doe",
+    email: "john@example.com",
+    role: "Admin",
+    status: "Active",
+  },
+  {
+    id: 2,
+    name: "Jane Smith",
+    email: "jane@example.com",
+    role: "User",
+    status: "Active",
+  },
+  {
+    id: 3,
+    name: "Bob Johnson",
+    email: "bob@example.com",
+    role: "User",
+    status: "Inactive",
+  },
+];
+
+const columnHelper = createColumnHelper<(typeof mockData)[0]>();
+
+const columns = [
+  columnHelper.accessor("id", {
+    header: "ID",
+    cell: (info) => info.getValue(),
+  }),
+  columnHelper.accessor("name", {
+    header: "Name",
+    cell: (info) => info.getValue(),
+  }),
+  columnHelper.accessor("email", {
+    header: "Email",
+    cell: (info) => info.getValue(),
+  }),
+  columnHelper.accessor("role", {
+    header: "Role",
+    cell: (info) => info.getValue(),
+  }),
+  columnHelper.accessor("status", {
+    header: "Status",
+    cell: (info) => info.getValue(),
+  }),
+];
+
+function TestComponent({
+  onPinChange,
+  maxPinnedColumns = 3,
+  allowPinning = true,
+}: {
+  onPinChange?: (columnId: string, position?: "left" | "right") => void;
+  maxPinnedColumns?: number;
+  allowPinning?: boolean;
+}) {
+  const [pinnedColumns, setPinnedColumns] = React.useState<{
+    left: string[];
+    right: string[];
+  }>({
+    left: [],
+    right: [],
+  });
+
+  const [forceRender, setForceRender] = React.useState(0);
+
+  const table = useReactTable({
+    data: mockData,
+    columns,
+    getCoreRowModel: getCoreRowModel(),
+    state: {
+      columnPinning: pinnedColumns,
+    },
+    onColumnPinningChange: (updater) => {
+      const newState = typeof updater === "function" ? updater(pinnedColumns) : updater;
+      setPinnedColumns({
+        left: newState.left || [],
+        right: newState.right || [],
+      });
+      setForceRender((prev) => prev + 1); // Force re-render
+    },
+  });
+
+  const pinning = DataTableColumnPinning({
+    table,
+    onPinChange,
+    maxPinnedColumns,
+    allowPinning,
+  });
+
+  // Force pinning to use current state
+  React.useEffect(() => {
+    // This effect will run whenever forceRender changes, ensuring the component re-renders
+  }, [forceRender]);
+
+  return (
+    <div>
+      {table.getAllColumns().map((column) => (
+        <div key={column.id} data-testid={`column-${column.id}`}>
+          <span>{column.id}</span>
+          <pinning.PinButton columnId={column.id} position="left" />
+          <span data-testid={`pinned-${column.id}`}>
+            {pinning.isPinned(column.id) ? "pinned" : "not-pinned"}
+          </span>
+          <span data-testid={`position-${column.id}`}>
+            {pinning.getPinPosition(column.id) || "none"}
+          </span>
+        </div>
+      ))}
+      <div data-testid="pinned-left">{pinning.pinnedLeftColumns.length}</div>
+      <div data-testid="pinned-right">{pinning.pinnedRightColumns.length}</div>
+      <div data-testid="scrollable">{pinning.scrollableColumns.length}</div>
+    </div>
+  );
+}
+
+describe("DataTableColumnPinning", () => {
+  it("should render without errors", () => {
+    renderWithProviders(<TestComponent />);
+
+    expect(screen.getByTestId("column-id")).toBeDefined();
+    expect(screen.getByTestId("column-name")).toBeDefined();
+  });
+
+  it("should pin column to left", async () => {
+    const onPinChange = vi.fn();
+    renderWithProviders(<TestComponent onPinChange={onPinChange} />);
+
+    const nameColumn = screen.getByTestId("column-name");
+    const pinButton = nameColumn.querySelector('[role="button"], button');
+
+    expect(screen.getByTestId("pinned-name")).toHaveTextContent("not-pinned");
+    expect(screen.getByTestId("position-name")).toHaveTextContent("none");
+
+    fireEvent.click(pinButton!);
+
+    await waitFor(() => {
+      expect(screen.getByTestId("pinned-name")).toHaveTextContent("pinned");
+      expect(screen.getByTestId("position-name")).toHaveTextContent("left");
+      expect(onPinChange).toHaveBeenCalledWith("name", "left");
+    });
+  });
+
+  it("should track pin state changes", async () => {
+    const onPinChange = vi.fn();
+    renderWithProviders(<TestComponent onPinChange={onPinChange} />);
+
+    const nameColumn = screen.getByTestId("column-name");
+    const pinButton = nameColumn.querySelector('[role="button"], button');
+
+    expect(pinButton).toBeDefined();
+    expect(screen.getByTestId("pinned-name")).toHaveTextContent("not-pinned");
+  });
+
+  it("should render with maxPinnedColumns prop", async () => {
+    renderWithProviders(<TestComponent maxPinnedColumns={2} />);
+
+    const idButton = screen.getByTestId("column-id").querySelector('[role="button"], button');
+    const nameButton = screen.getByTestId("column-name").querySelector('[role="button"], button');
+
+    expect(idButton).toBeDefined();
+    expect(nameButton).toBeDefined();
+    expect(screen.getByTestId("pinned-left")).toHaveTextContent("0");
+  });
+
+  it("should not show pin buttons when allowPinning is false", () => {
+    renderWithProviders(<TestComponent allowPinning={false} />);
+
+    const buttons = screen.queryAllByRole("button");
+    expect(buttons).toHaveLength(0);
+  });
+
+  it("should correctly categorize columns", async () => {
+    renderWithProviders(<TestComponent />);
+
+    expect(screen.getByTestId("pinned-left")).toHaveTextContent("0");
+    expect(screen.getByTestId("pinned-right")).toHaveTextContent("0");
+    expect(screen.getByTestId("scrollable")).toHaveTextContent("5");
+
+    // Pin a column
+    const nameButton = screen.getByTestId("column-name").querySelector('[role="button"], button');
+    fireEvent.click(nameButton!);
+
+    await waitFor(() => {
+      expect(screen.getByTestId("pinned-left")).toHaveTextContent("1");
+      expect(screen.getByTestId("scrollable")).toHaveTextContent("4");
+    });
+  });
+});
+
+describe("useColumnPinning", () => {
+  function HookTestComponent() {
+    const table = useReactTable({
+      data: mockData,
+      columns,
+      getCoreRowModel: getCoreRowModel(),
+    });
+
+    const { pinnedState, pinColumn, unpinColumn, resetPinning } = useColumnPinning(table, {
+      maxPinnedColumns: 2,
+      initialPinnedColumns: { left: ["id"], right: [] },
+    });
+
+    return (
+      <div>
+        <div data-testid="left-pins">{pinnedState.left.join(",")}</div>
+        <div data-testid="right-pins">{pinnedState.right.join(",")}</div>
+        <button type="button" onClick={() => pinColumn("name", "left")}>
+          Pin Name Left
+        </button>
+        <button type="button" onClick={() => pinColumn("email", "right")}>
+          Pin Email Right
+        </button>
+        <button type="button" onClick={() => unpinColumn("id")}>
+          Unpin ID
+        </button>
+        <button type="button" onClick={() => resetPinning()}>
+          Reset
+        </button>
+      </div>
+    );
+  }
+
+  it("should initialize with provided pinned columns", () => {
+    renderWithProviders(<HookTestComponent />);
+
+    expect(screen.getByTestId("left-pins")).toHaveTextContent("id");
+    expect(screen.getByTestId("right-pins")).toHaveTextContent("");
+  });
+
+  it("should pin column to specified position", async () => {
+    renderWithProviders(<HookTestComponent />);
+
+    const pinNameButton = screen.getByText("Pin Name Left");
+    fireEvent.click(pinNameButton);
+
+    await waitFor(() => {
+      expect(screen.getByTestId("left-pins")).toHaveTextContent("id,name");
+    });
+
+    const pinEmailButton = screen.getByText("Pin Email Right");
+    fireEvent.click(pinEmailButton);
+
+    await waitFor(() => {
+      expect(screen.getByTestId("right-pins")).toHaveTextContent("email");
+    });
+  });
+
+  it("should unpin column", async () => {
+    renderWithProviders(<HookTestComponent />);
+
+    const unpinButton = screen.getByText("Unpin ID");
+    fireEvent.click(unpinButton);
+
+    await waitFor(() => {
+      expect(screen.getByTestId("left-pins")).toHaveTextContent("");
+    });
+  });
+
+  it("should reset all pinning", async () => {
+    renderWithProviders(<HookTestComponent />);
+
+    // Pin some columns first
+    fireEvent.click(screen.getByText("Pin Name Left"));
+    fireEvent.click(screen.getByText("Pin Email Right"));
+
+    await waitFor(() => {
+      expect(screen.getByTestId("left-pins")).not.toHaveTextContent("");
+      expect(screen.getByTestId("right-pins")).not.toHaveTextContent("");
+    });
+
+    // Reset
+    fireEvent.click(screen.getByText("Reset"));
+
+    await waitFor(() => {
+      expect(screen.getByTestId("left-pins")).toHaveTextContent("");
+      expect(screen.getByTestId("right-pins")).toHaveTextContent("");
+    });
+  });
+
+  it("should move column between positions", async () => {
+    renderWithProviders(<HookTestComponent />);
+
+    // Pin name to left
+    fireEvent.click(screen.getByText("Pin Name Left"));
+
+    await waitFor(() => {
+      expect(screen.getByTestId("left-pins")).toHaveTextContent("id,name");
+    });
+
+    // Pin email to right
+    fireEvent.click(screen.getByText("Pin Email Right"));
+
+    await waitFor(() => {
+      expect(screen.getByTestId("right-pins")).toHaveTextContent("email");
+      expect(screen.getByTestId("left-pins")).toHaveTextContent("id,name");
+    });
+  });
+});