ywana-core8 0.1.74 → 0.1.76

package/src/html/color.test.js

@@ -1,11 +1,367 @@
 import React, { useState } from 'react'
-import { ColorField } from './color'
+import { ColorField, ColorPicker, ColorUtils } from './color'
 
-const ColorFieldTest = (prop) => {
+// Pruebas unitarias para los componentes Color mejorados
+describe('Enhanced Color Components', () => {
+    // Mock de los componentes dependientes
+    const mockIcon = jest.fn()
+    const mockText = jest.fn()
+
+    beforeEach(() => {
+        jest.clearAllMocks()
+
+        // Mock de componentes
+        jest.doMock('./icon', () => ({ Icon: mockIcon }))
+        jest.doMock('./text', () => ({ Text: mockText }))
+
+        // Mock de console.warn
+        jest.spyOn(console, 'warn').mockImplementation(() => {})
+
+        // Mock DOM methods
+        global.document = {
+            createElement: jest.fn().mockReturnValue({
+                style: {},
+                appendChild: jest.fn(),
+                removeChild: jest.fn()
+            }),
+            body: {
+                appendChild: jest.fn(),
+                removeChild: jest.fn()
+            }
+        }
+        global.window = {
+            getComputedStyle: jest.fn().mockReturnValue({
+                color: 'rgb(255, 0, 0)'
+            })
+        }
+    })
+
+    afterEach(() => {
+        console.warn.mockRestore()
+    })
+
+    // ColorField Component Tests
+    describe('ColorField Component', () => {
+        test('component exports correctly', () => {
+            expect(ColorField).toBeDefined()
+            expect(typeof ColorField).toBe('function')
+        })
+
+        test('component has correct PropTypes', () => {
+            expect(ColorField.propTypes).toBeDefined()
+            expect(ColorField.propTypes.id).toBeDefined()
+            expect(ColorField.propTypes.label).toBeDefined()
+            expect(ColorField.propTypes.value).toBeDefined()
+            expect(ColorField.propTypes.onChange).toBeDefined()
+            expect(ColorField.propTypes.disabled).toBeDefined()
+            expect(ColorField.propTypes.required).toBeDefined()
+            expect(ColorField.propTypes.format).toBeDefined()
+            expect(ColorField.propTypes.showPreview).toBeDefined()
+            expect(ColorField.propTypes.presetColors).toBeDefined()
+        })
+
+        test('component has correct defaultProps', () => {
+            expect(ColorField.defaultProps).toBeDefined()
+            expect(ColorField.defaultProps.label).toBe("Color")
+            expect(ColorField.defaultProps.disabled).toBe(false)
+            expect(ColorField.defaultProps.required).toBe(false)
+            expect(ColorField.defaultProps.placeholder).toBe("#000000")
+            expect(ColorField.defaultProps.format).toBe('hex')
+            expect(ColorField.defaultProps.showPreview).toBe(true)
+            expect(ColorField.defaultProps.showValue).toBe(false)
+            expect(ColorField.defaultProps.size).toBe('medium')
+            expect(ColorField.defaultProps.variant).toBe('default')
+        })
+
+        test('validates color format correctly', () => {
+            const validateColor = (color, allowTransparent = false) => {
+                if (!color) return allowTransparent
+
+                const hexRegex = /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/
+                const rgbRegex = /^rgb\(\s*\d+\s*,\s*\d+\s*,\s*\d+\s*\)$/
+                const rgbaRegex = /^rgba\(\s*\d+\s*,\s*\d+\s*,\s*\d+\s*,\s*[\d.]+\s*\)$/
+                const hslRegex = /^hsl\(\s*\d+\s*,\s*\d+%\s*,\s*\d+%\s*\)$/
+                const hslaRegex = /^hsla\(\s*\d+\s*,\s*\d+%\s*,\s*\d+%\s*,\s*[\d.]+\s*\)$/
+
+                return hexRegex.test(color) || rgbRegex.test(color) || rgbaRegex.test(color) ||
+                       hslRegex.test(color) || hslaRegex.test(color) ||
+                       (allowTransparent && color.toLowerCase() === 'transparent')
+            }
+
+            // Valid hex colors
+            expect(validateColor('#FF0000')).toBe(true)
+            expect(validateColor('#f00')).toBe(true)
+            expect(validateColor('#123ABC')).toBe(true)
+
+            // Valid RGB colors
+            expect(validateColor('rgb(255, 0, 0)')).toBe(true)
+            expect(validateColor('rgba(255, 0, 0, 0.5)')).toBe(true)
+
+            // Valid HSL colors
+            expect(validateColor('hsl(0, 100%, 50%)')).toBe(true)
+            expect(validateColor('hsla(0, 100%, 50%, 0.5)')).toBe(true)
+
+            // Invalid colors
+            expect(validateColor('invalid')).toBe(false)
+            expect(validateColor('#GG0000')).toBe(false)
+            // Note: rgb(256, 0, 0) is technically valid regex but invalid color value
+            // The regex doesn't validate ranges, just format
+
+            // Transparent
+            expect(validateColor('transparent', true)).toBe(true)
+            expect(validateColor('transparent', false)).toBe(false)
+            expect(validateColor('', true)).toBe(true)
+            expect(validateColor('', false)).toBe(false)
+        })
+
+        test('handles change correctly', () => {
+            const mockOnChange = jest.fn()
+
+            const handleChange = (event, id, onChange, format) => {
+                const newColor = event.target.value
+
+                if (onChange) {
+                    onChange(id, newColor)
+                }
+            }
+
+            const mockEvent = { target: { value: '#FF0000' } }
+
+            // Normal change
+            handleChange(mockEvent, 'color1', mockOnChange, 'hex')
+            expect(mockOnChange).toHaveBeenCalledWith('color1', '#FF0000')
+
+            mockOnChange.mockClear()
+
+            // No onChange callback
+            handleChange(mockEvent, 'color1', null, 'hex')
+            expect(mockOnChange).not.toHaveBeenCalled()
+        })
+
+        test('handles focus and blur correctly', () => {
+            const mockOnFocus = jest.fn()
+            const mockOnBlur = jest.fn()
+            const mockSetIsFocused = jest.fn()
+
+            const handleFocus = (event, onFocus, setIsFocused) => {
+                setIsFocused(true)
+                if (onFocus) onFocus(event)
+            }
+
+            const handleBlur = (event, onBlur, setIsFocused) => {
+                setIsFocused(false)
+                if (onBlur) onBlur(event)
+            }
+
+            const mockEvent = { target: {} }
+
+            // Focus
+            handleFocus(mockEvent, mockOnFocus, mockSetIsFocused)
+            expect(mockSetIsFocused).toHaveBeenCalledWith(true)
+            expect(mockOnFocus).toHaveBeenCalledWith(mockEvent)
+
+            // Blur
+            handleBlur(mockEvent, mockOnBlur, mockSetIsFocused)
+            expect(mockSetIsFocused).toHaveBeenCalledWith(false)
+            expect(mockOnBlur).toHaveBeenCalledWith(mockEvent)
+        })
+
+        test('handles clear correctly', () => {
+            const mockOnChange = jest.fn()
+            const mockOnClear = jest.fn()
+            const mockSetInternalValue = jest.fn()
+
+            const handleClear = (disabled, allowTransparent, placeholder, id, onChange, onClear, setInternalValue) => {
+                if (disabled) return
+
+                const clearedValue = allowTransparent ? 'transparent' : placeholder
+                setInternalValue(clearedValue)
+
+                if (onChange) onChange(id, clearedValue)
+                if (onClear) onClear()
+            }
+
+            // Normal clear
+            handleClear(false, false, '#000000', 'color1', mockOnChange, mockOnClear, mockSetInternalValue)
+            expect(mockSetInternalValue).toHaveBeenCalledWith('#000000')
+            expect(mockOnChange).toHaveBeenCalledWith('color1', '#000000')
+            expect(mockOnClear).toHaveBeenCalled()
 
-    const [form, setForm] = useState({
+            mockOnChange.mockClear()
+            mockOnClear.mockClear()
+            mockSetInternalValue.mockClear()
+
+            // Clear with transparent
+            handleClear(false, true, '#000000', 'color1', mockOnChange, mockOnClear, mockSetInternalValue)
+            expect(mockSetInternalValue).toHaveBeenCalledWith('transparent')
+            expect(mockOnChange).toHaveBeenCalledWith('color1', 'transparent')
+
+            mockOnChange.mockClear()
+            mockSetInternalValue.mockClear()
+
+            // Disabled clear
+            handleClear(true, false, '#000000', 'color1', mockOnChange, mockOnClear, mockSetInternalValue)
+            expect(mockSetInternalValue).not.toHaveBeenCalled()
+            expect(mockOnChange).not.toHaveBeenCalled()
+        })
+
+        test('handles preset selection correctly', () => {
+            const mockOnChange = jest.fn()
+            const mockSetInternalValue = jest.fn()
+
+            const handlePresetSelect = (presetColor, disabled, id, onChange, setInternalValue) => {
+                if (disabled) return
+
+                setInternalValue(presetColor)
+
+                if (onChange) {
+                    onChange(id, presetColor)
+                }
+            }
+
+            // Normal preset selection
+            handlePresetSelect('#FF0000', false, 'color1', mockOnChange, mockSetInternalValue)
+            expect(mockSetInternalValue).toHaveBeenCalledWith('#FF0000')
+            expect(mockOnChange).toHaveBeenCalledWith('color1', '#FF0000')
+
+            mockOnChange.mockClear()
+            mockSetInternalValue.mockClear()
+
+            // Disabled preset selection
+            handlePresetSelect('#FF0000', true, 'color1', mockOnChange, mockSetInternalValue)
+            expect(mockSetInternalValue).not.toHaveBeenCalled()
+            expect(mockOnChange).not.toHaveBeenCalled()
+        })
+
+        test('generates CSS classes correctly', () => {
+            const generateClasses = (size, variant, disabled, required, isFocused, error, isValid, showPreview, className) => {
+                return [
+                    'color-field',
+                    `color-field--${size}`,
+                    `color-field--${variant}`,
+                    disabled && 'color-field--disabled',
+                    required && 'color-field--required',
+                    isFocused && 'color-field--focused',
+                    error && 'color-field--error',
+                    !isValid && 'color-field--invalid',
+                    showPreview && 'color-field--with-preview',
+                    className
+                ].filter(Boolean).join(' ')
+            }
+
+            expect(generateClasses('medium', 'default', false, false, false, null, true, true, ''))
+                .toBe('color-field color-field--medium color-field--default color-field--with-preview')
+
+            expect(generateClasses('large', 'outlined', true, true, true, 'Error message', false, false, 'custom'))
+                .toBe('color-field color-field--large color-field--outlined color-field--disabled color-field--required color-field--focused color-field--error color-field--invalid custom')
+        })
     })
 
+    // ColorUtils Tests
+    describe('ColorUtils', () => {
+        test('hexToRgb converts correctly', () => {
+            expect(ColorUtils.hexToRgb('#FF0000')).toEqual({ r: 255, g: 0, b: 0 })
+            expect(ColorUtils.hexToRgb('#00FF00')).toEqual({ r: 0, g: 255, b: 0 })
+            expect(ColorUtils.hexToRgb('#0000FF')).toEqual({ r: 0, g: 0, b: 255 })
+            expect(ColorUtils.hexToRgb('#FFFFFF')).toEqual({ r: 255, g: 255, b: 255 })
+            expect(ColorUtils.hexToRgb('#000000')).toEqual({ r: 0, g: 0, b: 0 })
+            expect(ColorUtils.hexToRgb('invalid')).toBeNull()
+        })
+
+        test('rgbToHex converts correctly', () => {
+            expect(ColorUtils.rgbToHex(255, 0, 0)).toBe('#ff0000')
+            expect(ColorUtils.rgbToHex(0, 255, 0)).toBe('#00ff00')
+            expect(ColorUtils.rgbToHex(0, 0, 255)).toBe('#0000ff')
+            expect(ColorUtils.rgbToHex(255, 255, 255)).toBe('#ffffff')
+            expect(ColorUtils.rgbToHex(0, 0, 0)).toBe('#000000')
+        })
+
+        test('isLight determines brightness correctly', () => {
+            expect(ColorUtils.isLight('#FFFFFF')).toBe(true)
+            expect(ColorUtils.isLight('#FFFF00')).toBe(true)
+            expect(ColorUtils.isLight('#000000')).toBe(false)
+            expect(ColorUtils.isLight('#FF0000')).toBe(false)
+            expect(ColorUtils.isLight('invalid')).toBe(false)
+        })
+
+        test('getContrastRatio calculates correctly', () => {
+            const ratio1 = ColorUtils.getContrastRatio('#FFFFFF', '#000000')
+            expect(ratio1).toBeGreaterThan(20) // High contrast
+
+            const ratio2 = ColorUtils.getContrastRatio('#FFFFFF', '#FFFFFF')
+            expect(ratio2).toBe(1) // Same color
+
+            const ratio3 = ColorUtils.getContrastRatio('#FF0000', '#00FF00')
+            expect(ratio3).toBeGreaterThan(1) // Some contrast
+        })
+
+        test('generatePalette creates color variations', () => {
+            const palette = ColorUtils.generatePalette('#FF0000', 3)
+            expect(palette).toHaveLength(3)
+            expect(palette.every(color => typeof color === 'string')).toBe(true)
+            expect(palette.every(color => color.startsWith('#'))).toBe(true)
+
+            const emptyPalette = ColorUtils.generatePalette('invalid', 3)
+            expect(emptyPalette).toEqual([])
+        })
+    })
+
+    // ColorPicker Component Tests
+    describe('ColorPicker Component', () => {
+        test('component has correct PropTypes', () => {
+            expect(ColorPicker.propTypes).toBeDefined()
+            expect(ColorPicker.propTypes.value).toBeDefined()
+            expect(ColorPicker.propTypes.onChange).toBeDefined()
+            expect(ColorPicker.propTypes.presetColors).toBeDefined()
+            expect(ColorPicker.propTypes.disabled).toBeDefined()
+            expect(ColorPicker.propTypes.className).toBeDefined()
+        })
+
+        test('handles color selection correctly', () => {
+            const mockOnChange = jest.fn()
+            const mockSetIsOpen = jest.fn()
+
+            const handleColorSelect = (color, onChange, setIsOpen) => {
+                if (onChange) onChange(color)
+                setIsOpen(false)
+            }
+
+            handleColorSelect('#FF0000', mockOnChange, mockSetIsOpen)
+            expect(mockOnChange).toHaveBeenCalledWith('#FF0000')
+            expect(mockSetIsOpen).toHaveBeenCalledWith(false)
+
+            mockOnChange.mockClear()
+
+            // No onChange callback
+            handleColorSelect('#FF0000', null, mockSetIsOpen)
+            expect(mockOnChange).not.toHaveBeenCalled()
+            expect(mockSetIsOpen).toHaveBeenCalledWith(false)
+        })
+
+        test('handles toggle correctly', () => {
+            const mockSetIsOpen = jest.fn()
+
+            const handleToggle = (isOpen, setIsOpen) => {
+                setIsOpen(!isOpen)
+            }
+
+            // Open picker
+            handleToggle(false, mockSetIsOpen)
+            expect(mockSetIsOpen).toHaveBeenCalledWith(true)
+
+            mockSetIsOpen.mockClear()
+
+            // Close picker
+            handleToggle(true, mockSetIsOpen)
+            expect(mockSetIsOpen).toHaveBeenCalledWith(false)
+        })
+    })
+})
+
+// Original test component (maintaining compatibility)
+const ColorFieldTest = (prop) => {
+    const [form, setForm] = useState({})
+
     function change(id, value) {
         const next = Object.assign({}, form, { [id] : value })
         setForm(next)
@@ -16,4 +372,6 @@ const ColorFieldTest = (prop) => {
            <ColorField id="color1" onChange={change} value={form.color1} />
         </>
     )
-}
+}
+
+export default ColorFieldTest