taro-uno-ui 1.0.0 → 1.0.2

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

@@ -1,547 +0,0 @@
-import React, { useRef } from 'react';
-import { render, screen, fireEvent, waitFor, act } from '@testing-library/react';
-import { vi } from 'vitest';
-import { Radio } from './Radio';
-import type { RadioProps, RadioRef } from './Radio.types';
-
-// Mock Taro components
-vi.mock('@tarojs/components', () => ({
-  Radio: ({ checked, onChange, disabled, readonly, ...props }: any) => (
-    <input
-      data-testid="radio"
-      type="radio"
-      checked={checked}
-      disabled={disabled || readonly}
-      onChange={(e) => {
-        // Don't call onChange when disabled or readonly
-        if (disabled || readonly) return;
-        onChange?.(e);
-      }}
-      {...props}
-    />
-  ),
-  View: ({ children, ...props }: any) => <div {...props}>{children}</div>,
-  Text: ({ children, ...props }: any) => <span {...props}>{children}</span>,
-}));
-
-// Mock platform utils
-vi.mock('@/utils', () => ({
-  getPlatform: () => 'h5',
-  platform: {
-    getPlatform: () => 'h5',
-    isH5: () => true,
-    isMiniProgram: () => false,
-    isRN: () => false,
-  },
-  default: {
-    getPlatform: () => 'h5',
-    platform: {
-      getPlatform: () => 'h5',
-      isH5: () => true,
-      isMiniProgram: () => false,
-      isRN: () => false,
-    },
-  },
-}));
-
-describe('Radio Component', () => {
-  beforeEach(() => {
-    vi.clearAllMocks();
-  });
-
-  describe('Rendering', () => {
-    it('renders Radio component with default props', () => {
-      render(<Radio value="option1" />);
-      expect(screen.getByTestId('radio')).toBeInTheDocument();
-    });
-
-    it('renders with label', () => {
-      render(<Radio value="option1" label="Option 1" />);
-      expect(screen.getByText('Option 1')).toBeInTheDocument();
-    });
-
-    it('renders with helper text', () => {
-      render(<Radio value="option1" helperText="Select this option" />);
-      expect(screen.getByText('Select this option')).toBeInTheDocument();
-    });
-
-    it('renders with error text', () => {
-      render(<Radio value="option1" errorText="This field is required" status="error" />);
-      expect(screen.getByText('This field is required')).toBeInTheDocument();
-    });
-
-    it('renders unchecked by default', () => {
-      render(<Radio value="option1" />);
-      const radio = screen.getByTestId('radio');
-      expect(radio).not.toBeChecked();
-    });
-
-    it('renders checked when controlled', () => {
-      render(<Radio value="option1" checked={true} />);
-      const radio = screen.getByTestId('radio');
-      expect(radio).toBeChecked();
-    });
-  });
-
-  describe('Value Handling', () => {
-    it('handles controlled mode', () => {
-      const handleChange = vi.fn();
-      render(<Radio value="option1" checked={false} onChange={handleChange} />);
-
-      const radio = screen.getByTestId('radio');
-      fireEvent.click(radio);
-
-      // Radio should call onChange with true when clicked
-      expect(handleChange).toHaveBeenCalledWith(true, expect.any(Object));
-    });
-
-    it('handles uncontrolled mode', () => {
-      const handleChange = vi.fn();
-      render(<Radio value="option1" onChange={handleChange} />);
-      
-      const radio = screen.getByTestId('radio');
-      fireEvent.click(radio);
-      
-      expect(handleChange).toHaveBeenCalledWith(true, expect.any(Object));
-    });
-
-    it('requires value prop', () => {
-      // @ts-expect-error - Testing missing required prop
-      expect(() => render(<Radio />)).not.toThrow();
-    });
-
-    it('handles different value types', () => {
-      const { rerender } = render(<Radio value="string-value" />);
-      expect(screen.getByTestId('radio')).toBeInTheDocument();
-      
-      rerender(<Radio value={123} />);
-      expect(screen.getByTestId('radio')).toBeInTheDocument();
-      
-      rerender(<Radio value={true} />);
-      expect(screen.getByTestId('radio')).toBeInTheDocument();
-    });
-  });
-
-  describe('States', () => {
-    it('handles disabled state', () => {
-      const handleChange = vi.fn();
-      render(<Radio value="option1" disabled onChange={handleChange} />);
-      
-      const radio = screen.getByTestId('radio');
-      expect(radio).toBeDisabled();
-      
-      fireEvent.click(radio);
-      expect(handleChange).not.toHaveBeenCalled();
-    });
-
-    it('handles readonly state', () => {
-      const handleChange = vi.fn();
-      render(<Radio value="option1" readonly onChange={handleChange} />);
-
-      const radio = screen.getByTestId('radio');
-      expect(radio).toHaveClass('taro-uno-h5-radio--readonly');
-
-      // Readonly should have the correct cursor style
-      expect(radio.style.cursor).toBe('default');
-    });
-
-    it('handles error state', () => {
-      render(<Radio value="option1" status="error" />);
-      const radio = screen.getByTestId('radio');
-      expect(radio).toHaveClass('taro-uno-h5-radio--error');
-    });
-
-    it('handles warning state', () => {
-      render(<Radio value="option1" status="warning" />);
-      const radio = screen.getByTestId('radio');
-      expect(radio).toHaveClass('taro-uno-h5-radio--warning');
-    });
-
-    it('handles success state', () => {
-      render(<Radio value="option1" status="success" />);
-      const radio = screen.getByTestId('radio');
-      expect(radio).toHaveClass('taro-uno-h5-radio--success');
-    });
-  });
-
-  describe('Sizes and Variants', () => {
-    const sizes: Array<'xs' | 'sm' | 'md' | 'lg' | 'xl'> = ['xs', 'sm', 'md', 'lg', 'xl'];
-    
-    sizes.forEach((size) => {
-      it(`renders with size ${size}`, () => {
-        render(<Radio value="option1" size={size} />);
-        const radio = screen.getByTestId('radio');
-        expect(radio).toHaveClass(`taro-uno-h5-radio--${size}`);
-      });
-    });
-  });
-
-  describe('Events', () => {
-    it('calls onChange when clicked', () => {
-      const handleChange = vi.fn();
-      render(<Radio value="option1" onChange={handleChange} />);
-      
-      const radio = screen.getByTestId('radio');
-      fireEvent.click(radio);
-      
-      expect(handleChange).toHaveBeenCalledWith(true, expect.any(Object));
-    });
-
-    it('passes correct event to onChange handler', () => {
-      const handleChange = vi.fn();
-      render(<Radio value="option1" onChange={handleChange} />);
-      
-      const radio = screen.getByTestId('radio');
-      const mockEvent = { target: radio };
-      
-      fireEvent.click(radio, mockEvent);
-      
-      expect(handleChange).toHaveBeenCalledWith(true, expect.objectContaining({
-        target: radio,
-      }));
-    });
-
-    it('does not call onChange when disabled', () => {
-      const handleChange = vi.fn();
-      render(<Radio value="option1" disabled onChange={handleChange} />);
-      
-      const radio = screen.getByTestId('radio');
-      fireEvent.click(radio);
-      
-      expect(handleChange).not.toHaveBeenCalled();
-    });
-
-    it('handles multiple clicks on same radio', () => {
-      const handleChange = vi.fn();
-      render(<Radio value="option1" onChange={handleChange} />);
-      
-      const radio = screen.getByTestId('radio');
-      
-      // First click - select
-      fireEvent.click(radio);
-      expect(handleChange).toHaveBeenCalledWith(true, expect.any(Object));
-      
-      // Second click - should remain selected
-      fireEvent.click(radio);
-      expect(handleChange).toHaveBeenCalledWith(true, expect.any(Object));
-    });
-  });
-
-  describe('Validation', () => {
-    it('validates required rule when unchecked', async () => {
-      const handleChange = vi.fn();
-      render(
-        <Radio
-          value="option1"
-          rules={[{ required: true, message: 'This field is required' }]}
-          validateTrigger="onChange"
-          onChange={handleChange}
-        />
-      );
-      
-      const radio = screen.getByTestId('radio');
-      fireEvent.click(radio); // Check
-      fireEvent.click(radio); // Uncheck (should remain checked for radio)
-      
-      // For radio, validation typically happens at group level
-      await waitFor(() => {
-        expect(screen.queryByText('This field is required')).not.toBeInTheDocument();
-      });
-    });
-
-    it('validates with custom validator', async () => {
-      const handleChange = vi.fn();
-      const customValidator = vi.fn().mockReturnValue('Custom validation error');
-
-      render(
-        <Radio
-          value="option1"
-          validator={customValidator}
-          validateTrigger="onChange"
-          onChange={handleChange}
-        />
-      );
-
-      const radio = screen.getByTestId('radio');
-      fireEvent.click(radio);
-
-      await waitFor(() => {
-        expect(screen.getByText('Custom validation error')).toBeInTheDocument();
-      });
-    });
-
-    it('validates immediately when immediate is true', async () => {
-      const handleChange = vi.fn();
-      render(
-        <Radio
-          value="option1"
-          rules={[{ required: true, message: 'Required' }]}
-          immediate
-          validateTrigger="onChange"
-          onChange={handleChange}
-          checked={true} // Radio must be checked for validation to occur
-        />
-      );
-
-      // For immediate validation, the radio should validate on mount
-      // Note: Validation text rendering is complex - for now, just verify the component renders
-      await waitFor(() => {
-        const radio = screen.getByTestId('radio');
-        expect(radio).toBeInTheDocument();
-      });
-    });
-  });
-
-  describe('Ref Methods', () => {
-    // Helper component to test ref methods
-    const TestComponent = ({ children }: { children: React.ReactNode }) => {
-      return <div>{children}</div>;
-    };
-
-    it('provides ref with getChecked method', () => {
-      let radioRef: RadioRef | null = null;
-      const setRef = (ref: RadioRef) => {
-        radioRef = ref;
-      };
-
-      render(
-        <TestComponent>
-          <Radio value="option1" checked={true} ref={setRef} />
-        </TestComponent>
-      );
-
-      expect(radioRef?.getChecked()).toBe(true);
-    });
-
-    it('provides ref with setChecked method', () => {
-      let radioRef: RadioRef | null = null;
-      const setRef = (ref: RadioRef) => {
-        radioRef = ref;
-      };
-
-      render(
-        <TestComponent>
-          <Radio value="option1" ref={setRef} />
-        </TestComponent>
-      );
-
-      // Test that setChecked method exists and can be called without error
-      expect(() => {
-        radioRef?.setChecked(true);
-      }).not.toThrow();
-
-      // Verify getChecked still works
-      expect(typeof radioRef?.getChecked).toBe('function');
-    });
-
-    it('provides ref with setDisabled method', () => {
-      let radioRef: RadioRef | null = null;
-      const setRef = (ref: RadioRef) => {
-        radioRef = ref;
-      };
-
-      render(
-        <TestComponent>
-          <Radio value="option1" ref={setRef} />
-        </TestComponent>
-      );
-
-      act(() => {
-        radioRef?.setDisabled(true);
-      });
-
-      const radio = screen.getByTestId('radio');
-      expect(radio).toBeDisabled();
-    });
-
-    it('provides ref with setReadonly method', () => {
-      let radioRef: RadioRef | null = null;
-      const setRef = (ref: RadioRef) => {
-        radioRef = ref;
-      };
-
-      render(
-        <TestComponent>
-          <Radio value="option1" ref={setRef} />
-        </TestComponent>
-      );
-
-      expect(() => {
-        radioRef?.setReadonly(true);
-      }).not.toThrow();
-    });
-
-    it('provides ref with setStatus method', () => {
-      let radioRef: RadioRef | null = null;
-      const setRef = (ref: RadioRef) => {
-        radioRef = ref;
-      };
-
-      render(
-        <TestComponent>
-          <Radio value="option1" ref={setRef} />
-        </TestComponent>
-      );
-
-      act(() => {
-        radioRef?.setStatus('error');
-      });
-
-      expect(radioRef?.getStatus()).toBe('error');
-    });
-
-    it('provides ref with validate method', async () => {
-      let radioRef: RadioRef | null = null;
-      const setRef = (ref: RadioRef) => {
-        radioRef = ref;
-      };
-
-      render(
-        <TestComponent>
-          <Radio
-            value="option1"
-            rules={[{ required: true, message: 'Required' }]}
-            ref={setRef}
-          />
-        </TestComponent>
-      );
-
-      const result = await radioRef?.validate();
-      expect(result).toEqual({ valid: false, message: 'Required' });
-    });
-
-    it('provides ref with reset method', () => {
-      let radioRef: RadioRef | null = null;
-      const setRef = (ref: RadioRef) => {
-        radioRef = ref;
-      };
-
-      render(
-        <TestComponent>
-          <Radio
-            value="option1"
-            ref={setRef}
-          />
-        </TestComponent>
-      );
-
-      act(() => {
-        radioRef?.reset();
-      });
-
-      expect(radioRef?.getChecked()).toBe(false);
-    });
-  });
-
-  
-  describe('Style Classes', () => {
-    it('applies custom className', () => {
-      render(<Radio value="option1" className="custom-radio" />);
-      const radio = screen.getByTestId('radio');
-      expect(radio).toHaveClass('custom-radio');
-    });
-
-    it('applies custom style', () => {
-      render(<Radio value="option1" style={{ backgroundColor: 'red' }} />);
-      const radio = screen.getByTestId('radio');
-      expect(radio.style.backgroundColor).toBe('red');
-    });
-  });
-
-  describe('Edge Cases', () => {
-    it('handles undefined checked prop', () => {
-      render(<Radio value="option1" checked={undefined} />);
-      const radio = screen.getByTestId('radio');
-      expect(radio).toBeInTheDocument();
-    });
-
-    it('handles null label', () => {
-      render(<Radio value="option1" label={null} />);
-      const radio = screen.getByTestId('radio');
-      expect(radio).toBeInTheDocument();
-    });
-
-    it('handles empty string label', () => {
-      render(<Radio value="option1" label="" />);
-      const radio = screen.getByTestId('radio');
-      expect(radio).toBeInTheDocument();
-    });
-
-    it('handles complex label content', () => {
-      render(
-        <Radio value="option1" label={
-          <div>
-            <span>Complex</span>
-            <strong>Label</strong>
-          </div>
-        } />
-      );
-      expect(screen.getByText('Complex')).toBeInTheDocument();
-      expect(screen.getByText('Label')).toBeInTheDocument();
-    });
-
-    it('handles special characters in value', () => {
-      render(<Radio value="option-with-special-chars_123" />);
-      const radio = screen.getByTestId('radio');
-      expect(radio).toBeInTheDocument();
-    });
-  });
-
-  describe('Performance', () => {
-    it('handles rapid clicks without errors', () => {
-      const handleChange = vi.fn();
-      render(<Radio value="option1" onChange={handleChange} />);
-      
-      const radio = screen.getByTestId('radio');
-      
-      // Rapid clicks
-      fireEvent.click(radio);
-      fireEvent.click(radio);
-      fireEvent.click(radio);
-      fireEvent.click(radio);
-      
-      expect(handleChange).toHaveBeenCalledTimes(4);
-    });
-
-    it('memoizes callbacks properly', () => {
-      const handleChange = vi.fn();
-      const { rerender } = render(<Radio value="option1" onChange={handleChange} />);
-      
-      rerender(<Radio value="option1" onChange={handleChange} />);
-      
-      // Should not cause unnecessary re-renders
-      expect(handleChange).not.toHaveBeenCalled();
-    });
-  });
-
-  describe('Radio Group Behavior', () => {
-    it('works with multiple radio buttons', () => {
-      const handleChange = vi.fn();
-      
-      const { rerender } = render(
-        <div>
-          <Radio value="option1" checked={true} onChange={handleChange} />
-          <Radio value="option2" onChange={handleChange} />
-        </div>
-      );
-      
-      const radio1 = screen.getAllByTestId('radio')[0];
-      const radio2 = screen.getAllByTestId('radio')[1];
-      
-      expect(radio1).toBeChecked();
-      expect(radio2).not.toBeChecked();
-      
-      // Click second radio
-      fireEvent.click(radio2);
-      
-      rerender(
-        <div>
-          <Radio value="option1" onChange={handleChange} />
-          <Radio value="option2" checked={true} onChange={handleChange} />
-        </div>
-      );
-      
-      expect(handleChange).toHaveBeenCalledWith(true, expect.any(Object));
-    });
-  });
-});