ywana-core8 0.1.103 → 0.2.1

package/src/html/list.test.js

@@ -1,383 +0,0 @@
-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)
-    })
-})