Checkbox component with testing and storybook

2025-10-08 17:49:13 -06:00
parent 2835fac38b
commit 0b9e918fd0
12 changed files with 6187 additions and 4527 deletions
@@ -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();
+  },
+};