ywana-core8 0.1.103 → 0.2.1

package/src/html/components_enhanced.test.js

@@ -1,581 +0,0 @@
-import React from 'react'
-import { Thumbnail } from './thumbnail'
-import { MultiSelector, ToggleButton } from './selector'
-import { Text, TEXTFORMATS } from './text'
-
-// Pruebas unitarias para los componentes mejorados
-describe('Enhanced Components - Thumbnail, Selector, Text', () => {
-    // Mock de los componentes dependientes
-    const mockIcon = jest.fn()
-
-    beforeEach(() => {
-        jest.clearAllMocks()
-        
-        // Mock de componentes
-        jest.doMock('./icon', () => ({ Icon: mockIcon }))
-        
-        // Mock de console.warn
-        jest.spyOn(console, 'warn').mockImplementation(() => {})
-        
-        // Mock de navigator.clipboard
-        global.navigator = {
-            clipboard: {
-                writeText: jest.fn().mockResolvedValue(undefined)
-            },
-            language: 'en-US'
-        }
-    })
-
-    afterEach(() => {
-        console.warn.mockRestore()
-    })
-
-    // Thumbnail Component Tests
-    describe('Thumbnail Component', () => {
-        test('component exports correctly', () => {
-            expect(Thumbnail).toBeDefined()
-            expect(typeof Thumbnail).toBe('function')
-        })
-
-        test('component has correct PropTypes', () => {
-            expect(Thumbnail.propTypes).toBeDefined()
-            expect(Thumbnail.propTypes.src).toBeDefined()
-            expect(Thumbnail.propTypes.empty).toBeDefined()
-            expect(Thumbnail.propTypes.objectFit).toBeDefined()
-            expect(Thumbnail.propTypes.alt).toBeDefined()
-            expect(Thumbnail.propTypes.size).toBeDefined()
-            expect(Thumbnail.propTypes.shape).toBeDefined()
-            expect(Thumbnail.propTypes.clickable).toBeDefined()
-            expect(Thumbnail.propTypes.disabled).toBeDefined()
-        })
-
-        test('component has correct defaultProps', () => {
-            expect(Thumbnail.defaultProps).toBeDefined()
-            expect(Thumbnail.defaultProps.src).toBe("https://www.w3schools.com/howto/img_forest.jpg")
-            expect(Thumbnail.defaultProps.empty).toBe("")
-            expect(Thumbnail.defaultProps.objectFit).toBe("cover")
-            expect(Thumbnail.defaultProps.size).toBe("medium")
-            expect(Thumbnail.defaultProps.shape).toBe("square")
-            expect(Thumbnail.defaultProps.clickable).toBe(false)
-            expect(Thumbnail.defaultProps.disabled).toBe(false)
-        })
-
-        test('handles image load correctly', () => {
-            const mockOnLoad = jest.fn()
-            const mockSetImageLoaded = jest.fn()
-            const mockSetIsLoading = jest.fn()
-            const mockSetImageError = jest.fn()
-
-            const handleLoad = (event, onLoad, setImageLoaded, setIsLoading, setImageError) => {
-                setImageLoaded(true)
-                setIsLoading(false)
-                setImageError(false)
-                if (onLoad) onLoad(event)
-            }
-
-            const mockEvent = { target: { src: 'test.jpg' } }
-            handleLoad(mockEvent, mockOnLoad, mockSetImageLoaded, mockSetIsLoading, mockSetImageError)
-
-            expect(mockSetImageLoaded).toHaveBeenCalledWith(true)
-            expect(mockSetIsLoading).toHaveBeenCalledWith(false)
-            expect(mockSetImageError).toHaveBeenCalledWith(false)
-            expect(mockOnLoad).toHaveBeenCalledWith(mockEvent)
-        })
-
-        test('handles image error correctly', () => {
-            const mockOnError = jest.fn()
-            const mockSetImageError = jest.fn()
-            const mockSetIsLoading = jest.fn()
-            const mockSetImageLoaded = jest.fn()
-
-            const handleError = (event, onError, setImageError, setIsLoading, setImageLoaded) => {
-                setImageError(true)
-                setIsLoading(false)
-                setImageLoaded(false)
-                if (onError) onError(event)
-            }
-
-            const mockEvent = { target: { src: 'test.jpg' } }
-            handleError(mockEvent, mockOnError, mockSetImageError, mockSetIsLoading, mockSetImageLoaded)
-
-            expect(mockSetImageError).toHaveBeenCalledWith(true)
-            expect(mockSetIsLoading).toHaveBeenCalledWith(false)
-            expect(mockSetImageLoaded).toHaveBeenCalledWith(false)
-            expect(mockOnError).toHaveBeenCalledWith(mockEvent)
-        })
-
-        test('handles click correctly', () => {
-            const mockOnClick = jest.fn()
-
-            const handleClick = (event, disabled, clickable, onClick) => {
-                if (disabled || !clickable) return
-                if (onClick) onClick(event)
-            }
-
-            const mockEvent = { target: {} }
-
-            // Normal click
-            handleClick(mockEvent, false, true, mockOnClick)
-            expect(mockOnClick).toHaveBeenCalledWith(mockEvent)
-
-            mockOnClick.mockClear()
-
-            // Disabled state
-            handleClick(mockEvent, true, true, mockOnClick)
-            expect(mockOnClick).not.toHaveBeenCalled()
-
-            // Not clickable
-            handleClick(mockEvent, false, false, mockOnClick)
-            expect(mockOnClick).not.toHaveBeenCalled()
-        })
-
-        test('generates CSS classes correctly', () => {
-            const generateClasses = (size, shape, bordered, shadow, clickable, disabled, isLoading, imageError, imageLoaded, className) => {
-                return [
-                    'thumbnail',
-                    `thumbnail--${size}`,
-                    `thumbnail--${shape}`,
-                    bordered && 'thumbnail--bordered',
-                    shadow && 'thumbnail--shadow',
-                    clickable && 'thumbnail--clickable',
-                    disabled && 'thumbnail--disabled',
-                    isLoading && 'thumbnail--loading',
-                    imageError && 'thumbnail--error',
-                    imageLoaded && 'thumbnail--loaded',
-                    className
-                ].filter(Boolean).join(' ')
-            }
-
-            expect(generateClasses('medium', 'square', false, false, false, false, false, false, false, ''))
-                .toBe('thumbnail thumbnail--medium thumbnail--square')
-            
-            expect(generateClasses('large', 'circle', true, true, true, true, true, true, true, 'custom'))
-                .toBe('thumbnail thumbnail--large thumbnail--circle thumbnail--bordered thumbnail--shadow thumbnail--clickable thumbnail--disabled thumbnail--loading thumbnail--error thumbnail--loaded custom')
-        })
-    })
-
-    // MultiSelector Component Tests
-    describe('MultiSelector Component', () => {
-        test('component exports correctly', () => {
-            expect(MultiSelector).toBeDefined()
-            expect(typeof MultiSelector).toBe('function')
-        })
-
-        test('component has correct PropTypes', () => {
-            expect(MultiSelector.propTypes).toBeDefined()
-            expect(MultiSelector.propTypes.options).toBeDefined()
-            expect(MultiSelector.propTypes.className).toBeDefined()
-            expect(MultiSelector.propTypes.onChange).toBeDefined()
-            expect(MultiSelector.propTypes.disabled).toBeDefined()
-            expect(MultiSelector.propTypes.maxSelections).toBeDefined()
-            expect(MultiSelector.propTypes.minSelections).toBeDefined()
-            expect(MultiSelector.propTypes.searchable).toBeDefined()
-            expect(MultiSelector.propTypes.variant).toBeDefined()
-            expect(MultiSelector.propTypes.size).toBeDefined()
-        })
-
-        test('component has correct defaultProps', () => {
-            expect(MultiSelector.defaultProps).toBeDefined()
-            expect(MultiSelector.defaultProps.options).toEqual([])
-            expect(MultiSelector.defaultProps.disabled).toBe(false)
-            expect(MultiSelector.defaultProps.minSelections).toBe(0)
-            expect(MultiSelector.defaultProps.searchable).toBe(false)
-            expect(MultiSelector.defaultProps.variant).toBe('default')
-            expect(MultiSelector.defaultProps.size).toBe('medium')
-        })
-
-        test('validates options prop', () => {
-            const validateOptions = (options) => {
-                if (!Array.isArray(options)) {
-                    console.warn('MultiSelector: options prop must be an array')
-                }
-            }
-
-            validateOptions('not an array')
-            expect(console.warn).toHaveBeenCalledWith('MultiSelector: options prop must be an array')
-
-            console.warn.mockClear()
-            validateOptions([])
-            expect(console.warn).not.toHaveBeenCalled()
-        })
-
-        test('handles toggle selection correctly', () => {
-            const mockOnChange = jest.fn()
-            const mockSetSelections = jest.fn()
-
-            const toggleSelection = (value, disabled, selections, maxSelections, minSelections, onChange, setSelections) => {
-                if (disabled) return
-
-                const isSelected = selections.includes(value)
-                let next
-
-                if (isSelected) {
-                    if (selections.length <= minSelections) {
-                        console.warn(`MultiSelector: Cannot remove selection. Minimum ${minSelections} selections required.`)
-                        return
-                    }
-                    next = selections.filter(item => item !== value)
-                } else {
-                    if (maxSelections && selections.length >= maxSelections) {
-                        console.warn(`MultiSelector: Cannot add selection. Maximum ${maxSelections} selections allowed.`)
-                        return
-                    }
-                    next = selections.concat([value])
-                }
-
-                setSelections(next)
-                if (onChange) onChange(next)
-            }
-
-            // Normal toggle
-            toggleSelection('item1', false, [], null, 0, mockOnChange, mockSetSelections)
-            expect(mockSetSelections).toHaveBeenCalledWith(['item1'])
-            expect(mockOnChange).toHaveBeenCalledWith(['item1'])
-
-            mockOnChange.mockClear()
-            mockSetSelections.mockClear()
-
-            // Max selections reached
-            toggleSelection('item3', false, ['item1', 'item2'], 2, 0, mockOnChange, mockSetSelections)
-            expect(console.warn).toHaveBeenCalledWith('MultiSelector: Cannot add selection. Maximum 2 selections allowed.')
-            expect(mockSetSelections).not.toHaveBeenCalled()
-
-            console.warn.mockClear()
-
-            // Min selections required
-            toggleSelection('item1', false, ['item1'], null, 1, mockOnChange, mockSetSelections)
-            expect(console.warn).toHaveBeenCalledWith('MultiSelector: Cannot remove selection. Minimum 1 selections required.')
-            expect(mockSetSelections).not.toHaveBeenCalled()
-        })
-
-        test('handles clear all correctly', () => {
-            const mockOnChange = jest.fn()
-            const mockOnClear = jest.fn()
-            const mockSetSelections = jest.fn()
-
-            const handleClear = (disabled, minSelections, setSelections, onChange, onClear) => {
-                if (disabled || minSelections > 0) return
-                
-                setSelections([])
-                if (onChange) onChange([])
-                if (onClear) onClear()
-            }
-
-            // Normal clear
-            handleClear(false, 0, mockSetSelections, mockOnChange, mockOnClear)
-            expect(mockSetSelections).toHaveBeenCalledWith([])
-            expect(mockOnChange).toHaveBeenCalledWith([])
-            expect(mockOnClear).toHaveBeenCalled()
-
-            mockSetSelections.mockClear()
-            mockOnChange.mockClear()
-            mockOnClear.mockClear()
-
-            // Disabled clear
-            handleClear(true, 0, mockSetSelections, mockOnChange, mockOnClear)
-            expect(mockSetSelections).not.toHaveBeenCalled()
-
-            // Min selections prevent clear
-            handleClear(false, 1, mockSetSelections, mockOnChange, mockOnClear)
-            expect(mockSetSelections).not.toHaveBeenCalled()
-        })
-
-        test('filters options based on search', () => {
-            const options = [
-                { label: 'Apple', value: 'apple' },
-                { label: 'Banana', value: 'banana' },
-                { label: 'Cherry', value: 'cherry' }
-            ]
-
-            const filterOptions = (options, searchable, searchTerm) => {
-                return searchable && searchTerm
-                    ? options.filter(option => 
-                        option.label?.toLowerCase().includes(searchTerm.toLowerCase()) ||
-                        option.value?.toString().toLowerCase().includes(searchTerm.toLowerCase())
-                      )
-                    : options
-            }
-
-            // No search
-            expect(filterOptions(options, false, 'app')).toEqual(options)
-
-            // Search enabled
-            expect(filterOptions(options, true, 'app')).toEqual([{ label: 'Apple', value: 'apple' }])
-            expect(filterOptions(options, true, 'ban')).toEqual([{ label: 'Banana', value: 'banana' }])
-            expect(filterOptions(options, true, '')).toEqual(options)
-        })
-    })
-
-    // ToggleButton Component Tests
-    describe('ToggleButton Component', () => {
-        test('component has correct PropTypes', () => {
-            expect(ToggleButton.propTypes).toBeDefined()
-            expect(ToggleButton.propTypes.label).toBeDefined()
-            expect(ToggleButton.propTypes.value).toBeDefined()
-            expect(ToggleButton.propTypes.selected).toBeDefined()
-            expect(ToggleButton.propTypes.onToggle).toBeDefined()
-            expect(ToggleButton.propTypes.disabled).toBeDefined()
-            expect(ToggleButton.propTypes.icon).toBeDefined()
-            expect(ToggleButton.propTypes.variant).toBeDefined()
-            expect(ToggleButton.propTypes.size).toBeDefined()
-        })
-
-        test('component has correct defaultProps', () => {
-            expect(ToggleButton.defaultProps).toBeDefined()
-            expect(ToggleButton.defaultProps.selected).toBe(false)
-            expect(ToggleButton.defaultProps.disabled).toBe(false)
-            expect(ToggleButton.defaultProps.variant).toBe('default')
-            expect(ToggleButton.defaultProps.size).toBe('medium')
-        })
-
-        test('handles toggle correctly', () => {
-            const mockOnToggle = jest.fn()
-
-            const handleToggle = (disabled, onToggle, value) => {
-                if (disabled) return
-                if (onToggle) onToggle(value)
-            }
-
-            // Normal toggle
-            handleToggle(false, mockOnToggle, 'test-value')
-            expect(mockOnToggle).toHaveBeenCalledWith('test-value')
-
-            mockOnToggle.mockClear()
-
-            // Disabled state
-            handleToggle(true, mockOnToggle, 'test-value')
-            expect(mockOnToggle).not.toHaveBeenCalled()
-        })
-
-        test('handles keyboard interaction correctly', () => {
-            const mockOnToggle = jest.fn()
-
-            const handleKeyDown = (event, disabled, onToggle, value) => {
-                if (disabled) return
-
-                switch (event.key) {
-                    case 'Enter':
-                    case ' ':
-                        event.preventDefault()
-                        if (onToggle) onToggle(value)
-                        break
-                    default:
-                        break
-                }
-            }
-
-            const mockEvent = { preventDefault: jest.fn() }
-
-            // Enter key
-            handleKeyDown({ ...mockEvent, key: 'Enter' }, false, mockOnToggle, 'test-value')
-            expect(mockEvent.preventDefault).toHaveBeenCalled()
-            expect(mockOnToggle).toHaveBeenCalledWith('test-value')
-
-            mockOnToggle.mockClear()
-            mockEvent.preventDefault.mockClear()
-
-            // Space key
-            handleKeyDown({ ...mockEvent, key: ' ' }, false, mockOnToggle, 'test-value')
-            expect(mockEvent.preventDefault).toHaveBeenCalled()
-            expect(mockOnToggle).toHaveBeenCalledWith('test-value')
-
-            mockOnToggle.mockClear()
-
-            // Other key
-            handleKeyDown({ ...mockEvent, key: 'Tab' }, false, mockOnToggle, 'test-value')
-            expect(mockOnToggle).not.toHaveBeenCalled()
-        })
-
-        test('generates CSS classes correctly', () => {
-            const generateClasses = (selected, variant, size, disabled, value, className) => {
-                return [
-                    'toggle-button',
-                    selected && 'selected',
-                    `toggle-button--${variant}`,
-                    `toggle-button--${size}`,
-                    disabled && 'toggle-button--disabled',
-                    value && `toggle-button--${value}`,
-                    className
-                ].filter(Boolean).join(' ')
-            }
-
-            expect(generateClasses(false, 'default', 'medium', false, 'test', ''))
-                .toBe('toggle-button toggle-button--default toggle-button--medium toggle-button--test')
-            
-            expect(generateClasses(true, 'outlined', 'large', true, 'test', 'custom'))
-                .toBe('toggle-button selected toggle-button--outlined toggle-button--large toggle-button--disabled toggle-button--test custom')
-        })
-
-        test('generates accessibility attributes correctly', () => {
-            const generateAriaAttributes = (selected, disabled, tooltip, label, value) => {
-                return {
-                    'aria-pressed': selected,
-                    'aria-disabled': disabled,
-                    'aria-label': tooltip || (typeof label === 'string' ? label : `Toggle ${value}`),
-                    role: 'button',
-                    tabIndex: disabled ? -1 : 0
-                }
-            }
-
-            const result1 = generateAriaAttributes(true, false, 'Custom tooltip', 'Test Label', 'test')
-            expect(result1['aria-pressed']).toBe(true)
-            expect(result1['aria-disabled']).toBe(false)
-            expect(result1['aria-label']).toBe('Custom tooltip')
-            expect(result1.role).toBe('button')
-            expect(result1.tabIndex).toBe(0)
-
-            const result2 = generateAriaAttributes(false, true, null, 'Test Label', 'test')
-            expect(result2['aria-pressed']).toBe(false)
-            expect(result2['aria-disabled']).toBe(true)
-            expect(result2['aria-label']).toBe('Test Label')
-            expect(result2.tabIndex).toBe(-1)
-        })
-    })
-
-    // Text Component Tests
-    describe('Text Component', () => {
-        test('component exports correctly', () => {
-            expect(Text).toBeDefined()
-            expect(typeof Text).toBe('function')
-            expect(TEXTFORMATS).toBeDefined()
-        })
-
-        test('TEXTFORMATS contains all expected formats', () => {
-            expect(TEXTFORMATS.NONE).toBe('')
-            expect(TEXTFORMATS.NUMERIC).toBe('numeric')
-            expect(TEXTFORMATS.DATE).toBe('date')
-            expect(TEXTFORMATS.TIME).toBe('time')
-            expect(TEXTFORMATS.EMAIL).toBe('email')
-            expect(TEXTFORMATS.HTML).toBe('HTML')
-            expect(TEXTFORMATS.URL).toBe('URL')
-            expect(TEXTFORMATS.STRING).toBe('string')
-            expect(TEXTFORMATS.CURRENCY).toBe('currency')
-            expect(TEXTFORMATS.PERCENTAGE).toBe('percentage')
-            expect(TEXTFORMATS.PHONE).toBe('phone')
-            expect(TEXTFORMATS.CAPITALIZE).toBe('capitalize')
-            expect(TEXTFORMATS.UPPERCASE).toBe('uppercase')
-            expect(TEXTFORMATS.LOWERCASE).toBe('lowercase')
-            expect(TEXTFORMATS.TRUNCATE).toBe('truncate')
-        })
-
-        test('component has correct PropTypes', () => {
-            expect(Text.propTypes).toBeDefined()
-            expect(Text.propTypes.format).toBeDefined()
-            expect(Text.propTypes.children).toBeDefined()
-            expect(Text.propTypes.className).toBeDefined()
-            expect(Text.propTypes.size).toBeDefined()
-            expect(Text.propTypes.weight).toBeDefined()
-            expect(Text.propTypes.color).toBeDefined()
-            expect(Text.propTypes.copyable).toBeDefined()
-            expect(Text.propTypes.loading).toBeDefined()
-        })
-
-        test('component has correct defaultProps', () => {
-            expect(Text.defaultProps).toBeDefined()
-            expect(Text.defaultProps.format).toBe(TEXTFORMATS.HTML)
-            expect(Text.defaultProps.currency).toBe('USD')
-            expect(Text.defaultProps.loading).toBe(false)
-            expect(Text.defaultProps.copyable).toBe(false)
-            expect(Text.defaultProps.selectable).toBe(true)
-            expect(Text.defaultProps.as).toBe('span')
-        })
-
-        test('formats text correctly', () => {
-            // Mock Intl for consistent testing
-            const mockNumberFormat = jest.fn().mockImplementation(() => ({
-                format: jest.fn().mockReturnValue('1,234.56')
-            }))
-            global.Intl = { NumberFormat: mockNumberFormat }
-
-            const formatText = (children, format, locale = 'en-US') => {
-                try {
-                    switch (format) {
-                        case TEXTFORMATS.NUMERIC: {
-                            const formatter = new Intl.NumberFormat(locale)
-                            return formatter.format(Number(children))
-                        }
-                        case TEXTFORMATS.CAPITALIZE: {
-                            return String(children).charAt(0).toUpperCase() + String(children).slice(1).toLowerCase()
-                        }
-                        case TEXTFORMATS.UPPERCASE: {
-                            return String(children).toUpperCase()
-                        }
-                        case TEXTFORMATS.LOWERCASE: {
-                            return String(children).toLowerCase()
-                        }
-                        case TEXTFORMATS.PHONE: {
-                            const cleaned = String(children).replace(/\D/g, '')
-                            if (cleaned.length === 10) {
-                                return `(${cleaned.slice(0, 3)}) ${cleaned.slice(3, 6)}-${cleaned.slice(6)}`
-                            }
-                            return String(children)
-                        }
-                        default: {
-                            return String(children)
-                        }
-                    }
-                } catch (error) {
-                    return String(children)
-                }
-            }
-
-            expect(formatText('hello world', TEXTFORMATS.CAPITALIZE)).toBe('Hello world')
-            expect(formatText('hello world', TEXTFORMATS.UPPERCASE)).toBe('HELLO WORLD')
-            expect(formatText('HELLO WORLD', TEXTFORMATS.LOWERCASE)).toBe('hello world')
-            expect(formatText('1234567890', TEXTFORMATS.PHONE)).toBe('(123) 456-7890')
-            expect(formatText('123', TEXTFORMATS.PHONE)).toBe('123')
-        })
-
-        test('handles copy functionality correctly', async () => {
-            const handleCopy = async (copyable, formattedValue) => {
-                if (!copyable || !formattedValue) return
-                
-                try {
-                    await navigator.clipboard.writeText(formattedValue)
-                } catch (error) {
-                    console.warn('Failed to copy text:', error)
-                }
-            }
-
-            // Normal copy
-            await handleCopy(true, 'test text')
-            expect(navigator.clipboard.writeText).toHaveBeenCalledWith('test text')
-
-            navigator.clipboard.writeText.mockClear()
-
-            // Copy disabled
-            await handleCopy(false, 'test text')
-            expect(navigator.clipboard.writeText).not.toHaveBeenCalled()
-
-            // Empty text
-            await handleCopy(true, '')
-            expect(navigator.clipboard.writeText).not.toHaveBeenCalled()
-        })
-
-        test('generates CSS classes correctly', () => {
-            const generateClasses = (size, weight, color, align, transform, decoration, truncate, loading, skeleton, copyable, selectable, className) => {
-                return [
-                    'text',
-                    size && `text--${size}`,
-                    weight && `text--${weight}`,
-                    color && `text--${color}`,
-                    align && `text--${align}`,
-                    transform && `text--${transform}`,
-                    decoration && `text--${decoration}`,
-                    truncate && 'text--truncate',
-                    loading && 'text--loading',
-                    skeleton && 'text--skeleton',
-                    copyable && 'text--copyable',
-                    !selectable && 'text--no-select',
-                    className
-                ].filter(Boolean).join(' ')
-            }
-
-            expect(generateClasses('md', 'bold', 'primary', 'center', 'uppercase', 'underline', true, false, false, true, true, 'custom'))
-                .toBe('text text--md text--bold text--primary text--center text--uppercase text--underline text--truncate text--copyable custom')
-            
-            expect(generateClasses(null, null, null, null, null, null, false, true, true, false, false, ''))
-                .toBe('text text--loading text--skeleton text--no-select')
-        })
-    })
-})