ywana-core8 0.1.75 → 0.1.76

package/src/html/chip.test.js

@@ -0,0 +1,425 @@
+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([])
+        })
+    })
+})