82 lines
3.2 KiB
TypeScript
82 lines
3.2 KiB
TypeScript
import SecondaryCheckbox from "$/component/input/checkbox/SecondaryCheckbox";
|
|
import { render, screen } from "@testing-library/react";
|
|
import { describe, expect, it } from "vitest";
|
|
|
|
|
|
describe("Renders", () => {
|
|
it("Renders with defaults", () => {
|
|
render(<SecondaryCheckbox/>);
|
|
|
|
const checkbox = screen.getByTestId("mattrixwv-checkbox");
|
|
expect(checkbox).toBeInTheDocument();
|
|
expect(checkbox).toHaveClass("cursor-pointer");
|
|
expect(checkbox).not.toHaveAttribute("data-disabled");
|
|
|
|
const checkboxGraphic = screen.getByTestId("mattrixwv-checkbox-graphic");
|
|
expect(checkboxGraphic).toBeInTheDocument();
|
|
expect(checkboxGraphic).toHaveClass("border", "rounded");
|
|
expect(checkboxGraphic).toHaveClass("size-4");
|
|
expect(checkboxGraphic).toHaveClass("group-data-checked:bg-secondary", "group-data-checked:stroke-white");
|
|
});
|
|
it("Renders disabled", () => {
|
|
render(<SecondaryCheckbox disabled/>);
|
|
|
|
const checkbox = screen.getByTestId("mattrixwv-checkbox");
|
|
expect(checkbox).toBeInTheDocument();
|
|
expect(checkbox).toHaveClass("cursor-not-allowed");
|
|
expect(checkbox).toHaveAttribute("data-disabled");
|
|
|
|
const checkboxGraphic = screen.getByTestId("mattrixwv-checkbox-graphic");
|
|
expect(checkboxGraphic).toBeInTheDocument();
|
|
expect(checkboxGraphic).toHaveClass("border", "rounded");
|
|
expect(checkboxGraphic).toHaveClass("size-4");
|
|
expect(checkboxGraphic).toHaveClass("group-data-checked:bg-secondary", "group-data-checked:stroke-white");
|
|
});
|
|
it("Renders with custom classes", () => {
|
|
const className = "custom-class";
|
|
|
|
render(<SecondaryCheckbox className={className}/>);
|
|
|
|
const checkbox = screen.getByTestId("mattrixwv-checkbox");
|
|
expect(checkbox).toBeInTheDocument();
|
|
|
|
const checkboxGraphic = screen.getByTestId("mattrixwv-checkbox-graphic");
|
|
expect(checkboxGraphic).toBeInTheDocument();
|
|
expect(checkboxGraphic).toHaveClass(className);
|
|
});
|
|
it("Renders with label", () => {
|
|
const label = "Some Label";
|
|
|
|
render(<SecondaryCheckbox>{label}</SecondaryCheckbox>);
|
|
|
|
const checkbox = screen.getByTestId("mattrixwv-checkbox");
|
|
expect(checkbox).toBeInTheDocument();
|
|
|
|
const checkboxGraphic = screen.getByTestId("mattrixwv-checkbox-graphic");
|
|
expect(checkboxGraphic).toBeInTheDocument();
|
|
|
|
const checkboxLabel = screen.getByTestId("mattrixwv-checkbox-label");
|
|
expect(checkboxLabel).toBeInTheDocument();
|
|
expect(checkboxLabel).toHaveTextContent(label);
|
|
});
|
|
});
|
|
|
|
describe("Box variants", () => {
|
|
it("Renders with box", () => {
|
|
render(<SecondaryCheckbox showBox={true}/>);
|
|
|
|
const checkboxGraphic = screen.getByTestId("mattrixwv-checkbox-graphic");
|
|
expect(checkboxGraphic).toBeInTheDocument();
|
|
expect(checkboxGraphic).toHaveClass("group-data-checked:bg-secondary", "group-data-checked:stroke-white");
|
|
expect(checkboxGraphic).not.toHaveClass("group-data-checked:stroke-secondary");
|
|
});
|
|
it("Renders without box", () => {
|
|
render(<SecondaryCheckbox showBox={false}/>);
|
|
|
|
const checkboxGraphic = screen.getByTestId("mattrixwv-checkbox-graphic");
|
|
expect(checkboxGraphic).toBeInTheDocument();
|
|
expect(checkboxGraphic).not.toHaveClass("group-data-checked:bg-secondary", "group-data-checked:stroke-white");
|
|
expect(checkboxGraphic).toHaveClass("group-data-checked:stroke-secondary");
|
|
});
|
|
});
|