Informational and text templates

tests/components/HeaderLockup.test.tsx

@@ -0,0 +1,83 @@
+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);
+
+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("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 PascalCase props", () => {
+    render(
+      <HeaderLockup
+        title="Test Title"
+        justification="Left"
+        size="L"
+      />,
+    );
+    expect(screen.getByRole("heading", { level: 1 })).toBeInTheDocument();
+  });
+});

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();
+  });
+});

tests/components/TextInput.test.tsx

@@ -1,4 +1,7 @@
 import React from "react";
+import { describe, it, expect } from "vitest";
+import { render, screen } from "@testing-library/react";
+import "@testing-library/jest-dom/vitest";
 import TextInput from "../../app/components/controls/TextInput";
 import { componentTestSuite } from "../utils/componentTestSuite";
 
@@ -13,6 +16,7 @@ componentTestSuite<TextInputProps>({
   requiredProps: ["label"],
   optionalProps: {
     placeholder: "Enter value",
+    inputSize: "medium",
   },
   primaryRole: "textbox",
   testCases: {
@@ -27,3 +31,25 @@ componentTestSuite<TextInputProps>({
     errorProps: { error: true },
   },
 });
+
+describe("TextInput (size tests)", () => {
+  it("renders with medium size by default", () => {
+    const { container } = render(
+      <TextInput label="Test" inputSize="medium" />,
+    );
+    const input = container.querySelector("input");
+    expect(input).toHaveClass("h-[40px]");
+  });
+
+  it("renders with small size", () => {
+    const { container } = render(<TextInput label="Test" inputSize="small" />);
+    const input = container.querySelector("input");
+    expect(input).toHaveClass("h-[32px]");
+  });
+
+  it("accepts PascalCase size prop", () => {
+    const { container } = render(<TextInput label="Test" inputSize="Small" />);
+    const input = container.querySelector("input");
+    expect(input).toHaveClass("h-[32px]");
+  });
+});