@purpurds/table 8.3.0 → 8.4.0

package/src/table-dnd-integration.test.tsx

@@ -0,0 +1,425 @@
+import React, { useState } from "react";
+import { fireEvent, render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+import { Table } from "./table";
+import { createColumnDefSmall } from "./test-utils/column-def";
+import { tableDataLarge, tableDataSmall } from "./test-utils/table-data";
+
+// Test component to manage column order state
+function DraggableTableTest() {
+  const columns = createColumnDefSmall();
+  const [columnOrder, setColumnOrder] = useState<string[]>(
+    columns.map((col) => col.id).filter((id): id is string => typeof id === "string")
+  );
+
+  return (
+    <div>
+      <div data-testid="column-order-display">{columnOrder.join(", ")}</div>
+      <Table
+        columns={columns}
+        data={tableDataSmall}
+        enableColumnDrag={true}
+        onColumnOrderChange={setColumnOrder}
+        columnDragAriaLabelsCopy={{
+          grab: "Drag to reorder column",
+          grabbing: "Dragging column",
+        }}
+        state={{ columnOrder }}
+      />
+    </div>
+  );
+}
+
+describe("Table Drag and Drop Integration Tests", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+
+    // Mock scrollIntoView for @dnd-kit compatibility
+    Element.prototype.scrollIntoView = vi.fn();
+
+    // Mock DnD kit's drag detection only if not already defined
+    if (!window.DragEvent) {
+      Object.defineProperty(window, "DragEvent", {
+        value: class DragEvent extends Event {
+          dataTransfer: DataTransfer;
+          constructor(type: string, options?: DragEventInit) {
+            super(type, options);
+            this.dataTransfer = new DataTransfer();
+          }
+        },
+        configurable: true,
+      });
+    }
+  });
+
+  describe("DnD Context Integration", () => {
+    it("should render table within DnD context when drag is enabled", () => {
+      render(<DraggableTableTest />);
+
+      const table = screen.getByRole("table");
+      expect(table).toBeInTheDocument();
+
+      // Check that DnD context is properly set up (DnD kit doesn't always add data attributes)
+      // Note: DnD kit doesn't always add this attribute, so we check for successful render instead
+      expect(table).toBeInTheDocument();
+    });
+
+    it("should initialize with correct sensor configuration", () => {
+      // Test that the component renders without throwing errors
+      expect(() => {
+        render(<DraggableTableTest />);
+      }).not.toThrow();
+
+      const table = screen.getByRole("table");
+      expect(table).toBeInTheDocument();
+    });
+
+    it("should handle pointer sensor activation constraint", async () => {
+      render(<DraggableTableTest />);
+
+      const dragHandles = screen.getAllByLabelText("Drag to reorder column");
+      expect(dragHandles.length).toBeGreaterThan(0);
+
+      const firstHandle = dragHandles[0];
+
+      // Test mouse interaction
+      fireEvent.mouseDown(firstHandle);
+      fireEvent.mouseUp(firstHandle);
+
+      // Should not throw errors
+      expect(firstHandle).toBeInTheDocument();
+    });
+
+    it("should handle keyboard sensor with sortable coordinates", async () => {
+      const user = userEvent.setup();
+      render(<DraggableTableTest />);
+
+      const dragHandles = screen.getAllByLabelText("Drag to reorder column");
+      const firstHandle = dragHandles[0];
+
+      firstHandle.focus();
+
+      // Test keyboard interaction
+      await user.keyboard("{Enter}");
+      await user.keyboard("{ArrowRight}");
+      await user.keyboard("{Enter}");
+
+      // Should not throw errors
+      expect(firstHandle).toBeInTheDocument();
+    });
+  });
+
+  describe("Drag Start Events", () => {
+    it("should handle drag start correctly", async () => {
+      render(<DraggableTableTest />);
+
+      const dragHandles = screen.getAllByLabelText("Drag to reorder column");
+      const firstHandle = dragHandles[0];
+
+      // Simulate drag start
+      fireEvent.mouseDown(firstHandle);
+
+      // Component should still be functional
+      expect(firstHandle).toBeInTheDocument();
+    });
+
+    it("should set active ID on drag start", () => {
+      // Since we can't easily test internal state, we verify the component works
+      render(<DraggableTableTest />);
+
+      const table = screen.getByRole("table");
+      expect(table).toBeInTheDocument();
+    });
+
+    it("should handle multiple drag handles", () => {
+      render(<DraggableTableTest />);
+
+      const dragHandles = screen.getAllByLabelText("Drag to reorder column");
+
+      // Should have a drag handle for each draggable column
+      expect(dragHandles.length).toBeGreaterThan(1);
+
+      dragHandles.forEach((handle) => {
+        expect(handle).toHaveAttribute("role", "button");
+        expect(handle).toHaveAttribute("tabIndex", "0");
+      });
+    });
+  });
+
+  describe("Drag End Events", () => {
+    it("should call onColumnOrderChange when drag ends", () => {
+      const mockOnColumnOrderChange = vi.fn();
+
+      render(
+        <Table
+          columns={createColumnDefSmall()}
+          data={tableDataSmall}
+          enableColumnDrag={true}
+          onColumnOrderChange={mockOnColumnOrderChange}
+          columnDragAriaLabelsCopy={{
+            grab: "Drag to reorder column",
+            grabbing: "Dragging column",
+          }}
+        />
+      );
+
+      // Verify the callback is properly set up
+      expect(mockOnColumnOrderChange).toBeInstanceOf(Function);
+    });
+
+    it("should handle drag end without errors", () => {
+      expect(() => {
+        render(<DraggableTableTest />);
+
+        const dragHandles = screen.getAllByLabelText("Drag to reorder column");
+        const firstHandle = dragHandles[0];
+
+        // Simulate complete drag operation
+        fireEvent.mouseDown(firstHandle);
+        fireEvent.mouseUp(firstHandle);
+      }).not.toThrow();
+    });
+
+    it("should reset active state after drag end", async () => {
+      render(<DraggableTableTest />);
+
+      const dragHandles = screen.getAllByLabelText("Drag to reorder column");
+      const firstHandle = dragHandles[0];
+
+      // Simulate drag operation
+      fireEvent.mouseDown(firstHandle);
+      fireEvent.mouseMove(firstHandle, { clientX: 100, clientY: 100 });
+      fireEvent.mouseUp(firstHandle);
+
+      // Component should remain functional
+      expect(firstHandle).toBeInTheDocument();
+    });
+  });
+
+  describe("Drag Cancel Events", () => {
+    it("should handle drag cancel gracefully", () => {
+      render(<DraggableTableTest />);
+
+      const dragHandles = screen.getAllByLabelText("Drag to reorder column");
+      const firstHandle = dragHandles[0];
+
+      // Simulate drag start then cancel (escape key)
+      fireEvent.mouseDown(firstHandle);
+      fireEvent.keyDown(document, { key: "Escape" });
+
+      expect(firstHandle).toBeInTheDocument();
+    });
+
+    it("should reset state on drag cancel", () => {
+      // Test that canceling a drag doesn't break the component
+      expect(() => {
+        render(<DraggableTableTest />);
+
+        const table = screen.getByRole("table");
+        expect(table).toBeInTheDocument();
+      }).not.toThrow();
+    });
+  });
+
+  describe("Collision Detection", () => {
+    it("should use closest center collision detection", () => {
+      // Test that the collision detection doesn't cause errors
+      render(<DraggableTableTest />);
+
+      const table = screen.getByRole("table");
+      expect(table).toBeInTheDocument();
+    });
+
+    it("should handle overlapping drag areas", () => {
+      render(<DraggableTableTest />);
+
+      const dragHandles = screen.getAllByLabelText("Drag to reorder column");
+
+      // Multiple handles should coexist without conflicts
+      expect(dragHandles.length).toBeGreaterThan(1);
+
+      dragHandles.forEach((handle) => {
+        expect(handle).toBeInTheDocument();
+      });
+    });
+  });
+
+  describe("Modifiers", () => {
+    it("should apply horizontal axis restriction", () => {
+      // Test that the component renders with modifiers
+      render(<DraggableTableTest />);
+
+      const table = screen.getByRole("table");
+      expect(table).toBeInTheDocument();
+    });
+
+    it("should apply parent element restriction", () => {
+      // Test that dragging is constrained to the table area
+      render(<DraggableTableTest />);
+
+      const table = screen.getByRole("table");
+      expect(table).toBeInTheDocument();
+    });
+  });
+
+  describe("Drag Overlay", () => {
+    it("should show drag overlay during drag operation", () => {
+      render(<DraggableTableTest />);
+
+      // The overlay is managed by DnD kit internally
+      // We test that the structure supports it
+      const table = screen.getByRole("table");
+      expect(table).toBeInTheDocument();
+    });
+
+    it("should hide drag overlay when not dragging", () => {
+      render(<DraggableTableTest />);
+
+      // Initial state should not show overlay
+      const table = screen.getByRole("table");
+      expect(table).toBeInTheDocument();
+    });
+
+    it("should apply correct animation to drag overlay", () => {
+      // Test that the animation configuration doesn't cause errors
+      render(<DraggableTableTest />);
+
+      const table = screen.getByRole("table");
+      expect(table).toBeInTheDocument();
+    });
+  });
+
+  describe("Measuring Strategy", () => {
+    it("should use always measuring strategy", () => {
+      // Test that the measuring strategy doesn't cause performance issues
+      render(<DraggableTableTest />);
+
+      const table = screen.getByRole("table");
+      expect(table).toBeInTheDocument();
+    });
+
+    it("should handle dynamic content changes", () => {
+      // Test that measuring works with dynamic content
+      const { rerender } = render(<DraggableTableTest />);
+
+      // Re-render with different data
+      rerender(<DraggableTableTest />);
+
+      const table = screen.getByRole("table");
+      expect(table).toBeInTheDocument();
+    });
+  });
+
+  describe("Accessibility with DnD", () => {
+    it("should support screen reader announcements", () => {
+      render(<DraggableTableTest />);
+
+      const dragHandles = screen.getAllByLabelText("Drag to reorder column");
+
+      dragHandles.forEach((handle) => {
+        expect(handle).toHaveAttribute("aria-label");
+        expect(handle).toHaveAttribute("role", "button");
+      });
+    });
+
+    it("should support keyboard navigation during drag", async () => {
+      const user = userEvent.setup();
+      render(<DraggableTableTest />);
+
+      const dragHandles = screen.getAllByLabelText("Drag to reorder column");
+      const firstHandle = dragHandles[0];
+
+      firstHandle.focus();
+      expect(firstHandle).toHaveFocus();
+
+      // Should support keyboard interaction
+      await user.keyboard("{Enter}");
+      await user.keyboard("{ArrowRight}");
+      await user.keyboard("{ArrowLeft}");
+      await user.keyboard("{Enter}");
+
+      // Should remain functional
+      expect(firstHandle).toBeInTheDocument();
+    });
+
+    it("should provide appropriate ARIA live region updates", () => {
+      render(<DraggableTableTest />);
+
+      // DnD kit handles ARIA live regions internally
+      // We test that our implementation doesn't interfere
+      const table = screen.getByRole("table");
+      expect(table).toBeInTheDocument();
+    });
+  });
+
+  describe("Performance", () => {
+    it("should handle rapid drag operations", () => {
+      render(<DraggableTableTest />);
+
+      const dragHandles = screen.getAllByLabelText("Drag to reorder column");
+      const firstHandle = dragHandles[0];
+
+      // Simulate rapid interactions
+      for (let i = 0; i < 10; i++) {
+        fireEvent.mouseDown(firstHandle);
+        fireEvent.mouseUp(firstHandle);
+      }
+
+      expect(firstHandle).toBeInTheDocument();
+    });
+
+    it("should not cause memory leaks", () => {
+      const { unmount } = render(<DraggableTableTest />);
+
+      // Unmounting should clean up properly
+      expect(() => {
+        unmount();
+      }).not.toThrow();
+    });
+
+    it("should handle large datasets efficiently", () => {
+      expect(() => {
+        render(
+          <Table
+            columns={createColumnDefSmall()}
+            data={tableDataLarge}
+            enableColumnDrag={true}
+            onColumnOrderChange={() => {}}
+            columnDragAriaLabelsCopy={{
+              grab: "Drag to reorder column",
+              grabbing: "Dragging column",
+            }}
+          />
+        );
+      }).not.toThrow();
+    });
+  });
+
+  describe("Error Boundaries", () => {
+    it("should handle DnD errors gracefully", () => {
+      // Test that DnD errors don't crash the component
+      expect(() => {
+        render(<DraggableTableTest />);
+      }).not.toThrow();
+    });
+
+    it("should recover from sensor initialization errors", () => {
+      // Test that sensor setup errors are handled
+      expect(() => {
+        render(
+          <Table
+            columns={createColumnDefSmall()}
+            data={tableDataSmall}
+            enableColumnDrag={true}
+            onColumnOrderChange={() => {}}
+            columnDragAriaLabelsCopy={{
+              grab: "Drag to reorder column",
+              grabbing: "Dragging column",
+            }}
+          />
+        );
+      }).not.toThrow();
+    });
+  });
+});

