diff --git a/packages/ui/components/table/table.test.tsx b/packages/ui/components/table/table.test.tsx new file mode 100644 index 0000000000..39c3869832 --- /dev/null +++ b/packages/ui/components/table/table.test.tsx @@ -0,0 +1,76 @@ +/* eslint-disable playwright/missing-playwright-await */ +import { fireEvent, render } from "@testing-library/react"; +import { vi } from "vitest"; + +import { Table, TableActions } from "@calcom/ui"; + +import { TableBody, TableCaption, TableCell, TableHead, TableHeader, TableRow } from "./TableNew"; + +const mockActions = [ + { + id: "action1", + label: "Action 1", + href: "#", + }, + { + id: "action2", + label: "Action 2", + onClick: vi.fn(), + }, +]; + +describe("tests for Table component", () => { + test("Should render Table component correctly", () => { + const { getByRole, getByText } = render( + <> + + <> + + + Header Column 1 + Header Column 2 + + + + + Row 1, Cell 1 + Row 1, Cell 2 + + + Row 2, Cell 1 + Row 2, Cell 2 + + + Table Caption + +
+ + ); + + const headerElement1 = getByRole("columnheader", { name: "Header Column 1" }); + const headerElement2 = getByRole("columnheader", { name: "Header Column 2" }); + expect(headerElement1).toBeInTheDocument(); + expect(headerElement2).toBeInTheDocument(); + + expect(getByText("Row 1, Cell 1")).toBeInTheDocument(); + expect(getByText("Row 1, Cell 2")).toBeInTheDocument(); + expect(getByText("Row 2, Cell 1")).toBeInTheDocument(); + expect(getByText("Row 2, Cell 2")).toBeInTheDocument(); + + const captionElement = getByText("Table Caption"); + expect(captionElement).toBeInTheDocument(); + }); + + test("Should render TableActions component correctly", () => { + const { getByText } = render(); + + const action1Button = getByText("Action 1"); + const action2Button = getByText("Action 2"); + + expect(action1Button).toBeInTheDocument(); + expect(action2Button).toBeInTheDocument(); + + fireEvent.click(action2Button); + expect(mockActions[1].onClick).toHaveBeenCalledTimes(1); + }); +});