ywana-core8 0.1.75 → 0.1.77

package/src/html/list.test.js

@@ -0,0 +1,383 @@
+import React from 'react'
+import { List } from './list'
+
+// Pruebas unitarias para el componente List mejorado
+describe('List Component', () => {
+    // Mock de los componentes dependientes
+    const mockIcon = jest.fn()
+    const mockText = jest.fn()
+    const mockCircularProgress = jest.fn()
+    const mockTextField = jest.fn()
+
+    beforeEach(() => {
+        jest.clearAllMocks()
+        
+        // Mock de componentes
+        jest.doMock('./icon', () => ({ Icon: mockIcon }))
+        jest.doMock('./text', () => ({ Text: mockText }))
+        jest.doMock('./progress', () => ({ CircularProgress: mockCircularProgress }))
+        jest.doMock('./textfield', () => ({ TextField: mockTextField }))
+        
+        // Mock de console.warn
+        jest.spyOn(console, 'warn').mockImplementation(() => {})
+    })
+
+    afterEach(() => {
+        console.warn.mockRestore()
+    })
+
+    test('component exports correctly', () => {
+        expect(List).toBeDefined()
+        expect(typeof List).toBe('function')
+    })
+
+    test('component has correct PropTypes', () => {
+        expect(List.propTypes).toBeDefined()
+        expect(List.propTypes.items).toBeDefined()
+        expect(List.propTypes.selected).toBeDefined()
+        expect(List.propTypes.onSelect).toBeDefined()
+        expect(List.propTypes.groupBy).toBeDefined()
+        expect(List.propTypes.loading).toBeDefined()
+        expect(List.propTypes.searchable).toBeDefined()
+        expect(List.propTypes.sortable).toBeDefined()
+        expect(List.propTypes.multiSelect).toBeDefined()
+        expect(List.propTypes.dense).toBeDefined()
+        expect(List.propTypes.disabled).toBeDefined()
+        expect(List.propTypes.animated).toBeDefined()
+    })
+
+    test('component has correct defaultProps', () => {
+        expect(List.defaultProps).toBeDefined()
+        expect(List.defaultProps.items).toEqual([])
+        expect(List.defaultProps.loading).toBe(false)
+        expect(List.defaultProps.empty).toBe(false)
+        expect(List.defaultProps.searchable).toBe(false)
+        expect(List.defaultProps.sortable).toBe(false)
+        expect(List.defaultProps.multiSelect).toBe(false)
+        expect(List.defaultProps.dense).toBe(false)
+        expect(List.defaultProps.disabled).toBe(false)
+        expect(List.defaultProps.animated).toBe(true)
+        expect(List.defaultProps.role).toBe('list')
+    })
+
+    test('warns when items is not an array', () => {
+        const validateItems = (items) => {
+            if (!Array.isArray(items)) {
+                console.warn('List component: items prop must be an array')
+            }
+        }
+        
+        validateItems('not an array')
+        expect(console.warn).toHaveBeenCalledWith('List component: items prop must be an array')
+
+        console.warn.mockClear()
+        validateItems([])
+        expect(console.warn).not.toHaveBeenCalled()
+    })
+
+    test('handles selection correctly', () => {
+        const mockOnSelect = jest.fn()
+        
+        const handleSelect = (id, event, multiSelect, selected, onSelect, onMultiSelect) => {
+            if (multiSelect && event?.ctrlKey) {
+                const currentSelected = Array.isArray(selected) ? selected : [selected].filter(Boolean)
+                const newSelected = currentSelected.includes(id)
+                    ? currentSelected.filter(s => s !== id)
+                    : [...currentSelected, id]
+                
+                if (onMultiSelect) {
+                    onMultiSelect(newSelected)
+                } else if (onSelect) {
+                    onSelect(newSelected)
+                }
+            } else {
+                if (onSelect) onSelect(id)
+            }
+        }
+
+        // Single select
+        handleSelect('item1', {}, false, null, mockOnSelect, null)
+        expect(mockOnSelect).toHaveBeenCalledWith('item1')
+
+        mockOnSelect.mockClear()
+
+        // Multi-select with Ctrl
+        const mockOnMultiSelect = jest.fn()
+        handleSelect('item1', { ctrlKey: true }, true, [], mockOnSelect, mockOnMultiSelect)
+        expect(mockOnMultiSelect).toHaveBeenCalledWith(['item1'])
+    })
+
+    test('filters items by search correctly', () => {
+        const items = [
+            { id: 1, line1: 'Apple', line2: 'Fruit' },
+            { id: 2, line1: 'Banana', line2: 'Yellow fruit' },
+            { id: 3, line1: 'Carrot', line2: 'Vegetable' }
+        ]
+
+        const filterItems = (items, searchTerm, searchBy) => {
+            if (!searchTerm.trim()) return items
+            
+            return items.filter(item => {
+                const searchText = searchBy
+                    .map(field => item[field] || '')
+                    .join(' ')
+                    .toLowerCase()
+                return searchText.includes(searchTerm.toLowerCase())
+            })
+        }
+
+        expect(filterItems(items, '', ['line1', 'line2'])).toEqual(items)
+        expect(filterItems(items, 'apple', ['line1', 'line2'])).toEqual([items[0]])
+        expect(filterItems(items, 'fruit', ['line1', 'line2'])).toEqual([items[0], items[1]])
+        expect(filterItems(items, 'yellow', ['line1', 'line2'])).toEqual([items[1]])
+        expect(filterItems(items, 'xyz', ['line1', 'line2'])).toEqual([])
+    })
+
+    test('sorts items correctly', () => {
+        const items = [
+            { id: 1, name: 'Charlie', age: 30 },
+            { id: 2, name: 'Alice', age: 25 },
+            { id: 3, name: 'Bob', age: 35 }
+        ]
+
+        const sortItems = (items, sortConfig) => {
+            if (!sortConfig.key) return items
+            
+            return [...items].sort((a, b) => {
+                const aValue = a[sortConfig.key] || ''
+                const bValue = b[sortConfig.key] || ''
+                
+                if (sortConfig.direction === 'asc') {
+                    return aValue.toString().localeCompare(bValue.toString())
+                } else {
+                    return bValue.toString().localeCompare(aValue.toString())
+                }
+            })
+        }
+
+        // Sort by name ascending
+        const sortedAsc = sortItems(items, { key: 'name', direction: 'asc' })
+        expect(sortedAsc[0].name).toBe('Alice')
+        expect(sortedAsc[1].name).toBe('Bob')
+        expect(sortedAsc[2].name).toBe('Charlie')
+
+        // Sort by name descending
+        const sortedDesc = sortItems(items, { key: 'name', direction: 'desc' })
+        expect(sortedDesc[0].name).toBe('Charlie')
+        expect(sortedDesc[1].name).toBe('Bob')
+        expect(sortedDesc[2].name).toBe('Alice')
+    })
+
+    test('handles sort configuration correctly', () => {
+        const handleSort = (key, currentConfig) => {
+            const direction = currentConfig.key === key && currentConfig.direction === 'asc' ? 'desc' : 'asc'
+            return { key, direction }
+        }
+
+        // First click on a column
+        expect(handleSort('name', { key: null, direction: 'asc' }))
+            .toEqual({ key: 'name', direction: 'asc' })
+
+        // Second click on same column
+        expect(handleSort('name', { key: 'name', direction: 'asc' }))
+            .toEqual({ key: 'name', direction: 'desc' })
+
+        // Third click on same column
+        expect(handleSort('name', { key: 'name', direction: 'desc' }))
+            .toEqual({ key: 'name', direction: 'asc' })
+
+        // Click on different column
+        expect(handleSort('age', { key: 'name', direction: 'desc' }))
+            .toEqual({ key: 'age', direction: 'asc' })
+    })
+
+    test('generates CSS classes correctly', () => {
+        const generateClasses = (dense, disabled, animated, loading, className) => {
+            return [
+                'list',
+                dense && 'list--dense',
+                disabled && 'list--disabled',
+                animated && 'list--animated',
+                loading && 'list--loading',
+                className
+            ].filter(Boolean).join(' ')
+        }
+
+        expect(generateClasses(false, false, false, false, ''))
+            .toBe('list')
+        
+        expect(generateClasses(true, false, true, false, 'custom'))
+            .toBe('list list--dense list--animated custom')
+        
+        expect(generateClasses(false, true, false, true, ''))
+            .toBe('list list--disabled list--loading')
+    })
+
+    test('generates accessibility attributes correctly', () => {
+        const generateAriaAttributes = (ariaLabel, disabled, loading, role) => {
+            return {
+                'aria-label': ariaLabel || 'List',
+                'aria-disabled': disabled,
+                'aria-busy': loading,
+                role: role
+            }
+        }
+
+        const result1 = generateAriaAttributes(null, false, false, 'list')
+        expect(result1['aria-label']).toBe('List')
+        expect(result1['aria-disabled']).toBe(false)
+        expect(result1['aria-busy']).toBe(false)
+        expect(result1.role).toBe('list')
+
+        const result2 = generateAriaAttributes('Custom List', true, true, 'listbox')
+        expect(result2['aria-label']).toBe('Custom List')
+        expect(result2['aria-disabled']).toBe(true)
+        expect(result2['aria-busy']).toBe(true)
+        expect(result2.role).toBe('listbox')
+    })
+
+    test('groups items correctly', () => {
+        const items = [
+            { id: 1, name: 'Apple', category: 'Fruit' },
+            { id: 2, name: 'Banana', category: 'Fruit' },
+            { id: 3, name: 'Carrot', category: 'Vegetable' },
+            { id: 4, name: 'Broccoli', category: 'Vegetable' }
+        ]
+
+        const groupItems = (items, groupBy) => {
+            return items.reduce((groups, item) => {
+                let group = groups.find(g => g.name === item[groupBy])
+                if (!group) {
+                    group = { name: item[groupBy], items: [] }
+                    groups.push(group)
+                }
+                group.items.push(item)
+                return groups
+            }, [])
+        }
+
+        const grouped = groupItems(items, 'category')
+        expect(grouped).toHaveLength(2)
+        expect(grouped[0].name).toBe('Fruit')
+        expect(grouped[0].items).toHaveLength(2)
+        expect(grouped[1].name).toBe('Vegetable')
+        expect(grouped[1].items).toHaveLength(2)
+    })
+
+    test('handles group collapse/expand correctly', () => {
+        const handleGroupToggle = (groupName, collapsedGroups) => {
+            const next = new Set(collapsedGroups)
+            if (next.has(groupName)) {
+                next.delete(groupName)
+            } else {
+                next.add(groupName)
+            }
+            return next
+        }
+
+        const initial = new Set()
+        const afterCollapse = handleGroupToggle('group1', initial)
+        expect(afterCollapse.has('group1')).toBe(true)
+
+        const afterExpand = handleGroupToggle('group1', afterCollapse)
+        expect(afterExpand.has('group1')).toBe(false)
+    })
+})
+
+// ListItem tests
+describe('ListItem Component', () => {
+    test('determines selection state correctly', () => {
+        const isSelected = (id, selected) => {
+            return Array.isArray(selected) ? selected.includes(id) : selected === id
+        }
+
+        expect(isSelected('item1', 'item1')).toBe(true)
+        expect(isSelected('item1', 'item2')).toBe(false)
+        expect(isSelected('item1', ['item1', 'item2'])).toBe(true)
+        expect(isSelected('item1', ['item2', 'item3'])).toBe(false)
+        expect(isSelected('item1', [])).toBe(false)
+    })
+
+    test('handles keyboard navigation correctly', () => {
+        const mockOnSelect = jest.fn()
+
+        const handleKeyDown = (event, disabled, onSelect, id) => {
+            if (disabled) return false
+            
+            switch (event.key) {
+                case 'Enter':
+                case ' ':
+                    if (onSelect) onSelect(id, event)
+                    return true
+                default:
+                    return false
+            }
+        }
+
+        // Test Enter key
+        expect(handleKeyDown({ key: 'Enter' }, false, mockOnSelect, 'item1')).toBe(true)
+        expect(mockOnSelect).toHaveBeenCalledWith('item1', { key: 'Enter' })
+
+        mockOnSelect.mockClear()
+
+        // Test Space key
+        expect(handleKeyDown({ key: ' ' }, false, mockOnSelect, 'item1')).toBe(true)
+        expect(mockOnSelect).toHaveBeenCalledWith('item1', { key: ' ' })
+
+        mockOnSelect.mockClear()
+
+        // Test disabled state
+        expect(handleKeyDown({ key: 'Enter' }, true, mockOnSelect, 'item1')).toBe(false)
+        expect(mockOnSelect).not.toHaveBeenCalled()
+
+        // Test other keys
+        expect(handleKeyDown({ key: 'Tab' }, false, mockOnSelect, 'item1')).toBe(false)
+    })
+
+    test('generates item CSS classes correctly', () => {
+        const generateItemClasses = (isSelected, isDisabled, dense, animated, multiSelect) => {
+            return [
+                'list__item',
+                isSelected && 'list__item--selected',
+                isDisabled && 'list__item--disabled',
+                dense && 'list__item--dense',
+                animated && 'list__item--animated',
+                multiSelect && 'list__item--multi-select'
+            ].filter(Boolean).join(' ')
+        }
+
+        expect(generateItemClasses(false, false, false, false, false))
+            .toBe('list__item')
+        
+        expect(generateItemClasses(true, false, true, true, true))
+            .toBe('list__item list__item--selected list__item--dense list__item--animated list__item--multi-select')
+        
+        expect(generateItemClasses(false, true, false, false, false))
+            .toBe('list__item list__item--disabled')
+    })
+
+    test('generates item accessibility attributes correctly', () => {
+        const generateItemAriaAttributes = (isSelected, isDisabled, line1) => {
+            return {
+                'aria-selected': isSelected,
+                'aria-disabled': isDisabled,
+                'aria-label': typeof line1 === 'string' ? line1 : 'List item',
+                role: 'option',
+                tabIndex: isDisabled ? -1 : 0
+            }
+        }
+
+        const result1 = generateItemAriaAttributes(true, false, 'Test Item')
+        expect(result1['aria-selected']).toBe(true)
+        expect(result1['aria-disabled']).toBe(false)
+        expect(result1['aria-label']).toBe('Test Item')
+        expect(result1.role).toBe('option')
+        expect(result1.tabIndex).toBe(0)
+
+        const result2 = generateItemAriaAttributes(false, true, { type: 'span', children: 'Complex' })
+        expect(result2['aria-selected']).toBe(false)
+        expect(result2['aria-disabled']).toBe(true)
+        expect(result2['aria-label']).toBe('List item')
+        expect(result2.tabIndex).toBe(-1)
+    })
+})