adilalloandCursor
20ea4a2f30
Catalog chips now announce Select or Deselect so they are named for assistive tech. Method and value modals open blank; Generate draft inserts the catalog copy that used to be prefilled, and Customize still keeps the section headings. Co-authored-by: Cursor <cursoragent@cursor.com>
68 lines
2.3 KiB
TypeScript
68 lines
2.3 KiB
TypeScript
import { describe, it, expect } from "vitest";
|
|
import { screen } from "@testing-library/react";
|
|
import "@testing-library/jest-dom/vitest";
|
|
import {
|
|
componentTestSuite,
|
|
type ComponentTestSuiteConfig,
|
|
} from "../utils/componentTestSuite";
|
|
import { renderWithProviders as render } from "../utils/test-utils";
|
|
import Chip from "../../app/components/controls/Chip";
|
|
|
|
type Props = React.ComponentProps<typeof Chip>;
|
|
|
|
const config: ComponentTestSuiteConfig<Props> = {
|
|
component: Chip,
|
|
name: "Chip",
|
|
props: {
|
|
label: "Worker cooperative",
|
|
state: "unselected",
|
|
palette: "default",
|
|
size: "m",
|
|
} as Props,
|
|
primaryRole: "button",
|
|
testCases: {
|
|
renders: true,
|
|
accessibility: true,
|
|
keyboardNavigation: true,
|
|
disabledState: true,
|
|
},
|
|
states: {
|
|
disabledProps: { disabled: true, state: "disabled" },
|
|
},
|
|
};
|
|
|
|
describe("Chip", () => {
|
|
componentTestSuite<Props>(config);
|
|
|
|
it("uses the visible label as the accessible name when ariaLabel is omitted", () => {
|
|
render(<Chip label="Worker cooperative" state="unselected" />);
|
|
expect(
|
|
screen.getByRole("button", { name: "Worker cooperative" }),
|
|
).toHaveAttribute("aria-label", "Worker cooperative");
|
|
});
|
|
|
|
it("exposes aria-pressed false when unselected", () => {
|
|
render(<Chip label="Worker cooperative" state="unselected" />);
|
|
const chip = screen.getByRole("button", { name: "Worker cooperative" });
|
|
expect(chip).toHaveAttribute("aria-pressed", "false");
|
|
expect(chip.querySelector("svg")).toBeNull();
|
|
});
|
|
|
|
it("paints unselected chips on the element so native button styles cannot win", () => {
|
|
render(<Chip label="Worker cooperative" state="unselected" />);
|
|
const chip = screen.getByRole("button", { name: "Worker cooperative" });
|
|
expect(chip.style.color).toContain("--color-content-default-brand-primary");
|
|
expect(chip.style.backgroundColor).toBe("transparent");
|
|
expect(chip.style.borderColor).toContain(
|
|
"--color-border-default-tertiary",
|
|
);
|
|
});
|
|
|
|
it("exposes aria-pressed and a check mark when selected", () => {
|
|
render(<Chip label="Worker cooperative" state="selected" />);
|
|
const chip = screen.getByRole("button", { name: "Worker cooperative" });
|
|
expect(chip).toHaveAttribute("aria-pressed", "true");
|
|
expect(chip.querySelector("svg[aria-hidden]")).not.toBeNull();
|
|
});
|
|
});
|