Informational and text templates

tests/components/NumberedList.test.tsx

@@ -0,0 +1,84 @@
+import React from "react";
+import { describe, it, expect } from "vitest";
+import { render, screen } from "@testing-library/react";
+import "@testing-library/jest-dom/vitest";
+import NumberedList from "../../app/components/type/NumberedList";
+import {
+  componentTestSuite,
+  ComponentTestSuiteConfig,
+} from "../utils/componentTestSuite";
+
+type NumberedListProps = React.ComponentProps<typeof NumberedList>;
+
+const mockItems = [
+  {
+    title: "First step",
+    description: "This is the first step description",
+  },
+  {
+    title: "Second step",
+    description: "This is the second step description",
+  },
+  {
+    title: "Third step",
+    description: "This is the third step description",
+  },
+];
+
+const baseProps: NumberedListProps = {
+  items: mockItems,
+};
+
+const config: ComponentTestSuiteConfig<NumberedListProps> = {
+  component: NumberedList,
+  name: "NumberedList",
+  props: baseProps,
+  requiredProps: ["items"],
+  optionalProps: {
+    size: "M",
+  },
+  primaryRole: "list",
+  testCases: {
+    renders: true,
+    accessibility: true,
+    keyboardNavigation: false,
+    disabledState: false,
+    errorState: false,
+  },
+};
+
+componentTestSuite<NumberedListProps>(config);
+
+describe("NumberedList (behavioral tests)", () => {
+  it("renders all items", () => {
+    render(<NumberedList items={mockItems} />);
+    expect(screen.getByText("First step")).toBeInTheDocument();
+    expect(screen.getByText("Second step")).toBeInTheDocument();
+    expect(screen.getByText("Third step")).toBeInTheDocument();
+  });
+
+  it("renders item descriptions", () => {
+    render(<NumberedList items={mockItems} />);
+    expect(
+      screen.getByText("This is the first step description"),
+    ).toBeInTheDocument();
+  });
+
+  it("renders numbered indicators", () => {
+    const { container } = render(<NumberedList items={mockItems} />);
+    const numbers = container.querySelectorAll("ol > li");
+    expect(numbers).toHaveLength(3);
+  });
+
+  it("accepts size prop", () => {
+    const { container } = render(<NumberedList items={mockItems} size="S" />);
+    const list = container.querySelector("ol");
+    expect(list).toBeInTheDocument();
+  });
+
+  it("accepts PascalCase size prop", () => {
+    const { container } = render(<NumberedList items={mockItems} size="M" />);
+    const list = container.querySelector("ol");
+    expect(list).toBeInTheDocument();
+  });
+});