Add tests for checkbox

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<CheckboxProps>){
 	return (
-		<Checkbox
-			id={id}
-			className={clsx(
-				"group",
-				"flex flex-row items-center justify-start gap-x-2",
-				"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
-				{
-					"cursor-pointer": !disabled,
-					"cursor-not-allowed": disabled
-				}
-			)}
-			name={name}
-			checked={checked}
-			defaultChecked={defaultChecked}
-			onChange={onChange}
-			value={value}
-			disabled={disabled}
-			aria-labelledby={`${id}Label`}
+		<Field
+			className="flex flex-row items-center justify-center gap-x-2"
 		>
-			{/* Checkbox */}
-			<div
+			<Checkbox
+				data-testid="mattrixwv-checkbox"
 				className={clsx(
-					className,
+					"group",
+					"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
 					{
-						"border rounded": showBox
-					},
-					{
-						"": size === "none",
-						"size-3": size === "xs",
-						"size-4": size === "sm",
-						"size-5": size === "md",
-						"size-6": size === "lg",
-						"size-7": size === "xl"
+						"cursor-pointer": !disabled,
+						"cursor-not-allowed": disabled
 					}
 				)}
+				name={name}
+				checked={checked}
+				defaultChecked={defaultChecked}
+				onChange={onChange}
+				value={value}
+				disabled={disabled}
 			>
-				<svg
-					viewBox="0 0 14 14"
-					fill="none"
-					aria-hidden="true"
+				{/* Checkbox */}
+				<div
+					data-testid="mattrixwv-checkbox-graphic"
+					className={clsx(
+						className,
+						{
+							"border rounded": showBox
+						},
+						{
+							"": size === "none",
+							"size-3": size === "xs",
+							"size-4": size === "sm",
+							"size-5": size === "md",
+							"size-6": size === "lg",
+							"size-7": size === "xl"
+						}
+					)}
 				>
-					<path
-						d="M3 8L6 11L11 3.5"
-						strokeWidth={strokeWidth}
-						strokeLinecap="round"
-						strokeLinejoin="round"
-					/>
-				</svg>
-			</div>
+					<svg
+						viewBox="0 0 14 14"
+						fill="none"
+						aria-hidden="true"
+					>
+						<path
+							d="M3 8L6 11L11 3.5"
+							strokeWidth={strokeWidth}
+							strokeLinecap="round"
+							strokeLinejoin="round"
+						/>
+					</svg>
+				</div>
+			</Checkbox>
 			{/* Label */}
-			{
-				children &&
-				<span
-					id={`${id}Label`}
-					className={labelClassName}
-				>
-					{children}
-				</span>
-			}
-		</Checkbox>
+				{
+					children &&
+					<Label
+						data-testid="mattrixwv-checkbox-label"
+						className={labelClassName}
+					>
+						{children}
+					</Label>
+				}
+		</Field>
 	);
 }