Establish cursor rules

tests/components/Incrementer.test.tsx

@@ -0,0 +1,125 @@
+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 Incrementer from "../../app/components/controls/Incrementer";
+import { componentTestSuite } from "../utils/componentTestSuite";
+import { renderWithProviders } from "../utils/test-utils";
+
+type IncrementerProps = React.ComponentProps<typeof Incrementer>;
+
+componentTestSuite<IncrementerProps>({
+  component: Incrementer,
+  name: "Incrementer",
+  props: {
+    value: 5,
+    onChange: () => {},
+  } as IncrementerProps,
+  requiredProps: ["value", "onChange"],
+  optionalProps: {
+    step: 1,
+  },
+  primaryRole: "button",
+  testCases: {
+    renders: true,
+    accessibility: true,
+    keyboardNavigation: false,
+    disabledState: false,
+    errorState: false,
+  },
+});
+
+describe("Incrementer behavior", () => {
+  it("calls onChange with value + step when increment is clicked", async () => {
+    const user = userEvent.setup();
+    const onChange = vi.fn();
+    renderWithProviders(
+      <Incrementer value={5} step={2} onChange={onChange} />,
+    );
+
+    await user.click(screen.getByRole("button", { name: /increase/i }));
+    expect(onChange).toHaveBeenCalledWith(7);
+  });
+
+  it("calls onChange with value - step when decrement is clicked", async () => {
+    const user = userEvent.setup();
+    const onChange = vi.fn();
+    renderWithProviders(
+      <Incrementer value={5} step={2} onChange={onChange} />,
+    );
+
+    await user.click(screen.getByRole("button", { name: /decrease/i }));
+    expect(onChange).toHaveBeenCalledWith(3);
+  });
+
+  it("disables the decrement button when value is at min", () => {
+    renderWithProviders(
+      <Incrementer value={0} min={0} max={10} onChange={() => {}} />,
+    );
+
+    expect(screen.getByRole("button", { name: /decrease/i })).toBeDisabled();
+    expect(screen.getByRole("button", { name: /increase/i })).not.toBeDisabled();
+  });
+
+  it("disables the increment button when value is at max", () => {
+    renderWithProviders(
+      <Incrementer value={10} min={0} max={10} onChange={() => {}} />,
+    );
+
+    expect(screen.getByRole("button", { name: /increase/i })).toBeDisabled();
+    expect(screen.getByRole("button", { name: /decrease/i })).not.toBeDisabled();
+  });
+
+  it("clamps the next value to min/max bounds", async () => {
+    const user = userEvent.setup();
+    const onChange = vi.fn();
+    renderWithProviders(
+      <Incrementer
+        value={9}
+        step={5}
+        min={0}
+        max={10}
+        onChange={onChange}
+      />,
+    );
+
+    await user.click(screen.getByRole("button", { name: /increase/i }));
+    expect(onChange).toHaveBeenCalledWith(10);
+  });
+
+  it("renders the formatted value when formatValue is provided", () => {
+    renderWithProviders(
+      <Incrementer
+        value={75}
+        onChange={() => {}}
+        formatValue={(n) => `${n}%`}
+      />,
+    );
+
+    expect(screen.getByText("75%")).toBeInTheDocument();
+  });
+
+  it("disables both step buttons when disabled is true", () => {
+    renderWithProviders(
+      <Incrementer value={5} onChange={() => {}} disabled />,
+    );
+
+    expect(screen.getByRole("button", { name: /decrease/i })).toBeDisabled();
+    expect(screen.getByRole("button", { name: /increase/i })).toBeDisabled();
+  });
+
+  it("respects custom aria-labels", () => {
+    renderWithProviders(
+      <Incrementer
+        value={5}
+        onChange={() => {}}
+        decrementAriaLabel="Remove one"
+        incrementAriaLabel="Add one"
+      />,
+    );
+
+    expect(screen.getByRole("button", { name: "Remove one" })).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: "Add one" })).toBeInTheDocument();
+  });
+});