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");
+  });
+});
@@ -0,0 +1,280 @@
+import React from "react";
+import { expect, test, describe, it, vi } from "vitest";
+import { render, screen, fireEvent } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import TextArea from "../../app/components/TextArea";
+
+// Test form component for integration testing
+const TestForm = () => {
+  const [formData, setFormData] = React.useState({
+    textarea1: "",
+    textarea2: "",
+  });
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+  };
+
+  return (
+    <form onSubmit={handleSubmit}>
+      <TextArea
+        label="First TextArea"
+        name="textarea1"
+        value={formData.textarea1}
+        onChange={(e) =>
+          setFormData((prev) => ({ ...prev, textarea1: e.target.value }))
+        }
+        placeholder="Enter first text..."
+      />
+      <TextArea
+        label="Second TextArea"
+        name="textarea2"
+        value={formData.textarea2}
+        onChange={(e) =>
+          setFormData((prev) => ({ ...prev, textarea2: e.target.value }))
+        }
+        placeholder="Enter second text..."
+      />
+      <button type="submit">Submit</button>
+    </form>
+  );
+};
+
+// Dynamic TextArea component for prop changes testing
+const DynamicTextArea = ({ size, labelVariant, state, disabled, error }) => {
+  const [value, setValue] = React.useState("");
+
+  return (
+    <TextArea
+      label="Dynamic TextArea"
+      value={value}
+      onChange={(e) => setValue(e.target.value)}
+      size={size}
+      labelVariant={labelVariant}
+      state={state}
+      disabled={disabled}
+      error={error}
+      placeholder="Enter text..."
+    />
+  );
+};
+
+describe("TextArea Integration Tests", () => {
+  test("handles form submission with multiple textareas", async () => {
+    const user = userEvent.setup();
+    render(<TestForm />);
+
+    const firstTextarea = screen.getByPlaceholderText("Enter first text...");
+    const secondTextarea = screen.getByPlaceholderText("Enter second text...");
+    const submitButton = screen.getByRole("button", { name: /Submit/ });
+
+    await user.type(firstTextarea, "First content");
+    await user.type(secondTextarea, "Second content");
+
+    expect(firstTextarea).toHaveValue("First content");
+    expect(secondTextarea).toHaveValue("Second content");
+
+    await user.click(submitButton);
+    // Form submission should not cause errors
+  });
+
+  test("handles keyboard navigation between textareas", async () => {
+    const user = userEvent.setup();
+    render(<TestForm />);
+
+    const firstTextarea = screen.getByPlaceholderText("Enter first text...");
+    const secondTextarea = screen.getByPlaceholderText("Enter second text...");
+
+    await user.click(firstTextarea);
+    expect(firstTextarea).toHaveFocus();
+
+    await user.tab();
+    expect(secondTextarea).toHaveFocus();
+  });
+
+  test("handles dynamic prop changes", () => {
+    const { rerender } = render(<DynamicTextArea size="small" />);
+    let textarea = screen.getByRole("textbox");
+    expect(textarea).toHaveClass("h-[60px]");
+
+    rerender(<DynamicTextArea size="medium" />);
+    textarea = screen.getByRole("textbox");
+    expect(textarea).toHaveClass("h-[100px]");
+
+    rerender(<DynamicTextArea size="large" />);
+    textarea = screen.getByRole("textbox");
+    expect(textarea).toHaveClass("h-[150px]");
+  });
+
+  test("handles state changes", () => {
+    const { rerender } = render(<DynamicTextArea state="default" />);
+    let textarea = screen.getByRole("textbox");
+    expect(textarea).toHaveClass(
+      "border-[var(--color-border-default-tertiary)]"
+    );
+
+    rerender(<DynamicTextArea state="hover" />);
+    textarea = screen.getByRole("textbox");
+    expect(textarea).toHaveClass(
+      "shadow-[0_0_0_2px_var(--color-border-default-tertiary)]"
+    );
+
+    rerender(<DynamicTextArea state="focus" />);
+    textarea = screen.getByRole("textbox");
+    expect(textarea).toHaveClass(
+      "border-[var(--color-border-default-utility-info)]",
+      "shadow-[0_0_5px_3px_#3281F8]"
+    );
+  });
+
+  test("handles disabled state changes", () => {
+    const { rerender } = render(<DynamicTextArea disabled={false} />);
+    let textarea = screen.getByRole("textbox");
+    expect(textarea).not.toBeDisabled();
+
+    rerender(<DynamicTextArea disabled={true} />);
+    textarea = screen.getByRole("textbox");
+    expect(textarea).toBeDisabled();
+  });
+
+  test("handles error state changes", () => {
+    const { rerender } = render(<DynamicTextArea error={false} />);
+    let textarea = screen.getByRole("textbox");
+    expect(textarea).toHaveClass(
+      "border-[var(--color-border-default-tertiary)]"
+    );
+
+    rerender(<DynamicTextArea error={true} />);
+    textarea = screen.getByRole("textbox");
+    expect(textarea).toHaveClass(
+      "border-[var(--color-border-default-utility-negative)]"
+    );
+  });
+
+  test("handles label variant changes", () => {
+    const { rerender } = render(<DynamicTextArea labelVariant="default" />);
+    let container = screen.getByRole("textbox").closest("div").parentElement;
+    expect(container).toHaveClass("flex", "flex-col");
+
+    rerender(<DynamicTextArea labelVariant="horizontal" />);
+    container = screen.getByRole("textbox").closest("div").parentElement;
+    expect(container).toHaveClass("flex", "items-center", "gap-[12px]");
+  });
+
+  test("handles text input and changes", async () => {
+    const user = userEvent.setup();
+    render(<DynamicTextArea />);
+
+    const textarea = screen.getByRole("textbox");
+    await user.type(textarea, "Hello World");
+
+    expect(textarea).toHaveValue("Hello World");
+  });
+
+  test("handles focus and blur events", async () => {
+    const user = userEvent.setup();
+    const handleFocus = vi.fn();
+    const handleBlur = vi.fn();
+
+    render(
+      <TextArea
+        label="Test TextArea"
+        onFocus={handleFocus}
+        onBlur={handleBlur}
+      />
+    );
+
+    const textarea = screen.getByRole("textbox");
+
+    await user.click(textarea);
+    expect(handleFocus).toHaveBeenCalled();
+
+    await user.tab();
+    expect(handleBlur).toHaveBeenCalled();
+  });
+
+  test("handles multiple textareas with different configurations", () => {
+    render(
+      <div>
+        <TextArea
+          size="small"
+          label="Small TextArea"
+          placeholder="Small placeholder"
+        />
+        <TextArea
+          size="medium"
+          labelVariant="horizontal"
+          label="Medium Horizontal"
+          placeholder="Medium placeholder"
+        />
+        <TextArea
+          size="large"
+          label="Large TextArea"
+          placeholder="Large placeholder"
+        />
+      </div>
+    );
+
+    expect(
+      screen.getByPlaceholderText("Small placeholder")
+    ).toBeInTheDocument();
+    expect(
+      screen.getByPlaceholderText("Medium placeholder")
+    ).toBeInTheDocument();
+    expect(
+      screen.getByPlaceholderText("Large placeholder")
+    ).toBeInTheDocument();
+  });
+
+  test("handles form validation with error states", () => {
+    render(
+      <div>
+        <TextArea label="Valid TextArea" placeholder="Valid input" />
+        <TextArea label="Invalid TextArea" placeholder="Invalid input" error />
+        <TextArea
+          label="Disabled TextArea"
+          placeholder="Disabled input"
+          disabled
+        />
+      </div>
+    );
+
+    const validTextarea = screen.getByPlaceholderText("Valid input");
+    const invalidTextarea = screen.getByPlaceholderText("Invalid input");
+    const disabledTextarea = screen.getByPlaceholderText("Disabled input");
+
+    expect(validTextarea).toHaveClass(
+      "border-[var(--color-border-default-tertiary)]"
+    );
+    expect(invalidTextarea).toHaveClass(
+      "border-[var(--color-border-default-utility-negative)]"
+    );
+    expect(disabledTextarea).toBeDisabled();
+  });
+
+  test("handles performance with multiple re-renders", () => {
+    const { rerender } = render(<DynamicTextArea />);
+
+    // Simulate multiple re-renders
+    for (let i = 0; i < 10; i++) {
+      rerender(<DynamicTextArea size={i % 2 === 0 ? "small" : "large"} />);
+    }
+
+    const textarea = screen.getByRole("textbox");
+    expect(textarea).toBeInTheDocument();
+  });
+
+  test("handles accessibility with screen readers", async () => {
+    const user = userEvent.setup();
+    render(<TextArea label="Accessible TextArea" />);
+
+    const textarea = screen.getByRole("textbox");
+    const label = screen.getByText("Accessible TextArea");
+
+    expect(textarea).toHaveAttribute("id");
+    expect(label).toHaveAttribute("for", textarea.id);
+
+    await user.click(textarea);
+    expect(textarea).toHaveFocus();
+  });
+});
@@ -0,0 +1,203 @@
+import { expect, test, describe, it, vi } from "vitest";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import TextArea from "../../app/components/TextArea";
+
+describe("TextArea", () => {
+  test("renders with default props", () => {
+    render(<TextArea />);
+    const textarea = screen.getByRole("textbox");
+    expect(textarea).toBeInTheDocument();
+  });
+
+  test("renders with label", () => {
+    render(<TextArea label="Test Label" />);
+    expect(screen.getByText("Test Label")).toBeInTheDocument();
+    expect(screen.getByLabelText("Test Label")).toBeInTheDocument();
+  });
+
+  test("renders with placeholder", () => {
+    render(<TextArea placeholder="Enter text..." />);
+    expect(screen.getByPlaceholderText("Enter text...")).toBeInTheDocument();
+  });
+
+  test("renders with value", () => {
+    render(<TextArea value="Test value" />);
+    const textarea = screen.getByRole("textbox");
+    expect(textarea).toHaveValue("Test value");
+  });
+
+  test("renders with different sizes", () => {
+    const { rerender } = render(<TextArea size="small" label="Small" />);
+    let textarea = screen.getByRole("textbox");
+    expect(textarea).toHaveClass("h-[60px]");
+
+    rerender(<TextArea size="medium" label="Medium" />);
+    textarea = screen.getByRole("textbox");
+    expect(textarea).toHaveClass("h-[100px]");
+
+    rerender(<TextArea size="large" label="Large" />);
+    textarea = screen.getByRole("textbox");
+    expect(textarea).toHaveClass("h-[150px]");
+  });
+
+  test("renders with horizontal label variant", () => {
+    render(<TextArea labelVariant="horizontal" label="Horizontal Label" />);
+    const container = screen.getByRole("textbox").closest("div").parentElement;
+    expect(container).toHaveClass("flex", "items-center", "gap-[12px]");
+  });
+
+  test("renders with default label variant", () => {
+    render(<TextArea labelVariant="default" label="Default Label" />);
+    const container = screen.getByRole("textbox").closest("div").parentElement;
+    expect(container).toHaveClass("flex", "flex-col");
+  });
+
+  test("applies disabled state", () => {
+    render(<TextArea disabled />);
+    const textarea = screen.getByRole("textbox");
+    expect(textarea).toBeDisabled();
+  });
+
+  test("applies error state", () => {
+    render(<TextArea error />);
+    const textarea = screen.getByRole("textbox");
+    expect(textarea).toHaveClass(
+      "border-[var(--color-border-default-utility-negative)]"
+    );
+  });
+
+  test("applies different states", () => {
+    const { rerender } = render(<TextArea state="active" />);
+    let textarea = screen.getByRole("textbox");
+    expect(textarea).toHaveClass(
+      "border-[var(--color-border-default-tertiary)]"
+    );
+
+    rerender(<TextArea state="hover" />);
+    textarea = screen.getByRole("textbox");
+    expect(textarea).toHaveClass(
+      "shadow-[0_0_0_2px_var(--color-border-default-tertiary)]"
+    );
+
+    rerender(<TextArea state="focus" />);
+    textarea = screen.getByRole("textbox");
+    expect(textarea).toHaveClass(
+      "border-[var(--color-border-default-utility-info)]",
+      "shadow-[0_0_5px_3px_#3281F8]"
+    );
+  });
+
+  test("calls onChange when text changes", async () => {
+    const user = userEvent.setup();
+    const handleChange = vi.fn();
+    render(<TextArea onChange={handleChange} />);
+
+    const textarea = screen.getByRole("textbox");
+    await user.type(textarea, "test");
+
+    expect(handleChange).toHaveBeenCalledTimes(4);
+  });
+
+  test("calls onFocus when focused", async () => {
+    const user = userEvent.setup();
+    const handleFocus = vi.fn();
+    render(<TextArea onFocus={handleFocus} />);
+
+    const textarea = screen.getByRole("textbox");
+    await user.click(textarea);
+
+    expect(handleFocus).toHaveBeenCalled();
+  });
+
+  test("calls onBlur when blurred", async () => {
+    const user = userEvent.setup();
+    const handleBlur = vi.fn();
+    render(<TextArea onBlur={handleBlur} />);
+
+    const textarea = screen.getByRole("textbox");
+    await user.click(textarea);
+    await user.tab();
+
+    expect(handleBlur).toHaveBeenCalled();
+  });
+
+  test("does not call onChange when disabled", async () => {
+    const user = userEvent.setup();
+    const handleChange = vi.fn();
+    render(<TextArea disabled onChange={handleChange} />);
+
+    const textarea = screen.getByRole("textbox");
+    await user.type(textarea, "test");
+
+    expect(handleChange).not.toHaveBeenCalled();
+  });
+
+  test("applies custom className", () => {
+    render(<TextArea className="custom-class" />);
+    const textarea = screen.getByRole("textbox");
+    expect(textarea).toHaveClass("custom-class");
+  });
+
+  test("forwards ref", () => {
+    const ref = vi.fn();
+    render(<TextArea ref={ref} />);
+    expect(ref).toHaveBeenCalled();
+  });
+
+  test("applies correct height for small horizontal label", () => {
+    render(
+      <TextArea
+        size="small"
+        labelVariant="horizontal"
+        label="Small Horizontal"
+      />
+    );
+    const textarea = screen.getByRole("textbox");
+    expect(textarea).toHaveClass("h-[60px]");
+  });
+
+  test("applies correct height for medium horizontal label", () => {
+    render(
+      <TextArea
+        size="medium"
+        labelVariant="horizontal"
+        label="Medium Horizontal"
+      />
+    );
+    const textarea = screen.getByRole("textbox");
+    expect(textarea).toHaveClass("h-[110px]");
+  });
+
+  test("applies correct border radius for different sizes", () => {
+    const { rerender } = render(<TextArea size="small" />);
+    let textarea = screen.getByRole("textbox");
+    expect(textarea).toHaveStyle({
+      borderRadius: "var(--measures-radius-xsmall)",
+    });
+
+    rerender(<TextArea size="medium" />);
+    textarea = screen.getByRole("textbox");
+    expect(textarea).toHaveStyle({
+      borderRadius: "var(--measures-radius-xsmall)",
+    });
+
+    rerender(<TextArea size="large" />);
+    textarea = screen.getByRole("textbox");
+    expect(textarea).toHaveStyle({
+      borderRadius: "var(--measures-radius-small)",
+    });
+  });
+
+  test("applies correct text color", () => {
+    render(<TextArea />);
+    const textarea = screen.getByRole("textbox");
+    expect(textarea).toHaveClass("text-[var(--color-content-default-primary)]");
+  });
+
+  test("applies correct label color", () => {
+    render(<TextArea label="Test Label" />);
+    const label = screen.getByText("Test Label");
+    expect(label).toHaveClass("text-[var(--color-content-default-secondary)]");
+  });
+});