Create and adjust rule card tests
This commit is contained in:
adilallo
@@ -0,0 +1,97 @@
|
||||
import { describe, it, expect } from "vitest";
|
||||
import { screen } from "@testing-library/react";
|
||||
import { renderWithProviders as render } from "../utils/test-utils";
|
||||
import InputLabel from "../../app/components/InputLabel";
|
||||
import {
|
||||
componentTestSuite,
|
||||
type ComponentTestSuiteConfig,
|
||||
} from "../utils/componentTestSuite";
|
||||
|
||||
type Props = React.ComponentProps<typeof InputLabel>;
|
||||
|
||||
const config: ComponentTestSuiteConfig<Props> = {
|
||||
component: InputLabel,
|
||||
name: "InputLabel",
|
||||
props: {
|
||||
label: "Test Label",
|
||||
helpIcon: false,
|
||||
asterisk: false,
|
||||
helperText: false,
|
||||
size: "S",
|
||||
palette: "Default",
|
||||
} as Props,
|
||||
requiredProps: ["label"],
|
||||
optionalProps: {
|
||||
helpIcon: true,
|
||||
asterisk: true,
|
||||
helperText: true,
|
||||
size: "M",
|
||||
palette: "Inverse",
|
||||
},
|
||||
primaryRole: undefined, // InputLabel is not directly interactive
|
||||
testCases: {
|
||||
renders: true,
|
||||
accessibility: true,
|
||||
keyboardNavigation: false, // Not directly interactive
|
||||
disabledState: false,
|
||||
errorState: false,
|
||||
},
|
||||
};
|
||||
|
||||
componentTestSuite<Props>(config);
|
||||
|
||||
describe("InputLabel – behaviour specifics", () => {
|
||||
it("renders label text", () => {
|
||||
render(<InputLabel label="Test Label" />);
|
||||
expect(screen.getByText("Test Label")).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("shows help icon when helpIcon is true", () => {
|
||||
render(<InputLabel label="Test Label" helpIcon={true} />);
|
||||
const helpIcon = screen.getByAltText("Help");
|
||||
expect(helpIcon).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("shows asterisk when asterisk is true", () => {
|
||||
render(<InputLabel label="Test Label" asterisk={true} />);
|
||||
expect(screen.getByText("*")).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("shows helper text when helperText is true", () => {
|
||||
render(<InputLabel label="Test Label" helperText={true} />);
|
||||
expect(screen.getByText("Optional text")).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("shows custom helper text when helperText is a string", () => {
|
||||
render(<InputLabel label="Test Label" helperText="Custom helper" />);
|
||||
expect(screen.getByText("Custom helper")).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("applies size S styling", () => {
|
||||
render(<InputLabel label="Test Label" size="S" />);
|
||||
const label = screen.getByText("Test Label");
|
||||
expect(label).toHaveClass("text-[length:var(--sizing-350,14px)]");
|
||||
});
|
||||
|
||||
it("applies size M styling", () => {
|
||||
render(<InputLabel label="Test Label" size="M" />);
|
||||
const label = screen.getByText("Test Label");
|
||||
expect(label).toHaveClass("text-[length:var(--sizing-400,16px)]");
|
||||
});
|
||||
|
||||
it("applies Default palette styling", () => {
|
||||
render(<InputLabel label="Test Label" palette="Default" />);
|
||||
const label = screen.getByText("Test Label");
|
||||
expect(label).toHaveClass(
|
||||
"text-[color:var(--color-content-default-secondary,#d2d2d2)]",
|
||||
);
|
||||
});
|
||||
|
||||
it("applies Inverse palette styling", () => {
|
||||
render(<InputLabel label="Test Label" palette="Inverse" />);
|
||||
const label = screen.getByText("Test Label");
|
||||
expect(label).toHaveClass(
|
||||
"text-[color:var(--color-content-inverse-secondary,#1f1f1f)]",
|
||||
);
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,189 @@
|
||||
import { describe, it, expect, vi } from "vitest";
|
||||
import { screen } from "@testing-library/react";
|
||||
import userEvent from "@testing-library/user-event";
|
||||
import { renderWithProviders as render } from "../utils/test-utils";
|
||||
import MultiSelect from "../../app/components/MultiSelect";
|
||||
import {
|
||||
componentTestSuite,
|
||||
type ComponentTestSuiteConfig,
|
||||
} from "../utils/componentTestSuite";
|
||||
|
||||
type Props = React.ComponentProps<typeof MultiSelect>;
|
||||
|
||||
const defaultChipOptions = [
|
||||
{ id: "1", label: "Option 1", state: "Unselected" as const },
|
||||
{ id: "2", label: "Option 2", state: "Selected" as const },
|
||||
];
|
||||
|
||||
const config: ComponentTestSuiteConfig<Props> = {
|
||||
component: MultiSelect,
|
||||
name: "MultiSelect",
|
||||
props: {
|
||||
label: "Test Label",
|
||||
showHelpIcon: false,
|
||||
size: "S",
|
||||
palette: "Default",
|
||||
options: defaultChipOptions,
|
||||
showAddButton: true,
|
||||
addButtonText: "",
|
||||
} as Props,
|
||||
requiredProps: ["options"],
|
||||
optionalProps: {
|
||||
label: "Optional Label",
|
||||
showHelpIcon: true,
|
||||
size: "M",
|
||||
palette: "Inverse",
|
||||
onChipClick: vi.fn(),
|
||||
onAddClick: vi.fn(),
|
||||
showAddButton: false,
|
||||
addButtonText: "Add",
|
||||
},
|
||||
primaryRole: undefined, // MultiSelect contains multiple interactive elements
|
||||
testCases: {
|
||||
renders: true,
|
||||
accessibility: true,
|
||||
keyboardNavigation: false, // Complex component with multiple interactive elements
|
||||
disabledState: false,
|
||||
errorState: false,
|
||||
},
|
||||
};
|
||||
|
||||
componentTestSuite<Props>(config);
|
||||
|
||||
describe("MultiSelect – behaviour specifics", () => {
|
||||
it("renders label when provided", () => {
|
||||
render(<MultiSelect options={defaultChipOptions} label="Test Label" />);
|
||||
expect(screen.getByText("Test Label")).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("renders all chip options", () => {
|
||||
render(<MultiSelect options={defaultChipOptions} />);
|
||||
expect(screen.getByText("Option 1")).toBeInTheDocument();
|
||||
expect(screen.getByText("Option 2")).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("calls onChipClick when a chip is clicked", async () => {
|
||||
const handleChipClick = vi.fn();
|
||||
render(
|
||||
<MultiSelect
|
||||
options={defaultChipOptions}
|
||||
onChipClick={handleChipClick}
|
||||
/>,
|
||||
);
|
||||
|
||||
const chip = screen.getByText("Option 1");
|
||||
await userEvent.click(chip);
|
||||
|
||||
expect(handleChipClick).toHaveBeenCalledWith("1");
|
||||
});
|
||||
|
||||
it("calls onAddClick when add button is clicked", async () => {
|
||||
const handleAddClick = vi.fn();
|
||||
render(
|
||||
<MultiSelect
|
||||
options={defaultChipOptions}
|
||||
onAddClick={handleAddClick}
|
||||
showAddButton={true}
|
||||
addButtonText="Add option"
|
||||
/>,
|
||||
);
|
||||
|
||||
const addButton = screen.getByRole("button", { name: "Add option" });
|
||||
await userEvent.click(addButton);
|
||||
|
||||
expect(handleAddClick).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it("calls onAddClick when icon-only add button is clicked", async () => {
|
||||
const handleAddClick = vi.fn();
|
||||
render(
|
||||
<MultiSelect
|
||||
options={defaultChipOptions}
|
||||
onAddClick={handleAddClick}
|
||||
showAddButton={true}
|
||||
addButtonText=""
|
||||
/>,
|
||||
);
|
||||
|
||||
const addButton = screen.getByRole("button", { name: "Add option" });
|
||||
await userEvent.click(addButton);
|
||||
|
||||
expect(handleAddClick).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it("shows help icon when showHelpIcon is true", () => {
|
||||
render(
|
||||
<MultiSelect
|
||||
options={defaultChipOptions}
|
||||
label="Test Label"
|
||||
showHelpIcon={true}
|
||||
/>,
|
||||
);
|
||||
const helpIcon = screen.getByAltText("Help");
|
||||
expect(helpIcon).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("renders add button text when provided", () => {
|
||||
render(
|
||||
<MultiSelect
|
||||
options={defaultChipOptions}
|
||||
showAddButton={true}
|
||||
addButtonText="Add option"
|
||||
/>,
|
||||
);
|
||||
expect(screen.getByText("Add option")).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("does not render add button when showAddButton is false", () => {
|
||||
render(
|
||||
<MultiSelect
|
||||
options={defaultChipOptions}
|
||||
showAddButton={false}
|
||||
/>,
|
||||
);
|
||||
expect(screen.queryByRole("button", { name: /add/i })).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("handles custom chip confirm", async () => {
|
||||
const handleConfirm = vi.fn();
|
||||
const customOptions = [
|
||||
{ id: "custom-1", label: "", state: "Custom" as const },
|
||||
];
|
||||
render(
|
||||
<MultiSelect
|
||||
options={customOptions}
|
||||
onCustomChipConfirm={handleConfirm}
|
||||
/>,
|
||||
);
|
||||
|
||||
// Type into the input first (check button is disabled until there's text)
|
||||
const input = screen.getByPlaceholderText("Type to add");
|
||||
await userEvent.type(input, "NewOption");
|
||||
|
||||
// Now the check button should be enabled
|
||||
const checkButton = screen.getByRole("button", { name: "Confirm" });
|
||||
expect(checkButton).not.toBeDisabled();
|
||||
|
||||
await userEvent.click(checkButton);
|
||||
|
||||
expect(handleConfirm).toHaveBeenCalledWith("custom-1", "NewOption");
|
||||
});
|
||||
|
||||
it("handles custom chip close", async () => {
|
||||
const handleClose = vi.fn();
|
||||
const customOptions = [
|
||||
{ id: "custom-1", label: "", state: "Custom" as const },
|
||||
];
|
||||
render(
|
||||
<MultiSelect
|
||||
options={customOptions}
|
||||
onCustomChipClose={handleClose}
|
||||
/>,
|
||||
);
|
||||
|
||||
const closeButton = screen.getByRole("button", { name: "Close" });
|
||||
await userEvent.click(closeButton);
|
||||
|
||||
expect(handleClose).toHaveBeenCalled();
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user