From 0b9e918fd0b3b2964745f42456e711fb4a688c23 Mon Sep 17 00:00:00 2001
From: adilallo <39313955+adilallo@users.noreply.github.com>
Date: Wed, 8 Oct 2025 17:49:13 -0600
Subject: [PATCH] Checkbox component with testing and storybook
---
.storybook/main.js | 2 +-
app/components/Checkbox.js | 168 +
app/forms/page.js | 78 +
package-lock.json | 9318 +++++++++--------
package.json | 19 +-
stories/Checkbox.stories.js | 101 +
.../accessibility/unit/Checkbox.a11y.test.jsx | 160 +
.../integration/Checkbox.integration.test.jsx | 249 +
tests/storybook/Checkbox.interactions.test.js | 136 +
tests/storybook/Checkbox.storybook.test.js | 234 +
tests/unit/Checkbox.test.jsx | 166 +
tests/visual/Checkbox.visual.test.js | 83 +
12 files changed, 6187 insertions(+), 4527 deletions(-)
create mode 100644 app/components/Checkbox.js
create mode 100644 app/forms/page.js
create mode 100644 stories/Checkbox.stories.js
create mode 100644 tests/accessibility/unit/Checkbox.a11y.test.jsx
create mode 100644 tests/integration/Checkbox.integration.test.jsx
create mode 100644 tests/storybook/Checkbox.interactions.test.js
create mode 100644 tests/storybook/Checkbox.storybook.test.js
create mode 100644 tests/unit/Checkbox.test.jsx
create mode 100644 tests/visual/Checkbox.visual.test.js
diff --git a/.storybook/main.js b/.storybook/main.js
index d16ff77..1bd4231 100644
--- a/.storybook/main.js
+++ b/.storybook/main.js
@@ -10,7 +10,7 @@ const config = {
"@storybook/addon-a11y",
],
framework: {
- name: "@storybook/nextjs-vite",
+ name: "@storybook/nextjs",
options: {},
},
staticDirs: ["../public"],
diff --git a/app/components/Checkbox.js b/app/components/Checkbox.js
new file mode 100644
index 0000000..b5ad828
--- /dev/null
+++ b/app/components/Checkbox.js
@@ -0,0 +1,168 @@
+"use client";
+
+import React, { memo } from "react";
+
+/**
+ * Checkbox
+ * A basic controlled checkbox with visual modes and interaction states.
+ * This is a minimal first pass; visuals will be refined collaboratively.
+ */
+const Checkbox = memo(
+ ({
+ checked = false,
+ mode = "standard", // "standard" | "inverse"
+ state = "default", // "default" | "hover" | "focus"
+ disabled = false,
+ label,
+ className = "",
+ onChange,
+ id,
+ name,
+ value,
+ ariaLabel,
+ ...props
+ }) => {
+ const isInverse = mode === "inverse";
+
+ // Base tokens (rough placeholders leveraging existing CSS variables)
+ const colorSurface = isInverse
+ ? "var(--color-surface-inverse-primary)"
+ : "var(--color-surface-default-primary)";
+ const colorContent = isInverse
+ ? "var(--color-content-inverse-primary)"
+ : "var(--color-content-default-primary)";
+ const colorBrand = isInverse
+ ? "var(--color-content-inverse-brand-primary)"
+ : "var(--color-content-default-brand-primary)";
+
+ // Visual container depending on state
+ const baseBox = `flex items-center justify-center shrink-0 w-[var(--measures-sizing-024)] h-[var(--measures-sizing-024)] rounded-[var(--measures-radius-medium)] transition-all duration-200 ease-in-out`;
+
+ const stateStyles = {
+ default: "",
+ hover: "",
+ focus: "",
+ };
+
+ // Background behavior:
+ // - Standard: background does not change on check; only checkmark appears
+ // - Inverse: transparent background, checkmark appears on check
+ const backgroundWhenChecked = isInverse
+ ? "var(--color-surface-default-transparent)"
+ : "var(--color-surface-default-primary)";
+ const checkGlyphColor = checked
+ ? isInverse
+ ? "var(--color-content-inverse-primary)"
+ : "var(--color-border-default-brand-primary)"
+ : "transparent";
+ const labelColor = colorContent;
+
+ const combinedBoxStyles = `${baseBox} ${stateStyles[state]}`;
+
+ // Force visible outline for standard / default / unchecked
+ // Outline classes instead of inline styles so hover can override
+ const defaultOutlineClass = isInverse
+ ? "outline outline-1 outline-[var(--color-border-inverse-primary)]"
+ : "outline outline-1 outline-[var(--color-border-default-tertiary)]";
+
+ // Apply brand outline only on actual :hover, and only when standard/unchecked
+ const conditionalHoverOutlineClass =
+ "hover:outline hover:outline-1 hover:outline-[var(--color-border-default-brand-primary)]";
+
+ // Focus state for standard/unchecked with utility info color and specific blur/spread
+ const conditionalFocusClass =
+ "focus:outline focus:outline-1 focus:outline-[var(--color-border-default-utility-info)] focus:shadow-[0_0_10px_1px_var(--color-border-default-utility-info)]";
+
+ const handleToggle = (e) => {
+ if (disabled) return;
+ onChange?.({
+ checked: !checked,
+ value,
+ event: e,
+ });
+ };
+
+ // Generate unique ID for accessibility if not provided
+ const checkboxId =
+ id || `checkbox-${Math.random().toString(36).substr(2, 9)}`;
+
+ const accessibilityProps = {
+ role: "checkbox",
+ "aria-checked": checked ? "true" : "false",
+ ...(disabled && { "aria-disabled": "true", tabIndex: -1 }),
+ ...(!disabled && { tabIndex: 0 }),
+ ...(ariaLabel && { "aria-label": ariaLabel }),
+ ...(label && !ariaLabel && { "aria-labelledby": `${checkboxId}-label` }),
+ id: checkboxId,
+ ...props,
+ };
+
+ return (
+
+ );
+ }
+);
+
+Checkbox.displayName = "Checkbox";
+
+export default Checkbox;
diff --git a/app/forms/page.js b/app/forms/page.js
new file mode 100644
index 0000000..d4e9d52
--- /dev/null
+++ b/app/forms/page.js
@@ -0,0 +1,78 @@
+"use client";
+
+import React, { useState } from "react";
+import Checkbox from "../components/Checkbox";
+
+export default function FormsPlayground() {
+ const [standardChecked, setStandardChecked] = useState(false);
+ const [inverseChecked, setInverseChecked] = useState(true);
+
+ const variations = [
+ { title: "Standard / Default", mode: "standard", state: "default" },
+ { title: "Standard / Hover", mode: "standard", state: "hover" },
+ { title: "Standard / Focus", mode: "standard", state: "focus" },
+ { title: "Inverse / Default", mode: "inverse", state: "default" },
+ { title: "Inverse / Hover", mode: "inverse", state: "hover" },
+ { title: "Inverse / Focus", mode: "inverse", state: "focus" },
+ ];
+
+ return (
+
+
+ Forms Playground — Checkbox
+
+
+
+ Interactive examples
+
+ setStandardChecked(checked)}
+ />
+ setInverseChecked(checked)}
+ />
+
+
+
+
+ Static states
+
+ {variations.map((v) => (
+
+
{v.title}
+
+
+ {}}
+ />
+ {}}
+ />
+
+
+
+ ))}
+
+
+
+
Standard Mode
+
+
+
+
+
+
+
+ setMode(checked ? "inverse" : "standard")
+ }
+ data-testid="mode-switch"
+ />
+ setChecked(checked)}
+ mode={mode}
+ data-testid="test-checkbox"
+ />
+
+ );
+ }
+
+ const user = userEvent.setup();
+ render();
+
+ const modeSwitch = screen.getByTestId("mode-switch");
+ const testCheckbox = screen.getByTestId("test-checkbox");
+
+ // Initially standard mode
+ expect(testCheckbox).toBeInTheDocument();
+
+ // Switch to inverse mode
+ await user.click(modeSwitch);
+ expect(testCheckbox).toBeInTheDocument();
+
+ // Should still be functional
+ await user.click(testCheckbox);
+ expect(testCheckbox).toHaveAttribute("aria-checked", "true");
+ });
+
+ test("handles form submission with checkbox values", async () => {
+ const handleSubmit = vi.fn();
+
+ function FormWithSubmission() {
+ const [formData, setFormData] = useState({
+ agree: false,
+ newsletter: false,
+ });
+
+ const handleCheckboxChange =
+ (field) =>
+ ({ checked }) => {
+ setFormData((prev) => ({ ...prev, [field]: checked }));
+ };
+
+ const onSubmit = (e) => {
+ e.preventDefault();
+ handleSubmit(formData);
+ };
+
+ return (
+
+ );
+ }
+
+ const user = userEvent.setup();
+ render();
+
+ const agreeCheckbox = screen.getByTestId("agree-checkbox");
+ const newsletterCheckbox = screen.getByTestId("newsletter-checkbox");
+ const submitButton = screen.getByTestId("submit-button");
+
+ // Check some checkboxes
+ await user.click(agreeCheckbox);
+ await user.click(newsletterCheckbox);
+
+ // Submit form
+ await user.click(submitButton);
+
+ // Verify form data was captured
+ expect(handleSubmit).toHaveBeenCalledWith({
+ agree: true,
+ newsletter: true,
+ });
+ });
+
+ test("handles accessibility in form context", async () => {
+ render();
+
+ const form = screen.getByTestId("test-form");
+ const checkboxes = screen.getAllByRole("checkbox");
+
+ // All checkboxes should be accessible
+ expect(checkboxes).toHaveLength(3);
+
+ checkboxes.forEach((checkbox) => {
+ expect(checkbox).toHaveAttribute("role", "checkbox");
+ expect(checkbox).toHaveAttribute("aria-checked");
+ expect(checkbox).toHaveAttribute("tabIndex");
+ });
+
+ // Form should be accessible
+ expect(form).toBeInTheDocument();
+ });
+});
diff --git a/tests/storybook/Checkbox.interactions.test.js b/tests/storybook/Checkbox.interactions.test.js
new file mode 100644
index 0000000..d77004c
--- /dev/null
+++ b/tests/storybook/Checkbox.interactions.test.js
@@ -0,0 +1,136 @@
+import { within, userEvent } from "@storybook/test";
+import { expect } from "@storybook/test";
+
+// Interaction test for Default story
+export const DefaultInteraction = {
+ play: async ({ canvasElement }) => {
+ const canvas = within(canvasElement);
+ const checkbox = canvas.getByRole("checkbox");
+
+ // Test initial state
+ expect(checkbox).toHaveAttribute("aria-checked", "false");
+
+ // Test click interaction
+ await userEvent.click(checkbox);
+ expect(checkbox).toHaveAttribute("aria-checked", "true");
+
+ // Test toggle back
+ await userEvent.click(checkbox);
+ expect(checkbox).toHaveAttribute("aria-checked", "false");
+ },
+};
+
+// Interaction test for Checked story
+export const CheckedInteraction = {
+ play: async ({ canvasElement }) => {
+ const canvas = within(canvasElement);
+ const checkbox = canvas.getByRole("checkbox");
+
+ // Test initial checked state
+ expect(checkbox).toHaveAttribute("aria-checked", "true");
+
+ // Test unchecking
+ await userEvent.click(checkbox);
+ expect(checkbox).toHaveAttribute("aria-checked", "false");
+ },
+};
+
+// Interaction test for Standard story
+export const StandardInteraction = {
+ play: async ({ canvasElement }) => {
+ const canvas = within(canvasElement);
+ const checkboxes = canvas.getAllByRole("checkbox");
+
+ // Test both checkboxes
+ expect(checkboxes).toHaveLength(2);
+
+ // Test first checkbox (unchecked)
+ expect(checkboxes[0]).toHaveAttribute("aria-checked", "false");
+ await userEvent.click(checkboxes[0]);
+ expect(checkboxes[0]).toHaveAttribute("aria-checked", "true");
+
+ // Test second checkbox (checked)
+ expect(checkboxes[1]).toHaveAttribute("aria-checked", "true");
+ await userEvent.click(checkboxes[1]);
+ expect(checkboxes[1]).toHaveAttribute("aria-checked", "false");
+ },
+};
+
+// Interaction test for Inverse story
+export const InverseInteraction = {
+ play: async ({ canvasElement }) => {
+ const canvas = within(canvasElement);
+ const checkboxes = canvas.getAllByRole("checkbox");
+
+ // Test both checkboxes in inverse mode
+ expect(checkboxes).toHaveLength(2);
+
+ // Test first checkbox (unchecked)
+ expect(checkboxes[0]).toHaveAttribute("aria-checked", "false");
+ await userEvent.click(checkboxes[0]);
+ expect(checkboxes[0]).toHaveAttribute("aria-checked", "true");
+
+ // Test second checkbox (checked)
+ expect(checkboxes[1]).toHaveAttribute("aria-checked", "true");
+ await userEvent.click(checkboxes[1]);
+ expect(checkboxes[1]).toHaveAttribute("aria-checked", "false");
+ },
+};
+
+// Keyboard interaction test
+export const KeyboardInteraction = {
+ play: async ({ canvasElement }) => {
+ const canvas = within(canvasElement);
+ const checkbox = canvas.getByRole("checkbox");
+
+ // Focus the checkbox
+ await userEvent.tab();
+ expect(checkbox).toHaveFocus();
+
+ // Test Space key
+ await userEvent.keyboard(" ");
+ expect(checkbox).toHaveAttribute("aria-checked", "true");
+
+ // Test Enter key
+ await userEvent.keyboard("Enter");
+ expect(checkbox).toHaveAttribute("aria-checked", "false");
+ },
+};
+
+// Accessibility interaction test
+export const AccessibilityInteraction = {
+ play: async ({ canvasElement }) => {
+ const canvas = within(canvasElement);
+ const checkbox = canvas.getByRole("checkbox");
+
+ // Test ARIA attributes
+ expect(checkbox).toHaveAttribute("role", "checkbox");
+ expect(checkbox).toHaveAttribute("aria-checked");
+ expect(checkbox).toHaveAttribute("tabIndex");
+
+ // Test keyboard navigation
+ await userEvent.tab();
+ expect(checkbox).toHaveFocus();
+
+ // Test activation
+ await userEvent.keyboard(" ");
+ expect(checkbox).toHaveAttribute("aria-checked", "true");
+ },
+};
+
+// Form integration test
+export const FormIntegration = {
+ play: async ({ canvasElement }) => {
+ const canvas = within(canvasElement);
+ const checkbox = canvas.getByRole("checkbox");
+
+ // Test form integration
+ const hiddenInput = canvas.getByRole("checkbox", { hidden: true });
+ expect(hiddenInput).toBeInTheDocument();
+
+ // Test checkbox interaction
+ await userEvent.click(checkbox);
+ expect(checkbox).toHaveAttribute("aria-checked", "true");
+ expect(hiddenInput).toBeChecked();
+ },
+};
diff --git a/tests/storybook/Checkbox.storybook.test.js b/tests/storybook/Checkbox.storybook.test.js
new file mode 100644
index 0000000..b0e5322
--- /dev/null
+++ b/tests/storybook/Checkbox.storybook.test.js
@@ -0,0 +1,234 @@
+import { test, expect } from "@playwright/test";
+
+test.describe("Checkbox Storybook Tests", () => {
+ test.beforeEach(async ({ page }) => {
+ await page.goto("http://localhost:6006");
+ });
+
+ test("should load Checkbox stories", async ({ page }) => {
+ // Navigate to Checkbox stories
+ await page.click('[data-testid="Forms"]');
+ await page.click('[data-testid="Checkbox"]');
+
+ // Check that the stories are loaded
+ await expect(page.locator('[data-testid="Default"]')).toBeVisible();
+ await expect(page.locator('[data-testid="Checked"]')).toBeVisible();
+ await expect(page.locator('[data-testid="Standard"]')).toBeVisible();
+ await expect(page.locator('[data-testid="Inverse"]')).toBeVisible();
+ });
+
+ test("Default story should render correctly", async ({ page }) => {
+ await page.click('[data-testid="Forms"]');
+ await page.click('[data-testid="Checkbox"]');
+ await page.click('[data-testid="Default"]');
+
+ // Check that the checkbox is rendered
+ const checkbox = page.locator('[role="checkbox"]').first();
+ await expect(checkbox).toBeVisible();
+ await expect(checkbox).toHaveAttribute("aria-checked", "false");
+ });
+
+ test("Checked story should render correctly", async ({ page }) => {
+ await page.click('[data-testid="Forms"]');
+ await page.click('[data-testid="Checkbox"]');
+ await page.click('[data-testid="Checked"]');
+
+ // Check that the checkbox is checked
+ const checkbox = page.locator('[role="checkbox"]').first();
+ await expect(checkbox).toBeVisible();
+ await expect(checkbox).toHaveAttribute("aria-checked", "true");
+ });
+
+ test("Standard story should show standard mode checkboxes", async ({
+ page,
+ }) => {
+ await page.click('[data-testid="Forms"]');
+ await page.click('[data-testid="Checkbox"]');
+ await page.click('[data-testid="Standard"]');
+
+ // Check that multiple checkboxes are rendered
+ const checkboxes = page.locator('[role="checkbox"]');
+ await expect(checkboxes).toHaveCount(2); // Unchecked and checked
+
+ // Check that they have proper styling (standard mode)
+ const firstCheckbox = checkboxes.first();
+ await expect(firstCheckbox).toBeVisible();
+ });
+
+ test("Inverse story should show inverse mode checkboxes", async ({
+ page,
+ }) => {
+ await page.click('[data-testid="Forms"]');
+ await page.click('[data-testid="Checkbox"]');
+ await page.click('[data-testid="Inverse"]');
+
+ // Check that multiple checkboxes are rendered
+ const checkboxes = page.locator('[role="checkbox"]');
+ await expect(checkboxes).toHaveCount(2); // Unchecked and checked
+
+ // Check that they have proper styling (inverse mode)
+ const firstCheckbox = checkboxes.first();
+ await expect(firstCheckbox).toBeVisible();
+ });
+
+ test("should have proper controls in Controls panel", async ({ page }) => {
+ await page.click('[data-testid="Forms"]');
+ await page.click('[data-testid="Checkbox"]');
+ await page.click('[data-testid="Default"]');
+
+ // Check that controls are available
+ await expect(page.locator('[data-testid="control-checked"]')).toBeVisible();
+ await expect(page.locator('[data-testid="control-mode"]')).toBeVisible();
+ await expect(page.locator('[data-testid="control-state"]')).toBeVisible();
+ await expect(
+ page.locator('[data-testid="control-disabled"]')
+ ).toBeVisible();
+ await expect(page.locator('[data-testid="control-label"]')).toBeVisible();
+ });
+
+ test("should update when controls are changed", async ({ page }) => {
+ await page.click('[data-testid="Forms"]');
+ await page.click('[data-testid="Checkbox"]');
+ await page.click('[data-testid="Default"]');
+
+ // Toggle checked control
+ await page.click('[data-testid="control-checked"]');
+
+ // Check that the checkbox is now checked
+ const checkbox = page.locator('[role="checkbox"]').first();
+ await expect(checkbox).toHaveAttribute("aria-checked", "true");
+
+ // Toggle back
+ await page.click('[data-testid="control-checked"]');
+ await expect(checkbox).toHaveAttribute("aria-checked", "false");
+ });
+
+ test("should change mode when mode control is changed", async ({ page }) => {
+ await page.click('[data-testid="Forms"]');
+ await page.click('[data-testid="Checkbox"]');
+ await page.click('[data-testid="Default"]');
+
+ // Change mode to inverse
+ await page.selectOption('[data-testid="control-mode"]', "inverse");
+
+ // Check that the checkbox styling has changed (inverse mode)
+ const checkbox = page.locator('[role="checkbox"]').first();
+ await expect(checkbox).toBeVisible();
+
+ // Change back to standard
+ await page.selectOption('[data-testid="control-mode"]', "standard");
+ await expect(checkbox).toBeVisible();
+ });
+
+ test("should show disabled state when disabled control is toggled", async ({
+ page,
+ }) => {
+ await page.click('[data-testid="Forms"]');
+ await page.click('[data-testid="Checkbox"]');
+ await page.click('[data-testid="Default"]');
+
+ // Toggle disabled control
+ await page.click('[data-testid="control-disabled"]');
+
+ // Check that the checkbox is now disabled
+ const checkbox = page.locator('[role="checkbox"]').first();
+ await expect(checkbox).toHaveAttribute("aria-disabled", "true");
+ await expect(checkbox).toHaveAttribute("tabIndex", "-1");
+
+ // Toggle back
+ await page.click('[data-testid="control-disabled"]');
+ await expect(checkbox).toHaveAttribute("aria-disabled", "false");
+ await expect(checkbox).toHaveAttribute("tabIndex", "0");
+ });
+
+ test("should update label when label control is changed", async ({
+ page,
+ }) => {
+ await page.click('[data-testid="Forms"]');
+ await page.click('[data-testid="Checkbox"]');
+ await page.click('[data-testid="Default"]');
+
+ // Change label
+ await page.fill('[data-testid="control-label"]', "Custom Label");
+
+ // Check that the label has updated
+ await expect(page.locator("text=Custom Label")).toBeVisible();
+ });
+
+ test("should have proper accessibility in Storybook", async ({ page }) => {
+ await page.click('[data-testid="Forms"]');
+ await page.click('[data-testid="Checkbox"]');
+ await page.click('[data-testid="Default"]');
+
+ // Check accessibility attributes
+ const checkbox = page.locator('[role="checkbox"]').first();
+ await expect(checkbox).toHaveAttribute("role", "checkbox");
+ await expect(checkbox).toHaveAttribute("aria-checked");
+ await expect(checkbox).toHaveAttribute("tabIndex");
+ });
+
+ test("should support keyboard navigation in Storybook", async ({ page }) => {
+ await page.click('[data-testid="Forms"]');
+ await page.click('[data-testid="Checkbox"]');
+ await page.click('[data-testid="Default"]');
+
+ const checkbox = page.locator('[role="checkbox"]').first();
+
+ // Focus the checkbox
+ await checkbox.focus();
+ await expect(checkbox).toBeFocused();
+
+ // Test keyboard activation
+ await checkbox.press(" ");
+ await expect(checkbox).toHaveAttribute("aria-checked", "true");
+
+ await checkbox.press(" ");
+ await expect(checkbox).toHaveAttribute("aria-checked", "false");
+ });
+
+ test("should show proper documentation", async ({ page }) => {
+ await page.click('[data-testid="Forms"]');
+ await page.click('[data-testid="Checkbox"]');
+
+ // Check that documentation is available
+ await expect(page.locator('[data-testid="docs-tab"]')).toBeVisible();
+
+ // Click on docs tab
+ await page.click('[data-testid="docs-tab"]');
+
+ // Check that documentation content is shown
+ await expect(page.locator("text=Checkbox")).toBeVisible();
+ await expect(page.locator("text=Props")).toBeVisible();
+ });
+
+ test("should have proper story navigation", async ({ page }) => {
+ await page.click('[data-testid="Forms"]');
+ await page.click('[data-testid="Checkbox"]');
+
+ // Test navigation between stories
+ const stories = ["Default", "Checked", "Standard", "Inverse"];
+
+ for (const story of stories) {
+ await page.click(`[data-testid="${story}"]`);
+ await expect(page.locator('[role="checkbox"]').first()).toBeVisible();
+ }
+ });
+
+ test("should maintain state between story switches", async ({ page }) => {
+ await page.click('[data-testid="Forms"]');
+ await page.click('[data-testid="Checkbox"]');
+ await page.click('[data-testid="Default"]');
+
+ // Interact with checkbox
+ const checkbox = page.locator('[role="checkbox"]').first();
+ await checkbox.click();
+ await expect(checkbox).toHaveAttribute("aria-checked", "true");
+
+ // Switch to another story and back
+ await page.click('[data-testid="Checked"]');
+ await page.click('[data-testid="Default"]');
+
+ // Check that the state is maintained
+ await expect(checkbox).toHaveAttribute("aria-checked", "true");
+ });
+});
diff --git a/tests/unit/Checkbox.test.jsx b/tests/unit/Checkbox.test.jsx
new file mode 100644
index 0000000..f3b4e7a
--- /dev/null
+++ b/tests/unit/Checkbox.test.jsx
@@ -0,0 +1,166 @@
+import React from "react";
+import { render, screen, fireEvent } from "@testing-library/react";
+import { expect, test, describe, vi } from "vitest";
+import Checkbox from "../../app/components/Checkbox";
+
+describe("Checkbox Component", () => {
+ test("renders with default props", () => {
+ render();
+ const checkbox = screen.getByRole("checkbox");
+ expect(checkbox).toBeInTheDocument();
+ expect(checkbox).toHaveAttribute("aria-checked", "false");
+ });
+
+ test("renders with label", () => {
+ render();
+ expect(screen.getByText("Test checkbox")).toBeInTheDocument();
+ });
+
+ test("renders as checked when checked prop is true", () => {
+ render();
+ const checkbox = screen.getByRole("checkbox");
+ expect(checkbox).toHaveAttribute("aria-checked", "true");
+ });
+
+ test("renders as unchecked when checked prop is false", () => {
+ render();
+ const checkbox = screen.getByRole("checkbox");
+ expect(checkbox).toHaveAttribute("aria-checked", "false");
+ });
+
+ test("calls onChange when clicked", () => {
+ const handleChange = vi.fn();
+ render();
+
+ const checkbox = screen.getByRole("checkbox");
+ fireEvent.click(checkbox);
+
+ expect(handleChange).toHaveBeenCalledWith({
+ checked: true,
+ value: undefined,
+ event: expect.any(Object),
+ });
+ });
+
+ test("calls onChange when toggled from checked to unchecked", () => {
+ const handleChange = vi.fn();
+ render();
+
+ const checkbox = screen.getByRole("checkbox");
+ fireEvent.click(checkbox);
+
+ expect(handleChange).toHaveBeenCalledWith({
+ checked: false,
+ value: undefined,
+ event: expect.any(Object),
+ });
+ });
+
+ test("handles keyboard navigation", () => {
+ const handleChange = vi.fn();
+ render();
+
+ const checkbox = screen.getByRole("checkbox");
+
+ // Test Space key
+ fireEvent.keyDown(checkbox, { key: " " });
+ expect(handleChange).toHaveBeenCalledWith({
+ checked: true,
+ value: undefined,
+ event: expect.any(Object),
+ });
+
+ // Test Enter key
+ fireEvent.keyDown(checkbox, { key: "Enter" });
+ expect(handleChange).toHaveBeenCalledTimes(2);
+ });
+
+ test("does not call onChange when disabled", () => {
+ const handleChange = vi.fn();
+ render();
+
+ const checkbox = screen.getByRole("checkbox");
+ fireEvent.click(checkbox);
+
+ expect(handleChange).not.toHaveBeenCalled();
+ });
+
+ test("applies disabled attributes when disabled", () => {
+ render();
+ const checkbox = screen.getByRole("checkbox");
+ expect(checkbox).toHaveAttribute("aria-disabled", "true");
+ expect(checkbox).toHaveAttribute("tabIndex", "-1");
+ });
+
+ test("applies correct tabIndex when not disabled", () => {
+ render();
+ const checkbox = screen.getByRole("checkbox");
+ expect(checkbox).toHaveAttribute("tabIndex", "0");
+ });
+
+ test("renders with standard mode by default", () => {
+ render();
+ const checkbox = screen.getByRole("checkbox");
+ expect(checkbox).toBeInTheDocument();
+ });
+
+ test("renders with inverse mode", () => {
+ render();
+ const checkbox = screen.getByRole("checkbox");
+ expect(checkbox).toBeInTheDocument();
+ });
+
+ test("applies custom className", () => {
+ render();
+ const label = screen.getByRole("checkbox").closest("label");
+ expect(label).toHaveClass("custom-class");
+ });
+
+ test("passes through additional props", () => {
+ render();
+ const checkbox = screen.getByRole("checkbox");
+ expect(checkbox).toHaveAttribute("id", "test-checkbox");
+ });
+
+ test("renders hidden native input for form compatibility", () => {
+ render();
+ const hiddenInput = screen.getByDisplayValue("test-value");
+ expect(hiddenInput).toBeInTheDocument();
+ expect(hiddenInput).toHaveAttribute("type", "checkbox");
+ expect(hiddenInput).toHaveAttribute("name", "test");
+ expect(hiddenInput).toBeChecked();
+ });
+
+ test("applies aria-label when provided", () => {
+ render();
+ const checkbox = screen.getByRole("checkbox");
+ expect(checkbox).toHaveAttribute("aria-label", "Custom label");
+ });
+
+ test("prevents default on mouse down", () => {
+ render();
+ const label = screen.getByRole("checkbox").closest("label");
+ const mouseDownEvent = new MouseEvent("mousedown", { bubbles: true });
+ const preventDefaultSpy = vi.spyOn(mouseDownEvent, "preventDefault");
+
+ fireEvent(label, mouseDownEvent);
+ expect(preventDefaultSpy).toHaveBeenCalled();
+ });
+
+ test("renders checkmark SVG when checked", () => {
+ render();
+ const svg = screen.getByRole("checkbox").querySelector("svg");
+ expect(svg).toBeInTheDocument();
+ expect(svg).toHaveAttribute("aria-hidden", "true");
+ expect(svg).toHaveAttribute("focusable", "false");
+ });
+
+ test("does not render checkmark SVG when unchecked", () => {
+ render();
+ const svg = screen.getByRole("checkbox").querySelector("svg");
+ expect(svg).toBeInTheDocument();
+ // SVG should be present but checkmark should be transparent
+ const path = svg.querySelector("polyline");
+ expect(path).toHaveAttribute("stroke", "transparent");
+ });
+});
diff --git a/tests/visual/Checkbox.visual.test.js b/tests/visual/Checkbox.visual.test.js
new file mode 100644
index 0000000..6ccfe26
--- /dev/null
+++ b/tests/visual/Checkbox.visual.test.js
@@ -0,0 +1,83 @@
+import { test, expect } from "@playwright/test";
+
+test.describe("Checkbox Visual Regression Tests", () => {
+ test("Standard mode - unchecked", async ({ page }) => {
+ await page.goto("/forms");
+ await expect(
+ page.locator('[data-testid="standard-unchecked"]')
+ ).toBeVisible();
+ await expect(page).toHaveScreenshot("checkbox-standard-unchecked.png");
+ });
+
+ test("Standard mode - checked", async ({ page }) => {
+ await page.goto("/forms");
+ await expect(
+ page.locator('[data-testid="standard-checked"]')
+ ).toBeVisible();
+ await expect(page).toHaveScreenshot("checkbox-standard-checked.png");
+ });
+
+ test("Inverse mode - unchecked", async ({ page }) => {
+ await page.goto("/forms");
+ await expect(
+ page.locator('[data-testid="inverse-unchecked"]')
+ ).toBeVisible();
+ await expect(page).toHaveScreenshot("checkbox-inverse-unchecked.png");
+ });
+
+ test("Inverse mode - checked", async ({ page }) => {
+ await page.goto("/forms");
+ await expect(page.locator('[data-testid="inverse-checked"]')).toBeVisible();
+ await expect(page).toHaveScreenshot("checkbox-inverse-checked.png");
+ });
+
+ test("Standard mode - hover state", async ({ page }) => {
+ await page.goto("/forms");
+ const checkbox = page.locator('[data-testid="standard-unchecked"]');
+ await checkbox.hover();
+ await expect(page).toHaveScreenshot("checkbox-standard-hover.png");
+ });
+
+ test("Standard mode - focus state", async ({ page }) => {
+ await page.goto("/forms");
+ const checkbox = page.locator('[data-testid="standard-unchecked"]');
+ await checkbox.focus();
+ await expect(page).toHaveScreenshot("checkbox-standard-focus.png");
+ });
+
+ test("Inverse mode - hover state", async ({ page }) => {
+ await page.goto("/forms");
+ const checkbox = page.locator('[data-testid="inverse-unchecked"]');
+ await checkbox.hover();
+ await expect(page).toHaveScreenshot("checkbox-inverse-hover.png");
+ });
+
+ test("Inverse mode - focus state", async ({ page }) => {
+ await page.goto("/forms");
+ const checkbox = page.locator('[data-testid="inverse-unchecked"]');
+ await checkbox.focus();
+ await expect(page).toHaveScreenshot("checkbox-inverse-focus.png");
+ });
+
+ test("Disabled state - standard", async ({ page }) => {
+ await page.goto("/forms");
+ await expect(
+ page.locator('[data-testid="standard-disabled"]')
+ ).toBeVisible();
+ await expect(page).toHaveScreenshot("checkbox-standard-disabled.png");
+ });
+
+ test("Disabled state - inverse", async ({ page }) => {
+ await page.goto("/forms");
+ await expect(
+ page.locator('[data-testid="inverse-disabled"]')
+ ).toBeVisible();
+ await expect(page).toHaveScreenshot("checkbox-inverse-disabled.png");
+ });
+
+ test("All variations grid", async ({ page }) => {
+ await page.goto("/forms");
+ await expect(page.locator('[data-testid="checkbox-grid"]')).toBeVisible();
+ await expect(page).toHaveScreenshot("checkbox-all-variations.png");
+ });
+});