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

118 lines
3.7 KiB
TypeScript

/* 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");
});
});