ywana-core8 0.1.103 → 0.2.1

package/src/html/tokenfield.test.js

@@ -1,423 +0,0 @@
-import React from 'react'
-import { TokenField } from './tokenfield'
-
-// Pruebas unitarias para el componente TokenField mejorado
-describe('Enhanced TokenField Component', () => {
-    // Mock de los componentes dependientes
-    const mockIcon = jest.fn()
-    const mockText = jest.fn()
-    const mockDropDown = jest.fn()
-
-    beforeEach(() => {
-        jest.clearAllMocks()
-        
-        // Mock de componentes
-        jest.doMock('./icon', () => ({ Icon: mockIcon }))
-        jest.doMock('./text', () => ({ Text: mockText }))
-        jest.doMock('./textfield', () => ({ DropDown: mockDropDown }))
-        
-        // Mock de console.warn
-        jest.spyOn(console, 'warn').mockImplementation(() => {})
-    })
-
-    afterEach(() => {
-        console.warn.mockRestore()
-    })
-
-    // TokenField Component Tests
-    describe('TokenField Component', () => {
-        test('component exports correctly', () => {
-            expect(TokenField).toBeDefined()
-            expect(typeof TokenField).toBe('function')
-        })
-
-        test('component has correct PropTypes', () => {
-            expect(TokenField.propTypes).toBeDefined()
-            expect(TokenField.propTypes.id).toBeDefined()
-            expect(TokenField.propTypes.label).toBeDefined()
-            expect(TokenField.propTypes.tokens).toBeDefined()
-            expect(TokenField.propTypes.readOnly).toBeDefined()
-            expect(TokenField.propTypes.options).toBeDefined()
-            expect(TokenField.propTypes.predictive).toBeDefined()
-            expect(TokenField.propTypes.onChange).toBeDefined()
-            expect(TokenField.propTypes.disabled).toBeDefined()
-            expect(TokenField.propTypes.maxTokens).toBeDefined()
-            expect(TokenField.propTypes.minTokens).toBeDefined()
-            expect(TokenField.propTypes.allowDuplicates).toBeDefined()
-            expect(TokenField.propTypes.validateToken).toBeDefined()
-            expect(TokenField.propTypes.tokenSeparators).toBeDefined()
-        })
-
-        test('component has correct defaultProps', () => {
-            expect(TokenField.defaultProps).toBeDefined()
-            expect(TokenField.defaultProps.tokens).toEqual([])
-            expect(TokenField.defaultProps.predictive).toBe(true)
-            expect(TokenField.defaultProps.disabled).toBe(false)
-            expect(TokenField.defaultProps.required).toBe(false)
-            expect(TokenField.defaultProps.placeholder).toBe("Add token...")
-            expect(TokenField.defaultProps.minTokens).toBe(0)
-            expect(TokenField.defaultProps.allowDuplicates).toBe(true)
-            expect(TokenField.defaultProps.tokenSeparators).toEqual([',', ';', '\n'])
-            expect(TokenField.defaultProps.size).toBe('medium')
-            expect(TokenField.defaultProps.variant).toBe('default')
-        })
-
-        test('validates props correctly', () => {
-            const validateProps = (tokens, maxTokens, minTokens) => {
-                if (!Array.isArray(tokens)) {
-                    console.warn('TokenField: tokens prop must be an array')
-                }
-                if (maxTokens && tokens.length > maxTokens) {
-                    console.warn(`TokenField: tokens count (${tokens.length}) exceeds maxTokens (${maxTokens})`)
-                }
-                if (minTokens && tokens.length < minTokens) {
-                    console.warn(`TokenField: tokens count (${tokens.length}) is below minTokens (${minTokens})`)
-                }
-            }
-
-            // Invalid tokens prop
-            validateProps('not an array', null, 0)
-            expect(console.warn).toHaveBeenCalledWith('TokenField: tokens prop must be an array')
-
-            console.warn.mockClear()
-
-            // Exceeds max tokens
-            validateProps(['token1', 'token2', 'token3'], 2, 0)
-            expect(console.warn).toHaveBeenCalledWith('TokenField: tokens count (3) exceeds maxTokens (2)')
-
-            console.warn.mockClear()
-
-            // Below min tokens
-            validateProps(['token1'], null, 2)
-            expect(console.warn).toHaveBeenCalledWith('TokenField: tokens count (1) is below minTokens (2)')
-
-            console.warn.mockClear()
-
-            // Valid props
-            validateProps(['token1', 'token2'], 3, 1)
-            expect(console.warn).not.toHaveBeenCalled()
-        })
-
-        test('validates token correctly', () => {
-            const validateTokenValue = (tokenValue, allowDuplicates, tokens, maxTokens, validateToken) => {
-                if (!tokenValue || (typeof tokenValue === 'string' && tokenValue.trim() === '')) {
-                    return { isValid: false, error: 'Token cannot be empty' }
-                }
-
-                // Check duplicates
-                if (!allowDuplicates && tokens.includes(tokenValue)) {
-                    return { isValid: false, error: 'Duplicate token not allowed' }
-                }
-
-                // Check max tokens
-                if (maxTokens && tokens.length >= maxTokens) {
-                    return { isValid: false, error: `Maximum ${maxTokens} tokens allowed` }
-                }
-
-                // Custom validation
-                if (validateToken) {
-                    const customValidation = validateToken(tokenValue, tokens)
-                    if (customValidation && !customValidation.isValid) {
-                        return customValidation
-                    }
-                }
-
-                return { isValid: true }
-            }
-
-            // Empty token
-            expect(validateTokenValue('', true, [], null, null))
-                .toEqual({ isValid: false, error: 'Token cannot be empty' })
-
-            // Duplicate token
-            expect(validateTokenValue('token1', false, ['token1'], null, null))
-                .toEqual({ isValid: false, error: 'Duplicate token not allowed' })
-
-            // Max tokens reached
-            expect(validateTokenValue('token3', true, ['token1', 'token2'], 2, null))
-                .toEqual({ isValid: false, error: 'Maximum 2 tokens allowed' })
-
-            // Custom validation failure
-            const customValidator = (token) => ({ isValid: false, error: 'Custom error' })
-            expect(validateTokenValue('token1', true, [], null, customValidator))
-                .toEqual({ isValid: false, error: 'Custom error' })
-
-            // Valid token
-            expect(validateTokenValue('token1', true, [], null, null))
-                .toEqual({ isValid: true })
-        })
-
-        test('handles remove correctly', () => {
-            const mockOnChange = jest.fn()
-            const mockOnTokenRemove = jest.fn()
-
-            const remove = (index, disabled, readOnly, tokens, minTokens, id, onChange, onTokenRemove) => {
-                if (disabled || readOnly) return
-                
-                const next = tokens.slice()
-                const removedToken = next.splice(index, 1)[0]
-                
-                // Check minimum tokens
-                if (minTokens && next.length < minTokens) {
-                    console.warn(`TokenField: Cannot remove token. Minimum ${minTokens} tokens required.`)
-                    return
-                }
-                
-                if (onChange) onChange(id, next)
-                if (onTokenRemove) onTokenRemove(removedToken, index)
-            }
-
-            const tokens = ['token1', 'token2', 'token3']
-
-            // Normal remove
-            remove(1, false, false, tokens, 0, 'field1', mockOnChange, mockOnTokenRemove)
-            expect(mockOnChange).toHaveBeenCalledWith('field1', ['token1', 'token3'])
-            expect(mockOnTokenRemove).toHaveBeenCalledWith('token2', 1)
-
-            mockOnChange.mockClear()
-            mockOnTokenRemove.mockClear()
-
-            // Disabled remove
-            remove(1, true, false, tokens, 0, 'field1', mockOnChange, mockOnTokenRemove)
-            expect(mockOnChange).not.toHaveBeenCalled()
-
-            // ReadOnly remove
-            remove(1, false, true, tokens, 0, 'field1', mockOnChange, mockOnTokenRemove)
-            expect(mockOnChange).not.toHaveBeenCalled()
-
-            // Min tokens prevent remove
-            remove(0, false, false, ['token1'], 1, 'field1', mockOnChange, mockOnTokenRemove)
-            expect(console.warn).toHaveBeenCalledWith('TokenField: Cannot remove token. Minimum 1 tokens required.')
-            expect(mockOnChange).not.toHaveBeenCalled()
-        })
-
-        test('handles add token correctly', () => {
-            const mockOnChange = jest.fn()
-            const mockOnTokenAdd = jest.fn()
-            const mockOnValidationError = jest.fn()
-
-            const addToken = (tokenValue, disabled, readOnly, tokens, maxTokens, allowDuplicates, validateToken, id, onChange, onTokenAdd, onValidationError) => {
-                if (disabled || readOnly) return false
-
-                // Validation logic
-                if (!tokenValue || tokenValue.trim() === '') {
-                    const error = 'Token cannot be empty'
-                    if (onValidationError) onValidationError(error, tokenValue)
-                    return false
-                }
-
-                if (!allowDuplicates && tokens.includes(tokenValue)) {
-                    const error = 'Duplicate token not allowed'
-                    if (onValidationError) onValidationError(error, tokenValue)
-                    return false
-                }
-
-                if (maxTokens && tokens.length >= maxTokens) {
-                    const error = `Maximum ${maxTokens} tokens allowed`
-                    if (onValidationError) onValidationError(error, tokenValue)
-                    return false
-                }
-
-                const next = Array.isArray(tokens) ? tokens.concat(tokenValue) : [tokenValue]
-                if (onChange) onChange(id, next)
-                if (onTokenAdd) onTokenAdd(tokenValue, tokens.length)
-                
-                return true
-            }
-
-            // Normal add
-            expect(addToken('newToken', false, false, ['token1'], null, true, null, 'field1', mockOnChange, mockOnTokenAdd, mockOnValidationError))
-                .toBe(true)
-            expect(mockOnChange).toHaveBeenCalledWith('field1', ['token1', 'newToken'])
-            expect(mockOnTokenAdd).toHaveBeenCalledWith('newToken', 1)
-
-            mockOnChange.mockClear()
-            mockOnTokenAdd.mockClear()
-
-            // Disabled add
-            expect(addToken('newToken', true, false, ['token1'], null, true, null, 'field1', mockOnChange, mockOnTokenAdd, mockOnValidationError))
-                .toBe(false)
-            expect(mockOnChange).not.toHaveBeenCalled()
-
-            // Duplicate add
-            expect(addToken('token1', false, false, ['token1'], null, false, null, 'field1', mockOnChange, mockOnTokenAdd, mockOnValidationError))
-                .toBe(false)
-            expect(mockOnValidationError).toHaveBeenCalledWith('Duplicate token not allowed', 'token1')
-
-            // Max tokens reached
-            expect(addToken('newToken', false, false, ['token1', 'token2'], 2, true, null, 'field1', mockOnChange, mockOnTokenAdd, mockOnValidationError))
-                .toBe(false)
-            expect(mockOnValidationError).toHaveBeenCalledWith('Maximum 2 tokens allowed', 'newToken')
-        })
-
-        test('handles keyboard events correctly', () => {
-            const mockAddToken = jest.fn().mockReturnValue(true)
-            const mockRemove = jest.fn()
-            const mockSetValue = jest.fn()
-
-            const onEnter = (event, disabled, readOnly, tokenSeparators, value, tokens, addToken, remove, setValue) => {
-                if (disabled || readOnly) return
-
-                // Handle separators
-                if (tokenSeparators.includes(event.key) || event.key === 'Enter') {
-                    event.preventDefault()
-                    event.stopPropagation()
-                    
-                    const token = event.target.value.trim()
-                    if (token && token.length > 0) {
-                        if (addToken(token)) {
-                            setValue('')
-                        }
-                    }
-                    return
-                }
-
-                // Handle backspace to remove last token
-                if (value === '' && tokens.length > 0 && event.key === 'Backspace') {
-                    event.preventDefault()
-                    remove(tokens.length - 1)
-                    return
-                }
-            }
-
-            const mockEvent = {
-                preventDefault: jest.fn(),
-                stopPropagation: jest.fn(),
-                target: { value: 'newToken' },
-                key: 'Enter'
-            }
-
-            // Enter key
-            onEnter(mockEvent, false, false, [',', ';', '\n'], 'currentValue', ['token1'], mockAddToken, mockRemove, mockSetValue)
-            expect(mockEvent.preventDefault).toHaveBeenCalled()
-            expect(mockEvent.stopPropagation).toHaveBeenCalled()
-            expect(mockAddToken).toHaveBeenCalledWith('newToken')
-            expect(mockSetValue).toHaveBeenCalledWith('')
-
-            mockAddToken.mockClear()
-            mockEvent.preventDefault.mockClear()
-
-            // Backspace with empty value
-            const backspaceEvent = { ...mockEvent, key: 'Backspace', target: { value: '' } }
-            onEnter(backspaceEvent, false, false, [',', ';', '\n'], '', ['token1'], mockAddToken, mockRemove, mockSetValue)
-            expect(backspaceEvent.preventDefault).toHaveBeenCalled()
-            expect(mockRemove).toHaveBeenCalledWith(0)
-
-            // Disabled state
-            onEnter(mockEvent, true, false, [',', ';', '\n'], 'currentValue', ['token1'], mockAddToken, mockRemove, mockSetValue)
-            expect(mockAddToken).not.toHaveBeenCalled()
-        })
-
-        test('filters options correctly', () => {
-            const getFilteredOptions = (options, tokens, searchable, value, sortable) => {
-                if (!options) return []
-                
-                const tks = tokens || []
-                const usedValues = tks.map(token => token)
-                let filteredOptions = options.filter(option => !usedValues.includes(option.value))
-                
-                if (searchable && value) {
-                    filteredOptions = filteredOptions.filter(option => 
-                        option.label?.toLowerCase().includes(value.toLowerCase()) ||
-                        option.value?.toString().toLowerCase().includes(value.toLowerCase())
-                    )
-                }
-                
-                if (sortable) {
-                    filteredOptions.sort((a, b) => {
-                        if (!a.label || !b.label) return 0
-                        try {
-                            return a.label.localeCompare(b.label)
-                        } catch (error) {
-                            return 0
-                        }
-                    })
-                }
-                
-                return filteredOptions
-            }
-
-            const options = [
-                { label: 'Apple', value: 'apple' },
-                { label: 'Banana', value: 'banana' },
-                { label: 'Cherry', value: 'cherry' }
-            ]
-
-            // Filter used tokens
-            expect(getFilteredOptions(options, ['apple'], false, '', false))
-                .toEqual([
-                    { label: 'Banana', value: 'banana' },
-                    { label: 'Cherry', value: 'cherry' }
-                ])
-
-            // Search filter
-            expect(getFilteredOptions(options, [], true, 'app', false))
-                .toEqual([{ label: 'Apple', value: 'apple' }])
-
-            // Sort options
-            const unsortedOptions = [
-                { label: 'Zebra', value: 'zebra' },
-                { label: 'Apple', value: 'apple' }
-            ]
-            expect(getFilteredOptions(unsortedOptions, [], false, '', true))
-                .toEqual([
-                    { label: 'Apple', value: 'apple' },
-                    { label: 'Zebra', value: 'zebra' }
-                ])
-        })
-
-        test('generates CSS classes correctly', () => {
-            const generateClasses = (size, variant, disabled, readOnly, required, isFocused, error, className) => {
-                return [
-                    'tokenField',
-                    `tokenField--${size}`,
-                    `tokenField--${variant}`,
-                    disabled && 'tokenField--disabled',
-                    readOnly && 'tokenField--readonly',
-                    required && 'tokenField--required',
-                    isFocused && 'tokenField--focused',
-                    error && 'tokenField--error',
-                    className
-                ].filter(Boolean).join(' ')
-            }
-
-            expect(generateClasses('medium', 'default', false, false, false, false, null, ''))
-                .toBe('tokenField tokenField--medium tokenField--default')
-            
-            expect(generateClasses('large', 'outlined', true, true, true, true, 'Error message', 'custom'))
-                .toBe('tokenField tokenField--large tokenField--outlined tokenField--disabled tokenField--readonly tokenField--required tokenField--focused tokenField--error custom')
-        })
-
-        test('handles clear all correctly', () => {
-            const mockOnChange = jest.fn()
-            const mockOnClear = jest.fn()
-            const mockSetValue = jest.fn()
-
-            const handleClear = (disabled, readOnly, minTokens, id, onChange, onClear, setValue) => {
-                if (disabled || readOnly || minTokens > 0) return
-                
-                if (onChange) onChange(id, [])
-                if (onClear) onClear()
-                setValue('')
-            }
-
-            // Normal clear
-            handleClear(false, false, 0, 'field1', mockOnChange, mockOnClear, mockSetValue)
-            expect(mockOnChange).toHaveBeenCalledWith('field1', [])
-            expect(mockOnClear).toHaveBeenCalled()
-            expect(mockSetValue).toHaveBeenCalledWith('')
-
-            mockOnChange.mockClear()
-            mockOnClear.mockClear()
-            mockSetValue.mockClear()
-
-            // Disabled clear
-            handleClear(true, false, 0, 'field1', mockOnChange, mockOnClear, mockSetValue)
-            expect(mockOnChange).not.toHaveBeenCalled()
-
-            // Min tokens prevent clear
-            handleClear(false, false, 1, 'field1', mockOnChange, mockOnClear, mockSetValue)
-            expect(mockOnChange).not.toHaveBeenCalled()
-        })
-    })
-})