test: Create unit tests for react components in packages/ui/components/table (#10437)

Co-authored-by: gitstart-calcom <gitstart@users.noreply.github.com>
2023-07-28 12:57:44 +01:00
parent 6cff76cc3b
commit 4bc4ff8193
1 changed files with 76 additions and 0 deletions
@@ -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(
+      <>
+        <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);
+  });
+});