adilallo
93 lines
2.7 KiB
TypeScript
93 lines
2.7 KiB
TypeScript
import React from "react";
|
|
import { describe, it, expect } from "vitest";
|
|
import { render, screen } from "@testing-library/react";
|
|
import "@testing-library/jest-dom/vitest";
|
|
import HeaderLockup from "../../app/components/type/HeaderLockup";
|
|
import {
|
|
componentTestSuite,
|
|
ComponentTestSuiteConfig,
|
|
} from "../utils/componentTestSuite";
|
|
|
|
type HeaderLockupProps = React.ComponentProps<typeof HeaderLockup>;
|
|
|
|
const baseProps: HeaderLockupProps = {
|
|
title: "Test Title",
|
|
};
|
|
|
|
const config: ComponentTestSuiteConfig<HeaderLockupProps> = {
|
|
component: HeaderLockup,
|
|
name: "HeaderLockup",
|
|
props: baseProps,
|
|
requiredProps: ["title"],
|
|
optionalProps: {
|
|
description: "Test description",
|
|
justification: "left",
|
|
size: "L",
|
|
},
|
|
primaryRole: "heading",
|
|
testCases: {
|
|
renders: true,
|
|
accessibility: true,
|
|
keyboardNavigation: false,
|
|
disabledState: false,
|
|
errorState: false,
|
|
},
|
|
};
|
|
|
|
componentTestSuite<HeaderLockupProps>(config);
|
|
|
|
// Pure presentational; no provider context needed.
|
|
describe("HeaderLockup (behavioral tests)", () => {
|
|
it("renders title", () => {
|
|
render(<HeaderLockup title="Test Title" />);
|
|
expect(screen.getByRole("heading", { level: 1 })).toHaveTextContent(
|
|
"Test Title",
|
|
);
|
|
});
|
|
|
|
it("renders description when provided", () => {
|
|
render(<HeaderLockup title="Test Title" description="Test description" />);
|
|
expect(screen.getByText("Test description")).toBeInTheDocument();
|
|
});
|
|
|
|
it("renders ReactNode description (rich inline)", () => {
|
|
render(
|
|
<HeaderLockup
|
|
title="Test Title"
|
|
description={
|
|
<>
|
|
Before <span className="underline">link</span> after
|
|
</>
|
|
}
|
|
/>,
|
|
);
|
|
expect(screen.getByText(/Before/)).toBeInTheDocument();
|
|
expect(screen.getByText("link")).toBeInTheDocument();
|
|
expect(screen.getByText(/after/)).toBeInTheDocument();
|
|
});
|
|
|
|
it("does not render description when not provided", () => {
|
|
const { container } = render(<HeaderLockup title="Test Title" />);
|
|
const description = container.querySelector("p");
|
|
expect(description).not.toBeInTheDocument();
|
|
});
|
|
|
|
it("accepts justification prop", () => {
|
|
const { container } = render(
|
|
<HeaderLockup title="Test Title" justification="center" />,
|
|
);
|
|
const heading = container.querySelector("h1");
|
|
expect(heading).toHaveClass("text-center");
|
|
});
|
|
|
|
it("accepts size prop", () => {
|
|
render(<HeaderLockup title="Test Title" size="M" />);
|
|
expect(screen.getByRole("heading", { level: 1 })).toBeInTheDocument();
|
|
});
|
|
|
|
it("accepts justification and size props", () => {
|
|
render(<HeaderLockup title="Test Title" justification="left" size="L" />);
|
|
expect(screen.getByRole("heading", { level: 1 })).toBeInTheDocument();
|
|
});
|
|
});
|