ywana-core8 0.1.103 → 0.2.2

package/src/html/property.test.js

@@ -1,371 +0,0 @@
-import React, { useState } from 'react'
-import { Property } from './property'
-
-// Pruebas unitarias para el componente Property mejorado
-describe('Enhanced Property Component', () => {
-    // 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 de navigator.clipboard
-        global.navigator = {
-            clipboard: {
-                writeText: jest.fn().mockResolvedValue(undefined)
-            }
-        }
-    })
-
-    afterEach(() => {
-        console.warn.mockRestore()
-    })
-
-    // Property Component Tests
-    describe('Property Component', () => {
-        test('component exports correctly', () => {
-            expect(Property).toBeDefined()
-            expect(typeof Property).toBe('function')
-        })
-
-        test('component has correct PropTypes', () => {
-            expect(Property.propTypes).toBeDefined()
-            expect(Property.propTypes.id).toBeDefined()
-            expect(Property.propTypes.className).toBeDefined()
-            expect(Property.propTypes.label).toBeDefined()
-            expect(Property.propTypes.name).toBeDefined()
-            expect(Property.propTypes.initial).toBeDefined()
-            expect(Property.propTypes.value).toBeDefined()
-            expect(Property.propTypes.editable).toBeDefined()
-            expect(Property.propTypes.onChange).toBeDefined()
-            expect(Property.propTypes.options).toBeDefined()
-            expect(Property.propTypes.type).toBeDefined()
-            expect(Property.propTypes.disabled).toBeDefined()
-            expect(Property.propTypes.required).toBeDefined()
-            expect(Property.propTypes.multiline).toBeDefined()
-            expect(Property.propTypes.validateValue).toBeDefined()
-        })
-
-        test('component has correct defaultProps', () => {
-            expect(Property.defaultProps).toBeDefined()
-            expect(Property.defaultProps.editable).toBe(false)
-            expect(Property.defaultProps.type).toBe('text')
-            expect(Property.defaultProps.disabled).toBe(false)
-            expect(Property.defaultProps.required).toBe(false)
-            expect(Property.defaultProps.multiline).toBe(false)
-            expect(Property.defaultProps.rows).toBe(3)
-            expect(Property.defaultProps.size).toBe('medium')
-            expect(Property.defaultProps.variant).toBe('default')
-            expect(Property.defaultProps.layout).toBe('horizontal')
-            expect(Property.defaultProps.nameWidth).toBe('50%')
-            expect(Property.defaultProps.copyable).toBe(false)
-            expect(Property.defaultProps.clearable).toBe(true)
-        })
-
-        test('validates props correctly', () => {
-            const validateProps = (options) => {
-                if (options && !Array.isArray(options)) {
-                    console.warn('Property: options prop must be an array')
-                }
-            }
-
-            // Invalid options prop
-            validateProps('not an array')
-            expect(console.warn).toHaveBeenCalledWith('Property: options prop must be an array')
-
-            console.warn.mockClear()
-
-            // Valid options prop
-            validateProps([{ label: 'Option 1', value: '1' }])
-            expect(console.warn).not.toHaveBeenCalled()
-
-            // Null options (valid)
-            validateProps(null)
-            expect(console.warn).not.toHaveBeenCalled()
-        })
-
-        test('validates value correctly', () => {
-            const validateValueFunc = (val, required, minLength, maxLength, pattern, validateValue) => {
-                if (!val && required) {
-                    return { isValid: false, error: 'This field is required' }
-                }
-
-                if (val && minLength && val.length < minLength) {
-                    return { isValid: false, error: `Minimum ${minLength} characters required` }
-                }
-
-                if (val && maxLength && val.length > maxLength) {
-                    return { isValid: false, error: `Maximum ${maxLength} characters allowed` }
-                }
-
-                if (val && pattern) {
-                    const regex = new RegExp(pattern)
-                    if (!regex.test(val)) {
-                        return { isValid: false, error: 'Invalid format' }
-                    }
-                }
-
-                if (validateValue) {
-                    const customValidation = validateValue(val)
-                    if (customValidation && !customValidation.isValid) {
-                        return customValidation
-                    }
-                }
-
-                return { isValid: true }
-            }
-
-            // Required field empty
-            expect(validateValueFunc('', true, null, null, null, null))
-                .toEqual({ isValid: false, error: 'This field is required' })
-
-            // Min length validation
-            expect(validateValueFunc('ab', false, 3, null, null, null))
-                .toEqual({ isValid: false, error: 'Minimum 3 characters required' })
-
-            // Max length validation
-            expect(validateValueFunc('abcdef', false, null, 5, null, null))
-                .toEqual({ isValid: false, error: 'Maximum 5 characters allowed' })
-
-            // Pattern validation
-            expect(validateValueFunc('invalid', false, null, null, '^[0-9]+$', null))
-                .toEqual({ isValid: false, error: 'Invalid format' })
-
-            // Custom validation
-            const customValidator = () => ({ isValid: false, error: 'Custom error' })
-            expect(validateValueFunc('test', false, null, null, null, customValidator))
-                .toEqual({ isValid: false, error: 'Custom error' })
-
-            // Valid value
-            expect(validateValueFunc('valid', false, null, null, null, null))
-                .toEqual({ isValid: true })
-        })
-
-        test('handles change correctly', () => {
-            const mockOnChange = jest.fn()
-            const mockOnValidationError = jest.fn()
-
-            const change = (event, disabled, readOnly, validateValueFunc, onValidationError, onChange, id) => {
-                if (disabled || readOnly) return
-
-                const newValue = event.target.value
-
-                // Validate value
-                const validation = validateValueFunc(newValue)
-
-                if (!validation.isValid && onValidationError) {
-                    onValidationError(validation.error, newValue)
-                }
-
-                if (onChange) {
-                    onChange(id, newValue)
-                }
-            }
-
-            const mockEvent = { target: { value: 'new value' } }
-            const mockValidateFunc = jest.fn().mockReturnValue({ isValid: true })
-
-            // Normal change
-            change(mockEvent, false, false, mockValidateFunc, mockOnValidationError, mockOnChange, 'prop1')
-            expect(mockOnChange).toHaveBeenCalledWith('prop1', 'new value')
-            expect(mockValidateFunc).toHaveBeenCalledWith('new value')
-
-            mockOnChange.mockClear()
-
-            // Disabled change
-            change(mockEvent, true, false, mockValidateFunc, mockOnValidationError, mockOnChange, 'prop1')
-            expect(mockOnChange).not.toHaveBeenCalled()
-
-            // ReadOnly change
-            change(mockEvent, false, true, mockValidateFunc, mockOnValidationError, mockOnChange, 'prop1')
-            expect(mockOnChange).not.toHaveBeenCalled()
-
-            // Validation error
-            const mockValidateFuncError = jest.fn().mockReturnValue({ isValid: false, error: 'Validation error' })
-            change(mockEvent, false, false, mockValidateFuncError, mockOnValidationError, mockOnChange, 'prop1')
-            expect(mockOnValidationError).toHaveBeenCalledWith('Validation error', 'new value')
-        })
-
-        test('handles clear correctly', () => {
-            const mockOnChange = jest.fn()
-
-            const clear = (disabled, readOnly, onChange, id) => {
-                if (disabled || readOnly) return
-
-                if (onChange) onChange(id, "")
-            }
-
-            // Normal clear
-            clear(false, false, mockOnChange, 'prop1')
-            expect(mockOnChange).toHaveBeenCalledWith('prop1', '')
-
-            mockOnChange.mockClear()
-
-            // Disabled clear
-            clear(true, false, mockOnChange, 'prop1')
-            expect(mockOnChange).not.toHaveBeenCalled()
-
-            // ReadOnly clear
-            clear(false, true, mockOnChange, 'prop1')
-            expect(mockOnChange).not.toHaveBeenCalled()
-        })
-
-        test('handles copy correctly', async () => {
-            const handleCopy = async (copyable, value) => {
-                if (!copyable || !value) return
-
-                try {
-                    await navigator.clipboard.writeText(value)
-                } catch (error) {
-                    console.warn('Failed to copy property value:', error)
-                }
-            }
-
-            // Normal copy
-            await handleCopy(true, 'test value')
-            expect(navigator.clipboard.writeText).toHaveBeenCalledWith('test value')
-
-            navigator.clipboard.writeText.mockClear()
-
-            // Copy disabled
-            await handleCopy(false, 'test value')
-            expect(navigator.clipboard.writeText).not.toHaveBeenCalled()
-
-            // Empty value
-            await handleCopy(true, '')
-            expect(navigator.clipboard.writeText).not.toHaveBeenCalled()
-        })
-
-        test('processes value with options correctly', () => {
-            const processValue = (value, initial, options) => {
-                let value2 = value || initial || ''
-
-                if (options && Array.isArray(options)) {
-                    const opt = options.find(option => option.value == value2)
-                    if (opt) value2 = opt.label
-                }
-
-                return value2
-            }
-
-            const options = [
-                { label: 'Option One', value: '1' },
-                { label: 'Option Two', value: '2' }
-            ]
-
-            // Value with options
-            expect(processValue('1', '', options)).toBe('Option One')
-            expect(processValue('2', '', options)).toBe('Option Two')
-
-            // Value not in options
-            expect(processValue('3', '', options)).toBe('3')
-
-            // No options
-            expect(processValue('test', '', null)).toBe('test')
-
-            // Initial value
-            expect(processValue('', 'initial', options)).toBe('initial')
-
-            // Empty value and initial
-            expect(processValue('', '', options)).toBe('')
-        })
-
-        test('generates CSS classes correctly', () => {
-            const generateClasses = (id, size, variant, layout, disabled, readOnly, required, isFocused, error, isValid, loading, skeleton, copyable, className) => {
-                return [
-                    'property',
-                    `property-${id}`,
-                    `property--${size}`,
-                    `property--${variant}`,
-                    `property--${layout}`,
-                    disabled && 'property--disabled',
-                    readOnly && 'property--readonly',
-                    required && 'property--required',
-                    isFocused && 'property--focused',
-                    error && 'property--error',
-                    !isValid && 'property--invalid',
-                    loading && 'property--loading',
-                    skeleton && 'property--skeleton',
-                    copyable && 'property--copyable',
-                    className
-                ].filter(Boolean).join(' ')
-            }
-
-            expect(generateClasses('prop1', 'medium', 'default', 'horizontal', false, false, false, false, null, true, false, false, false, ''))
-                .toBe('property property-prop1 property--medium property--default property--horizontal')
-
-            expect(generateClasses('prop2', 'large', 'outlined', 'vertical', true, true, true, true, 'Error', false, true, true, true, 'custom'))
-                .toBe('property property-prop2 property--large property--outlined property--vertical property--disabled property--readonly property--required property--focused property--error property--invalid property--loading property--skeleton property--copyable custom')
-        })
-
-        test('handles keyboard events correctly', () => {
-            const handleKeyDown = (event, multiline, inputRef) => {
-                if (event.key === 'Enter' && !multiline) {
-                    event.preventDefault()
-                    if (inputRef.current) inputRef.current.blur()
-                }
-
-                if (event.key === 'Escape') {
-                    if (inputRef.current) inputRef.current.blur()
-                }
-            }
-
-            const mockEvent = {
-                preventDefault: jest.fn(),
-                key: 'Enter'
-            }
-            const mockInputRef = {
-                current: {
-                    blur: jest.fn()
-                }
-            }
-
-            // Enter key (not multiline)
-            handleKeyDown(mockEvent, false, mockInputRef)
-            expect(mockEvent.preventDefault).toHaveBeenCalled()
-            expect(mockInputRef.current.blur).toHaveBeenCalled()
-
-            mockEvent.preventDefault.mockClear()
-            mockInputRef.current.blur.mockClear()
-
-            // Enter key (multiline)
-            handleKeyDown(mockEvent, true, mockInputRef)
-            expect(mockEvent.preventDefault).not.toHaveBeenCalled()
-
-            // Escape key
-            const escapeEvent = { ...mockEvent, key: 'Escape' }
-            handleKeyDown(escapeEvent, false, mockInputRef)
-            expect(mockInputRef.current.blur).toHaveBeenCalled()
-        })
-    })
-})
-
-// Original test component (maintaining compatibility)
-const PropertyTest = () => {
-    const [form, setForm] = useState({
-        name: 'John',
-        address: 'Porto Colon'
-    })
-
-    function change(id, value) {
-        const next = Object.assign({}, form, { [id] : value })
-        setForm(next)
-    }
-
-    return (
-        <>
-           <Property id="name" label="Name" initial="John" value={form.name} editable={true} onChange={change}/>
-           <Property id="address" label="Address" initial="Porto Colon" value={form.address} editable={true} onChange={change}/>
-        </>
-    )
-}
-
-export default PropertyTest