cal.pub0.org/packages/ui/components/table/table.test.tsx

77 lines
2.3 KiB
TypeScript

/* 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(
<>
<Table>
<>
<TableHeader>
<TableRow>
<TableHead>Header Column 1</TableHead>
<TableHead>Header Column 2</TableHead>
</TableRow>
</TableHeader>
<TableBody>
<TableRow>
<TableCell>Row 1, Cell 1</TableCell>
<TableCell>Row 1, Cell 2</TableCell>
</TableRow>
<TableRow>
<TableCell>Row 2, Cell 1</TableCell>
<TableCell>Row 2, Cell 2</TableCell>
</TableRow>
</TableBody>
<TableCaption>Table Caption</TableCaption>
</>
</Table>
</>
);
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(<TableActions actions={mockActions} />);
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);
});
});