ywana-core8 0.1.103 → 0.2.2

package/src/html/color.test.js

@@ -1,377 +0,0 @@
-import React, { useState } from 'react'
-import { ColorField, ColorPicker, ColorUtils } from './color'
-
-// 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()
-
-            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)
-    }
-
-    return (
-        <>
-           <ColorField id="color1" onChange={change} value={form.color1} />
-        </>
-    )
-}
-
-export default ColorFieldTest