ywana-core8 0.1.103 → 0.2.1

package/src/html/chip.test.js

@@ -1,425 +0,0 @@
-import React from 'react'
-import { Chip, Chips } from './chip'
-
-// Pruebas unitarias para los componentes Chip
-describe('Chip Components', () => {
-    // Mock de los componentes dependientes
-    const mockText = jest.fn()
-    const mockIcon = jest.fn()
-    const mockTooltip = jest.fn()
-
-    beforeEach(() => {
-        jest.clearAllMocks()
-        
-        // Mock del componente Text
-        jest.doMock('./text', () => ({
-            Text: mockText
-        }))
-        
-        // Mock del componente Icon
-        jest.doMock('./icon', () => ({
-            Icon: mockIcon
-        }))
-        
-        // Mock del componente Tooltip
-        jest.doMock('./tooltip', () => ({
-            Tooltip: mockTooltip
-        }))
-        
-        // Mock de console.warn para las pruebas
-        jest.spyOn(console, 'warn').mockImplementation(() => {})
-    })
-
-    afterEach(() => {
-        console.warn.mockRestore()
-    })
-
-    describe('Chip Component', () => {
-        test('component exports correctly', () => {
-            expect(Chip).toBeDefined()
-            expect(typeof Chip).toBe('function')
-        })
-
-        test('component has correct PropTypes', () => {
-            expect(Chip.propTypes).toBeDefined()
-            expect(Chip.propTypes.id).toBeDefined()
-            expect(Chip.propTypes.icon).toBeDefined()
-            expect(Chip.propTypes.label).toBeDefined()
-            expect(Chip.propTypes.tooltip).toBeDefined()
-            expect(Chip.propTypes.action).toBeDefined()
-            expect(Chip.propTypes.outlined).toBeDefined()
-            expect(Chip.propTypes.selected).toBeDefined()
-            expect(Chip.propTypes.disabled).toBeDefined()
-            expect(Chip.propTypes.deletable).toBeDefined()
-            expect(Chip.propTypes.size).toBeDefined()
-            expect(Chip.propTypes.variant).toBeDefined()
-            expect(Chip.propTypes.className).toBeDefined()
-            expect(Chip.propTypes.ariaLabel).toBeDefined()
-            expect(Chip.propTypes.onSelect).toBeDefined()
-            expect(Chip.propTypes.onDelete).toBeDefined()
-            expect(Chip.propTypes.onClick).toBeDefined()
-            expect(Chip.propTypes.onKeyDown).toBeDefined()
-        })
-
-        test('component has correct defaultProps', () => {
-            expect(Chip.defaultProps).toBeDefined()
-            expect(Chip.defaultProps.outlined).toBe(false)
-            expect(Chip.defaultProps.selected).toBe(false)
-            expect(Chip.defaultProps.disabled).toBe(false)
-            expect(Chip.defaultProps.deletable).toBe(false)
-            expect(Chip.defaultProps.size).toBe('normal')
-            expect(Chip.defaultProps.variant).toBe('default')
-            expect(Chip.defaultProps.className).toBe('')
-        })
-
-        test('warns when accessibility props are missing', () => {
-            const validateAccessibility = (label, icon, ariaLabel) => {
-                if (!label && !icon && !ariaLabel) {
-                    console.warn('Chip component: label, icon, or ariaLabel prop is required for accessibility')
-                }
-            }
-            
-            validateAccessibility(null, null, null)
-            expect(console.warn).toHaveBeenCalledWith('Chip component: label, icon, or ariaLabel prop is required for accessibility')
-
-            console.warn.mockClear()
-            validateAccessibility('Test Label', null, null)
-            expect(console.warn).not.toHaveBeenCalled()
-        })
-
-        test('generates correct CSS classes for different states', () => {
-            const generateClasses = (outlined, size, variant, selected, disabled, deletable, className) => {
-                const style = outlined ? 'outlined' : 'normal'
-                
-                return [
-                    'chip',
-                    style,
-                    size,
-                    variant,
-                    selected && 'selected',
-                    disabled && 'disabled',
-                    deletable && 'deletable',
-                    className || ''
-                ].filter(Boolean).join(' ')
-            }
-
-            expect(generateClasses(false, 'normal', 'default', false, false, false, '')).toBe('chip normal normal default')
-            expect(generateClasses(true, 'normal', 'default', false, false, false, '')).toBe('chip outlined normal default')
-            expect(generateClasses(false, 'small', 'default', false, false, false, '')).toBe('chip normal small default')
-            expect(generateClasses(false, 'normal', 'primary', false, false, false, '')).toBe('chip normal normal primary')
-            expect(generateClasses(false, 'normal', 'default', true, false, false, '')).toBe('chip normal normal default selected')
-            expect(generateClasses(false, 'normal', 'default', false, true, false, '')).toBe('chip normal normal default disabled')
-            expect(generateClasses(false, 'normal', 'default', false, false, true, '')).toBe('chip normal normal default deletable')
-            expect(generateClasses(false, 'normal', 'default', false, false, false, 'custom')).toBe('chip normal normal default custom')
-        })
-
-        test('select handler works correctly', () => {
-            const mockOnSelect = jest.fn()
-            const mockOnClick = jest.fn()
-            
-            const simulateSelect = (disabled, onSelect, onClick, id, selected) => {
-                const event = {
-                    stopPropagation: jest.fn(),
-                    preventDefault: jest.fn()
-                }
-                
-                if (!disabled) {
-                    event.stopPropagation()
-                    event.preventDefault()
-                    
-                    if (onSelect) onSelect(id, !selected, event)
-                    if (onClick) onClick(event)
-                }
-                
-                return event
-            }
-
-            // Select normal
-            const event1 = simulateSelect(false, mockOnSelect, mockOnClick, 'test', false)
-            expect(event1.stopPropagation).toHaveBeenCalled()
-            expect(event1.preventDefault).toHaveBeenCalled()
-            expect(mockOnSelect).toHaveBeenCalledWith('test', true, event1)
-            expect(mockOnClick).toHaveBeenCalledWith(event1)
-
-            mockOnSelect.mockClear()
-            mockOnClick.mockClear()
-
-            // Select con disabled
-            simulateSelect(true, mockOnSelect, mockOnClick, 'test', false)
-            expect(mockOnSelect).not.toHaveBeenCalled()
-            expect(mockOnClick).not.toHaveBeenCalled()
-        })
-
-        test('delete handler works correctly', () => {
-            const mockOnDelete = jest.fn()
-            
-            const simulateDelete = (disabled, deletable, onDelete, id) => {
-                const event = {
-                    stopPropagation: jest.fn(),
-                    preventDefault: jest.fn()
-                }
-                
-                if (!disabled && deletable && onDelete) {
-                    event.stopPropagation()
-                    event.preventDefault()
-                    onDelete(id, event)
-                }
-                
-                return event
-            }
-
-            // Delete normal
-            const event1 = simulateDelete(false, true, mockOnDelete, 'test')
-            expect(event1.stopPropagation).toHaveBeenCalled()
-            expect(event1.preventDefault).toHaveBeenCalled()
-            expect(mockOnDelete).toHaveBeenCalledWith('test', event1)
-
-            mockOnDelete.mockClear()
-
-            // Delete con disabled
-            simulateDelete(true, true, mockOnDelete, 'test')
-            expect(mockOnDelete).not.toHaveBeenCalled()
-
-            // Delete sin deletable
-            simulateDelete(false, false, mockOnDelete, 'test')
-            expect(mockOnDelete).not.toHaveBeenCalled()
-        })
-
-        test('keyboard event handling works correctly', () => {
-            const mockSelect = jest.fn()
-            const mockDelete = jest.fn()
-            const mockOnKeyDown = jest.fn()
-            
-            const simulateKeyDown = (key, disabled, deletable, handleSelect, handleDelete, onKeyDown) => {
-                const event = {
-                    key,
-                    preventDefault: jest.fn()
-                }
-
-                if (!disabled) {
-                    if (event.key === 'Enter' || event.key === ' ') {
-                        event.preventDefault()
-                        handleSelect(event)
-                    } else if (event.key === 'Delete' || event.key === 'Backspace') {
-                        if (deletable) {
-                            event.preventDefault()
-                            handleDelete(event)
-                        }
-                    }
-                }
-                if (onKeyDown) onKeyDown(event)
-
-                return event
-            }
-
-            // Enter key
-            const enterEvent = simulateKeyDown('Enter', false, false, mockSelect, mockDelete, mockOnKeyDown)
-            expect(enterEvent.preventDefault).toHaveBeenCalled()
-            expect(mockSelect).toHaveBeenCalledWith(enterEvent)
-            expect(mockOnKeyDown).toHaveBeenCalledWith(enterEvent)
-
-            mockSelect.mockClear()
-            mockOnKeyDown.mockClear()
-
-            // Space key
-            const spaceEvent = simulateKeyDown(' ', false, false, mockSelect, mockDelete, mockOnKeyDown)
-            expect(spaceEvent.preventDefault).toHaveBeenCalled()
-            expect(mockSelect).toHaveBeenCalledWith(spaceEvent)
-
-            mockSelect.mockClear()
-
-            // Delete key with deletable
-            const deleteEvent = simulateKeyDown('Delete', false, true, mockSelect, mockDelete, mockOnKeyDown)
-            expect(deleteEvent.preventDefault).toHaveBeenCalled()
-            expect(mockDelete).toHaveBeenCalledWith(deleteEvent)
-
-            mockDelete.mockClear()
-
-            // Delete key without deletable
-            const deleteEvent2 = simulateKeyDown('Delete', false, false, mockSelect, mockDelete, mockOnKeyDown)
-            expect(deleteEvent2.preventDefault).not.toHaveBeenCalled()
-            expect(mockDelete).not.toHaveBeenCalled()
-
-            // Disabled chip
-            const disabledEvent = simulateKeyDown('Enter', true, false, mockSelect, mockDelete, mockOnKeyDown)
-            expect(disabledEvent.preventDefault).not.toHaveBeenCalled()
-            expect(mockSelect).not.toHaveBeenCalled()
-        })
-
-        test('accessibility attributes generation works correctly', () => {
-            const generateAriaAttributes = (onSelect, ariaLabel, label, icon, selected, disabled) => {
-                return {
-                    role: onSelect ? 'button' : 'img',
-                    'aria-label': ariaLabel || label || (icon ? `${icon} chip` : 'chip'),
-                    'aria-pressed': onSelect ? selected : undefined,
-                    'aria-disabled': disabled,
-                    tabIndex: disabled ? -1 : 0
-                }
-            }
-
-            const basic = generateAriaAttributes(null, null, 'Test Label', null, false, false)
-            expect(basic.role).toBe('img')
-            expect(basic['aria-label']).toBe('Test Label')
-            expect(basic['aria-pressed']).toBeUndefined()
-            expect(basic['aria-disabled']).toBe(false)
-            expect(basic.tabIndex).toBe(0)
-
-            const withSelect = generateAriaAttributes(() => {}, null, 'Test Label', null, true, false)
-            expect(withSelect.role).toBe('button')
-            expect(withSelect['aria-pressed']).toBe(true)
-
-            const withIcon = generateAriaAttributes(null, null, null, 'star', false, false)
-            expect(withIcon['aria-label']).toBe('star chip')
-
-            const disabled = generateAriaAttributes(null, null, 'Test', null, false, true)
-            expect(disabled['aria-disabled']).toBe(true)
-            expect(disabled.tabIndex).toBe(-1)
-        })
-
-        test('icon size calculation works correctly', () => {
-            const getIconSize = (size) => {
-                return size === 'small' ? 'small' : size === 'large' ? 'normal' : 'small'
-            }
-
-            expect(getIconSize('small')).toBe('small')
-            expect(getIconSize('normal')).toBe('small')
-            expect(getIconSize('large')).toBe('normal')
-        })
-    })
-
-    describe('Chips Component', () => {
-        test('component exports correctly', () => {
-            expect(Chips).toBeDefined()
-            expect(typeof Chips).toBe('function')
-        })
-
-        test('component has correct PropTypes', () => {
-            expect(Chips.propTypes).toBeDefined()
-            expect(Chips.propTypes.children).toBeDefined()
-            expect(Chips.propTypes.items).toBeDefined()
-            expect(Chips.propTypes.selected).toBeDefined()
-            expect(Chips.propTypes.disabled).toBeDefined()
-            expect(Chips.propTypes.deletable).toBeDefined()
-            expect(Chips.propTypes.multiSelect).toBeDefined()
-            expect(Chips.propTypes.size).toBeDefined()
-            expect(Chips.propTypes.variant).toBeDefined()
-            expect(Chips.propTypes.className).toBeDefined()
-            expect(Chips.propTypes.onSelect).toBeDefined()
-            expect(Chips.propTypes.onDelete).toBeDefined()
-            expect(Chips.propTypes.onChange).toBeDefined()
-        })
-
-        test('component has correct defaultProps', () => {
-            expect(Chips.defaultProps).toBeDefined()
-            expect(Chips.defaultProps.items).toEqual([])
-            expect(Chips.defaultProps.selected).toEqual([])
-            expect(Chips.defaultProps.disabled).toBe(false)
-            expect(Chips.defaultProps.deletable).toBe(false)
-            expect(Chips.defaultProps.multiSelect).toBe(false)
-            expect(Chips.defaultProps.size).toBe('normal')
-            expect(Chips.defaultProps.variant).toBe('default')
-            expect(Chips.defaultProps.className).toBe('')
-        })
-
-        test('chip selection logic works correctly', () => {
-            const mockOnSelect = jest.fn()
-            const mockOnChange = jest.fn()
-            
-            const simulateChipSelect = (multiSelect, selectedItems, id, isSelected, onSelect, onChange) => {
-                let newSelected
-                if (multiSelect) {
-                    newSelected = isSelected 
-                        ? [...selectedItems, id]
-                        : selectedItems.filter(item => item !== id)
-                } else {
-                    newSelected = isSelected ? [id] : []
-                }
-
-                if (onSelect) onSelect(id, isSelected, {})
-                if (onChange) onChange(newSelected, {})
-                
-                return newSelected
-            }
-
-            // Single select - select
-            const result1 = simulateChipSelect(false, [], 'chip1', true, mockOnSelect, mockOnChange)
-            expect(result1).toEqual(['chip1'])
-            expect(mockOnSelect).toHaveBeenCalledWith('chip1', true, {})
-            expect(mockOnChange).toHaveBeenCalledWith(['chip1'], {})
-
-            mockOnSelect.mockClear()
-            mockOnChange.mockClear()
-
-            // Single select - deselect
-            const result2 = simulateChipSelect(false, ['chip1'], 'chip1', false, mockOnSelect, mockOnChange)
-            expect(result2).toEqual([])
-
-            // Multi select - add
-            const result3 = simulateChipSelect(true, ['chip1'], 'chip2', true, mockOnSelect, mockOnChange)
-            expect(result3).toEqual(['chip1', 'chip2'])
-
-            // Multi select - remove
-            const result4 = simulateChipSelect(true, ['chip1', 'chip2'], 'chip1', false, mockOnSelect, mockOnChange)
-            expect(result4).toEqual(['chip2'])
-        })
-
-        test('chip deletion logic works correctly', () => {
-            const mockOnDelete = jest.fn()
-            const mockOnChange = jest.fn()
-            
-            const simulateChipDelete = (selectedItems, id, onDelete, onChange) => {
-                const newSelected = selectedItems.filter(item => item !== id)
-                
-                if (onDelete) onDelete(id, {})
-                if (onChange) onChange(newSelected, {})
-                
-                return newSelected
-            }
-
-            const result = simulateChipDelete(['chip1', 'chip2', 'chip3'], 'chip2', mockOnDelete, mockOnChange)
-            expect(result).toEqual(['chip1', 'chip3'])
-            expect(mockOnDelete).toHaveBeenCalledWith('chip2', {})
-            expect(mockOnChange).toHaveBeenCalledWith(['chip1', 'chip3'], {})
-        })
-
-        test('CSS classes generation works correctly', () => {
-            const generateClasses = (size, disabled, className) => {
-                return [
-                    'chips',
-                    size,
-                    disabled && 'disabled',
-                    className || ''
-                ].filter(Boolean).join(' ')
-            }
-
-            expect(generateClasses('normal', false, '')).toBe('chips normal')
-            expect(generateClasses('small', false, '')).toBe('chips small')
-            expect(generateClasses('normal', true, '')).toBe('chips normal disabled')
-            expect(generateClasses('normal', false, 'custom')).toBe('chips normal custom')
-        })
-
-        test('item ID generation works correctly', () => {
-            const getItemId = (item, index) => {
-                return item.id || item.value || index
-            }
-
-            expect(getItemId({ id: 'test' }, 0)).toBe('test')
-            expect(getItemId({ value: 'value1' }, 0)).toBe('value1')
-            expect(getItemId({ label: 'Label' }, 5)).toBe(5)
-        })
-
-        test('state synchronization works correctly', () => {
-            let selectedItems = []
-            
-            const syncState = (externalSelected) => {
-                selectedItems = externalSelected
-            }
-
-            syncState(['item1', 'item2'])
-            expect(selectedItems).toEqual(['item1', 'item2'])
-
-            syncState([])
-            expect(selectedItems).toEqual([])
-        })
-    })
-})