package/src/table-drag-and-drop.test.tsx

@@ -0,0 +1,276 @@
+import React from "react";
+import { fireEvent, render, screen } from "@testing-library/react";
+
+import { Table } from "./table";
+import { createColumnDefSmall } from "./test-utils/column-def";
+import { tableDataSmall } from "./test-utils/table-data";
+
+const mockColumnDragAriaLabels = {
+  grab: "Drag to reorder column",
+  grabbing: "Dragging column",
+};
+
+const mockOnColumnOrderChange = vi.fn();
+
+// Helper function to create consistent props for drag-enabled tables
+const createDragEnabledTableProps = (additionalProps = {}) => ({
+  columns: createColumnDefSmall(),
+  data: tableDataSmall,
+  enableColumnDrag: true as const,
+  onColumnOrderChange: mockOnColumnOrderChange,
+  columnDragAriaLabelsCopy: mockColumnDragAriaLabels,
+  state: {
+    columnOrder: ["id", "name", "link", "age"],
+  },
+  ...additionalProps,
+});
+
+describe("Table - Drag and Drop Functionality", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+
+    // Mock scrollIntoView for @dnd-kit compatibility
+    Element.prototype.scrollIntoView = vi.fn();
+  });
+
+  describe("With Column Drag Enabled", () => {
+    it("should render drag handles when enableColumnDrag is true", () => {
+      render(<Table {...createDragEnabledTableProps()} />);
+
+      const dragHandles = screen.getAllByLabelText(mockColumnDragAriaLabels.grab);
+      expect(dragHandles.length).toBeGreaterThan(0);
+    });
+
+    it("should not render drag handles when enableColumnDrag is false", () => {
+      render(
+        <Table columns={createColumnDefSmall()} data={tableDataSmall} enableColumnDrag={false} />
+      );
+
+      const dragHandles = screen.queryAllByLabelText(mockColumnDragAriaLabels.grab);
+      expect(dragHandles).toHaveLength(0);
+    });
+
+    it("should render DraggableTable component when enableColumnDrag is true", () => {
+      render(<Table {...createDragEnabledTableProps()} />);
+
+      // Should render the table with drag functionality
+      const table = screen.getByRole("table");
+      expect(table).toBeInTheDocument();
+
+      // Should have drag handles
+      const dragHandles = screen.getAllByLabelText(mockColumnDragAriaLabels.grab);
+      expect(dragHandles.length).toBeGreaterThan(0);
+    });
+
+    it("should have proper accessibility attributes on drag handles", () => {
+      render(<Table {...createDragEnabledTableProps()} />);
+
+      const dragHandles = screen.getAllByLabelText(mockColumnDragAriaLabels.grab);
+
+      dragHandles.forEach((handle) => {
+        expect(handle).toHaveAttribute("role", "button");
+        expect(handle).toHaveAttribute("tabindex", "0");
+        expect(handle).toHaveAttribute("aria-label", mockColumnDragAriaLabels.grab);
+      });
+    });
+
+    it("should trigger mouse down event on drag handle interaction", () => {
+      render(<Table {...createDragEnabledTableProps()} />);
+
+      const dragHandles = screen.getAllByLabelText(mockColumnDragAriaLabels.grab);
+      const firstHandle = dragHandles[0];
+
+      fireEvent.mouseDown(firstHandle);
+      // The component should respond to mouse interactions
+      expect(firstHandle).toBeInTheDocument();
+    });
+
+    it("should respond to keyboard interactions on drag handles", () => {
+      render(<Table {...createDragEnabledTableProps()} />);
+
+      const dragHandles = screen.getAllByLabelText(mockColumnDragAriaLabels.grab);
+      const firstHandle = dragHandles[0];
+
+      fireEvent.keyDown(firstHandle, { key: "Enter", code: "Enter" });
+      fireEvent.keyDown(firstHandle, { key: " ", code: "Space" });
+
+      // Should handle keyboard events without errors
+      expect(firstHandle).toBeInTheDocument();
+    });
+
+    it("should have drag handles with proper CSS classes", () => {
+      render(<Table {...createDragEnabledTableProps()} />);
+
+      const dragHandles = screen.getAllByLabelText(mockColumnDragAriaLabels.grab);
+
+      dragHandles.forEach((handle) => {
+        expect(handle.className).toMatch(/drag-handle/);
+      });
+    });
+
+    it("should apply correct border radius classes to first and last column drag handles", () => {
+      render(<Table {...createDragEnabledTableProps()} />);
+
+      const dragHandles = screen.getAllByLabelText(mockColumnDragAriaLabels.grab);
+
+      if (dragHandles.length > 0) {
+        const firstHandle = dragHandles[0];
+        const lastHandle = dragHandles[dragHandles.length - 1];
+
+        // Check CSS classes for border radius
+        expect(firstHandle.className).toMatch(/first/);
+        expect(lastHandle.className).toMatch(/last/);
+      }
+    });
+
+    it("should show drag overlay when dragging", () => {
+      render(<Table {...createDragEnabledTableProps()} />);
+
+      const dragHandles = screen.getAllByLabelText(mockColumnDragAriaLabels.grab);
+
+      if (dragHandles.length > 0) {
+        const firstHandle = dragHandles[0];
+
+        // Start drag operation
+        fireEvent.mouseDown(firstHandle);
+        fireEvent.dragStart(firstHandle);
+
+        // Should show some indication of dragging state
+        expect(firstHandle).toBeInTheDocument();
+      }
+    });
+  });
+
+  describe("Column Reordering", () => {
+    it("should maintain table functionality after reordering", () => {
+      render(<Table {...createDragEnabledTableProps()} />);
+
+      // After reordering, table should still be functional
+      const table = screen.getByRole("table");
+      expect(table).toBeInTheDocument();
+
+      const dragHandles = screen.getAllByLabelText(mockColumnDragAriaLabels.grab);
+      expect(dragHandles.length).toBeGreaterThan(0);
+    });
+  });
+
+  describe("Integration with Other Table Features", () => {
+    it("should work with sticky columns", () => {
+      render(<Table {...createDragEnabledTableProps({ stickyFirstColumn: true })} />);
+
+      const table = screen.getByRole("table");
+      expect(table).toBeInTheDocument();
+
+      const dragHandles = screen.getAllByLabelText(mockColumnDragAriaLabels.grab);
+      expect(dragHandles.length).toBeGreaterThan(0);
+    });
+
+    it("should work with sorting enabled", () => {
+      render(<Table {...createDragEnabledTableProps({ enableSorting: true })} />);
+
+      const table = screen.getByRole("table");
+      expect(table).toBeInTheDocument();
+
+      const dragHandles = screen.getAllByLabelText(mockColumnDragAriaLabels.grab);
+      expect(dragHandles.length).toBeGreaterThan(0);
+    });
+
+    it("should work with filters enabled", () => {
+      render(<Table {...createDragEnabledTableProps({ enableFilters: true })} />);
+
+      const table = screen.getByRole("table");
+      expect(table).toBeInTheDocument();
+
+      const dragHandles = screen.getAllByLabelText(mockColumnDragAriaLabels.grab);
+      expect(dragHandles.length).toBeGreaterThan(0);
+    });
+
+    it("should work with toolbar enabled", () => {
+      render(
+        <Table
+          {...createDragEnabledTableProps({
+            toolbarCopy: {
+              title: "Test Table",
+              description: "Test description",
+            },
+            toolbarTotalRowCount: 100,
+          })}
+        />
+      );
+
+      const table = screen.getByRole("table");
+      expect(table).toBeInTheDocument();
+
+      // When toolbar props are provided, toolbar should be rendered
+      const dragHandles = screen.getAllByLabelText(mockColumnDragAriaLabels.grab);
+      expect(dragHandles.length).toBeGreaterThan(0);
+    });
+
+    it("should work with loading state", () => {
+      render(
+        <Table
+          {...createDragEnabledTableProps({
+            loading: true,
+            skeletonRows: 5,
+          })}
+        />
+      );
+
+      const table = screen.getByRole("table");
+      expect(table).toBeInTheDocument();
+
+      // Drag handles should still be present in loading state
+      const dragHandles = screen.getAllByLabelText(mockColumnDragAriaLabels.grab);
+      expect(dragHandles.length).toBeGreaterThan(0);
+    });
+  });
+
+  describe("Error Handling", () => {
+    it("should handle missing onColumnOrderChange gracefully when enableColumnDrag is true", () => {
+      // This should be caught by TypeScript, but testing runtime behavior
+      const consoleSpy = vi.spyOn(console, "error").mockImplementation(() => {});
+
+      render(
+        // @ts-expect-error - Testing missing required prop
+        <Table
+          columns={createColumnDefSmall()}
+          data={tableDataSmall}
+          enableColumnDrag={true}
+          columnDragAriaLabelsCopy={mockColumnDragAriaLabels}
+          state={{
+            columnOrder: ["id", "name", "link", "age"],
+          }}
+        />
+      );
+
+      // Should not crash
+      const table = screen.getByRole("table");
+      expect(table).toBeInTheDocument();
+
+      consoleSpy.mockRestore();
+    });
+
+    it("should handle missing columnDragAriaLabelsCopy gracefully", () => {
+      const consoleSpy = vi.spyOn(console, "error").mockImplementation(() => {});
+
+      render(
+        // @ts-expect-error - Testing missing required prop
+        <Table
+          columns={createColumnDefSmall()}
+          data={tableDataSmall}
+          enableColumnDrag={true}
+          onColumnOrderChange={mockOnColumnOrderChange}
+          state={{
+            columnOrder: ["id", "name", "link", "age"],
+          }}
+        />
+      );
+
+      // Should not crash
+      const table = screen.getByRole("table");
+      expect(table).toBeInTheDocument();
+
+      consoleSpy.mockRestore();
+    });
+  });
+});