Text area component with storybook and testing

2025-10-10 12:37:52 -06:00
parent 9c72afdc52
commit b71f0a7dea
8 changed files with 1126 additions and 110 deletions
@@ -0,0 +1,121 @@
+import { expect, test, describe, it, vi } from "vitest";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { axe, toHaveNoViolations } from "jest-axe";
+import TextArea from "../../app/components/TextArea";
+
+expect.extend(toHaveNoViolations);
+
+describe("TextArea Accessibility", () => {
+  test("renders without accessibility violations", async () => {
+    const { container } = render(<TextArea label="Test TextArea" />);
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
+
+  test("has proper label association", () => {
+    render(<TextArea label="Test Label" />);
+    const textarea = screen.getByRole("textbox");
+    const label = screen.getByText("Test Label");
+
+    expect(textarea).toHaveAttribute("id");
+    expect(label).toHaveAttribute("for", textarea.id);
+  });
+
+  test("has proper ARIA attributes", () => {
+    render(<TextArea label="Test Label" name="test-textarea" />);
+    const textarea = screen.getByRole("textbox");
+
+    expect(textarea).toHaveAttribute("id");
+    expect(textarea).toHaveAttribute("name", "test-textarea");
+  });
+
+  test("supports keyboard navigation", async () => {
+    const user = userEvent.setup();
+    render(<TextArea label="Test Label" />);
+
+    const textarea = screen.getByRole("textbox");
+    await user.tab();
+
+    expect(textarea).toHaveFocus();
+  });
+
+  test("announces changes to screen readers", async () => {
+    const user = userEvent.setup();
+    const handleChange = vi.fn();
+    render(<TextArea label="Test Label" onChange={handleChange} />);
+
+    const textarea = screen.getByRole("textbox");
+    await user.type(textarea, "test");
+
+    expect(textarea).toHaveValue("test");
+  });
+
+  test("handles disabled state accessibility", () => {
+    render(<TextArea label="Test Label" disabled />);
+    const textarea = screen.getByRole("textbox");
+
+    expect(textarea).toBeDisabled();
+    expect(textarea).toHaveAttribute("aria-disabled", "true");
+  });
+
+  test("handles error state accessibility", () => {
+    render(<TextArea label="Test Label" error />);
+    const textarea = screen.getByRole("textbox");
+
+    expect(textarea).toHaveAttribute("aria-invalid", "true");
+  });
+
+  test("maintains focus management", async () => {
+    const user = userEvent.setup();
+    render(<TextArea label="Test Label" />);
+
+    const textarea = screen.getByRole("textbox");
+    await user.click(textarea);
+
+    expect(textarea).toHaveFocus();
+  });
+
+  test("supports horizontal label layout", () => {
+    render(<TextArea labelVariant="horizontal" label="Horizontal Label" />);
+    const textarea = screen.getByRole("textbox");
+    const label = screen.getByText("Horizontal Label");
+
+    expect(textarea).toBeInTheDocument();
+    expect(label).toBeInTheDocument();
+  });
+
+  test("handles different sizes accessibility", () => {
+    const { rerender } = render(<TextArea size="small" label="Small" />);
+    let textarea = screen.getByRole("textbox");
+    expect(textarea).toBeInTheDocument();
+
+    rerender(<TextArea size="medium" label="Medium" />);
+    textarea = screen.getByRole("textbox");
+    expect(textarea).toBeInTheDocument();
+
+    rerender(<TextArea size="large" label="Large" />);
+    textarea = screen.getByRole("textbox");
+    expect(textarea).toBeInTheDocument();
+  });
+
+  test("maintains proper contrast ratios", () => {
+    render(<TextArea label="Test Label" />);
+    const textarea = screen.getByRole("textbox");
+    const label = screen.getByText("Test Label");
+
+    expect(textarea).toHaveClass("text-[var(--color-content-default-primary)]");
+    expect(label).toHaveClass("text-[var(--color-content-default-secondary)]");
+  });
+
+  test("supports screen reader announcements for state changes", async () => {
+    const user = userEvent.setup();
+    render(<TextArea label="Test Label" />);
+
+    const textarea = screen.getByRole("textbox");
+    await user.click(textarea);
+    await user.type(textarea, "Hello");
+
+    expect(textarea).toHaveValue("Hello");
+  });
+});