51 lines
1.5 KiB
TypeScript
51 lines
1.5 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("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("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();
|
|
});
|
|
});
|