Establish cursor rules

tests/components/ModalTextAreaField.test.tsx

@@ -0,0 +1,88 @@
+import React from "react";
+import { describe, it, expect, vi } from "vitest";
+import { screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import "@testing-library/jest-dom/vitest";
+import ModalTextAreaField from "../../app/create/components/ModalTextAreaField";
+import { componentTestSuite } from "../utils/componentTestSuite";
+import { renderWithProviders } from "../utils/test-utils";
+
+type ModalTextAreaFieldProps = React.ComponentProps<typeof ModalTextAreaField>;
+
+componentTestSuite<ModalTextAreaFieldProps>({
+  component: ModalTextAreaField,
+  name: "ModalTextAreaField",
+  props: {
+    label: "Description",
+    value: "",
+    onChange: () => {},
+  } as ModalTextAreaFieldProps,
+  requiredProps: ["label"],
+  optionalProps: {
+    placeholder: "What does this cover?",
+  },
+  primaryRole: "textbox",
+  testCases: {
+    renders: true,
+    accessibility: true,
+    keyboardNavigation: false,
+    disabledState: true,
+    errorState: false,
+  },
+  states: {
+    disabledProps: { disabled: true },
+  },
+});
+
+describe("ModalTextAreaField behavior", () => {
+  it("renders the label and a textbox wired together", () => {
+    renderWithProviders(
+      <ModalTextAreaField
+        label="Core principle"
+        value=""
+        onChange={() => {}}
+      />,
+    );
+
+    expect(screen.getByText("Core principle")).toBeInTheDocument();
+    expect(
+      screen.getByRole("textbox", { name: /Core principle/i }),
+    ).toBeInTheDocument();
+  });
+
+  it("calls onChange with the new value string (not the event)", async () => {
+    const user = userEvent.setup();
+    const onChange = vi.fn();
+    renderWithProviders(
+      <ModalTextAreaField label="Notes" value="" onChange={onChange} />,
+    );
+
+    const textbox = screen.getByRole("textbox", { name: /Notes/i });
+    await user.type(textbox, "A");
+
+    expect(onChange).toHaveBeenCalledWith("A");
+  });
+
+  it("forwards placeholder and current value", () => {
+    renderWithProviders(
+      <ModalTextAreaField
+        label="Notes"
+        value="hello"
+        onChange={() => {}}
+        placeholder="Type here"
+      />,
+    );
+
+    const textbox = screen.getByRole("textbox", { name: /Notes/i });
+    expect(textbox).toHaveValue("hello");
+    expect(textbox).toHaveAttribute("placeholder", "Type here");
+  });
+
+  it("disables the textarea when disabled is true", () => {
+    renderWithProviders(
+      <ModalTextAreaField label="Notes" value="" onChange={() => {}} disabled />,
+    );
+
+    expect(screen.getByRole("textbox", { name: /Notes/i })).toBeDisabled();
+  });
+});