Establish cursor rules
This commit is contained in:
adilallo
@@ -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();
|
||||
});
|
||||
});
|
||||
@@ -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();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,93 @@
|
||||
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 IncrementerBlock from "../../app/components/controls/IncrementerBlock";
|
||||
import { componentTestSuite } from "../utils/componentTestSuite";
|
||||
import { renderWithProviders } from "../utils/test-utils";
|
||||
|
||||
type IncrementerBlockProps = React.ComponentProps<typeof IncrementerBlock>;
|
||||
|
||||
componentTestSuite<IncrementerBlockProps>({
|
||||
component: IncrementerBlock,
|
||||
name: "IncrementerBlock",
|
||||
props: {
|
||||
label: "Consensus level",
|
||||
value: 50,
|
||||
onChange: () => {},
|
||||
} as IncrementerBlockProps,
|
||||
requiredProps: ["label", "value", "onChange"],
|
||||
optionalProps: {
|
||||
helperText: "Optional",
|
||||
},
|
||||
primaryRole: "button",
|
||||
testCases: {
|
||||
renders: true,
|
||||
accessibility: true,
|
||||
keyboardNavigation: false,
|
||||
disabledState: false,
|
||||
errorState: false,
|
||||
},
|
||||
});
|
||||
|
||||
describe("IncrementerBlock composition", () => {
|
||||
it("renders the label above the incrementer", () => {
|
||||
renderWithProviders(
|
||||
<IncrementerBlock
|
||||
label="Consensus level"
|
||||
value={75}
|
||||
onChange={() => {}}
|
||||
/>,
|
||||
);
|
||||
|
||||
expect(screen.getByText("Consensus level")).toBeInTheDocument();
|
||||
expect(screen.getByRole("button", { name: /increase/i })).toBeInTheDocument();
|
||||
expect(screen.getByRole("button", { name: /decrease/i })).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("forwards incrementer props (step, min, max) to the inner control", async () => {
|
||||
const user = userEvent.setup();
|
||||
const onChange = vi.fn();
|
||||
renderWithProviders(
|
||||
<IncrementerBlock
|
||||
label="Quorum"
|
||||
value={50}
|
||||
step={10}
|
||||
min={0}
|
||||
max={100}
|
||||
onChange={onChange}
|
||||
/>,
|
||||
);
|
||||
|
||||
await user.click(screen.getByRole("button", { name: /increase/i }));
|
||||
expect(onChange).toHaveBeenCalledWith(60);
|
||||
});
|
||||
|
||||
it("disables both step buttons when disabled is true", () => {
|
||||
renderWithProviders(
|
||||
<IncrementerBlock
|
||||
label="Consensus level"
|
||||
value={50}
|
||||
onChange={() => {}}
|
||||
disabled
|
||||
/>,
|
||||
);
|
||||
|
||||
expect(screen.getByRole("button", { name: /decrease/i })).toBeDisabled();
|
||||
expect(screen.getByRole("button", { name: /increase/i })).toBeDisabled();
|
||||
});
|
||||
|
||||
it("renders helper text when provided", () => {
|
||||
renderWithProviders(
|
||||
<IncrementerBlock
|
||||
label="Quorum"
|
||||
helperText="Required for proposal"
|
||||
value={50}
|
||||
onChange={() => {}}
|
||||
/>,
|
||||
);
|
||||
|
||||
expect(screen.getByText("Required for proposal")).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,77 @@
|
||||
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 InlineTextButton from "../../app/components/buttons/InlineTextButton";
|
||||
import { componentTestSuite } from "../utils/componentTestSuite";
|
||||
import { renderWithProviders } from "../utils/test-utils";
|
||||
|
||||
type InlineTextButtonProps = React.ComponentProps<typeof InlineTextButton>;
|
||||
|
||||
componentTestSuite<InlineTextButtonProps>({
|
||||
component: InlineTextButton,
|
||||
name: "InlineTextButton",
|
||||
props: {
|
||||
children: "Expand",
|
||||
} as InlineTextButtonProps,
|
||||
requiredProps: ["children"],
|
||||
optionalProps: {
|
||||
ariaLabel: "Expand description",
|
||||
},
|
||||
primaryRole: "button",
|
||||
testCases: {
|
||||
renders: true,
|
||||
accessibility: true,
|
||||
keyboardNavigation: true,
|
||||
disabledState: true,
|
||||
errorState: false,
|
||||
},
|
||||
states: {
|
||||
disabledProps: { disabled: true },
|
||||
},
|
||||
});
|
||||
|
||||
describe("InlineTextButton behavior", () => {
|
||||
it("fires onClick when clicked", async () => {
|
||||
const user = userEvent.setup();
|
||||
const onClick = vi.fn();
|
||||
renderWithProviders(
|
||||
<InlineTextButton onClick={onClick}>Expand</InlineTextButton>,
|
||||
);
|
||||
|
||||
await user.click(screen.getByRole("button", { name: /expand/i }));
|
||||
expect(onClick).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
|
||||
it("does not fire onClick when disabled", async () => {
|
||||
const user = userEvent.setup();
|
||||
const onClick = vi.fn();
|
||||
renderWithProviders(
|
||||
<InlineTextButton onClick={onClick} disabled>
|
||||
Expand
|
||||
</InlineTextButton>,
|
||||
);
|
||||
|
||||
await user.click(screen.getByRole("button", { name: /expand/i }));
|
||||
expect(onClick).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it("uses ariaLabel when provided", () => {
|
||||
renderWithProviders(
|
||||
<InlineTextButton ariaLabel="Expand description">Expand</InlineTextButton>,
|
||||
);
|
||||
|
||||
expect(
|
||||
screen.getByRole("button", { name: "Expand description" }),
|
||||
).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("defaults to type='button' to avoid accidental form submits", () => {
|
||||
renderWithProviders(<InlineTextButton>Expand</InlineTextButton>);
|
||||
expect(screen.getByRole("button", { name: /expand/i })).toHaveAttribute(
|
||||
"type",
|
||||
"button",
|
||||
);
|
||||
});
|
||||
});
|
||||
@@ -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();
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user