test(data-table): add unit tests

tests/DataTable/DataTableBatchSelectionToolbar.test.ts

@@ -0,0 +1,168 @@
+import { render, screen } from "@testing-library/svelte";
+import { tick } from "svelte";
+import { user } from "../setup-tests";
+import DataTableBatchSelectionToolbar from "./DataTableBatchSelectionToolbar.test.svelte";
+
+describe("DataTableBatchSelectionToolbar", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it("renders toolbar when rows are selected", async () => {
+    const { container } = render(DataTableBatchSelectionToolbar, {
+      props: {
+        selectedRowIds: ["a", "b"],
+      },
+    });
+
+    // Verify toolbar is visible
+    const toolbar = container.querySelector(".bx--batch-actions");
+    expect(toolbar).toBeInTheDocument();
+    expect(toolbar).toHaveClass("bx--batch-actions--active");
+
+    // Verify selected count is displayed
+    expect(screen.getByText("2 items selected")).toBeInTheDocument();
+  });
+
+  it("hides toolbar when no rows are selected", () => {
+    const { container } = render(DataTableBatchSelectionToolbar, {
+      props: {
+        selectedRowIds: [],
+      },
+    });
+
+    // Verify toolbar is not visible
+    const toolbar = container.querySelector(".bx--batch-actions");
+    expect(toolbar).not.toHaveClass("bx--batch-actions--active");
+  });
+
+  it("handles cancel action", async () => {
+    const { component } = render(DataTableBatchSelectionToolbar, {
+      props: {
+        selectedRowIds: ["a", "b"],
+      },
+    });
+
+    // Click cancel button
+    const cancelButton = screen.getByText("Cancel");
+    await user.click(cancelButton);
+
+    // Verify selected rows are cleared
+    expect(component.$$.ctx[component.$$.props["selectedRowIds"]]).toEqual([]);
+  });
+
+  it("handles custom batch actions", async () => {
+    const consoleLog = vi.spyOn(console, "log");
+    render(DataTableBatchSelectionToolbar, {
+      props: {
+        selectedRowIds: ["a", "b"],
+      },
+    });
+
+    // Click custom action button
+    const actionButton = screen.getByText("Delete");
+    await user.click(actionButton);
+
+    // Verify action was triggered
+    expect(consoleLog).toHaveBeenCalledWith("delete", ["a", "b"]);
+  });
+
+  it("handles controlled active state", async () => {
+    const { container, component } = render(DataTableBatchSelectionToolbar, {
+      props: {
+        selectedRowIds: ["a", "b"],
+        active: false,
+      },
+    });
+
+    // Verify toolbar is not active despite selected rows
+    const toolbar = container.querySelector(".bx--batch-actions");
+    expect(toolbar).not.toHaveClass("bx--batch-actions--active");
+
+    // Update active state
+    component.$set({ active: true });
+    await tick();
+
+    // Verify toolbar is now active
+    expect(toolbar).toHaveClass("bx--batch-actions--active");
+  });
+
+  it("prevents default cancel behavior when controlled", async () => {
+    const { component } = render(DataTableBatchSelectionToolbar, {
+      props: {
+        selectedRowIds: ["a", "b"],
+        active: true,
+        controlled: true,
+      },
+    });
+
+    // Click cancel button
+    const cancelButton = screen.getByText("Cancel");
+    await user.click(cancelButton);
+
+    // Verify selected rows are not cleared
+    expect(component.$$.ctx[component.$$.props["selectedRowIds"]]).toEqual([
+      "a",
+      "b",
+    ]);
+  });
+
+  it("handles multiple batch actions", async () => {
+    const consoleLog = vi.spyOn(console, "log");
+    render(DataTableBatchSelectionToolbar, {
+      props: {
+        selectedRowIds: ["a", "b"],
+      },
+    });
+
+    // Click first action button
+    const deleteButton = screen.getByText("Delete");
+    await user.click(deleteButton);
+    expect(consoleLog).toHaveBeenCalledWith("delete", ["a", "b"]);
+
+    // Click second action button
+    const restartButton = screen.getByText("Restart");
+    await user.click(restartButton);
+    expect(consoleLog).toHaveBeenCalledWith("restart", ["a", "b"]);
+  });
+
+  it("updates selected count when selection changes", async () => {
+    const { component } = render(DataTableBatchSelectionToolbar, {
+      props: {
+        selectedRowIds: ["a"],
+      },
+    });
+
+    // Verify initial count
+    expect(screen.getByText("1 item selected")).toBeInTheDocument();
+
+    // Update selection
+    component.$set({ selectedRowIds: ["a", "b", "c"] });
+    await tick();
+
+    // Verify updated count
+    expect(screen.getByText("3 items selected")).toBeInTheDocument();
+  });
+
+  it("handles keyboard navigation", async () => {
+    render(DataTableBatchSelectionToolbar, {
+      props: {
+        selectedRowIds: ["a", "b"],
+      },
+    });
+
+    // Focus cancel button
+    const cancelButton = screen.getByText("Cancel");
+    cancelButton.focus();
+
+    // Press tab to move to next action
+    await user.keyboard("{Tab}");
+    expect(screen.getByText("Create balancer")).toHaveFocus();
+
+    // Press tab again to move to next action
+    await user.keyboard("{Tab}");
+    expect(
+      screen.getByRole("checkbox", { name: "Select all rows" }),
+    ).toHaveFocus();
+  });
+});