paris 0.19.0 → 0.20.0

package/src/stories/checkbox/Checkbox.test.tsx

@@ -0,0 +1,531 @@
+import { useState } from 'react';
+import { render, screen } from '../../test/render';
+import { Checkbox } from './Checkbox';
+
+// Helper wrapper for controlled checkbox behavior
+function ControlledCheckbox({
+    defaultChecked = false,
+    ...props
+}: Omit<React.ComponentProps<typeof Checkbox>, 'checked'> & { defaultChecked?: boolean }) {
+    const [checked, setChecked] = useState(defaultChecked);
+    return <Checkbox {...props} checked={checked} onChange={(val) => setChecked(!!val)} />;
+}
+
+describe('Checkbox', () => {
+    // ─── Rendering ───────────────────────────────────────────────────
+
+    describe('rendering', () => {
+        it('renders with default kind', () => {
+            render(<Checkbox checked={false}>Accept terms</Checkbox>);
+            expect(screen.getByRole('checkbox')).toBeInTheDocument();
+            expect(screen.getByText('Accept terms')).toBeInTheDocument();
+        });
+
+        it('renders unchecked by default', () => {
+            render(<Checkbox checked={false}>Label</Checkbox>);
+            const checkbox = screen.getByRole('checkbox');
+            expect(checkbox).not.toBeChecked();
+        });
+
+        it('renders checked when checked prop is true', () => {
+            render(<Checkbox checked={true}>Label</Checkbox>);
+            const checkbox = screen.getByRole('checkbox');
+            expect(checkbox).toBeChecked();
+        });
+
+        it('renders label text as children', () => {
+            render(<Checkbox checked={false}>My label text</Checkbox>);
+            expect(screen.getByText('My label text')).toBeInTheDocument();
+        });
+
+        it('renders ReactNode children', () => {
+            render(
+                <Checkbox checked={false}>
+                    <span data-testid="custom-label">Custom element</span>
+                </Checkbox>,
+            );
+            expect(screen.getByTestId('custom-label')).toBeInTheDocument();
+            expect(screen.getByText('Custom element')).toBeInTheDocument();
+        });
+
+        it('renders without children', () => {
+            render(<Checkbox checked={false} />);
+            expect(screen.getByRole('checkbox')).toBeInTheDocument();
+        });
+    });
+
+    // ─── Interaction ─────────────────────────────────────────────────
+
+    describe('interaction', () => {
+        it('calls onChange when clicked', async () => {
+            const handleChange = vi.fn();
+            const { user } = render(
+                <Checkbox checked={false} onChange={handleChange}>
+                    Toggle me
+                </Checkbox>,
+            );
+
+            await user.click(screen.getByRole('checkbox'));
+            expect(handleChange).toHaveBeenCalledTimes(1);
+            expect(handleChange).toHaveBeenCalledWith(true);
+        });
+
+        it('calls onChange with false when unchecking', async () => {
+            const handleChange = vi.fn();
+            const { user } = render(
+                <Checkbox checked={true} onChange={handleChange}>
+                    Toggle me
+                </Checkbox>,
+            );
+
+            await user.click(screen.getByRole('checkbox'));
+            expect(handleChange).toHaveBeenCalledWith(false);
+        });
+
+        it('toggles checked state in a controlled component', async () => {
+            const { user } = render(<ControlledCheckbox>Toggle me</ControlledCheckbox>);
+
+            const checkbox = screen.getByRole('checkbox');
+            expect(checkbox).not.toBeChecked();
+
+            await user.click(checkbox);
+            expect(checkbox).toBeChecked();
+
+            await user.click(checkbox);
+            expect(checkbox).not.toBeChecked();
+        });
+
+        it('clicking the label toggles the checkbox', async () => {
+            const handleChange = vi.fn();
+            const { user } = render(
+                <Checkbox checked={false} onChange={handleChange}>
+                    Click this label
+                </Checkbox>,
+            );
+
+            // The label wraps the checkbox, so clicking text should also trigger
+            await user.click(screen.getByText('Click this label'));
+            expect(handleChange).toHaveBeenCalled();
+        });
+    });
+
+    // ─── Disabled ────────────────────────────────────────────────────
+
+    describe('disabled', () => {
+        it('applies disabled styling class', () => {
+            const { container } = render(
+                <Checkbox checked={false} disabled>
+                    Disabled
+                </Checkbox>,
+            );
+            const label = container.querySelector('label');
+            expect(label).toHaveClass('disabled');
+        });
+
+        it('sets data-disabled on the checkbox root', () => {
+            render(
+                <Checkbox checked={false} disabled>
+                    Disabled
+                </Checkbox>,
+            );
+            const checkbox = screen.getByRole('checkbox');
+            expect(checkbox).toHaveAttribute('data-disabled', 'true');
+        });
+
+        it('sets data-disabled on the switch when kind is switch', () => {
+            render(
+                <Checkbox kind="switch" checked={false} disabled>
+                    Disabled switch
+                </Checkbox>,
+            );
+            const switchEl = screen.getByRole('switch');
+            expect(switchEl).toHaveAttribute('data-disabled', 'true');
+        });
+    });
+
+    // ─── Kinds ───────────────────────────────────────────────────────
+
+    describe('kind variants', () => {
+        describe('default kind', () => {
+            it('renders a Radix checkbox with default class', () => {
+                const { container } = render(
+                    <Checkbox kind="default" checked={false}>
+                        Default
+                    </Checkbox>,
+                );
+                const root = container.querySelector('[class*="root"]');
+                expect(root).toHaveClass('default');
+            });
+
+            it('shows label text next to checkbox', () => {
+                render(
+                    <Checkbox kind="default" checked={false}>
+                        Default label
+                    </Checkbox>,
+                );
+                expect(screen.getByText('Default label')).toBeInTheDocument();
+                expect(screen.getByRole('checkbox')).toBeInTheDocument();
+            });
+
+            it('renders an SVG check icon when checked', () => {
+                const { container } = render(
+                    <Checkbox kind="default" checked={true}>
+                        Checked
+                    </Checkbox>,
+                );
+                const svg = container.querySelector('svg');
+                expect(svg).toBeInTheDocument();
+            });
+        });
+
+        describe('surface kind', () => {
+            it('renders a Radix checkbox with surface class', () => {
+                const { container } = render(
+                    <Checkbox kind="surface" checked={false}>
+                        Surface
+                    </Checkbox>,
+                );
+                const root = container.querySelector('[class*="root"]');
+                expect(root).toHaveClass('surface');
+            });
+
+            it('shows children inside the Radix root (not outside)', () => {
+                render(
+                    <Checkbox kind="surface" checked={false}>
+                        Surface label
+                    </Checkbox>,
+                );
+                expect(screen.getByText('Surface label')).toBeInTheDocument();
+            });
+
+            it('does not show label outside root when kind is surface', () => {
+                const { container } = render(
+                    <Checkbox kind="surface" checked={false}>
+                        Surface label
+                    </Checkbox>,
+                );
+                // In surface mode, the label text is inside the Radix root, not adjacent
+                const root = container.querySelector('[class*="root"]');
+                expect(root).toContainElement(screen.getByText('Surface label'));
+            });
+        });
+
+        describe('panel kind', () => {
+            it('renders a Radix checkbox with panel class', () => {
+                const { container } = render(
+                    <Checkbox kind="panel" checked={false}>
+                        Panel
+                    </Checkbox>,
+                );
+                const root = container.querySelector('[class*="root"]');
+                expect(root).toHaveClass('panel');
+            });
+
+            it('shows children inside the Radix root', () => {
+                const { container } = render(
+                    <Checkbox kind="panel" checked={false}>
+                        Panel label
+                    </Checkbox>,
+                );
+                const root = container.querySelector('[class*="root"]');
+                expect(root).toContainElement(screen.getByText('Panel label'));
+            });
+
+            it('renders a box element when unchecked', () => {
+                const { container } = render(
+                    <Checkbox kind="panel" checked={false}>
+                        Panel
+                    </Checkbox>,
+                );
+                const box = container.querySelector('.box');
+                expect(box).toBeInTheDocument();
+            });
+        });
+
+        describe('switch kind', () => {
+            it('renders a switch element instead of a Radix checkbox', () => {
+                render(
+                    <Checkbox kind="switch" checked={false}>
+                        Switch
+                    </Checkbox>,
+                );
+                // HeadlessUI Switch renders a button with role="switch"
+                expect(screen.getByRole('switch')).toBeInTheDocument();
+            });
+
+            it('does not render a Radix checkbox role', () => {
+                render(
+                    <Checkbox kind="switch" checked={false}>
+                        Switch
+                    </Checkbox>,
+                );
+                expect(screen.queryByRole('checkbox')).not.toBeInTheDocument();
+            });
+
+            it('shows label text', () => {
+                render(
+                    <Checkbox kind="switch" checked={false}>
+                        Switch label
+                    </Checkbox>,
+                );
+                expect(screen.getByText('Switch label')).toBeInTheDocument();
+            });
+
+            it('toggles switch state on click', async () => {
+                const handleChange = vi.fn();
+                const { user } = render(
+                    <Checkbox kind="switch" checked={false} onChange={handleChange}>
+                        Switch
+                    </Checkbox>,
+                );
+
+                await user.click(screen.getByRole('switch'));
+                expect(handleChange).toHaveBeenCalledWith(true);
+            });
+
+            it('renders knob element', () => {
+                const { container } = render(
+                    <Checkbox kind="switch" checked={false}>
+                        Switch
+                    </Checkbox>,
+                );
+                const knob = container.querySelector('[class*="knob"]');
+                expect(knob).toBeInTheDocument();
+            });
+
+            it('applies knobChecked class when checked', () => {
+                const { container } = render(
+                    <Checkbox kind="switch" checked={true}>
+                        Switch
+                    </Checkbox>,
+                );
+                const knob = container.querySelector('[class*="knob"]');
+                expect(knob).toHaveClass('knobChecked');
+            });
+
+            it('does not apply knobChecked class when unchecked', () => {
+                const { container } = render(
+                    <Checkbox kind="switch" checked={false}>
+                        Switch
+                    </Checkbox>,
+                );
+                const knob = container.querySelector('[class*="knob"]');
+                expect(knob).not.toHaveClass('knobChecked');
+            });
+        });
+    });
+
+    // ─── Hide Label ──────────────────────────────────────────────────
+
+    describe('hideLabel', () => {
+        it('visually hides the label when hideLabel is true', () => {
+            const { container } = render(
+                <Checkbox kind="default" checked={false} hideLabel>
+                    Hidden label
+                </Checkbox>,
+            );
+            // VisuallyHidden uses Ariakit's VisuallyHidden which renders content off-screen
+            // The text should still be in the DOM for accessibility
+            expect(screen.getByText('Hidden label')).toBeInTheDocument();
+        });
+
+        it('shows label when hideLabel is false', () => {
+            render(
+                <Checkbox kind="default" checked={false} hideLabel={false}>
+                    Visible label
+                </Checkbox>,
+            );
+            expect(screen.getByText('Visible label')).toBeInTheDocument();
+        });
+
+        it('hides the label for switch kind', () => {
+            render(
+                <Checkbox kind="switch" checked={false} hideLabel>
+                    Hidden switch label
+                </Checkbox>,
+            );
+            // Still accessible in DOM
+            expect(screen.getByText('Hidden switch label')).toBeInTheDocument();
+        });
+    });
+
+    // ─── className forwarding ────────────────────────────────────────
+
+    describe('className forwarding', () => {
+        it('forwards className to the label container', () => {
+            const { container } = render(
+                <Checkbox checked={false} className="custom-class">
+                    Label
+                </Checkbox>,
+            );
+            const label = container.querySelector('label');
+            expect(label).toHaveClass('custom-class');
+            expect(label).toHaveClass('container');
+        });
+
+        it('preserves container class when custom className is added', () => {
+            const { container } = render(
+                <Checkbox checked={false} className="my-class">
+                    Label
+                </Checkbox>,
+            );
+            const label = container.querySelector('label');
+            expect(label).toHaveClass('container');
+            expect(label).toHaveClass('my-class');
+        });
+    });
+
+    // ─── Checked state styling ───────────────────────────────────────
+
+    describe('checked state styling', () => {
+        it('applies checked class to container when checked', () => {
+            const { container } = render(<Checkbox checked={true}>Checked</Checkbox>);
+            const label = container.querySelector('label');
+            expect(label).toHaveClass('checked');
+        });
+
+        it('does not apply checked class to container when unchecked', () => {
+            const { container } = render(<Checkbox checked={false}>Unchecked</Checkbox>);
+            const label = container.querySelector('label');
+            expect(label).not.toHaveClass('checked');
+        });
+    });
+
+    // ─── Accessibility ───────────────────────────────────────────────
+
+    describe('accessibility', () => {
+        it('has proper role="checkbox" for default kind', () => {
+            render(<Checkbox checked={false}>Accessible</Checkbox>);
+            expect(screen.getByRole('checkbox')).toBeInTheDocument();
+        });
+
+        it('has proper role="switch" for switch kind', () => {
+            render(
+                <Checkbox kind="switch" checked={false}>
+                    Switch
+                </Checkbox>,
+            );
+            expect(screen.getByRole('switch')).toBeInTheDocument();
+        });
+
+        it('has aria-checked false when unchecked', () => {
+            render(<Checkbox checked={false}>Label</Checkbox>);
+            expect(screen.getByRole('checkbox')).toHaveAttribute('aria-checked', 'false');
+        });
+
+        it('has aria-checked true when checked', () => {
+            render(<Checkbox checked={true}>Label</Checkbox>);
+            expect(screen.getByRole('checkbox')).toHaveAttribute('aria-checked', 'true');
+        });
+
+        it('sets aria-details when children is a string', () => {
+            render(<Checkbox checked={false}>String label</Checkbox>);
+            const checkbox = screen.getByRole('checkbox');
+            expect(checkbox).toHaveAttribute('aria-details', 'String label');
+        });
+
+        it('does not set aria-details when children is not a string', () => {
+            render(
+                <Checkbox checked={false}>
+                    <span>Non-string label</span>
+                </Checkbox>,
+            );
+            const checkbox = screen.getByRole('checkbox');
+            expect(checkbox).not.toHaveAttribute('aria-details');
+        });
+
+        it('associates label with checkbox via htmlFor and id', () => {
+            const { container } = render(<Checkbox checked={false}>Label</Checkbox>);
+            const label = container.querySelector('label');
+            const checkbox = screen.getByRole('checkbox');
+            expect(label).toHaveAttribute('for');
+            expect(checkbox).toHaveAttribute('id', label?.getAttribute('for'));
+        });
+
+        it('associates label with switch via htmlFor and id', () => {
+            const { container } = render(
+                <Checkbox kind="switch" checked={false}>
+                    Switch label
+                </Checkbox>,
+            );
+            const label = container.querySelector('label');
+            const switchEl = screen.getByRole('switch');
+            expect(label).toHaveAttribute('for');
+            expect(switchEl).toHaveAttribute('id', label?.getAttribute('for'));
+        });
+    });
+
+    // ─── Spread props ────────────────────────────────────────────────
+
+    describe('spread props', () => {
+        it('forwards additional HTML attributes to the label', () => {
+            const { container } = render(
+                <Checkbox checked={false} data-testid="checkbox-label" title="My checkbox">
+                    Label
+                </Checkbox>,
+            );
+            const label = container.querySelector('label');
+            expect(label).toHaveAttribute('data-testid', 'checkbox-label');
+            expect(label).toHaveAttribute('title', 'My checkbox');
+        });
+
+        it('forwards style prop to the label', () => {
+            const { container } = render(
+                <Checkbox checked={false} style={{ marginTop: '10px' }}>
+                    Label
+                </Checkbox>,
+            );
+            const label = container.querySelector('label');
+            expect(label).toHaveStyle({ marginTop: '10px' });
+        });
+    });
+
+    // ─── Edge cases ──────────────────────────────────────────────────
+
+    describe('edge cases', () => {
+        it('handles multiple rapid toggles', async () => {
+            const handleChange = vi.fn();
+            const { user } = render(<ControlledCheckbox onChange={handleChange}>Rapid</ControlledCheckbox>);
+
+            const checkbox = screen.getByRole('checkbox');
+            await user.click(checkbox);
+            await user.click(checkbox);
+            await user.click(checkbox);
+
+            expect(checkbox).toBeChecked();
+        });
+
+        it('renders with no onChange handler without crashing', () => {
+            expect(() => {
+                render(<Checkbox checked={false}>No handler</Checkbox>);
+            }).not.toThrow();
+        });
+
+        it('renders with checked=true and no onChange without crashing', () => {
+            expect(() => {
+                render(<Checkbox checked={true}>Static checked</Checkbox>);
+            }).not.toThrow();
+        });
+
+        it('handles empty string children', () => {
+            render(<Checkbox checked={false}>{''}</Checkbox>);
+            expect(screen.getByRole('checkbox')).toBeInTheDocument();
+        });
+
+        it('handles number children', () => {
+            render(<Checkbox checked={false}>{42}</Checkbox>);
+            expect(screen.getByText('42')).toBeInTheDocument();
+        });
+
+        it('applies both disabled and checked classes simultaneously', () => {
+            const { container } = render(
+                <Checkbox checked={true} disabled>
+                    Both
+                </Checkbox>,
+            );
+            const label = container.querySelector('label');
+            expect(label).toHaveClass('disabled');
+            expect(label).toHaveClass('checked');
+        });
+    });
+});