82 lines
3.1 KiB
TypeScript
82 lines
3.1 KiB
TypeScript
import MoltenCheckbox from "$/component/input/checkbox/MoltenCheckbox";
|
|
import { render, screen } from "@testing-library/react";
|
|
import { describe, expect, it } from "vitest";
|
|
|
|
|
|
describe("Renders", () => {
|
|
it("Renders with defaults", () => {
|
|
render(<MoltenCheckbox/>);
|
|
|
|
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-molten", "group-data-checked:stroke-white");
|
|
});
|
|
it("Renders disabled", () => {
|
|
render(<MoltenCheckbox 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-molten", "group-data-checked:stroke-white");
|
|
});
|
|
it("Renders with custom classes", () => {
|
|
const className = "custom-class";
|
|
|
|
render(<MoltenCheckbox 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(<MoltenCheckbox>{label}</MoltenCheckbox>);
|
|
|
|
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(<MoltenCheckbox showBox={true}/>);
|
|
|
|
const checkboxGraphic = screen.getByTestId("mattrixwv-checkbox-graphic");
|
|
expect(checkboxGraphic).toBeInTheDocument();
|
|
expect(checkboxGraphic).toHaveClass("group-data-checked:bg-molten", "group-data-checked:stroke-white");
|
|
expect(checkboxGraphic).not.toHaveClass("group-data-checked:stroke-molten");
|
|
});
|
|
it("Renders without box", () => {
|
|
render(<MoltenCheckbox showBox={false}/>);
|
|
|
|
const checkboxGraphic = screen.getByTestId("mattrixwv-checkbox-graphic");
|
|
expect(checkboxGraphic).toBeInTheDocument();
|
|
expect(checkboxGraphic).not.toHaveClass("group-data-checked:bg-molten", "group-data-checked:stroke-white");
|
|
expect(checkboxGraphic).toHaveClass("group-data-checked:stroke-molten");
|
|
});
|
|
});
|