carbon-components-svelte/tests/DataTable/DataTableBatchSelectionToolbar.test.ts

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();
  });
});