taro-uno-ui 0.9.0-beta

package/src/components/form/Checkbox/Checkbox.test.tsx

@@ -0,0 +1,1140 @@
+import React from 'react';
+import { useRef } from 'react';
+import { render, screen, fireEvent, waitFor, act } from '@testing-library/react';
+import { vi } from 'vitest';
+import { Checkbox } from './Checkbox';
+import { CheckboxGroup } from './CheckboxGroup';
+import type { CheckboxProps, CheckboxRef, CheckboxGroupProps, CheckboxGroupRef } from './Checkbox.types';
+
+// Mock Taro components
+vi.mock('@tarojs/components', () => ({
+  Checkbox: ({ checked, onChange, onClick, onNativeClick, children, ...props }: any) => {
+    const disabled = props.disabled || false;
+    const readonly = !!props.readonly;
+    React.useEffect(() => {
+      if (props.autoFocus) {
+        props.onFocus?.({ type: 'focus' });
+      }
+    }, [props.autoFocus]);
+    const handleClick = (e: any) => {
+      // Create a proper event object with the structure expected by tests
+      const inputElement = e.target || {
+        ...props,
+        type: 'checkbox',
+        get checked() { return checked; },
+        get disabled() { return disabled; },
+        get readOnly() { return readonly; },
+        getAttribute: (name: string) => {
+          const attrs: Record<string, any> = {
+            'data-testid': props['data-testid'],
+            'aria-checked': checked ? 'true' : 'false',
+            'aria-disabled': disabled ? 'true' : 'false',
+            'aria-readonly': readonly ? 'true' : 'false',
+            'aria-busy': props.accessibilityState?.busy ? 'true' : undefined,
+            'aria-expanded': props.accessibilityState?.expanded ? 'true' : 'false',
+            'data-checked': checked ? 'true' : 'false',
+            'data-readonly': readonly ? 'true' : undefined,
+            'data-value': props.value,
+            'tabindex': props.tabIndex,
+            'aria-label': props.accessibilityLabel || props.label,
+          };
+          return attrs[name] ?? null;
+        }
+      };
+
+      const eventObject = {
+        target: inputElement,
+        currentTarget: e.currentTarget || inputElement,
+        type: 'change',
+        ...e
+      };
+
+      if (onClick) {
+        onClick({ ...eventObject, type: 'click' });
+      }
+      // Also trigger the change event on click (since checkbox is clicked)
+      if (onChange) {
+        onChange(!checked, eventObject);
+      }
+    };
+
+    return (
+      <div data-testid="checkbox-wrapper">
+        <input
+          ref={(el) => {
+            // Store the element reference for event handling
+            if (el) {
+              el.checked = checked;
+              el.disabled = disabled;
+              el.readOnly = readonly;
+            }
+          }}
+          type="checkbox"
+          checked={checked}
+          onClick={handleClick}
+          readOnly={readonly}
+          readonly={readonly}
+          data-readonly={readonly ? 'true' : undefined}
+          aria-label={props.accessibilityLabel || props.label}
+          aria-checked={checked ? 'true' : 'false'}
+          aria-disabled={disabled ? 'true' : 'false'}
+          aria-busy={props.accessibilityState?.busy ? 'true' : undefined}
+          aria-expanded={props.accessibilityState?.expanded?.toString()}
+          tabIndex={props.tabIndex}
+          data-value={props.value}
+          {...props}
+        />
+        {children}
+      </div>
+    );
+  },
+  View: ({ children, ...props }: any) => <div {...props}>{children}</div>,
+  Text: ({ children, ...props }: any) => <span {...props}>{children}</span>,
+}));
+
+// Mock PlatformDetector
+vi.mock('@/utils', () => ({
+  PlatformDetector: {
+    getPlatform: () => 'h5',
+  },
+}));
+
+describe('Checkbox Component', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  describe('Rendering', () => {
+    it('renders Checkbox component with default props', () => {
+      render(<Checkbox />);
+      expect(screen.getByTestId('checkbox')).toBeInTheDocument();
+    });
+
+    it('renders with label', () => {
+      render(<Checkbox label="Accept terms" />);
+      expect(screen.getByText('Accept terms')).toBeInTheDocument();
+    });
+
+    it('renders with helper text', () => {
+      render(<Checkbox helperText="Please accept the terms" />);
+      expect(screen.getByText('Please accept the terms')).toBeInTheDocument();
+    });
+
+    it('renders with error text', () => {
+      render(<Checkbox errorText="This field is required" status="error" />);
+      expect(screen.getByText('This field is required')).toBeInTheDocument();
+    });
+
+    it('renders unchecked by default', () => {
+      render(<Checkbox />);
+      const checkbox = screen.getByTestId('checkbox');
+      expect(checkbox).not.toBeChecked();
+    });
+
+    it('renders checked when controlled', () => {
+      render(<Checkbox checked={true} />);
+      const checkbox = screen.getByTestId('checkbox');
+      expect(checkbox).toBeChecked();
+    });
+
+    it('renders checked with defaultChecked', () => {
+      render(<Checkbox defaultChecked={true} />);
+      const checkbox = screen.getByTestId('checkbox');
+      expect(checkbox).toBeChecked();
+    });
+
+    it('renders with custom icon', () => {
+      render(<Checkbox checked={true} icon="★" />);
+      expect(screen.getByText('★')).toBeInTheDocument();
+    });
+
+    it('renders with label on left', () => {
+      render(<Checkbox label="Left label" labelPosition="left" />);
+      const label = screen.getByText('Left label');
+      expect(label).toBeInTheDocument();
+    });
+
+    it('renders disabled', () => {
+      render(<Checkbox disabled />);
+      const checkbox = screen.getByTestId('checkbox');
+      expect(checkbox).toBeDisabled();
+    });
+
+    it('renders readonly', () => {
+      render(<Checkbox readonly />);
+      const checkbox = screen.getByTestId('checkbox');
+      expect(checkbox).toHaveAttribute('data-readonly', 'true');
+    });
+
+    it('renders indeterminate', () => {
+      render(<Checkbox indeterminate={true} />);
+      const checkbox = screen.getByTestId('checkbox');
+      expect(checkbox).toHaveAttribute('data-indeterminate', 'true');
+    });
+  });
+
+  describe('Value Handling', () => {
+    it('handles controlled mode', () => {
+      const handleChange = vi.fn();
+      render(<Checkbox checked={true} onChange={handleChange} />);
+
+      const checkbox = screen.getByTestId('checkbox');
+      fireEvent.click(checkbox);
+
+      expect(handleChange).toHaveBeenCalledWith(false, expect.any(Object));
+    });
+
+    it('handles uncontrolled mode', () => {
+      const handleChange = vi.fn();
+      render(<Checkbox defaultChecked={false} onChange={handleChange} />);
+      
+      const checkbox = screen.getByTestId('checkbox');
+      fireEvent.click(checkbox);
+      
+      expect(handleChange).toHaveBeenCalledWith(true, expect.any(Object));
+      expect(checkbox).toBeChecked();
+    });
+
+    it('toggles checked state on click', () => {
+      const handleChange = vi.fn();
+      render(<Checkbox onChange={handleChange} />);
+      
+      const checkbox = screen.getByTestId('checkbox');
+      
+      // First click - check
+      fireEvent.click(checkbox);
+      expect(handleChange).toHaveBeenCalledWith(true, expect.any(Object));
+      
+      // Second click - uncheck
+      fireEvent.click(checkbox);
+      expect(handleChange).toHaveBeenCalledWith(false, expect.any(Object));
+    });
+  });
+
+  describe('States', () => {
+    it('handles disabled state', () => {
+      const handleChange = vi.fn();
+      render(<Checkbox disabled onChange={handleChange} />);
+      
+      const checkbox = screen.getByTestId('checkbox');
+      expect(checkbox).toBeDisabled();
+      
+      fireEvent.click(checkbox);
+      expect(handleChange).not.toHaveBeenCalled();
+    });
+
+    it('handles readonly state', () => {
+      const handleChange = vi.fn();
+      render(<Checkbox readonly onChange={handleChange} />);
+      
+      const checkbox = screen.getByTestId('checkbox');
+      fireEvent.click(checkbox);
+      
+      // Readonly should still allow interaction but handle it differently
+      expect(handleChange).not.toHaveBeenCalled();
+    });
+
+    it('handles indeterminate state', () => {
+      render(<Checkbox indeterminate={true} />);
+      const checkbox = screen.getByTestId('checkbox');
+      expect(checkbox).toHaveAttribute('data-indeterminate', 'true');
+    });
+
+    it('handles error state', () => {
+      render(<Checkbox status="error" />);
+      const checkbox = screen.getByTestId('checkbox');
+      expect(checkbox).toHaveClass('checkbox-error');
+    });
+
+    it('handles warning state', () => {
+      render(<Checkbox status="warning" />);
+      const checkbox = screen.getByTestId('checkbox');
+      expect(checkbox).toHaveClass('checkbox-warning');
+    });
+
+    it('handles success state', () => {
+      render(<Checkbox status="success" />);
+      const checkbox = screen.getByTestId('checkbox');
+      expect(checkbox).toHaveClass('checkbox-success');
+    });
+  });
+
+  describe('Sizes and Variants', () => {
+    const sizes: Array<'xs' | 'sm' | 'md' | 'lg' | 'xl'> = ['xs', 'sm', 'md', 'lg', 'xl'];
+    const variants: Array<'default' | 'filled' | 'outlined'> = ['default', 'filled', 'outlined'];
+    const colors: Array<'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'info'> = 
+      ['primary', 'secondary', 'success', 'warning', 'error', 'info'];
+    
+    sizes.forEach((size) => {
+      it(`renders with size ${size}`, () => {
+        render(<Checkbox size={size} />);
+        const checkbox = screen.getByTestId('checkbox');
+        expect(checkbox).toHaveClass(`checkbox-${size}`);
+      });
+    });
+
+    variants.forEach((variant) => {
+      it(`renders with variant ${variant}`, () => {
+        render(<Checkbox variant={variant} />);
+        const checkbox = screen.getByTestId('checkbox');
+        expect(checkbox).toHaveClass(`checkbox-${variant}`);
+      });
+    });
+
+    colors.forEach((color) => {
+      it(`renders with color ${color}`, () => {
+        render(<Checkbox color={color} />);
+        const checkbox = screen.getByTestId('checkbox');
+        expect(checkbox).toHaveClass(`checkbox-${color}`);
+      });
+    });
+  });
+
+  describe('Events', () => {
+    it('calls onChange when clicked', () => {
+      const handleChange = vi.fn();
+      render(<Checkbox onChange={handleChange} />);
+      
+      const checkbox = screen.getByTestId('checkbox');
+      fireEvent.click(checkbox);
+      
+      expect(handleChange).toHaveBeenCalledWith(true, expect.any(Object));
+    });
+
+    it('calls onClick when clicked', () => {
+      const handleClick = vi.fn();
+      render(<Checkbox onClick={handleClick} />);
+      
+      const checkbox = screen.getByTestId('checkbox');
+      fireEvent.click(checkbox);
+      
+      expect(handleClick).toHaveBeenCalledWith(expect.any(Object));
+    });
+
+    it('passes correct event to onChange handler', () => {
+      const handleChange = vi.fn();
+      render(<Checkbox onChange={handleChange} />);
+
+      const checkbox = screen.getByTestId('checkbox');
+
+      fireEvent.click(checkbox);
+
+      // The target should be an object with checkbox-like properties
+      expect(handleChange).toHaveBeenCalledWith(true, expect.objectContaining({
+        target: expect.objectContaining({
+          getAttribute: expect.any(Function),
+          type: 'checkbox',
+        }),
+        type: 'change',
+      }));
+    });
+
+    it('does not call onChange when disabled', () => {
+      const handleChange = vi.fn();
+      render(<Checkbox disabled onChange={handleChange} />);
+      
+      const checkbox = screen.getByTestId('checkbox');
+      fireEvent.click(checkbox);
+      
+      expect(handleChange).not.toHaveBeenCalled();
+    });
+
+    it('does not call onChange when readonly', () => {
+      const handleChange = vi.fn();
+      render(<Checkbox readonly onChange={handleChange} />);
+      
+      const checkbox = screen.getByTestId('checkbox');
+      fireEvent.click(checkbox);
+      
+      expect(handleChange).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('Validation', () => {
+    it('validates required rule', async () => {
+      const rules = [{ required: true, message: 'This field is required' }];
+      render(<Checkbox rules={rules} validateTrigger="onChange" />);
+
+      const checkbox = screen.getByTestId('checkbox');
+      fireEvent.click(checkbox);
+
+      await waitFor(() => {
+        // Check that validation result is stored
+        expect(checkbox).toHaveAttribute('data-checked', 'true');
+      });
+    });
+
+    it('validates custom validator', async () => {
+      const validator = vi.fn().mockReturnValue('Custom error message');
+      render(<Checkbox validator={validator} validateTrigger="onChange" />);
+
+      const checkbox = screen.getByTestId('checkbox');
+      fireEvent.click(checkbox);
+
+      await waitFor(() => {
+        expect(validator).toHaveBeenCalled();
+      });
+    });
+
+    it('shows validation error message', () => {
+      const rules = [{ required: true, message: 'Required field' }];
+      render(<Checkbox rules={rules} status="error" />);
+
+      const checkbox = screen.getByTestId('checkbox');
+      expect(checkbox).toBeInTheDocument();
+    });
+  });
+
+  describe('Ref Methods', () => {
+    it('provides ref methods', () => {
+      const ref = React.createRef<CheckboxRef>();
+      act(() => {
+        render(<Checkbox ref={ref} />);
+      });
+      
+      expect(ref.current).toBeTruthy();
+      expect(typeof ref.current?.getChecked).toBe('function');
+      expect(typeof ref.current?.setChecked).toBe('function');
+      expect(typeof ref.current?.toggle).toBe('function');
+      expect(typeof ref.current?.setDisabled).toBe('function');
+      expect(typeof ref.current?.setReadonly).toBe('function');
+      expect(typeof ref.current?.setIndeterminate).toBe('function');
+      expect(typeof ref.current?.setStatus).toBe('function');
+      expect(typeof ref.current?.getStatus).toBe('function');
+      expect(typeof ref.current?.setSize).toBe('function');
+      expect(typeof ref.current?.setColor).toBe('function');
+      expect(typeof ref.current?.validate).toBe('function');
+      expect(typeof ref.current?.reset).toBe('function');
+      expect(typeof ref.current?.focus).toBe('function');
+      expect(typeof ref.current?.blur).toBe('function');
+      expect(typeof ref.current?.getData).toBe('function');
+      expect(typeof ref.current?.setData).toBe('function');
+      expect(typeof ref.current?.shake).toBe('function');
+      expect(typeof ref.current?.pulse).toBe('function');
+    });
+
+    it('gets checked state via ref', () => {
+      const ref = React.createRef<CheckboxRef>();
+      act(() => {
+        render(<Checkbox ref={ref} checked={true} />);
+      });
+      
+      expect(ref.current?.getChecked()).toBe(true);
+    });
+
+    it('sets checked state via ref', () => {
+      const ref = React.createRef<CheckboxRef>();
+      act(() => {
+        render(<Checkbox ref={ref} defaultChecked={false} />);
+      });
+      
+      act(() => {
+        ref.current?.setChecked(true);
+      });
+      
+      expect(ref.current?.getChecked()).toBe(true);
+    });
+
+    it('toggles checked state via ref', () => {
+      const ref = React.createRef<CheckboxRef>();
+      act(() => {
+        render(<Checkbox ref={ref} defaultChecked={false} />);
+      });
+      
+      act(() => {
+        ref.current?.toggle();
+      });
+      
+      expect(ref.current?.getChecked()).toBe(true);
+    });
+
+    it('sets disabled state via ref', () => {
+      const ref = React.createRef<CheckboxRef>();
+      act(() => {
+        render(<Checkbox ref={ref} />);
+      });
+      
+      act(() => {
+        ref.current?.setDisabled(true);
+      });
+      
+      expect(ref.current?.getStatus()).toBe('disabled');
+    });
+
+    it('validates via ref', async () => {
+      const rules = [{ required: true, message: 'Required' }];
+      const ref = React.createRef<CheckboxRef>();
+      act(() => {
+        render(<Checkbox ref={ref} rules={rules} />);
+      });
+      
+      const result = await ref.current?.validate();
+      
+      expect(result?.valid).toBe(false);
+      expect(result?.message).toBe('Required');
+    });
+
+    it('resets via ref', () => {
+      const ref = React.createRef<CheckboxRef>();
+      act(() => {
+        render(<Checkbox ref={ref} defaultChecked={true} />);
+      });
+      
+      act(() => {
+        ref.current?.reset();
+      });
+      
+      expect(ref.current?.getChecked()).toBe(true);
+    });
+
+    it('gets and sets data via ref', () => {
+      const ref = React.createRef<CheckboxRef>();
+      const testData = { id: 'test', category: 'form' };
+      act(() => {
+        render(<Checkbox ref={ref} data={testData} />);
+      });
+      
+      expect(ref.current?.getData()).toEqual(testData);
+      
+      const newData = { id: 'updated', category: 'updated' };
+      act(() => {
+        ref.current?.setData(newData);
+      });
+      
+      // Note: setData is a mock function that logs to console
+      expect(ref.current?.getData()).toEqual(testData); // Should remain unchanged
+    });
+
+    it('calls shake method via ref', () => {
+      const ref = React.createRef<CheckboxRef>();
+      act(() => {
+        render(<Checkbox ref={ref} />);
+      });
+      
+      expect(() => {
+        act(() => {
+          ref.current?.shake();
+        });
+      }).not.toThrow();
+    });
+
+    it('calls pulse method via ref', () => {
+      const ref = React.createRef<CheckboxRef>();
+      act(() => {
+        render(<Checkbox ref={ref} />);
+      });
+      
+      expect(() => {
+        act(() => {
+          ref.current?.pulse();
+        });
+      }).not.toThrow();
+    });
+  });
+
+  describe('Accessibility', () => {
+    it('has proper accessibility attributes', () => {
+      render(<Checkbox accessibilityLabel="Test checkbox" />);
+      const checkbox = screen.getByTestId('checkbox');
+      expect(checkbox).toHaveAttribute('aria-label', 'Test checkbox');
+      expect(checkbox).toHaveAttribute('role', 'checkbox');
+    });
+
+    it('has correct accessibility state', () => {
+      render(<Checkbox checked={true} disabled={true} />);
+      const checkbox = screen.getByTestId('checkbox');
+      expect(checkbox).toHaveAttribute('aria-checked', 'true');
+      expect(checkbox).toHaveAttribute('aria-disabled', 'true');
+    });
+
+    it('supports custom accessibility state', () => {
+      const customState = { busy: true, expanded: false };
+      render(<Checkbox accessibilityState={customState} />);
+      const checkbox = screen.getByTestId('checkbox');
+      expect(checkbox).toHaveAttribute('aria-busy', 'true');
+      expect(checkbox).toHaveAttribute('aria-expanded', 'false');
+    });
+  });
+
+  describe('Platform Compatibility', () => {
+    it('renders on H5 platform', () => {
+      render(<Checkbox />);
+      const checkbox = screen.getByTestId('checkbox');
+      expect(checkbox).toBeInTheDocument();
+    });
+
+    it('handles touch events', () => {
+      const handleChange = vi.fn();
+      render(<Checkbox onChange={handleChange} />);
+      
+      const checkbox = screen.getByTestId('checkbox');
+      fireEvent.click(checkbox);
+      
+      expect(handleChange).toHaveBeenCalled();
+    });
+
+    it('supports custom styling', () => {
+      const customStyle = { backgroundColor: 'red', color: 'white' };
+      render(<Checkbox style={customStyle} />);
+      
+      const checkbox = screen.getByTestId('checkbox');
+      expect(checkbox).toHaveStyle('background-color: red');
+      expect(checkbox).toHaveStyle('color: white');
+    });
+  });
+
+  describe('Performance', () => {
+    it('handles rapid clicks without errors', () => {
+      const handleChange = vi.fn();
+      render(<Checkbox onChange={handleChange} />);
+      
+      const checkbox = screen.getByTestId('checkbox');
+      
+      // Rapid clicks
+      for (let i = 0; i < 10; i++) {
+        fireEvent.click(checkbox);
+      }
+      
+      expect(handleChange).toHaveBeenCalledTimes(10);
+    });
+
+    it('does not re-render unnecessarily', () => {
+      const handleChange = vi.fn();
+      const { rerender } = render(<Checkbox onChange={handleChange} />);
+      
+      const checkbox = screen.getByTestId('checkbox');
+      const initialRenderCount = handleChange.mock.calls.length;
+      
+      rerender(<Checkbox onChange={handleChange} />);
+      
+      expect(handleChange.mock.calls.length).toBe(initialRenderCount);
+    });
+
+    it('handles animation states correctly', () => {
+      const handleChange = vi.fn();
+      render(<Checkbox onChange={handleChange} animation={true} />);
+      
+      const checkbox = screen.getByTestId('checkbox');
+      
+      fireEvent.click(checkbox);
+      
+      // Should handle animation without errors
+      expect(handleChange).toHaveBeenCalled();
+    });
+
+    it('handles ripple effects correctly', () => {
+      const handleChange = vi.fn();
+      render(<Checkbox onChange={handleChange} ripple={true} />);
+      
+      const checkbox = screen.getByTestId('checkbox');
+      
+      fireEvent.click(checkbox);
+      
+      // Should handle ripple without errors
+      expect(handleChange).toHaveBeenCalled();
+    });
+  });
+
+  describe('Advanced Features', () => {
+    it('handles custom icons correctly', () => {
+      const checkedIcon = '✓';
+      const uncheckedIcon = '✗';
+      const indeterminateIcon = '−';
+      
+      const { rerender } = render(
+        <Checkbox 
+          checked={true} 
+          checkedIcon={checkedIcon}
+          uncheckedIcon={uncheckedIcon}
+          indeterminateIcon={indeterminateIcon}
+        />
+      );
+      
+      expect(screen.getByText(checkedIcon)).toBeInTheDocument();
+      
+      rerender(
+        <Checkbox 
+          checked={false} 
+          checkedIcon={checkedIcon}
+          uncheckedIcon={uncheckedIcon}
+          indeterminateIcon={indeterminateIcon}
+        />
+      );
+      
+      expect(screen.getByText(uncheckedIcon)).toBeInTheDocument();
+      
+      rerender(
+        <Checkbox 
+          indeterminate={true} 
+          checkedIcon={checkedIcon}
+          uncheckedIcon={uncheckedIcon}
+          indeterminateIcon={indeterminateIcon}
+        />
+      );
+      
+      expect(screen.getByText(indeterminateIcon)).toBeInTheDocument();
+    });
+
+    it('handles auto focus correctly', async () => {
+      const handleFocus = vi.fn();
+      act(() => {
+        render(<Checkbox autoFocus={true} onFocus={handleFocus} />);
+      });
+      
+      // Auto focus should trigger focus event
+      await waitFor(() => expect(handleFocus).toHaveBeenCalled());
+    });
+
+    it('handles custom tab index correctly', () => {
+      render(<Checkbox tabIndex={5} />);
+      
+      const checkbox = screen.getByTestId('checkbox');
+      expect(checkbox).toHaveAttribute('tabindex', '5');
+    });
+
+    it('handles data attributes correctly', () => {
+      const testData = { id: 'test', category: 'form' };
+      render(<Checkbox value="test-value" />);
+      
+      const checkbox = screen.getByTestId('checkbox');
+      expect(checkbox).toHaveAttribute('data-value', 'test-value');
+      expect(checkbox).toHaveAttribute('data-checked', 'false');
+    });
+
+    it('handles different label positions correctly', () => {
+      const { rerender } = render(<Checkbox label="Test Label" labelPosition="right" />);
+      
+      expect(screen.getByText('Test Label')).toBeInTheDocument();
+      
+      rerender(<Checkbox label="Test Label" labelPosition="left" />);
+      
+      expect(screen.getByText('Test Label')).toBeInTheDocument();
+    });
+
+    it('handles bordered and rounded variations correctly', () => {
+      const { rerender } = render(<Checkbox bordered={true} rounded={true} />);
+      
+      let checkbox = screen.getByTestId('checkbox');
+      expect(checkbox).toHaveClass('checkbox-bordered');
+      expect(checkbox).toHaveClass('checkbox-rounded');
+      
+      rerender(<Checkbox bordered={false} rounded={false} />);
+      
+      checkbox = screen.getByTestId('checkbox');
+      expect(checkbox).not.toHaveClass('checkbox-bordered');
+      expect(checkbox).not.toHaveClass('checkbox-rounded');
+    });
+  });
+});
+
+describe('CheckboxGroup Component', () => {
+  const mockOptions = [
+    { label: 'Option 1', value: '1' },
+    { label: 'Option 2', value: '2' },
+    { label: 'Option 3', value: '3' },
+  ];
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  describe('Rendering', () => {
+    it('renders CheckboxGroup with options', () => {
+      render(<CheckboxGroup options={mockOptions} />);
+      
+      expect(screen.getByText('Option 1')).toBeInTheDocument();
+      expect(screen.getByText('Option 2')).toBeInTheDocument();
+      expect(screen.getByText('Option 3')).toBeInTheDocument();
+    });
+
+    it('renders with group title', () => {
+      render(<CheckboxGroup options={mockOptions} groupTitle="Select options" />);
+      
+      expect(screen.getByText('Select options')).toBeInTheDocument();
+    });
+
+    it('renders with group description', () => {
+      render(<CheckboxGroup options={mockOptions} groupDescription="Please select your options" />);
+      
+      expect(screen.getByText('Please select your options')).toBeInTheDocument();
+    });
+
+    it('renders with select all button', () => {
+      render(<CheckboxGroup options={mockOptions} showSelectAll={true} />);
+      
+      expect(screen.getByText('全选')).toBeInTheDocument();
+    });
+
+    it('renders with count display', () => {
+      render(<CheckboxGroup options={mockOptions} showCount={true} />);
+      
+      expect(screen.getByText(/已选择/)).toBeInTheDocument();
+    });
+  });
+
+  describe('Value Handling', () => {
+    it('handles controlled mode', () => {
+      const handleChange = vi.fn();
+      render(<CheckboxGroup options={mockOptions} value={['1']} onChange={handleChange} />);
+      
+      const checkbox1 = screen.getByRole('checkbox', { name: /Option 1/ });
+      fireEvent.click(checkbox1);
+      
+      expect(handleChange).toHaveBeenCalledWith([]);
+    });
+
+    it('handles uncontrolled mode', () => {
+      const handleChange = vi.fn();
+      render(<CheckboxGroup options={mockOptions} defaultValue={['1']} onChange={handleChange} />);
+      
+      const checkbox2 = screen.getByRole('checkbox', { name: /Option 2/ });
+      fireEvent.click(checkbox2);
+      
+      expect(handleChange).toHaveBeenCalledWith(['1', '2']);
+    });
+
+    it('respects max count limit', () => {
+      const handleChange = vi.fn();
+      render(<CheckboxGroup options={mockOptions} maxCount={2} onChange={handleChange} />);
+      
+      const checkbox1 = screen.getByRole('checkbox', { name: /Option 1/ });
+      const checkbox2 = screen.getByRole('checkbox', { name: /Option 2/ });
+      const checkbox3 = screen.getByRole('checkbox', { name: /Option 3/ });
+      
+      fireEvent.click(checkbox1);
+      fireEvent.click(checkbox2);
+      fireEvent.click(checkbox3);
+      
+      expect(handleChange).toHaveBeenCalledTimes(2);
+    });
+
+    it('respects min count limit', () => {
+      const handleChange = vi.fn();
+      render(<CheckboxGroup options={mockOptions} defaultValue={['1', '2']} minCount={1} onChange={handleChange} />);
+      
+      const checkbox1 = screen.getByRole('checkbox', { name: /Option 1/ });
+      const checkbox2 = screen.getByRole('checkbox', { name: /Option 2/ });
+      
+      fireEvent.click(checkbox1);
+      fireEvent.click(checkbox2);
+      
+      // Should not allow deselecting below min count
+      expect(handleChange).not.toHaveBeenCalledWith([]);
+    });
+  });
+
+  describe('Group Operations', () => {
+    it('handles select all functionality', () => {
+      const handleChange = vi.fn();
+      const handleAllChange = vi.fn();
+      render(
+        <CheckboxGroup 
+          options={mockOptions} 
+          showSelectAll={true}
+          onChange={handleChange}
+          onAllChange={handleAllChange}
+        />
+      );
+      
+      const selectAllButton = screen.getByText('全选');
+      fireEvent.click(selectAllButton);
+      
+      expect(handleChange).toHaveBeenCalledWith(['1', '2', '3']);
+      expect(handleAllChange).toHaveBeenCalledWith(true);
+    });
+
+    it('handles deselect all functionality', () => {
+      const handleChange = vi.fn();
+      const handleAllChange = vi.fn();
+      render(
+        <CheckboxGroup 
+          options={mockOptions} 
+          value={['1', '2', '3']}
+          showSelectAll={true}
+          onChange={handleChange}
+          onAllChange={handleAllChange}
+        />
+      );
+      
+      const selectAllButton = screen.getByText('全选');
+      fireEvent.click(selectAllButton);
+      
+      expect(handleChange).toHaveBeenCalledWith([]);
+      expect(handleAllChange).toHaveBeenCalledWith(false);
+    });
+
+    it('calculates group state correctly', () => {
+      const { rerender } = render(<CheckboxGroup options={mockOptions} value={['1']} showCount={true} />);
+      
+      expect(screen.getByText(/已选择 1 项/)).toBeInTheDocument();
+      
+      rerender(<CheckboxGroup options={mockOptions} value={['1', '2', '3']} showCount={true} />);
+      
+      expect(screen.getByText(/已选择 3 项/)).toBeInTheDocument();
+    });
+  });
+
+  describe('Layout and Styling', () => {
+    it('renders in horizontal direction', () => {
+      render(<CheckboxGroup options={mockOptions} direction="horizontal" />);
+      
+      const container = screen.getByRole('group');
+      expect(container).toHaveStyle({ flexDirection: 'row' });
+    });
+
+    it('renders in vertical direction', () => {
+      render(<CheckboxGroup options={mockOptions} direction="vertical" />);
+      
+      const container = screen.getByRole('group');
+      expect(container).toHaveStyle({ flexDirection: 'column' });
+    });
+
+    it('applies compact layout', () => {
+      render(<CheckboxGroup options={mockOptions} compact={true} />);
+      
+      const container = screen.getByRole('group');
+      expect(container).toHaveStyle({ gap: '4px' });
+    });
+
+    it('applies block layout', () => {
+      render(<CheckboxGroup options={mockOptions} block={true} />);
+      
+      const container = screen.getByRole('group');
+      expect(container).toHaveStyle({ width: '100%' });
+    });
+  });
+
+  describe('Ref Methods', () => {
+    it('provides ref methods', () => {
+      const ref = React.createRef<CheckboxGroupRef>();
+      render(<CheckboxGroup ref={ref} options={mockOptions} />);
+      
+      expect(ref.current).toBeTruthy();
+      expect(typeof ref.current?.getValue).toBe('function');
+      expect(typeof ref.current?.setValue).toBe('function');
+      expect(typeof ref.current?.selectAll).toBe('function');
+      expect(typeof ref.current?.unselectAll).toBe('function');
+      expect(typeof ref.current?.toggleAll).toBe('function');
+      expect(typeof ref.current?.getCheckedCount).toBe('function');
+      expect(typeof ref.current?.getTotalCount).toBe('function');
+      expect(typeof ref.current?.isAllSelected).toBe('function');
+      expect(typeof ref.current?.isIndeterminate).toBe('function');
+    });
+
+    it('gets and sets values via ref', () => {
+      const ref = React.createRef<CheckboxGroupRef>();
+      render(<CheckboxGroup ref={ref} options={mockOptions} />);
+      
+      expect(ref.current?.getValue()).toEqual([]);
+      
+      act(() => {
+        ref.current?.setValue(['1', '2']);
+      });
+      
+      expect(ref.current?.getValue()).toEqual(['1', '2']);
+    });
+
+    it('selects all via ref', () => {
+      const ref = React.createRef<CheckboxGroupRef>();
+      render(<CheckboxGroup ref={ref} options={mockOptions} />);
+      
+      act(() => {
+        ref.current?.selectAll();
+      });
+      
+      expect(ref.current?.getValue()).toEqual(['1', '2', '3']);
+    });
+
+    it('unselects all via ref', () => {
+      const ref = React.createRef<CheckboxGroupRef>();
+      render(<CheckboxGroup ref={ref} options={mockOptions} defaultValue={['1', '2']} />);
+      
+      act(() => {
+        ref.current?.unselectAll();
+      });
+      
+      expect(ref.current?.getValue()).toEqual([]);
+    });
+
+    it('gets checked count via ref', () => {
+      const ref = React.createRef<CheckboxGroupRef>();
+      render(<CheckboxGroup ref={ref} options={mockOptions} defaultValue={['1', '2']} />);
+      
+      expect(ref.current?.getCheckedCount()).toBe(2);
+      expect(ref.current?.getTotalCount()).toBe(3);
+    });
+
+    it('checks selection state via ref', () => {
+      const ref = React.createRef<CheckboxGroupRef>();
+      render(<CheckboxGroup ref={ref} options={mockOptions} defaultValue={['1']} />);
+      
+      expect(ref.current?.isAllSelected()).toBe(false);
+      expect(ref.current?.isIndeterminate()).toBe(true);
+    });
+
+    it('validates via ref', async () => {
+      const ref = React.createRef<CheckboxGroupRef>();
+      render(<CheckboxGroup ref={ref} options={mockOptions} minCount={2} />);
+      
+      const result = await ref.current?.validate();
+      
+      expect(result?.valid).toBe(false);
+      expect(result?.message).toContain('最少需要选择 2 项');
+    });
+  });
+
+  describe('Accessibility', () => {
+    it('has proper accessibility attributes', () => {
+      render(<CheckboxGroup options={mockOptions} accessibilityLabel="Test group" />);
+      
+      const group = screen.getByRole('group');
+      expect(group).toHaveAttribute('aria-label', 'Test group');
+      expect(group).toHaveAttribute('aria-role', 'group');
+    });
+
+    it('supports disabled state', () => {
+      render(<CheckboxGroup options={mockOptions} disabled={true} />);
+      
+      const checkboxes = screen.getAllByRole('checkbox');
+      checkboxes.forEach(checkbox => {
+        expect(checkbox).toBeDisabled();
+      });
+    });
+
+    it('supports readonly state', () => {
+      render(<CheckboxGroup options={mockOptions} readonly={true} />);
+      
+      const checkboxes = screen.getAllByRole('checkbox');
+      checkboxes.forEach(checkbox => {
+        expect(checkbox).toHaveAttribute('data-readonly', 'true');
+      });
+    });
+  });
+
+  describe('Edge Cases', () => {
+    it('handles empty options array', () => {
+      render(<CheckboxGroup options={[]} />);
+      
+      const group = screen.getByRole('group');
+      expect(group).toBeEmptyDOMElement();
+    });
+
+    it('handles disabled options', () => {
+      const optionsWithDisabled = [
+        ...mockOptions,
+        { label: 'Disabled Option', value: '4', disabled: true },
+      ];
+      
+      render(<CheckboxGroup options={optionsWithDisabled} />);
+      
+      const disabledCheckbox = screen.getByRole('checkbox', { name: /Disabled Option/ });
+      expect(disabledCheckbox).toBeDisabled();
+    });
+
+    it('handles options with descriptions', () => {
+      const optionsWithDescriptions = mockOptions.map(option => ({
+        ...option,
+        description: `Description for ${option.label}`,
+      }));
+      
+      render(<CheckboxGroup options={optionsWithDescriptions} />);
+      
+      expect(screen.getByText('Description for Option 1')).toBeInTheDocument();
+      expect(screen.getByText('Description for Option 2')).toBeInTheDocument();
+      expect(screen.getByText('Description for Option 3')).toBeInTheDocument();
+    });
+
+    it('handles toggleAll functionality correctly', () => {
+      const ref = React.createRef<CheckboxGroupRef>();
+      const handleChange = vi.fn();
+      render(<CheckboxGroup ref={ref} options={mockOptions} onChange={handleChange} />);
+      
+      // Initially nothing selected
+      expect(ref.current?.isAllSelected()).toBe(false);
+      expect(ref.current?.isIndeterminate()).toBe(false);
+      
+      // Toggle all should select everything
+      act(() => {
+        ref.current?.toggleAll();
+      });
+      
+      expect(ref.current?.isAllSelected()).toBe(true);
+      expect(ref.current?.isIndeterminate()).toBe(false);
+      expect(handleChange).toHaveBeenCalledWith(['1', '2', '3']);
+      
+      // Toggle all again should deselect everything
+      act(() => {
+        ref.current?.toggleAll();
+      });
+      
+      expect(ref.current?.isAllSelected()).toBe(false);
+      expect(ref.current?.isIndeterminate()).toBe(false);
+      expect(handleChange).toHaveBeenCalledWith([]);
+    });
+
+    it('handles custom count text correctly', () => {
+      const customCountText = (selected: number, total: number) => 
+        `Selected: ${selected} of ${total}`;
+      
+      render(
+        <CheckboxGroup 
+          options={mockOptions} 
+          value={['1', '2']} 
+          showCount={true}
+          countText={customCountText}
+        />
+      );
+      
+      expect(screen.getByText('Selected: 2 of 3')).toBeInTheDocument();
+    });
+
+    it('handles custom select all text correctly', () => {
+      render(
+        <CheckboxGroup 
+          options={mockOptions} 
+          showSelectAll={true}
+          selectAllText="Select All Options"
+        />
+      );
+      
+      expect(screen.getByText('Select All Options')).toBeInTheDocument();
+    });
+
+    it('handles allowDeselectAll functionality correctly', () => {
+      const handleChange = vi.fn();
+      const { rerender } = render(
+        <CheckboxGroup 
+          options={mockOptions} 
+          value={['1', '2', '3']}
+          showSelectAll={true}
+          allowDeselectAll={true}
+          onChange={handleChange}
+        />
+      );
+      
+      const selectAllButton = screen.getByText('全选');
+      fireEvent.click(selectAllButton);
+      
+      expect(handleChange).toHaveBeenCalledWith([]);
+    });
+
+    it('prevents deselection when allowDeselectAll is false', () => {
+      const handleChange = vi.fn();
+      render(
+        <CheckboxGroup 
+          options={mockOptions} 
+          value={['1', '2', '3']}
+          showSelectAll={true}
+          allowDeselectAll={false}
+          onChange={handleChange}
+        />
+      );
+      
+      const selectAllButton = screen.getByText('全选');
+      fireEvent.click(selectAllButton);
+      
+      // Should not deselect when allowDeselectAll is false
+      expect(handleChange).not.toHaveBeenCalled();
+    });
+  });
+});