45 lines
1.5 KiB
TypeScript
45 lines
1.5 KiB
TypeScript
import "@testing-library/jest-dom/vitest";
|
|
import userEvent from "@testing-library/user-event";
|
|
import { render, screen } from "@testing-library/react";
|
|
import { describe, it, expect } from "vitest";
|
|
import Accordion from "../../../app/components/layout/Accordion";
|
|
|
|
describe("Accordion", () => {
|
|
it("toggles panel content", async () => {
|
|
const user = userEvent.setup();
|
|
|
|
render(
|
|
<Accordion title="Question" defaultOpen={false}>
|
|
Answer copy
|
|
</Accordion>,
|
|
);
|
|
|
|
expect(screen.queryByText("Answer copy")).not.toBeInTheDocument();
|
|
|
|
await user.click(screen.getByRole("button", { name: "Question" }));
|
|
|
|
expect(screen.getByText("Answer copy")).toBeInTheDocument();
|
|
});
|
|
|
|
it("stacks FAQ size variants at lg and xl", () => {
|
|
render(
|
|
<Accordion size="s" lgSize="m" xlSize="l" title="Question">
|
|
Answer copy
|
|
</Accordion>,
|
|
);
|
|
|
|
const button = screen.getByRole("button", { name: "Question" });
|
|
expect(button).toHaveClass("min-h-[88px]");
|
|
expect(button).toHaveClass("lg:min-h-[104px]");
|
|
expect(button).toHaveClass("xl:min-h-[135px]");
|
|
expect(button).toHaveClass("xl:gap-[var(--spacing-scale-048)]");
|
|
|
|
const title = screen.getByText("Question");
|
|
expect(title).toHaveClass("text-[14px]");
|
|
expect(title).toHaveClass("lg:text-large-label");
|
|
expect(title).toHaveClass("xl:text-x-large-label");
|
|
expect(title).toHaveClass("xl:font-normal");
|
|
expect(title).toHaveClass("xl:leading-7");
|
|
});
|
|
});
|