From 178f5c88e80954f2e761812d744f48a686457766 Mon Sep 17 00:00:00 2001 From: Matthew Ellison Date: Sat, 28 Feb 2026 16:37:25 -0500 Subject: [PATCH] Add tests for checkbox --- .../input/checkbox/MattrixwvCheckbox.tsx | 110 ++++---- lib/types/InputTypes.ts | 1 - .../input/checkbox/DangerCheckbox.test.tsx | 81 ++++++ .../input/checkbox/DarkCheckbox.test.tsx | 81 ++++++ .../input/checkbox/InfoCheckbox.test.tsx | 81 ++++++ .../input/checkbox/LightCheckbox.test.tsx | 81 ++++++ .../input/checkbox/MattrixwvCheckbox.test.tsx | 235 ++++++++++++++++++ .../input/checkbox/MoltenCheckbox.test.tsx | 81 ++++++ .../input/checkbox/PrimaryCheckbox.test.tsx | 81 ++++++ .../input/checkbox/SecondaryCheckbox.test.tsx | 81 ++++++ .../input/checkbox/SuccessCheckbox.test.tsx | 81 ++++++ .../input/checkbox/TertiaryCheckbox.test.tsx | 81 ++++++ .../input/checkbox/WarningCheckbox.test.tsx | 81 ++++++ 13 files changed, 1101 insertions(+), 55 deletions(-) create mode 100644 test/component/input/checkbox/DangerCheckbox.test.tsx create mode 100644 test/component/input/checkbox/DarkCheckbox.test.tsx create mode 100644 test/component/input/checkbox/InfoCheckbox.test.tsx create mode 100644 test/component/input/checkbox/LightCheckbox.test.tsx create mode 100644 test/component/input/checkbox/MattrixwvCheckbox.test.tsx create mode 100644 test/component/input/checkbox/MoltenCheckbox.test.tsx create mode 100644 test/component/input/checkbox/PrimaryCheckbox.test.tsx create mode 100644 test/component/input/checkbox/SecondaryCheckbox.test.tsx create mode 100644 test/component/input/checkbox/SuccessCheckbox.test.tsx create mode 100644 test/component/input/checkbox/TertiaryCheckbox.test.tsx create mode 100644 test/component/input/checkbox/WarningCheckbox.test.tsx diff --git a/lib/component/input/checkbox/MattrixwvCheckbox.tsx b/lib/component/input/checkbox/MattrixwvCheckbox.tsx index 0317334..c686393 100644 --- a/lib/component/input/checkbox/MattrixwvCheckbox.tsx +++ b/lib/component/input/checkbox/MattrixwvCheckbox.tsx @@ -1,10 +1,9 @@ import type { CheckboxProps } from "$/types/InputTypes"; -import { Checkbox } from "@headlessui/react"; +import { Checkbox, Field, Label } from "@headlessui/react"; import clsx from "clsx"; export default function MattrixwvCheckbox({ - id = crypto.randomUUID().replaceAll("-", ""), className, labelClassName, name, @@ -19,65 +18,68 @@ export default function MattrixwvCheckbox({ children }: Readonly){ return ( - - {/* Checkbox */} -
- -
+ + + {/* Label */} - { - children && - - {children} - - } - + { + children && + + } + ); } diff --git a/lib/types/InputTypes.ts b/lib/types/InputTypes.ts index 06b5c73..ef45601 100644 --- a/lib/types/InputTypes.ts +++ b/lib/types/InputTypes.ts @@ -128,7 +128,6 @@ export interface FileInputProps { export type CheckboxSize = "none" | "xs" | "sm" | "md" | "lg" | "xl"; export interface CheckboxProps { - id?: string; className?: string; labelClassName?: string; name?: string; diff --git a/test/component/input/checkbox/DangerCheckbox.test.tsx b/test/component/input/checkbox/DangerCheckbox.test.tsx new file mode 100644 index 0000000..8811fa0 --- /dev/null +++ b/test/component/input/checkbox/DangerCheckbox.test.tsx @@ -0,0 +1,81 @@ +import DangerCheckbox from "$/component/input/checkbox/DangerCheckbox"; +import { render, screen } from "@testing-library/react"; +import { describe, expect, it } from "vitest"; + + +describe("Renders", () => { + it("Renders with defaults", () => { + render(); + + 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-danger", "group-data-checked:stroke-white"); + }); + it("Renders disabled", () => { + render(); + + 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-danger", "group-data-checked:stroke-white"); + }); + it("Renders with custom classes", () => { + const className = "custom-class"; + + render(); + + 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({label}); + + 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(); + + const checkboxGraphic = screen.getByTestId("mattrixwv-checkbox-graphic"); + expect(checkboxGraphic).toBeInTheDocument(); + expect(checkboxGraphic).toHaveClass("group-data-checked:bg-danger", "group-data-checked:stroke-white"); + expect(checkboxGraphic).not.toHaveClass("group-data-checked:stroke-danger"); + }); + it("Renders without box", () => { + render(); + + const checkboxGraphic = screen.getByTestId("mattrixwv-checkbox-graphic"); + expect(checkboxGraphic).toBeInTheDocument(); + expect(checkboxGraphic).not.toHaveClass("group-data-checked:bg-danger", "group-data-checked:stroke-white"); + expect(checkboxGraphic).toHaveClass("group-data-checked:stroke-danger"); + }); +}); diff --git a/test/component/input/checkbox/DarkCheckbox.test.tsx b/test/component/input/checkbox/DarkCheckbox.test.tsx new file mode 100644 index 0000000..67c9f7f --- /dev/null +++ b/test/component/input/checkbox/DarkCheckbox.test.tsx @@ -0,0 +1,81 @@ +import DarkCheckbox from "$/component/input/checkbox/DarkCheckbox"; +import { render, screen } from "@testing-library/react"; +import { describe, expect, it } from "vitest"; + + +describe("Renders", () => { + it("Renders with defaults", () => { + render(); + + 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-dark", "group-data-checked:stroke-light"); + }); + it("Renders disabled", () => { + render(); + + 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-dark", "group-data-checked:stroke-light"); + }); + it("Renders with custom classes", () => { + const className = "custom-class"; + + render(); + + 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({label}); + + 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(); + + const checkboxGraphic = screen.getByTestId("mattrixwv-checkbox-graphic"); + expect(checkboxGraphic).toBeInTheDocument(); + expect(checkboxGraphic).toHaveClass("group-data-checked:bg-dark", "group-data-checked:stroke-light"); + expect(checkboxGraphic).not.toHaveClass("group-data-checked:stroke-dark"); + }); + it("Renders without box", () => { + render(); + + const checkboxGraphic = screen.getByTestId("mattrixwv-checkbox-graphic"); + expect(checkboxGraphic).toBeInTheDocument(); + expect(checkboxGraphic).not.toHaveClass("group-data-checked:bg-dark", "group-data-checked:stroke-light"); + expect(checkboxGraphic).toHaveClass("group-data-checked:stroke-dark"); + }); +}); diff --git a/test/component/input/checkbox/InfoCheckbox.test.tsx b/test/component/input/checkbox/InfoCheckbox.test.tsx new file mode 100644 index 0000000..dc2a681 --- /dev/null +++ b/test/component/input/checkbox/InfoCheckbox.test.tsx @@ -0,0 +1,81 @@ +import InfoCheckbox from "$/component/input/checkbox/InfoCheckbox"; +import { render, screen } from "@testing-library/react"; +import { describe, expect, it } from "vitest"; + + +describe("Renders", () => { + it("Renders with defaults", () => { + render(); + + 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-info", "group-data-checked:stroke-white"); + }); + it("Renders disabled", () => { + render(); + + 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-info", "group-data-checked:stroke-white"); + }); + it("Renders with custom classes", () => { + const className = "custom-class"; + + render(); + + 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({label}); + + 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(); + + const checkboxGraphic = screen.getByTestId("mattrixwv-checkbox-graphic"); + expect(checkboxGraphic).toBeInTheDocument(); + expect(checkboxGraphic).toHaveClass("group-data-checked:bg-info", "group-data-checked:stroke-white"); + expect(checkboxGraphic).not.toHaveClass("group-data-checked:stroke-info"); + }); + it("Renders without box", () => { + render(); + + const checkboxGraphic = screen.getByTestId("mattrixwv-checkbox-graphic"); + expect(checkboxGraphic).toBeInTheDocument(); + expect(checkboxGraphic).not.toHaveClass("group-data-checked:bg-info", "group-data-checked:stroke-white"); + expect(checkboxGraphic).toHaveClass("group-data-checked:stroke-info"); + }); +}); diff --git a/test/component/input/checkbox/LightCheckbox.test.tsx b/test/component/input/checkbox/LightCheckbox.test.tsx new file mode 100644 index 0000000..3ce80e1 --- /dev/null +++ b/test/component/input/checkbox/LightCheckbox.test.tsx @@ -0,0 +1,81 @@ +import LightCheckbox from "$/component/input/checkbox/LightCheckbox"; +import { render, screen } from "@testing-library/react"; +import { describe, expect, it } from "vitest"; + + +describe("Renders", () => { + it("Renders with defaults", () => { + render(); + + 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-light", "group-data-checked:stroke-dark"); + }); + it("Renders disabled", () => { + render(); + + 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-light", "group-data-checked:stroke-dark"); + }); + it("Renders with custom classes", () => { + const className = "custom-class"; + + render(); + + 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({label}); + + 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(); + + const checkboxGraphic = screen.getByTestId("mattrixwv-checkbox-graphic"); + expect(checkboxGraphic).toBeInTheDocument(); + expect(checkboxGraphic).toHaveClass("group-data-checked:bg-light", "group-data-checked:stroke-dark"); + expect(checkboxGraphic).not.toHaveClass("group-data-checked:stroke-light"); + }); + it("Renders without box", () => { + render(); + + const checkboxGraphic = screen.getByTestId("mattrixwv-checkbox-graphic"); + expect(checkboxGraphic).toBeInTheDocument(); + expect(checkboxGraphic).not.toHaveClass("group-data-checked:bg-light", "group-data-checked:stroke-dark"); + expect(checkboxGraphic).toHaveClass("group-data-checked:stroke-light"); + }); +}); diff --git a/test/component/input/checkbox/MattrixwvCheckbox.test.tsx b/test/component/input/checkbox/MattrixwvCheckbox.test.tsx new file mode 100644 index 0000000..e99a528 --- /dev/null +++ b/test/component/input/checkbox/MattrixwvCheckbox.test.tsx @@ -0,0 +1,235 @@ +import { MattrixwvCheckbox } from "$/index"; +import { render, screen } from "@testing-library/react"; +import userEvent from "@testing-library/user-event"; +import { describe, expect, it, vi } from "vitest"; + + +describe("Renders", () => { + it("Renders with default properties", () => { + render(); + + //Checkbox + const checkbox = screen.getByTestId("mattrixwv-checkbox"); + expect(checkbox).toBeInTheDocument(); + expect(checkbox.id).toMatch(/_r_\d+/); + expect(checkbox).toHaveClass("group"); + expect(checkbox).toHaveClass("focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2"); + expect(checkbox).toHaveClass("cursor-pointer"); + expect(checkbox).not.toHaveAttribute("data-disabled"); + expect(checkbox).not.toBeChecked(); + + //Visible checkbox + const checkboxGraphic = screen.getByTestId("mattrixwv-checkbox-graphic"); + expect(checkboxGraphic).toBeInTheDocument(); + expect(checkboxGraphic).toHaveClass("border", "rounded"); + expect(checkboxGraphic).toHaveClass("size-4"); + + //Label + const label = screen.queryByTestId("mattrixwv-checkbox-label"); + expect(label).not.toBeInTheDocument(); + }); + + it("Renders with default properties with custom name and class name", () => { + const className = "my-class-name"; + const name = "my-name"; + + render( + + ); + + //Checkbox + const checkbox = screen.getByTestId("mattrixwv-checkbox"); + expect(checkbox).toBeInTheDocument(); + expect(checkbox).toHaveClass("group"); + expect(checkbox).toHaveClass("focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2"); + expect(checkbox).toHaveClass("cursor-pointer"); + expect(checkbox).not.toBeChecked(); + expect(checkbox).not.toHaveAttribute("aria-labelledby"); + + //Visible checkbox + const checkboxGraphic = screen.getByTestId("mattrixwv-checkbox-graphic"); + expect(checkbox).toContain(checkboxGraphic); + expect(checkboxGraphic).toBeInTheDocument(); + expect(checkboxGraphic).toHaveClass("border", "rounded"); + expect(checkboxGraphic).toHaveClass("size-4"); + expect(checkboxGraphic).toHaveClass(className); + + //Label + const label = screen.queryByTestId("mattrixwv-checkbox-label"); + expect(label).not.toBeInTheDocument(); + }); + it("Renders with default properties disabled", () => { + render(); + + //Checkbox + const checkbox = screen.getByTestId("mattrixwv-checkbox"); + expect(checkbox).toBeInTheDocument(); + expect(checkbox.id).toMatch(/_r_\d+/); + expect(checkbox).toHaveClass("group"); + expect(checkbox).toHaveClass("focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2"); + expect(checkbox).toHaveClass("cursor-not-allowed"); + expect(checkbox).toHaveAttribute("data-disabled"); + expect(checkbox).not.toBeChecked(); + + //Visible checkbox + const checkboxGraphic = screen.getByTestId("mattrixwv-checkbox-graphic"); + expect(checkbox).toContain(checkboxGraphic); + expect(checkboxGraphic).toBeInTheDocument(); + expect(checkboxGraphic).toHaveClass("border", "rounded"); + expect(checkboxGraphic).toHaveClass("size-4"); + + //Label + const label = screen.queryByTestId("mattrixwv-checkbox-label"); + expect(label).not.toBeInTheDocument(); + }); +}); + +describe("Checkbox", () => { + it("Renders with box", () => { + render(); + + const checkboxGraphic = screen.getByTestId("mattrixwv-checkbox-graphic"); + expect(checkboxGraphic).toHaveClass("border", "rounded"); + }); + + it("Renders without box", () => { + render(); + + const checkboxGraphic = screen.getByTestId("mattrixwv-checkbox-graphic"); + expect(checkboxGraphic).not.toHaveClass("border", "rounded"); + }); +}); + +describe("Size", () => { + it("Renders with no size", () => { + render(); + + const checkboxGraphic = screen.getByTestId("mattrixwv-checkbox-graphic"); + expect(checkboxGraphic).toHaveClass("border", "rounded"); + expect(checkboxGraphic.className).not.toMatch(/size*/); + }); + it("Renders with extra-small size", () => { + render(); + + const checkboxGraphic = screen.getByTestId("mattrixwv-checkbox-graphic"); + expect(checkboxGraphic).toHaveClass("border", "rounded"); + expect(checkboxGraphic).toHaveClass("size-3"); + }); + it("Renders with small size", () => { + render(); + + const checkboxGraphic = screen.getByTestId("mattrixwv-checkbox-graphic"); + expect(checkboxGraphic).toHaveClass("border", "rounded"); + expect(checkboxGraphic).toHaveClass("size-4"); + }); + it("Renders with medium size", () => { + render(); + + const checkboxGraphic = screen.getByTestId("mattrixwv-checkbox-graphic"); + expect(checkboxGraphic).toHaveClass("border", "rounded"); + expect(checkboxGraphic).toHaveClass("size-5"); + }); + it("Renders with large size", () => { + render(); + + const checkboxGraphic = screen.getByTestId("mattrixwv-checkbox-graphic"); + expect(checkboxGraphic).toHaveClass("border", "rounded"); + expect(checkboxGraphic).toHaveClass("size-6"); + }); + it("Renders with extra-large size", () => { + render(); + + const checkboxGraphic = screen.getByTestId("mattrixwv-checkbox-graphic"); + expect(checkboxGraphic).toHaveClass("border", "rounded"); + expect(checkboxGraphic).toHaveClass("size-7"); + }); +}); + +describe("Label", () => { + it("Renders with label", () => { + const textContent = "Text"; + + render({textContent}); + + const checkbox = screen.getByTestId("mattrixwv-checkbox"); + expect(checkbox).toBeInTheDocument(); + expect(checkbox).toHaveAttribute("aria-labelledby"); + + const checkboxGraphic = screen.getByTestId("mattrixwv-checkbox-graphic"); + expect(checkbox).toContain(checkboxGraphic); + expect(checkboxGraphic).toBeInTheDocument(); + + const checkboxLabel = screen.getByTestId("mattrixwv-checkbox-label"); + expect(checkbox).toAppearBefore(checkboxLabel); + expect(checkboxLabel.id).toMatch(/headlessui-label-_r_.+_/); + expect(checkboxLabel).toHaveTextContent(textContent); + }); + + it("Renders with label classes", () => { + const textContent = "Text"; + const className = "custom-class-name"; + + render({textContent}); + + const checkbox = screen.getByTestId("mattrixwv-checkbox"); + expect(checkbox).toBeInTheDocument(); + expect(checkbox).toHaveAttribute("aria-labelledby"); + + const checkboxGraphic = screen.getByTestId("mattrixwv-checkbox-graphic"); + expect(checkbox).toContain(checkboxGraphic); + expect(checkboxGraphic).toBeInTheDocument(); + + const checkboxLabel = screen.getByTestId("mattrixwv-checkbox-label"); + expect(checkbox).toAppearBefore(checkboxLabel); + expect(checkboxLabel.id).toMatch(/headlessui-label-_r_.+_/); + expect(checkboxLabel).toHaveClass(className); + expect(checkboxLabel).toHaveTextContent(textContent); + }); +}); + +describe("Checking", () => { + it("Renders checked", async () => { + render(); + + const checkbox = screen.getByTestId("mattrixwv-checkbox"); + expect(checkbox).toBeInTheDocument(); + expect(checkbox).toBeChecked(); + + await userEvent.click(checkbox); + expect(checkbox).toBeChecked(); + }); + it("Renders default checked", async () => { + render(); + + const checkbox = screen.getByTestId("mattrixwv-checkbox"); + expect(checkbox).toBeInTheDocument(); + expect(checkbox).toBeChecked(); + + await userEvent.click(checkbox); + expect(checkbox).not.toBeChecked(); + }); + it("Handles changes", async () => { + const label = "Some label"; + const handleClick = vi.fn(); + + render({label}); + + const checkbox = screen.getByTestId("mattrixwv-checkbox"); + expect(checkbox).toBeInTheDocument(); + expect(checkbox).not.toBeChecked(); + expect(handleClick).toHaveBeenCalledTimes(0); + + await userEvent.click(checkbox); + expect(checkbox).toBeChecked(); + expect(handleClick).toHaveBeenCalledTimes(1); + + const checkboxLabel = screen.getByTestId("mattrixwv-checkbox-label"); + expect(checkboxLabel).toBeInTheDocument(); + await userEvent.click(checkboxLabel); + expect(checkbox).not.toBeChecked(); + expect(handleClick).toHaveBeenCalledTimes(2); + }); +}); diff --git a/test/component/input/checkbox/MoltenCheckbox.test.tsx b/test/component/input/checkbox/MoltenCheckbox.test.tsx new file mode 100644 index 0000000..81d0acc --- /dev/null +++ b/test/component/input/checkbox/MoltenCheckbox.test.tsx @@ -0,0 +1,81 @@ +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(); + + 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(); + + 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(); + + 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({label}); + + 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(); + + 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(); + + 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"); + }); +}); diff --git a/test/component/input/checkbox/PrimaryCheckbox.test.tsx b/test/component/input/checkbox/PrimaryCheckbox.test.tsx new file mode 100644 index 0000000..50576bf --- /dev/null +++ b/test/component/input/checkbox/PrimaryCheckbox.test.tsx @@ -0,0 +1,81 @@ +import PrimaryCheckbox from "$/component/input/checkbox/PrimaryCheckbox"; +import { render, screen } from "@testing-library/react"; +import { describe, expect, it } from "vitest"; + + +describe("Renders", () => { + it("Renders with defaults", () => { + render(); + + 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-primary", "group-data-checked:stroke-white"); + }); + it("Renders disabled", () => { + render(); + + 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-primary", "group-data-checked:stroke-white"); + }); + it("Renders with custom classes", () => { + const className = "custom-class"; + + render(); + + 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({label}); + + 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(); + + const checkboxGraphic = screen.getByTestId("mattrixwv-checkbox-graphic"); + expect(checkboxGraphic).toBeInTheDocument(); + expect(checkboxGraphic).toHaveClass("group-data-checked:bg-primary", "group-data-checked:stroke-white"); + expect(checkboxGraphic).not.toHaveClass("group-data-checked:stroke-primary"); + }); + it("Renders without box", () => { + render(); + + const checkboxGraphic = screen.getByTestId("mattrixwv-checkbox-graphic"); + expect(checkboxGraphic).toBeInTheDocument(); + expect(checkboxGraphic).not.toHaveClass("group-data-checked:bg-primary", "group-data-checked:stroke-white"); + expect(checkboxGraphic).toHaveClass("group-data-checked:stroke-primary"); + }); +}); diff --git a/test/component/input/checkbox/SecondaryCheckbox.test.tsx b/test/component/input/checkbox/SecondaryCheckbox.test.tsx new file mode 100644 index 0000000..a240524 --- /dev/null +++ b/test/component/input/checkbox/SecondaryCheckbox.test.tsx @@ -0,0 +1,81 @@ +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(); + + 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(); + + 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(); + + 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({label}); + + 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(); + + 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(); + + 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"); + }); +}); diff --git a/test/component/input/checkbox/SuccessCheckbox.test.tsx b/test/component/input/checkbox/SuccessCheckbox.test.tsx new file mode 100644 index 0000000..912f97e --- /dev/null +++ b/test/component/input/checkbox/SuccessCheckbox.test.tsx @@ -0,0 +1,81 @@ +import SuccessCheckbox from "$/component/input/checkbox/SuccessCheckbox"; +import { render, screen } from "@testing-library/react"; +import { describe, expect, it } from "vitest"; + + +describe("Renders", () => { + it("Renders with defaults", () => { + render(); + + 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-success", "group-data-checked:stroke-white"); + }); + it("Renders disabled", () => { + render(); + + 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-success", "group-data-checked:stroke-white"); + }); + it("Renders with custom classes", () => { + const className = "custom-class"; + + render(); + + 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({label}); + + 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(); + + const checkboxGraphic = screen.getByTestId("mattrixwv-checkbox-graphic"); + expect(checkboxGraphic).toBeInTheDocument(); + expect(checkboxGraphic).toHaveClass("group-data-checked:bg-success", "group-data-checked:stroke-white"); + expect(checkboxGraphic).not.toHaveClass("group-data-checked:stroke-success"); + }); + it("Renders without box", () => { + render(); + + const checkboxGraphic = screen.getByTestId("mattrixwv-checkbox-graphic"); + expect(checkboxGraphic).toBeInTheDocument(); + expect(checkboxGraphic).not.toHaveClass("group-data-checked:bg-success", "group-data-checked:stroke-white"); + expect(checkboxGraphic).toHaveClass("group-data-checked:stroke-success"); + }); +}); diff --git a/test/component/input/checkbox/TertiaryCheckbox.test.tsx b/test/component/input/checkbox/TertiaryCheckbox.test.tsx new file mode 100644 index 0000000..667e294 --- /dev/null +++ b/test/component/input/checkbox/TertiaryCheckbox.test.tsx @@ -0,0 +1,81 @@ +import TertiaryCheckbox from "$/component/input/checkbox/TertiaryCheckbox"; +import { render, screen } from "@testing-library/react"; +import { describe, expect, it } from "vitest"; + + +describe("Renders", () => { + it("Renders with defaults", () => { + render(); + + 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-tertiary", "group-data-checked:stroke-white"); + }); + it("Renders disabled", () => { + render(); + + 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-tertiary", "group-data-checked:stroke-white"); + }); + it("Renders with custom classes", () => { + const className = "custom-class"; + + render(); + + 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({label}); + + 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(); + + const checkboxGraphic = screen.getByTestId("mattrixwv-checkbox-graphic"); + expect(checkboxGraphic).toBeInTheDocument(); + expect(checkboxGraphic).toHaveClass("group-data-checked:bg-tertiary", "group-data-checked:stroke-white"); + expect(checkboxGraphic).not.toHaveClass("group-data-checked:stroke-tertiary"); + }); + it("Renders without box", () => { + render(); + + const checkboxGraphic = screen.getByTestId("mattrixwv-checkbox-graphic"); + expect(checkboxGraphic).toBeInTheDocument(); + expect(checkboxGraphic).not.toHaveClass("group-data-checked:bg-tertiary", "group-data-checked:stroke-white"); + expect(checkboxGraphic).toHaveClass("group-data-checked:stroke-tertiary"); + }); +}); diff --git a/test/component/input/checkbox/WarningCheckbox.test.tsx b/test/component/input/checkbox/WarningCheckbox.test.tsx new file mode 100644 index 0000000..9b2c134 --- /dev/null +++ b/test/component/input/checkbox/WarningCheckbox.test.tsx @@ -0,0 +1,81 @@ +import WarningCheckbox from "$/component/input/checkbox/WarningCheckbox"; +import { render, screen } from "@testing-library/react"; +import { describe, expect, it } from "vitest"; + + +describe("Renders", () => { + it("Renders with defaults", () => { + render(); + + 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-warning", "group-data-checked:stroke-white"); + }); + it("Renders disabled", () => { + render(); + + 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-warning", "group-data-checked:stroke-white"); + }); + it("Renders with custom classes", () => { + const className = "custom-class"; + + render(); + + 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({label}); + + 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(); + + const checkboxGraphic = screen.getByTestId("mattrixwv-checkbox-graphic"); + expect(checkboxGraphic).toBeInTheDocument(); + expect(checkboxGraphic).toHaveClass("group-data-checked:bg-warning", "group-data-checked:stroke-white"); + expect(checkboxGraphic).not.toHaveClass("group-data-checked:stroke-warning"); + }); + it("Renders without box", () => { + render(); + + const checkboxGraphic = screen.getByTestId("mattrixwv-checkbox-graphic"); + expect(checkboxGraphic).toBeInTheDocument(); + expect(checkboxGraphic).not.toHaveClass("group-data-checked:bg-warning", "group-data-checked:stroke-white"); + expect(checkboxGraphic).toHaveClass("group-data-checked:stroke-warning"); + }); +});