ywana-core8 0.1.75 → 0.1.77

package/src/html/textfield2.test.js

@@ -0,0 +1,950 @@
+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'
+            })
+        })
+    })
+})