77 lines
2.3 KiB
TypeScript
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);
|
||
|
|
});
|
||
|
|
});
|