test: Create unit tests for react components in packages/ui/components/list (#10501)

Co-authored-by: gitstart-calcom <gitstart@users.noreply.github.com>

packages/ui/components/list/List.tsx

@@ -15,6 +15,7 @@ export type ListProps = {
 export function List(props: ListProps) {
   return (
     <ul
+      data-testid="list"
       {...props}
       className={classNames(
         "-mx-4 rounded-sm sm:mx-0 sm:overflow-hidden ",
@@ -50,6 +51,7 @@ export function ListItem(props: ListItemProps) {
         props.className,
         (props.onClick || href) && "hover:bg-muted"
       ),
+      "data-testid": "list-item",
     },
     props.children
   );
@@ -80,6 +82,7 @@ export function ListLinkItem(props: ListLinkItemProps) {
   }
   return (
     <li
+      data-testid="list-link-item"
       className={classNames(
         "group flex w-full items-center justify-between p-5 pb-4",
         className,
@@ -95,7 +98,7 @@ export function ListLinkItem(props: ListLinkItemProps) {
         <div className="flex items-center">
           <h1 className="text-sm font-semibold leading-none">{heading}</h1>
           {disabled && (
-            <Badge variant="gray" className="ml-2">
+            <Badge data-testid="badge" variant="gray" className="ml-2">
               {t("readonly")}
             </Badge>
           )}
@@ -121,6 +124,7 @@ export function ListItemTitle<TComponent extends keyof JSX.IntrinsicElements = "
     {
       ...passThroughProps,
       className: classNames("text-sm font-medium text-emphasis truncate", props.className),
+      "data-testid": "list-item-title",
     },
     props.children
   );
@@ -136,6 +140,7 @@ export function ListItemText<TComponent extends keyof JSX.IntrinsicElements = "s
     {
       ...passThroughProps,
       className: classNames("text-sm text-subtle truncate", props.className),
+      "data-testid": "list-item-text",
     },
     props.children
   );

packages/ui/components/list/list.test.tsx

@@ -0,0 +1,117 @@
+/* eslint-disable playwright/missing-playwright-await */
+import { render, screen, fireEvent } from "@testing-library/react";
+import { vi } from "vitest";
+
+import { List, ListItem, ListItemText, ListItemTitle, ListLinkItem } from "./List";
+
+describe("Tests for List component", () => {
+  test("Should be bordered with no rounded container by default", () => {
+    render(<List>Go</List>);
+
+    const listElement = screen.getByTestId("list");
+
+    expect(listElement).toBeInTheDocument();
+  });
+});
+
+describe("Tests for ListItem component", () => {
+  test("Should be expanded and rounded and rendered by a LI tag by default", () => {
+    render(<ListItem>Go</ListItem>);
+
+    const listItemElement = screen.getByTestId("list-item");
+
+    expect(listItemElement).toBeInstanceOf(HTMLLIElement);
+  });
+
+  test("Should call onClick when clicked", () => {
+    const handleClick = vi.fn();
+    render(<ListItem onClick={handleClick}>Go</ListItem>);
+
+    const listItemElement = screen.getByTestId("list-item");
+
+    fireEvent.click(listItemElement);
+    expect(handleClick).toHaveBeenCalledTimes(1);
+  });
+});
+
+describe("Tests for ListLinkItem component", () => {
+  test("Should be rendered as <a/> with heading by default", () => {
+    render(
+      <ListLinkItem href="https://custom.link" heading="Go" subHeading="There">
+        Alright
+      </ListLinkItem>
+    );
+
+    const listLinkItemElement = screen.getByTestId("list-link-item");
+
+    const link = listLinkItemElement.firstChild;
+    expect(link).toBeInstanceOf(HTMLAnchorElement);
+    expect(link).toHaveAttribute("href", "https://custom.link");
+
+    const heading = screen.getByText("Go");
+    expect(heading).toBeInTheDocument();
+    expect(heading.tagName).toBe("H1");
+
+    const subHeading = screen.getByText("There");
+    expect(subHeading).toBeInTheDocument();
+    expect(subHeading.tagName).toBe("H2");
+  });
+
+  test("Should be disabled", () => {
+    render(
+      <ListLinkItem href="https://custom.link" heading="Go" subHeading="There" disabled={true}>
+        Alright
+      </ListLinkItem>
+    );
+
+    const badge = screen.getByTestId("badge");
+    expect(badge).toBeInTheDocument();
+  });
+
+  test("Should apply some actions", () => {
+    render(
+      <ListLinkItem href="https://custom.link" heading="Go" subHeading="There" actions={<div>cta</div>}>
+        Alright
+      </ListLinkItem>
+    );
+
+    const action = screen.getByText("cta");
+    expect(action).toBeInTheDocument();
+  });
+});
+
+describe("Tests for ListItemTitle component", () => {
+  test("Should render as <span> by default", () => {
+    render(<ListItemTitle>Go</ListItemTitle>);
+
+    const listItemTitleElement = screen.getByTestId("list-item-title");
+    expect(listItemTitleElement).toBeInTheDocument();
+    expect(listItemTitleElement.tagName).toBe("SPAN");
+  });
+
+  test("Should be rendered with the defined component", () => {
+    render(<ListItemTitle component="h1">Go</ListItemTitle>);
+
+    const listItemTitleElement = screen.getByTestId("list-item-title");
+    expect(listItemTitleElement.tagName).not.toBe("SPAN");
+    expect(listItemTitleElement.tagName).toBe("H1");
+  });
+});
+
+describe("Tests for ListItemText component", () => {
+  test("Should render as <span> by default", () => {
+    render(<ListItemText>Go</ListItemText>);
+
+    const listItemTextElement = screen.getByTestId("list-item-text");
+    expect(listItemTextElement).toBeInTheDocument();
+    expect(listItemTextElement.tagName).toBe("SPAN");
+  });
+
+  test("Should be rendered with the defined component", () => {
+    render(<ListItemText component="div">Go</ListItemText>);
+
+    const listItemTextElement = screen.getByTestId("list-item-text");
+    expect(listItemTextElement.tagName).not.toBe("SPAN");
+    expect(listItemTextElement.tagName).toBe("DIV");
+  });
+});