taro-uno-ui 1.0.0 → 1.0.2

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

@@ -1,648 +0,0 @@
-import React from 'react';
-import { render, screen, fireEvent, waitFor, act } from '@testing-library/react';
-import { vi } from 'vitest';
-import { Select } from './Select';
-import type { SelectProps, SelectRef, SelectOption } from './Select.types';
-
-// Mock Taro components
-vi.mock('@tarojs/components', () => ({
-  Picker: ({ children, onChange, range, value, onFocus, onBlur, disabled, loading, className, style, accessibilityLabel, accessibilityRole, ...props }: any) => (
-    <div
-      data-testid="picker"
-      className={className}
-      style={style}
-      aria-label={accessibilityLabel}
-      role={accessibilityRole}
-      disabled={disabled || loading}
-      aria-disabled={disabled}
-      aria-busy={loading}
-      {...props}
-    >
-      {children}
-      <button onClick={() => onChange({ detail: { value: value || 0 } })}>
-        Change
-      </button>
-      <button onClick={onFocus}>
-        Focus
-      </button>
-      <button onClick={onBlur}>
-        Blur
-      </button>
-    </div>
-  ),
-  View: ({ children, ...props }: any) => <div {...props}>{children}</div>,
-  Text: ({ children, ...props }: any) => <span {...props}>{children}</span>,
-  Input: (props: any) => <input {...props} />,
-}));
-
-// Mock PlatformDetector
-vi.mock('@/utils', () => ({
-  PlatformDetector: {
-    isH5: true,
-    isWeapp: false,
-    isRN: false,
-  },
-}));
-
-describe('Select Component', () => {
-  const basicOptions: SelectOption[] = [
-    { value: '1', label: 'Option 1' },
-    { value: '2', label: 'Option 2' },
-    { value: '3', label: 'Option 3' },
-  ];
-
-  beforeEach(() => {
-    vi.clearAllMocks();
-  });
-
-  const groupedOptions = [
-    {
-      label: 'Group 1',
-      options: [
-        { value: '1-1', label: 'Option 1-1' },
-        { value: '1-2', label: 'Option 1-2' },
-      ],
-    },
-    {
-      label: 'Group 2',
-      options: [
-        { value: '2-1', label: 'Option 2-1' },
-        { value: '2-2', label: 'Option 2-2' },
-      ],
-    },
-  ];
-
-  describe('Rendering', () => {
-    it('renders Select component with default props', () => {
-      render(<Select options={basicOptions} />);
-      expect(screen.getByTestId('picker')).toBeInTheDocument();
-    });
-
-    it('renders with placeholder when no value is selected', () => {
-      render(<Select options={basicOptions} placeholder="Select an option" />);
-      expect(screen.getByText('Select an option')).toBeInTheDocument();
-    });
-
-    it('renders with selected value', () => {
-      render(<Select options={basicOptions} value="1" />);
-      expect(screen.getByText('Option 1')).toBeInTheDocument();
-    });
-
-    it('renders with label', () => {
-      render(<Select options={basicOptions} label="Select Label" />);
-      expect(screen.getByText('Select Label')).toBeInTheDocument();
-    });
-
-    it('renders with prefix', () => {
-      render(<Select options={basicOptions} prefix={<span data-testid="prefix">Prefix</span>} />);
-      expect(screen.getByTestId('prefix')).toBeInTheDocument();
-    });
-
-    it('renders with suffix', () => {
-      render(<Select options={basicOptions} suffix={<span data-testid="suffix">Suffix</span>} />);
-      expect(screen.getByTestId('suffix')).toBeInTheDocument();
-    });
-
-    it('renders with helper text', () => {
-      render(<Select options={basicOptions} helperText="Helper text" />);
-      expect(screen.getByText('Helper text')).toBeInTheDocument();
-    });
-
-    it('renders with error text', () => {
-      render(<Select options={basicOptions} errorText="Error text" status="error" />);
-      expect(screen.getByText('Error text')).toBeInTheDocument();
-    });
-
-    it('renders with loading state', () => {
-      render(<Select options={basicOptions} loading />);
-      expect(screen.getByText('加载中...')).toBeInTheDocument();
-    });
-
-    it('renders with custom not found content', () => {
-      render(<Select options={[]} notFoundContent="No options available" />);
-      expect(screen.getByText('No options available')).toBeInTheDocument();
-    });
-  });
-
-  describe('Value Handling', () => {
-    it('handles controlled mode', () => {
-      const handleChange = vi.fn();
-      render(<Select options={basicOptions} value="1" onChange={handleChange} />);
-      
-      fireEvent.click(screen.getByText('Change'));
-      expect(handleChange).toHaveBeenCalledWith('1', basicOptions[0]);
-    });
-
-    it('handles uncontrolled mode with default value', () => {
-      render(<Select options={basicOptions} defaultValue="2" />);
-      expect(screen.getByText('Option 2')).toBeInTheDocument();
-    });
-
-    it('handles multiple selection mode', () => {
-      const handleChange = vi.fn();
-      render(
-        <Select
-          options={basicOptions}
-          mode="multiple"
-          value={['1', '2']}
-          onChange={handleChange}
-        />
-      );
-      expect(screen.getByText('Option 1, Option 2')).toBeInTheDocument();
-    });
-
-    it('clears value when allowClear is enabled', () => {
-      const handleChange = vi.fn();
-      render(
-        <Select
-          options={basicOptions}
-          value="1"
-          allowClear
-          onChange={handleChange}
-        />
-      );
-
-      const clearButton = screen.getByText('×');
-      fireEvent.click(clearButton);
-
-      expect(handleChange).toHaveBeenCalledWith('', []);
-    });
-
-    it('does not show clear button when no value is selected', () => {
-      render(<Select options={basicOptions} allowClear />);
-      expect(screen.queryByText('×')).not.toBeInTheDocument();
-    });
-
-    it('does not show clear button when disabled', () => {
-      render(<Select options={basicOptions} value="1" allowClear disabled />);
-      expect(screen.queryByText('×')).not.toBeInTheDocument();
-    });
-  });
-
-  describe('Events', () => {
-    it('calls onChange when value changes', () => {
-      const handleChange = vi.fn();
-      render(<Select options={basicOptions} onChange={handleChange} />);
-
-      fireEvent.click(screen.getByText('Change'));
-      expect(handleChange).toHaveBeenCalledWith('1', basicOptions[0]);
-    });
-
-    it('calls onFocus when focused', () => {
-      const handleFocus = vi.fn();
-      render(<Select options={basicOptions} onFocus={handleFocus} />);
-
-      fireEvent.click(screen.getByText('Focus'));
-      expect(handleFocus).toHaveBeenCalled();
-    });
-
-    it('calls onBlur when blurred', () => {
-      const handleBlur = vi.fn();
-      render(<Select options={basicOptions} onBlur={handleBlur} />);
-
-      fireEvent.click(screen.getByText('Blur'));
-      expect(handleBlur).toHaveBeenCalled();
-    });
-
-    it('calls onSearch when searching', () => {
-      const handleSearch = vi.fn();
-      render(<Select options={basicOptions} showSearch onSearch={handleSearch} />);
-      
-      // Search functionality would need specific implementation
-      expect(handleSearch).not.toHaveBeenCalled(); // Initial state
-    });
-
-    it('calls onDropdownVisibleChange when dropdown state changes', () => {
-      const handleDropdownVisibleChange = vi.fn();
-      const selectRef = React.createRef<SelectRef>();
-      
-      render(
-        <Select
-          options={basicOptions}
-          ref={selectRef}
-          onDropdownVisibleChange={handleDropdownVisibleChange}
-        />
-      );
-      
-      act(() => {
-        selectRef.current?.openDropdown();
-      });
-      
-      expect(handleDropdownVisibleChange).toHaveBeenCalledWith(true);
-    });
-  });
-
-  describe('States', () => {
-    it('handles disabled state', () => {
-      render(<Select options={basicOptions} disabled />);
-      const picker = screen.getByTestId('picker');
-      expect(picker).toHaveAttribute('disabled');
-    });
-
-    it('handles readonly state', () => {
-      render(<Select options={basicOptions} readonly />);
-      const picker = screen.getByTestId('picker');
-      expect(picker).toHaveAttribute('disabled');
-    });
-
-    it('handles loading state', () => {
-      render(<Select options={basicOptions} loading />);
-      expect(screen.getByText('加载中...')).toBeInTheDocument();
-    });
-
-    it('handles error state', () => {
-      render(<Select options={basicOptions} status="error" />);
-      const picker = screen.getByTestId('picker');
-      // Check wrapper has error styling instead of picker
-      expect(picker).toBeInTheDocument();
-    });
-
-    it('handles warning state', () => {
-      render(<Select options={basicOptions} status="warning" />);
-      const picker = screen.getByTestId('picker');
-      // Check wrapper has warning styling instead of picker
-      expect(picker).toBeInTheDocument();
-    });
-
-    it('handles success state', () => {
-      render(<Select options={basicOptions} status="success" />);
-      const picker = screen.getByTestId('picker');
-      // Check wrapper has success styling instead of picker
-      expect(picker).toBeInTheDocument();
-    });
-  });
-
-  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(<Select options={basicOptions} size={size} />);
-        const picker = screen.getByTestId('picker');
-        expect(picker).toBeInTheDocument();
-      });
-    });
-
-    const variants: Array<'outlined' | 'filled' | 'underlined'> = ['outlined', 'filled', 'underlined'];
-
-    variants.forEach((variant) => {
-      it(`renders with variant ${variant}`, () => {
-        render(<Select options={basicOptions} variant={variant} />);
-        const picker = screen.getByTestId('picker');
-        expect(picker).toBeInTheDocument();
-      });
-    });
-  });
-
-  describe('Validation', () => {
-    it('validates required rule', async () => {
-      const handleChange = vi.fn();
-      render(
-        <Select
-          options={basicOptions}
-          rules={[{ required: true, message: 'This field is required' }]}
-          validateTrigger="onChange"
-          onChange={handleChange}
-        />
-      );
-
-      fireEvent.click(screen.getByText('Change'));
-
-      await waitFor(() => {
-        // Check if validation is handled internally
-        expect(handleChange).toHaveBeenCalled();
-      });
-    });
-
-    it('validates min count for multiple selection', async () => {
-      const handleChange = vi.fn();
-      render(
-        <Select
-          options={basicOptions}
-          mode="multiple"
-          minCount={2}
-          validateTrigger="onChange"
-          onChange={handleChange}
-        />
-      );
-
-      // Select only one option
-      fireEvent.click(screen.getByText('Change'));
-
-      await waitFor(() => {
-        // Check if validation is handled internally
-        expect(handleChange).toHaveBeenCalled();
-      });
-    });
-
-    it('validates max count for multiple selection', async () => {
-      const handleChange = vi.fn();
-      render(
-        <Select
-          options={basicOptions}
-          mode="multiple"
-          maxCount={1}
-          value={['1', '2']}
-          validateTrigger="onChange"
-          onChange={handleChange}
-        />
-      );
-
-      // The validation should run on mount since value is provided
-      await waitFor(() => {
-        // Check if component renders correctly
-        expect(screen.getByText('Option 1, Option 2')).toBeInTheDocument();
-      });
-    });
-
-    it('validates with custom validator', async () => {
-      const handleChange = vi.fn();
-      const customValidator = vi.fn().mockResolvedValue('Custom validation error');
-
-      render(
-        <Select
-          options={basicOptions}
-          validator={customValidator}
-          validateTrigger="onChange"
-          onChange={handleChange}
-        />
-      );
-
-      fireEvent.click(screen.getByText('Change'));
-
-      await waitFor(() => {
-        // Check if validator was called
-        expect(customValidator).toHaveBeenCalled();
-      });
-    });
-
-    it('validates on blur trigger', async () => {
-      const handleBlur = vi.fn();
-      render(
-        <Select
-          options={basicOptions}
-          rules={[{ required: true, message: 'This field is required' }]}
-          validateTrigger="onBlur"
-          onBlur={handleBlur}
-        />
-      );
-
-      // Select component doesn't pass onBlur to Picker in current implementation
-      // This test documents the current behavior
-      expect(handleBlur).not.toHaveBeenCalled();
-    });
-  });
-
-  describe('Ref Methods', () => {
-    it('provides ref with getValue method', () => {
-      const selectRef = React.createRef<SelectRef>();
-      render(<Select options={basicOptions} value="1" ref={selectRef} />);
-      
-      expect(selectRef.current?.getValue()).toBe('1');
-    });
-
-    it('provides ref with setValue method', () => {
-      const selectRef = React.createRef<SelectRef>();
-      render(<Select options={basicOptions} ref={selectRef} />);
-      
-      act(() => {
-        selectRef.current?.setValue('2');
-      });
-      
-      expect(selectRef.current?.getValue()).toBe('2');
-    });
-
-    it('provides ref with focus method', () => {
-      const selectRef = React.createRef<SelectRef>();
-      render(<Select options={basicOptions} ref={selectRef} />);
-      
-      expect(() => {
-        selectRef.current?.focus();
-      }).not.toThrow();
-    });
-
-    it('provides ref with blur method', () => {
-      const selectRef = React.createRef<SelectRef>();
-      render(<Select options={basicOptions} ref={selectRef} />);
-      
-      expect(() => {
-        selectRef.current?.blur();
-      }).not.toThrow();
-    });
-
-    it('provides ref with validate method', async () => {
-      const selectRef = React.createRef<SelectRef>();
-      render(
-        <Select
-          options={basicOptions}
-          rules={[{ required: true, message: 'Required' }]}
-          ref={selectRef}
-        />
-      );
-      
-      const result = await selectRef.current?.validate();
-      expect(result).toEqual({ valid: false, message: 'Required' });
-    });
-
-    it('provides ref with clear method', () => {
-      const selectRef = React.createRef<SelectRef>();
-      const handleChange = vi.fn();
-      render(
-        <Select
-          options={basicOptions}
-          value="1"
-          onChange={handleChange}
-          ref={selectRef}
-        />
-      );
-      
-      act(() => {
-        selectRef.current?.clear();
-      });
-      
-      expect(handleChange).toHaveBeenCalledWith('', []);
-    });
-
-    it('provides ref with reset method', () => {
-      const selectRef = React.createRef<SelectRef>();
-      render(
-        <Select
-          options={basicOptions}
-          defaultValue="1"
-          ref={selectRef}
-        />
-      );
-      
-      act(() => {
-        selectRef.current?.reset();
-      });
-      
-      expect(selectRef.current?.getValue()).toBe('1');
-    });
-
-    it('provides ref with getSelectedOptions method', () => {
-      const selectRef = React.createRef<SelectRef>();
-      render(<Select options={basicOptions} value="1" ref={selectRef} />);
-      
-      const selectedOptions = selectRef.current?.getSelectedOptions();
-      expect(selectedOptions).toEqual([basicOptions[0]]);
-    });
-
-    it('provides ref with searchOptions method', () => {
-      const selectRef = React.createRef<SelectRef>();
-      render(<Select options={basicOptions} ref={selectRef} />);
-      
-      const searchResults = selectRef.current?.searchOptions('Option 1');
-      expect(searchResults).toEqual([basicOptions[0]]);
-    });
-  });
-
-  describe('Options Handling', () => {
-    it('handles grouped options', () => {
-      render(<Select options={groupedOptions} />);
-      expect(screen.getByTestId('picker')).toBeInTheDocument();
-    });
-
-    it('handles disabled options', () => {
-      const optionsWithDisabled = [
-        ...basicOptions,
-        { value: '4', label: 'Disabled Option', disabled: true },
-      ];
-      render(<Select options={optionsWithDisabled} />);
-      expect(screen.getByTestId('picker')).toBeInTheDocument();
-    });
-
-    it('handles options with descriptions', () => {
-      const optionsWithDescriptions = basicOptions.map(option => ({
-        ...option,
-        description: `Description for ${option.label}`,
-      }));
-      render(<Select options={optionsWithDescriptions} />);
-      expect(screen.getByTestId('picker')).toBeInTheDocument();
-    });
-
-    it('handles options with icons', () => {
-      const optionsWithIcons = basicOptions.map(option => ({
-        ...option,
-        icon: <span data-testid={`icon-${option.value}`}>Icon</span>,
-      }));
-      render(<Select options={optionsWithIcons} />);
-      expect(screen.getByTestId('picker')).toBeInTheDocument();
-    });
-  });
-
-  
-  describe('Style Classes', () => {
-    it('applies custom className', () => {
-      render(<Select options={basicOptions} className="custom-select" />);
-      const picker = screen.getByTestId('picker');
-      expect(picker).toHaveClass('custom-select');
-      expect(picker).toHaveClass('taro-uno-select');
-    });
-
-    it('applies custom style', () => {
-      render(<Select options={basicOptions} style={{ backgroundColor: 'red' }} />);
-      const picker = screen.getByTestId('picker');
-      // Check if the custom style is applied via the style attribute
-      expect(picker).toHaveAttribute('style');
-      const styleAttr = picker.getAttribute('style');
-      expect(styleAttr).toContain('background-color');
-      expect(styleAttr).toContain('red');
-    });
-
-    it('applies bordered style', () => {
-      render(<Select options={basicOptions} bordered />);
-      const picker = screen.getByTestId('picker');
-      expect(picker).toHaveClass('taro-uno-select--bordered');
-    });
-
-    it('applies borderless style', () => {
-      render(<Select options={basicOptions} bordered={false} />);
-      const picker = screen.getByTestId('picker');
-      expect(picker).not.toHaveClass('taro-uno-select--bordered');
-    });
-
-    it('applies size-specific classes', () => {
-      render(<Select options={basicOptions} size="lg" />);
-      const picker = screen.getByTestId('picker');
-      expect(picker).toHaveClass('taro-uno-select--lg');
-    });
-
-    it('applies variant-specific classes', () => {
-      render(<Select options={basicOptions} variant="filled" />);
-      const picker = screen.getByTestId('picker');
-      expect(picker).toHaveClass('taro-uno-select--filled');
-    });
-
-    it('applies status-specific classes', () => {
-      render(<Select options={basicOptions} status="error" />);
-      const picker = screen.getByTestId('picker');
-      expect(picker).toHaveClass('taro-uno-select--error');
-    });
-  });
-
-  describe('Edge Cases', () => {
-    it('handles empty options array', () => {
-      render(<Select options={[]} />);
-      expect(screen.getByTestId('picker')).toBeInTheDocument();
-    });
-
-    it('handles undefined options', () => {
-      render(<Select />);
-      expect(screen.getByTestId('picker')).toBeInTheDocument();
-    });
-
-    it('handles null value', () => {
-      render(<Select options={basicOptions} value={null as any} />);
-      expect(screen.getByText('请选择')).toBeInTheDocument();
-    });
-
-    it('handles undefined value', () => {
-      render(<Select options={basicOptions} value={undefined} />);
-      expect(screen.getByText('请选择')).toBeInTheDocument();
-    });
-
-    it('handles immediate validation', async () => {
-      const handleChange = vi.fn();
-      render(
-        <Select
-          options={basicOptions}
-          rules={[{ required: true, message: 'Required' }]}
-          immediate
-          validateTrigger="onChange"
-          onChange={handleChange}
-        />
-      );
-
-      fireEvent.click(screen.getByText('Change'));
-
-      await waitFor(() => {
-        // Check if validation result is displayed
-        const picker = screen.getByTestId('picker');
-        expect(picker).toBeInTheDocument();
-      });
-    });
-  });
-
-  describe('Performance', () => {
-    it('handles large number of options', () => {
-      const largeOptions = Array.from({ length: 1000 }, (_, i) => ({
-        value: i.toString(),
-        label: `Option ${i}`,
-      }));
-      
-      render(<Select options={largeOptions} />);
-      expect(screen.getByTestId('picker')).toBeInTheDocument();
-    });
-
-    it('memoizes callbacks properly', () => {
-      const handleChange = vi.fn();
-      const { rerender } = render(<Select options={basicOptions} onChange={handleChange} />);
-      
-      rerender(<Select options={basicOptions} onChange={handleChange} />);
-      
-      // Should not cause unnecessary re-renders
-      expect(handleChange).not.toHaveBeenCalled();
-    });
-  });
-});