ywana-core8 0.1.103 → 0.2.2

package/src/html/textfield2.test.js

@@ -1,950 +0,0 @@
-import React from 'react'
-import { TextField2, TextArea2, PasswordField2, DropDown2, DateRange2 } from './textfield2'
-
-// Pruebas unitarias para los componentes TextField2
-describe('TextField2 Components', () => {
-    // Mock de los componentes dependientes
-    const mockText = jest.fn()
-    const mockIcon = jest.fn()
-    const mockSiteContext = {
-        translate: jest.fn((text) => text),
-        changeFocus: jest.fn()
-    }
-
-    beforeEach(() => {
-        jest.clearAllMocks()
-        
-        // Mock del componente Text
-        jest.doMock('./text', () => ({
-            Text: mockText
-        }))
-        
-        // Mock del componente Icon
-        jest.doMock('./icon', () => ({
-            Icon: mockIcon
-        }))
-        
-        // Mock del SiteContext
-        jest.doMock('../site/siteContext', () => ({
-            SiteContext: {
-                Provider: ({ children }) => children,
-                Consumer: ({ children }) => children(mockSiteContext)
-            }
-        }))
-        
-        // Mock de console.warn para las pruebas
-        jest.spyOn(console, 'warn').mockImplementation(() => {})
-    })
-
-    afterEach(() => {
-        console.warn.mockRestore()
-    })
-
-    describe('TextField2 Component', () => {
-        test('component exports correctly', () => {
-            expect(TextField2).toBeDefined()
-            expect(typeof TextField2).toBe('function')
-        })
-
-        test('component has correct PropTypes', () => {
-            expect(TextField2.propTypes).toBeDefined()
-            expect(TextField2.propTypes.id).toBeDefined()
-            expect(TextField2.propTypes.type).toBeDefined()
-            expect(TextField2.propTypes.className).toBeDefined()
-            expect(TextField2.propTypes.label).toBeDefined()
-            expect(TextField2.propTypes.labelPosition).toBeDefined()
-            expect(TextField2.propTypes.placeholder).toBeDefined()
-            expect(TextField2.propTypes.value).toBeDefined()
-            expect(TextField2.propTypes.outlined).toBeDefined()
-            expect(TextField2.propTypes.readOnly).toBeDefined()
-            expect(TextField2.propTypes.disabled).toBeDefined()
-            expect(TextField2.propTypes.required).toBeDefined()
-            expect(TextField2.propTypes.canClear).toBeDefined()
-            expect(TextField2.propTypes.showPasswordToggle).toBeDefined()
-            expect(TextField2.propTypes.autoComplete).toBeDefined()
-            expect(TextField2.propTypes.error).toBeDefined()
-            expect(TextField2.propTypes.helperText).toBeDefined()
-            expect(TextField2.propTypes.validation).toBeDefined()
-            expect(TextField2.propTypes.onChange).toBeDefined()
-        })
-
-        test('component has correct defaultProps', () => {
-            expect(TextField2.defaultProps).toBeDefined()
-            expect(TextField2.defaultProps.type).toBe('text')
-            expect(TextField2.defaultProps.labelPosition).toBe('top')
-            expect(TextField2.defaultProps.outlined).toBe(false)
-            expect(TextField2.defaultProps.readOnly).toBe(false)
-            expect(TextField2.defaultProps.disabled).toBe(false)
-            expect(TextField2.defaultProps.required).toBe(false)
-            expect(TextField2.defaultProps.canClear).toBe(true)
-            expect(TextField2.defaultProps.showPasswordToggle).toBe(true)
-            expect(TextField2.defaultProps.autoComplete).toBe('off')
-            expect(TextField2.defaultProps.debounceMs).toBe(0)
-            expect(TextField2.defaultProps.className).toBe('')
-        })
-
-        test('warns when id prop is missing', () => {
-            const validateId = (id) => {
-                if (!id) {
-                    console.warn('TextField2 component: id prop is required')
-                }
-            }
-            
-            validateId(null)
-            expect(console.warn).toHaveBeenCalledWith('TextField2 component: id prop is required')
-
-            console.warn.mockClear()
-            validateId('test-id')
-            expect(console.warn).not.toHaveBeenCalled()
-        })
-
-        test('validation logic works correctly', () => {
-            const validateField = (value, validation, required) => {
-                if (validation && value !== undefined) {
-                    const validationResult = validation(value)
-                    const valid = typeof validationResult === 'boolean' ? validationResult : validationResult.valid
-                    const errorMessage = typeof validationResult === 'object' ? validationResult.message : ''
-                    
-                    return {
-                        isValid: valid,
-                        internalError: valid ? '' : errorMessage || (required && !value ? 'This field is required' : 'Invalid value')
-                    }
-                } else if (required && !value) {
-                    return {
-                        isValid: false,
-                        internalError: 'This field is required'
-                    }
-                } else {
-                    return {
-                        isValid: true,
-                        internalError: ''
-                    }
-                }
-            }
-
-            // Valid value with validation
-            const result1 = validateField('test@email.com', (v) => v.includes('@'), false)
-            expect(result1.isValid).toBe(true)
-            expect(result1.internalError).toBe('')
-
-            // Invalid value with validation
-            const result2 = validateField('invalid-email', (v) => v.includes('@'), false)
-            expect(result2.isValid).toBe(false)
-            expect(result2.internalError).toBe('Invalid value')
-
-            // Required field empty
-            const result3 = validateField('', null, true)
-            expect(result3.isValid).toBe(false)
-            expect(result3.internalError).toBe('This field is required')
-
-            // Valid required field
-            const result4 = validateField('value', null, true)
-            expect(result4.isValid).toBe(true)
-            expect(result4.internalError).toBe('')
-
-            // Validation with custom error message
-            const result5 = validateField('short', (v) => ({ valid: v.length >= 6, message: 'Must be at least 6 characters' }), false)
-            expect(result5.isValid).toBe(false)
-            expect(result5.internalError).toBe('Must be at least 6 characters')
-        })
-
-        test('CSS classes generation works correctly', () => {
-            const generateClasses = (outlined, labelPosition, label, type, isFocused, disabled, readOnly, error, internalError, isValid, className, id) => {
-                const borderStyle = outlined ? 'textfield2-outlined' : 'textfield2'
-                const labelStyle = label ? '' : 'no-label'
-                const labelPositionStyle = labelPosition === 'left' ? 'label-left' : 'label-top'
-                
-                return [
-                    'textfield2',
-                    borderStyle,
-                    labelStyle,
-                    labelPositionStyle,
-                    `textfield2-${type}`,
-                    isFocused && 'focused',
-                    disabled && 'disabled',
-                    readOnly && 'readonly',
-                    error || internalError ? 'error' : '',
-                    !isValid && 'invalid',
-                    className || '',
-                    id
-                ].filter(Boolean).join(' ')
-            }
-
-            expect(generateClasses(false, 'top', 'Label', 'text', false, false, false, '', '', true, '', 'test-id'))
-                .toBe('textfield2 textfield2 label-top textfield2-text test-id')
-
-            expect(generateClasses(true, 'left', '', 'email', true, false, false, '', '', true, 'custom', 'test-id'))
-                .toBe('textfield2 textfield2-outlined no-label label-left textfield2-email focused custom test-id')
-
-            expect(generateClasses(false, 'top', 'Label', 'password', false, true, false, '', '', true, '', 'test-id'))
-                .toBe('textfield2 textfield2 label-top textfield2-password disabled test-id')
-
-            expect(generateClasses(false, 'top', 'Label', 'text', false, false, false, 'Error message', '', false, '', 'test-id'))
-                .toBe('textfield2 textfield2 label-top textfield2-text error invalid test-id')
-        })
-
-        test('accessibility attributes generation works correctly', () => {
-            const generateAriaAttributes = (ariaLabel, label, ariaDescribedBy, error, internalError, helperText, id, isValid, required, disabled, readOnly) => {
-                return {
-                    'aria-label': ariaLabel || label,
-                    'aria-describedby': ariaDescribedBy || (error || internalError || helperText ? `${id}-helper` : undefined),
-                    'aria-invalid': !isValid || !!(error || internalError),
-                    'aria-required': required,
-                    'aria-disabled': disabled,
-                    'aria-readonly': readOnly
-                }
-            }
-
-            const basic = generateAriaAttributes(null, 'Test Label', null, '', '', '', 'test-id', true, false, false, false)
-            expect(basic['aria-label']).toBe('Test Label')
-            expect(basic['aria-describedby']).toBeUndefined()
-            expect(basic['aria-invalid']).toBe(false)
-            expect(basic['aria-required']).toBe(false)
-            expect(basic['aria-disabled']).toBe(false)
-            expect(basic['aria-readonly']).toBe(false)
-
-            const withError = generateAriaAttributes(null, 'Test Label', null, 'Error message', '', '', 'test-id', false, true, false, false)
-            expect(withError['aria-describedby']).toBe('test-id-helper')
-            expect(withError['aria-invalid']).toBe(true)
-            expect(withError['aria-required']).toBe(true)
-
-            const disabled = generateAriaAttributes(null, 'Test Label', null, '', '', '', 'test-id', true, false, true, true)
-            expect(disabled['aria-disabled']).toBe(true)
-            expect(disabled['aria-readonly']).toBe(true)
-        })
-
-        test('input attributes generation works correctly', () => {
-            const generateInputAttributes = (id, type, isPasswordVisible, placeholder, value, required, disabled, readOnly, maxLength, minLength, pattern, step, min, max, autoComplete, ariaAttributes, restProps) => {
-                return {
-                    id,
-                    type: type === 'password' && isPasswordVisible ? 'text' : type,
-                    placeholder,
-                    value: value || '',
-                    required,
-                    disabled,
-                    readOnly,
-                    maxLength,
-                    minLength,
-                    pattern,
-                    step,
-                    min,
-                    max,
-                    autoComplete,
-                    ...ariaAttributes,
-                    ...restProps
-                }
-            }
-
-            const basic = generateInputAttributes('test-id', 'text', false, 'Enter text', 'value', false, false, false, null, null, null, null, null, null, 'off', {}, {})
-            expect(basic.id).toBe('test-id')
-            expect(basic.type).toBe('text')
-            expect(basic.placeholder).toBe('Enter text')
-            expect(basic.value).toBe('value')
-
-            const password = generateInputAttributes('pwd-id', 'password', true, 'Enter password', 'secret', true, false, false, null, null, null, null, null, null, 'off', {}, {})
-            expect(password.type).toBe('text') // Password visible
-            expect(password.required).toBe(true)
-
-            const passwordHidden = generateInputAttributes('pwd-id', 'password', false, 'Enter password', 'secret', true, false, false, null, null, null, null, null, null, 'off', {}, {})
-            expect(passwordHidden.type).toBe('password') // Password hidden
-        })
-
-        test('debounce logic works correctly', () => {
-            jest.useFakeTimers()
-            
-            const mockOnChange = jest.fn()
-            let debounceRef = { current: null }
-            
-            const simulateDebounce = (debounceMs, id, value, onChange) => {
-                // Clear previous debounce
-                if (debounceRef.current) {
-                    clearTimeout(debounceRef.current)
-                }
-                
-                if (debounceMs > 0) {
-                    debounceRef.current = setTimeout(() => {
-                        if (onChange) onChange(id, value, {})
-                    }, debounceMs)
-                } else {
-                    if (onChange) onChange(id, value, {})
-                }
-            }
-
-            // No debounce
-            simulateDebounce(0, 'test-id', 'value', mockOnChange)
-            expect(mockOnChange).toHaveBeenCalledWith('test-id', 'value', {})
-
-            mockOnChange.mockClear()
-
-            // With debounce
-            simulateDebounce(300, 'test-id', 'value1', mockOnChange)
-            expect(mockOnChange).not.toHaveBeenCalled()
-
-            jest.advanceTimersByTime(300)
-            expect(mockOnChange).toHaveBeenCalledWith('test-id', 'value1', {})
-
-            mockOnChange.mockClear()
-
-            // Debounce cancellation
-            simulateDebounce(300, 'test-id', 'value2', mockOnChange)
-            simulateDebounce(300, 'test-id', 'value3', mockOnChange)
-            
-            jest.advanceTimersByTime(300)
-            expect(mockOnChange).toHaveBeenCalledTimes(1)
-            expect(mockOnChange).toHaveBeenCalledWith('test-id', 'value3', {})
-
-            jest.useRealTimers()
-        })
-
-        test('password visibility toggle works correctly', () => {
-            const togglePassword = (isPasswordVisible) => !isPasswordVisible
-
-            expect(togglePassword(false)).toBe(true)
-            expect(togglePassword(true)).toBe(false)
-        })
-
-        test('clear functionality works correctly', () => {
-            const mockOnChange = jest.fn()
-            
-            const simulateClear = (disabled, readOnly, id, onChange) => {
-                if (disabled || readOnly) return
-                
-                if (onChange) onChange(id, '', { target: { value: '' } })
-            }
-
-            // Normal clear
-            simulateClear(false, false, 'test-id', mockOnChange)
-            expect(mockOnChange).toHaveBeenCalledWith('test-id', '', { target: { value: '' } })
-
-            mockOnChange.mockClear()
-
-            // Disabled clear
-            simulateClear(true, false, 'test-id', mockOnChange)
-            expect(mockOnChange).not.toHaveBeenCalled()
-
-            // ReadOnly clear
-            simulateClear(false, true, 'test-id', mockOnChange)
-            expect(mockOnChange).not.toHaveBeenCalled()
-        })
-
-        test('focus management works correctly', () => {
-            const mockSite = {
-                changeFocus: jest.fn()
-            }
-            
-            const simulateFocus = (disabled, onFocus, site) => {
-                if (disabled) return
-                
-                if (onFocus) onFocus({})
-                
-                if (site && site.changeFocus) {
-                    site.changeFocus({
-                        lose: () => {} // setIsFocused(false)
-                    })
-                }
-            }
-
-            const mockOnFocus = jest.fn()
-            
-            simulateFocus(false, mockOnFocus, mockSite)
-            expect(mockOnFocus).toHaveBeenCalled()
-            expect(mockSite.changeFocus).toHaveBeenCalled()
-
-            mockOnFocus.mockClear()
-            mockSite.changeFocus.mockClear()
-
-            // Disabled focus
-            simulateFocus(true, mockOnFocus, mockSite)
-            expect(mockOnFocus).not.toHaveBeenCalled()
-            expect(mockSite.changeFocus).not.toHaveBeenCalled()
-        })
-
-        test('error and helper text display logic works correctly', () => {
-            const getDisplayText = (error, internalError, helperText) => {
-                const displayError = error || internalError
-                const displayHelperText = helperText && !displayError
-                
-                return {
-                    displayError,
-                    displayHelperText,
-                    showHelper: !!(displayError || displayHelperText)
-                }
-            }
-
-            const result1 = getDisplayText('External error', '', 'Helper text')
-            expect(result1.displayError).toBe('External error')
-            expect(result1.displayHelperText).toBe(false)
-            expect(result1.showHelper).toBe(true)
-
-            const result2 = getDisplayText('', 'Internal error', 'Helper text')
-            expect(result2.displayError).toBe('Internal error')
-            expect(result2.displayHelperText).toBe(false)
-            expect(result2.showHelper).toBe(true)
-
-            const result3 = getDisplayText('', '', 'Helper text')
-            expect(result3.displayError).toBe('')
-            expect(result3.displayHelperText).toBe(true)
-            expect(result3.showHelper).toBe(true)
-
-            const result4 = getDisplayText('', '', '')
-            expect(result4.displayError).toBe('')
-            expect(result4.displayHelperText).toBe('')
-            expect(result4.showHelper).toBe(false)
-        })
-    })
-
-    describe('TextArea2 Component', () => {
-        test('component exports correctly', () => {
-            expect(TextArea2).toBeDefined()
-            expect(typeof TextArea2).toBe('function')
-        })
-
-        test('component has correct PropTypes', () => {
-            expect(TextArea2.propTypes).toBeDefined()
-            // Should inherit from TextField2
-            expect(TextArea2.propTypes.id).toBeDefined()
-            expect(TextArea2.propTypes.rows).toBeDefined()
-        })
-
-        test('component has correct defaultProps', () => {
-            expect(TextArea2.defaultProps).toBeDefined()
-            expect(TextArea2.defaultProps.type).toBe('textarea')
-        })
-    })
-
-    describe('PasswordField2 Component', () => {
-        test('component exports correctly', () => {
-            expect(PasswordField2).toBeDefined()
-            expect(typeof PasswordField2).toBe('function')
-        })
-
-        test('component has correct PropTypes', () => {
-            expect(PasswordField2.propTypes).toBeDefined()
-            // Should inherit from TextField2
-            expect(PasswordField2.propTypes.id).toBeDefined()
-            expect(PasswordField2.propTypes.showPasswordToggle).toBeDefined()
-        })
-
-        test('component has correct defaultProps', () => {
-            expect(PasswordField2.defaultProps).toBeDefined()
-            expect(PasswordField2.defaultProps.type).toBe('password')
-        })
-    })
-
-    describe('DropDown2 Component', () => {
-        test('component exports correctly', () => {
-            expect(DropDown2).toBeDefined()
-            expect(typeof DropDown2).toBe('function')
-        })
-
-        test('component has correct PropTypes', () => {
-            expect(DropDown2.propTypes).toBeDefined()
-            expect(DropDown2.propTypes.id).toBeDefined()
-            expect(DropDown2.propTypes.options).toBeDefined()
-            expect(DropDown2.propTypes.value).toBeDefined()
-            expect(DropDown2.propTypes.placeholder).toBeDefined()
-            expect(DropDown2.propTypes.label).toBeDefined()
-            expect(DropDown2.propTypes.outlined).toBeDefined()
-            expect(DropDown2.propTypes.disabled).toBeDefined()
-            expect(DropDown2.propTypes.readOnly).toBeDefined()
-            expect(DropDown2.propTypes.required).toBeDefined()
-            expect(DropDown2.propTypes.searchable).toBeDefined()
-            expect(DropDown2.propTypes.clearable).toBeDefined()
-            expect(DropDown2.propTypes.multiple).toBeDefined()
-            expect(DropDown2.propTypes.onChange).toBeDefined()
-        })
-
-        test('component has correct defaultProps', () => {
-            expect(DropDown2.defaultProps).toBeDefined()
-            expect(DropDown2.defaultProps.options).toEqual([])
-            expect(DropDown2.defaultProps.outlined).toBe(false)
-            expect(DropDown2.defaultProps.disabled).toBe(false)
-            expect(DropDown2.defaultProps.readOnly).toBe(false)
-            expect(DropDown2.defaultProps.required).toBe(false)
-            expect(DropDown2.defaultProps.searchable).toBe(false)
-            expect(DropDown2.defaultProps.clearable).toBe(false)
-            expect(DropDown2.defaultProps.multiple).toBe(false)
-            expect(DropDown2.defaultProps.position).toBe('bottom')
-            expect(DropDown2.defaultProps.maxHeight).toBe('200px')
-            expect(DropDown2.defaultProps.className).toBe('')
-        })
-
-        test('warns when id prop is missing', () => {
-            const validateId = (id) => {
-                if (!id) {
-                    console.warn('DropDown2 component: id prop is required')
-                }
-            }
-
-            validateId(null)
-            expect(console.warn).toHaveBeenCalledWith('DropDown2 component: id prop is required')
-
-            console.warn.mockClear()
-            validateId('test-id')
-            expect(console.warn).not.toHaveBeenCalled()
-        })
-
-        test('warns when options is not an array', () => {
-            const validateOptions = (options) => {
-                if (!Array.isArray(options)) {
-                    console.warn('DropDown2 component: options must be an array')
-                }
-            }
-
-            validateOptions('not an array')
-            expect(console.warn).toHaveBeenCalledWith('DropDown2 component: options must be an array')
-
-            console.warn.mockClear()
-            validateOptions([])
-            expect(console.warn).not.toHaveBeenCalled()
-        })
-
-        test('display value generation works correctly', () => {
-            const options = [
-                { value: 'option1', label: 'Option 1' },
-                { value: 'option2', label: 'Option 2' },
-                { value: 'option3', label: 'Option 3' }
-            ]
-
-            const getDisplayValue = (value, multiple, options, renderValue) => {
-                if (!value) return ''
-
-                if (multiple && Array.isArray(value)) {
-                    if (value.length === 0) return ''
-                    if (value.length === 1) {
-                        const option = options.find(opt => opt.value === value[0])
-                        return option ? option.label : value[0]
-                    }
-                    return `${value.length} items selected`
-                }
-
-                const option = options.find(opt => opt.value === value)
-                if (renderValue && option) {
-                    return renderValue(option)
-                }
-                return option ? option.label : value
-            }
-
-            // Single selection
-            expect(getDisplayValue('option1', false, options)).toBe('Option 1')
-            expect(getDisplayValue('unknown', false, options)).toBe('unknown')
-            expect(getDisplayValue('', false, options)).toBe('')
-
-            // Multiple selection
-            expect(getDisplayValue([], true, options)).toBe('')
-            expect(getDisplayValue(['option1'], true, options)).toBe('Option 1')
-            expect(getDisplayValue(['option1', 'option2'], true, options)).toBe('2 items selected')
-
-            // Custom render
-            const customRender = (option) => `Custom: ${option.label}`
-            expect(getDisplayValue('option1', false, options, customRender)).toBe('Custom: Option 1')
-        })
-
-        test('option filtering works correctly', () => {
-            const options = [
-                { value: 'apple', label: 'Apple' },
-                { value: 'banana', label: 'Banana' },
-                { value: 'cherry', label: 'Cherry' }
-            ]
-
-            const filterOptions = (options, searchTerm, searchable, filterFunction) => {
-                if (!searchTerm || !searchable) return options
-
-                if (filterFunction) {
-                    return options.filter(option => filterFunction(option, searchTerm))
-                }
-
-                return options.filter(option =>
-                    option.label.toLowerCase().includes(searchTerm.toLowerCase())
-                )
-            }
-
-            // No search
-            expect(filterOptions(options, 'app', false)).toEqual(options)
-            expect(filterOptions(options, '', true)).toEqual(options)
-
-            // Default filtering
-            expect(filterOptions(options, 'app', true)).toEqual([{ value: 'apple', label: 'Apple' }])
-            expect(filterOptions(options, 'an', true)).toEqual([{ value: 'banana', label: 'Banana' }])
-
-            // Custom filtering
-            const customFilter = (option, term) => option.value.startsWith(term)
-            expect(filterOptions(options, 'a', true, customFilter)).toEqual([{ value: 'apple', label: 'Apple' }])
-        })
-
-        test('option grouping works correctly', () => {
-            const options = [
-                { value: 'apple', label: 'Apple', category: 'Fruits' },
-                { value: 'banana', label: 'Banana', category: 'Fruits' },
-                { value: 'carrot', label: 'Carrot', category: 'Vegetables' }
-            ]
-
-            const groupOptions = (options, groupBy) => {
-                if (!groupBy) return [{ options }]
-
-                const groups = options.reduce((acc, option) => {
-                    const groupKey = typeof groupBy === 'function' ? groupBy(option) : option[groupBy]
-                    if (!acc[groupKey]) {
-                        acc[groupKey] = []
-                    }
-                    acc[groupKey].push(option)
-                    return acc
-                }, {})
-
-                return Object.entries(groups).map(([label, options]) => ({ label, options }))
-            }
-
-            // No grouping
-            expect(groupOptions(options)).toEqual([{ options }])
-
-            // Group by property
-            const grouped = groupOptions(options, 'category')
-            expect(grouped).toHaveLength(2)
-            expect(grouped[0].label).toBe('Fruits')
-            expect(grouped[0].options).toHaveLength(2)
-            expect(grouped[1].label).toBe('Vegetables')
-            expect(grouped[1].options).toHaveLength(1)
-
-            // Group by function
-            const groupByFirstLetter = (option) => option.label[0]
-            const groupedByLetter = groupOptions(options, groupByFirstLetter)
-            expect(groupedByLetter).toHaveLength(3) // A, B, C
-        })
-
-        test('selection logic works correctly', () => {
-            const handleSelection = (selectedValue, multiple, currentValue) => {
-                if (multiple) {
-                    const currentValues = Array.isArray(currentValue) ? currentValue : []
-                    if (currentValues.includes(selectedValue)) {
-                        return currentValues.filter(v => v !== selectedValue)
-                    } else {
-                        return [...currentValues, selectedValue]
-                    }
-                } else {
-                    return selectedValue
-                }
-            }
-
-            // Single selection
-            expect(handleSelection('option1', false, '')).toBe('option1')
-            expect(handleSelection('option2', false, 'option1')).toBe('option2')
-
-            // Multiple selection - add
-            expect(handleSelection('option1', true, [])).toEqual(['option1'])
-            expect(handleSelection('option2', true, ['option1'])).toEqual(['option1', 'option2'])
-
-            // Multiple selection - remove
-            expect(handleSelection('option1', true, ['option1', 'option2'])).toEqual(['option2'])
-        })
-
-        test('keyboard navigation logic works correctly', () => {
-            const handleKeyNavigation = (key, isOpen, focusedIndex, optionsLength) => {
-                switch (key) {
-                    case 'ArrowDown':
-                        if (!isOpen) {
-                            return { isOpen: true, focusedIndex: -1 }
-                        } else {
-                            return {
-                                isOpen: true,
-                                focusedIndex: focusedIndex < optionsLength - 1 ? focusedIndex + 1 : 0
-                            }
-                        }
-                    case 'ArrowUp':
-                        if (isOpen) {
-                            return {
-                                isOpen: true,
-                                focusedIndex: focusedIndex > 0 ? focusedIndex - 1 : optionsLength - 1
-                            }
-                        }
-                        return { isOpen, focusedIndex }
-                    case 'Escape':
-                        return { isOpen: false, focusedIndex: -1 }
-                    default:
-                        return { isOpen, focusedIndex }
-                }
-            }
-
-            // Arrow down when closed
-            expect(handleKeyNavigation('ArrowDown', false, -1, 3)).toEqual({ isOpen: true, focusedIndex: -1 })
-
-            // Arrow down when open
-            expect(handleKeyNavigation('ArrowDown', true, -1, 3)).toEqual({ isOpen: true, focusedIndex: 0 })
-            expect(handleKeyNavigation('ArrowDown', true, 0, 3)).toEqual({ isOpen: true, focusedIndex: 1 })
-            expect(handleKeyNavigation('ArrowDown', true, 2, 3)).toEqual({ isOpen: true, focusedIndex: 0 }) // Wrap around
-
-            // Arrow up
-            expect(handleKeyNavigation('ArrowUp', true, 1, 3)).toEqual({ isOpen: true, focusedIndex: 0 })
-            expect(handleKeyNavigation('ArrowUp', true, 0, 3)).toEqual({ isOpen: true, focusedIndex: 2 }) // Wrap around
-
-            // Escape
-            expect(handleKeyNavigation('Escape', true, 1, 3)).toEqual({ isOpen: false, focusedIndex: -1 })
-        })
-
-        test('CSS classes generation works correctly', () => {
-            const generateClasses = (outlined, disabled, readOnly, isOpen, error, internalError, multiple, className) => {
-                return [
-                    'dropdown2',
-                    outlined && 'outlined',
-                    disabled && 'disabled',
-                    readOnly && 'readonly',
-                    isOpen && 'open',
-                    error || internalError ? 'error' : '',
-                    multiple && 'multiple',
-                    className || ''
-                ].filter(Boolean).join(' ')
-            }
-
-            expect(generateClasses(false, false, false, false, '', '', false, '')).toBe('dropdown2')
-            expect(generateClasses(true, false, false, false, '', '', false, '')).toBe('dropdown2 outlined')
-            expect(generateClasses(false, true, false, false, '', '', false, '')).toBe('dropdown2 disabled')
-            expect(generateClasses(false, false, true, false, '', '', false, '')).toBe('dropdown2 readonly')
-            expect(generateClasses(false, false, false, true, '', '', false, '')).toBe('dropdown2 open')
-            expect(generateClasses(false, false, false, false, 'Error', '', false, '')).toBe('dropdown2 error')
-            expect(generateClasses(false, false, false, false, '', '', true, '')).toBe('dropdown2 multiple')
-            expect(generateClasses(false, false, false, false, '', '', false, 'custom')).toBe('dropdown2 custom')
-        })
-
-        test('accessibility attributes generation works correctly', () => {
-            const generateAriaAttributes = (ariaLabel, label, isOpen, disabled, readOnly, required, error, internalError, helperText, id) => {
-                return {
-                    'aria-label': ariaLabel || label,
-                    'aria-expanded': isOpen,
-                    'aria-haspopup': 'listbox',
-                    'aria-disabled': disabled,
-                    'aria-readonly': readOnly,
-                    'aria-required': required,
-                    'aria-invalid': !!(error || internalError),
-                    'aria-describedby': error || internalError || helperText ? `${id}-helper` : undefined
-                }
-            }
-
-            const basic = generateAriaAttributes(null, 'Test Label', false, false, false, false, '', '', '', 'test-id')
-            expect(basic['aria-label']).toBe('Test Label')
-            expect(basic['aria-expanded']).toBe(false)
-            expect(basic['aria-haspopup']).toBe('listbox')
-            expect(basic['aria-disabled']).toBe(false)
-            expect(basic['aria-readonly']).toBe(false)
-            expect(basic['aria-required']).toBe(false)
-            expect(basic['aria-invalid']).toBe(false)
-            expect(basic['aria-describedby']).toBeUndefined()
-
-            const withError = generateAriaAttributes(null, 'Test Label', true, false, false, true, 'Error message', '', '', 'test-id')
-            expect(withError['aria-expanded']).toBe(true)
-            expect(withError['aria-required']).toBe(true)
-            expect(withError['aria-invalid']).toBe(true)
-            expect(withError['aria-describedby']).toBe('test-id-helper')
-        })
-    })
-
-    describe('DateRange2 Component', () => {
-        test('component exports correctly', () => {
-            expect(DateRange2).toBeDefined()
-            expect(typeof DateRange2).toBe('function')
-        })
-
-        test('component has correct PropTypes', () => {
-            expect(DateRange2.propTypes).toBeDefined()
-            expect(DateRange2.propTypes.id).toBeDefined()
-            expect(DateRange2.propTypes.label).toBeDefined()
-            expect(DateRange2.propTypes.value).toBeDefined()
-            expect(DateRange2.propTypes.outlined).toBeDefined()
-            expect(DateRange2.propTypes.disabled).toBeDefined()
-            expect(DateRange2.propTypes.readOnly).toBeDefined()
-            expect(DateRange2.propTypes.required).toBeDefined()
-            expect(DateRange2.propTypes.minDate).toBeDefined()
-            expect(DateRange2.propTypes.maxDate).toBeDefined()
-            expect(DateRange2.propTypes.error).toBeDefined()
-            expect(DateRange2.propTypes.helperText).toBeDefined()
-            expect(DateRange2.propTypes.onChange).toBeDefined()
-            expect(DateRange2.propTypes.onValidation).toBeDefined()
-        })
-
-        test('component has correct defaultProps', () => {
-            expect(DateRange2.defaultProps).toBeDefined()
-            expect(DateRange2.defaultProps.outlined).toBe(false)
-            expect(DateRange2.defaultProps.disabled).toBe(false)
-            expect(DateRange2.defaultProps.readOnly).toBe(false)
-            expect(DateRange2.defaultProps.required).toBe(false)
-            expect(DateRange2.defaultProps.className).toBe('')
-        })
-
-        test('warns when id prop is missing', () => {
-            const validateId = (id) => {
-                if (!id) {
-                    console.warn('DateRange2 component: id prop is required')
-                }
-            }
-
-            validateId(null)
-            expect(console.warn).toHaveBeenCalledWith('DateRange2 component: id prop is required')
-
-            console.warn.mockClear()
-            validateId('test-id')
-            expect(console.warn).not.toHaveBeenCalled()
-        })
-
-        test('form initialization from value works correctly', () => {
-            const initializeForm = (value) => {
-                if (value && typeof value === 'object') {
-                    return {
-                        from: value.from || '',
-                        to: value.to || ''
-                    }
-                }
-                return { from: '', to: '' }
-            }
-
-            expect(initializeForm(null)).toEqual({ from: '', to: '' })
-            expect(initializeForm({})).toEqual({ from: '', to: '' })
-            expect(initializeForm({ from: '2023-01-01' })).toEqual({ from: '2023-01-01', to: '' })
-            expect(initializeForm({ from: '2023-01-01', to: '2023-12-31' })).toEqual({ from: '2023-01-01', to: '2023-12-31' })
-        })
-
-        test('date range validation works correctly', () => {
-            const validateDateRange = (form, required, minDate, maxDate) => {
-                let valid = true
-                let errorMessage = ''
-
-                if (required && (!form.from || !form.to)) {
-                    valid = false
-                    errorMessage = 'Both dates are required'
-                } else if (form.from && form.to) {
-                    const fromDate = new Date(form.from)
-                    const toDate = new Date(form.to)
-
-                    if (fromDate > toDate) {
-                        valid = false
-                        errorMessage = 'From date must be before To date'
-                    } else if (minDate && fromDate < new Date(minDate)) {
-                        valid = false
-                        errorMessage = `From date must be after ${minDate}`
-                    } else if (maxDate && toDate > new Date(maxDate)) {
-                        valid = false
-                        errorMessage = `To date must be before ${maxDate}`
-                    }
-                }
-
-                return { valid, errorMessage }
-            }
-
-            // Valid range
-            const result1 = validateDateRange({ from: '2023-01-01', to: '2023-12-31' }, false, null, null)
-            expect(result1.valid).toBe(true)
-            expect(result1.errorMessage).toBe('')
-
-            // Required but empty
-            const result2 = validateDateRange({ from: '', to: '' }, true, null, null)
-            expect(result2.valid).toBe(false)
-            expect(result2.errorMessage).toBe('Both dates are required')
-
-            // From after To
-            const result3 = validateDateRange({ from: '2023-12-31', to: '2023-01-01' }, false, null, null)
-            expect(result3.valid).toBe(false)
-            expect(result3.errorMessage).toBe('From date must be before To date')
-
-            // Before min date
-            const result4 = validateDateRange({ from: '2022-01-01', to: '2023-12-31' }, false, '2023-01-01', null)
-            expect(result4.valid).toBe(false)
-            expect(result4.errorMessage).toBe('From date must be after 2023-01-01')
-
-            // After max date
-            const result5 = validateDateRange({ from: '2023-01-01', to: '2024-12-31' }, false, null, '2024-01-01')
-            expect(result5.valid).toBe(false)
-            expect(result5.errorMessage).toBe('To date must be before 2024-01-01')
-        })
-
-        test('form change handling works correctly', () => {
-            const handleFormChange = (prevForm, fieldId, fieldValue) => {
-                return {
-                    ...prevForm,
-                    [fieldId]: fieldValue
-                }
-            }
-
-            const initialForm = { from: '', to: '' }
-
-            const result1 = handleFormChange(initialForm, 'from', '2023-01-01')
-            expect(result1).toEqual({ from: '2023-01-01', to: '' })
-
-            const result2 = handleFormChange(result1, 'to', '2023-12-31')
-            expect(result2).toEqual({ from: '2023-01-01', to: '2023-12-31' })
-        })
-
-        test('CSS classes generation works correctly', () => {
-            const generateClasses = (outlined, disabled, readOnly, error, internalError, isValid, className) => {
-                return [
-                    'date-range2',
-                    outlined && 'outlined',
-                    disabled && 'disabled',
-                    readOnly && 'readonly',
-                    error || internalError ? 'error' : '',
-                    !isValid && 'invalid',
-                    className || ''
-                ].filter(Boolean).join(' ')
-            }
-
-            expect(generateClasses(false, false, false, '', '', true, '')).toBe('date-range2')
-            expect(generateClasses(true, false, false, '', '', true, '')).toBe('date-range2 outlined')
-            expect(generateClasses(false, true, false, '', '', true, '')).toBe('date-range2 disabled')
-            expect(generateClasses(false, false, true, '', '', true, '')).toBe('date-range2 readonly')
-            expect(generateClasses(false, false, false, 'Error', '', true, '')).toBe('date-range2 error')
-            expect(generateClasses(false, false, false, '', '', false, '')).toBe('date-range2 invalid')
-            expect(generateClasses(false, false, false, '', '', true, 'custom')).toBe('date-range2 custom')
-        })
-
-        test('accessibility attributes generation works correctly', () => {
-            const generateAriaAttributes = (ariaLabel, label, isValid, error, internalError, required, disabled, readOnly, helperText, id) => {
-                return {
-                    'aria-label': ariaLabel || label,
-                    'aria-invalid': !isValid || !!(error || internalError),
-                    'aria-required': required,
-                    'aria-disabled': disabled,
-                    'aria-readonly': readOnly,
-                    'aria-describedby': error || internalError || helperText ? `${id}-helper` : undefined
-                }
-            }
-
-            const basic = generateAriaAttributes(null, 'Date Range', true, '', '', false, false, false, '', 'test-id')
-            expect(basic['aria-label']).toBe('Date Range')
-            expect(basic['aria-invalid']).toBe(false)
-            expect(basic['aria-required']).toBe(false)
-            expect(basic['aria-disabled']).toBe(false)
-            expect(basic['aria-readonly']).toBe(false)
-            expect(basic['aria-describedby']).toBeUndefined()
-
-            const withError = generateAriaAttributes(null, 'Date Range', false, 'Error message', '', true, false, false, '', 'test-id')
-            expect(withError['aria-invalid']).toBe(true)
-            expect(withError['aria-required']).toBe(true)
-            expect(withError['aria-describedby']).toBe('test-id-helper')
-        })
-
-        test('min/max date constraints work correctly', () => {
-            const getDateConstraints = (form, minDate, maxDate) => {
-                return {
-                    fromMin: minDate,
-                    fromMax: form.to || maxDate,
-                    toMin: form.from || minDate,
-                    toMax: maxDate
-                }
-            }
-
-            const form1 = { from: '', to: '' }
-            const constraints1 = getDateConstraints(form1, '2023-01-01', '2023-12-31')
-            expect(constraints1).toEqual({
-                fromMin: '2023-01-01',
-                fromMax: '2023-12-31',
-                toMin: '2023-01-01',
-                toMax: '2023-12-31'
-            })
-
-            const form2 = { from: '2023-06-01', to: '2023-09-01' }
-            const constraints2 = getDateConstraints(form2, '2023-01-01', '2023-12-31')
-            expect(constraints2).toEqual({
-                fromMin: '2023-01-01',
-                fromMax: '2023-09-01',
-                toMin: '2023-06-01',
-                toMax: '2023-12-31'
-            })
-        })
-    })
-})