Establish cursor rules

2026-04-18 09:33:24 -06:00
parent 4854c49c4a
commit f866d11ff8
30 changed files with 1711 additions and 144 deletions
@@ -0,0 +1,122 @@
+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 ApplicableScopeField from "../../app/create/components/ApplicableScopeField";
+import { componentTestSuite } from "../utils/componentTestSuite";
+import { renderWithProviders } from "../utils/test-utils";
+
+type ApplicableScopeFieldProps = React.ComponentProps<
+  typeof ApplicableScopeField
+>;
+
+componentTestSuite<ApplicableScopeFieldProps>({
+  component: ApplicableScopeField,
+  name: "ApplicableScopeField",
+  props: {
+    label: "Applicable Scope",
+    addLabel: "Add Applicable Scope",
+    scopes: ["Finance", "Operations"],
+    selectedScopes: ["Finance"],
+    onToggleScope: () => {},
+    onAddScope: () => {},
+  } as ApplicableScopeFieldProps,
+  requiredProps: ["label", "addLabel"],
+  optionalProps: {
+    inputPlaceholder: "Enter scope",
+  },
+  primaryRole: "button",
+  testCases: {
+    renders: true,
+    accessibility: true,
+    keyboardNavigation: false,
+    disabledState: false,
+    errorState: false,
+  },
+});
+
+describe("ApplicableScopeField behavior", () => {
+  const baseProps: ApplicableScopeFieldProps = {
+    label: "Applicable Scope",
+    addLabel: "Add Applicable Scope",
+    scopes: ["Finance", "Operations", "Product"],
+    selectedScopes: ["Finance"],
+    onToggleScope: () => {},
+    onAddScope: () => {},
+  };
+
+  it("renders each scope as a chip", () => {
+    renderWithProviders(<ApplicableScopeField {...baseProps} />);
+
+    expect(screen.getByRole("button", { name: /Deselect Finance/i })).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: /Select Operations/i })).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: /Select Product/i })).toBeInTheDocument();
+  });
+
+  it("calls onToggleScope when a chip is clicked", async () => {
+    const user = userEvent.setup();
+    const onToggleScope = vi.fn();
+    renderWithProviders(
+      <ApplicableScopeField {...baseProps} onToggleScope={onToggleScope} />,
+    );
+
+    await user.click(screen.getByRole("button", { name: /Select Operations/i }));
+    expect(onToggleScope).toHaveBeenCalledWith("Operations");
+  });
+
+  it("reveals the inline input when '+ Add' is clicked", async () => {
+    const user = userEvent.setup();
+    renderWithProviders(<ApplicableScopeField {...baseProps} />);
+
+    await user.click(screen.getByRole("button", { name: /Add Applicable Scope/i }));
+    expect(
+      screen.getByRole("textbox", { name: /Add Applicable Scope/i }),
+    ).toBeInTheDocument();
+  });
+
+  it("calls onAddScope with trimmed value on Enter", async () => {
+    const user = userEvent.setup();
+    const onAddScope = vi.fn();
+    renderWithProviders(
+      <ApplicableScopeField {...baseProps} onAddScope={onAddScope} />,
+    );
+
+    await user.click(screen.getByRole("button", { name: /Add Applicable Scope/i }));
+    const input = screen.getByRole("textbox", { name: /Add Applicable Scope/i });
+    await user.type(input, "  People  {Enter}");
+
+    expect(onAddScope).toHaveBeenCalledWith("People");
+  });
+
+  it("does not call onAddScope for duplicates already in scopes", async () => {
+    const user = userEvent.setup();
+    const onAddScope = vi.fn();
+    renderWithProviders(
+      <ApplicableScopeField {...baseProps} onAddScope={onAddScope} />,
+    );
+
+    await user.click(screen.getByRole("button", { name: /Add Applicable Scope/i }));
+    const input = screen.getByRole("textbox", { name: /Add Applicable Scope/i });
+    await user.type(input, "Finance{Enter}");
+
+    expect(onAddScope).not.toHaveBeenCalled();
+  });
+
+  it("dismisses the inline input on Escape without calling onAddScope", async () => {
+    const user = userEvent.setup();
+    const onAddScope = vi.fn();
+    renderWithProviders(
+      <ApplicableScopeField {...baseProps} onAddScope={onAddScope} />,
+    );
+
+    await user.click(screen.getByRole("button", { name: /Add Applicable Scope/i }));
+    const input = screen.getByRole("textbox", { name: /Add Applicable Scope/i });
+    await user.type(input, "People{Escape}");
+
+    expect(onAddScope).not.toHaveBeenCalled();
+    expect(
+      screen.queryByRole("textbox", { name: /Add Applicable Scope/i }),
+    ).not.toBeInTheDocument();
+  });
+});