ywana-core8 0.1.75 → 0.1.77

package/src/html/tree_enhanced.test.js

@@ -0,0 +1,495 @@
+import React from 'react'
+import { Tree, TreeNode, TreeItem } from './tree'
+
+// Pruebas unitarias para los componentes Tree mejorados
+describe('Enhanced Tree Components', () => {
+    // Mock de los componentes dependientes
+    const mockIcon = jest.fn()
+    const mockText = jest.fn()
+    const mockTextField = jest.fn()
+
+    beforeEach(() => {
+        jest.clearAllMocks()
+        
+        // Mock de componentes
+        jest.doMock('./icon', () => ({ Icon: mockIcon }))
+        jest.doMock('./text', () => ({ Text: mockText }))
+        jest.doMock('./textfield', () => ({ TextField: mockTextField }))
+        
+        // Mock de console.warn
+        jest.spyOn(console, 'warn').mockImplementation(() => {})
+    })
+
+    afterEach(() => {
+        console.warn.mockRestore()
+    })
+
+    // Tree Component Tests
+    describe('Tree Component', () => {
+        test('component exports correctly', () => {
+            expect(Tree).toBeDefined()
+            expect(typeof Tree).toBe('function')
+        })
+
+        test('component has correct PropTypes', () => {
+            expect(Tree.propTypes).toBeDefined()
+            expect(Tree.propTypes.nodes).toBeDefined()
+            expect(Tree.propTypes.children).toBeDefined()
+            expect(Tree.propTypes.searchable).toBeDefined()
+            expect(Tree.propTypes.filterable).toBeDefined()
+            expect(Tree.propTypes.sortable).toBeDefined()
+            expect(Tree.propTypes.multiSelect).toBeDefined()
+            expect(Tree.propTypes.disabled).toBeDefined()
+            expect(Tree.propTypes.loading).toBeDefined()
+            expect(Tree.propTypes.empty).toBeDefined()
+        })
+
+        test('component has correct defaultProps', () => {
+            expect(Tree.defaultProps).toBeDefined()
+            expect(Tree.defaultProps.nodes).toEqual([])
+            expect(Tree.defaultProps.searchable).toBe(false)
+            expect(Tree.defaultProps.filterable).toBe(false)
+            expect(Tree.defaultProps.sortable).toBe(false)
+            expect(Tree.defaultProps.multiSelect).toBe(false)
+            expect(Tree.defaultProps.disabled).toBe(false)
+            expect(Tree.defaultProps.loading).toBe(false)
+            expect(Tree.defaultProps.empty).toBe(false)
+        })
+
+        test('warns when no children or nodes provided', () => {
+            const validateContent = (children, nodes) => {
+                if (children && !React.Children.count(children) && nodes.length === 0) {
+                    console.warn('Tree component: should contain TreeNode components or nodes prop')
+                }
+            }
+            
+            validateContent([], [])
+            expect(console.warn).toHaveBeenCalledWith('Tree component: should contain TreeNode components or nodes prop')
+
+            console.warn.mockClear()
+            validateContent(null, [{ id: 1 }])
+            expect(console.warn).not.toHaveBeenCalled()
+        })
+
+        test('handles search correctly', () => {
+            const mockSetSearchTerm = jest.fn()
+            
+            const handleSearch = (searchId, value, setSearchTerm) => {
+                setSearchTerm(value)
+            }
+
+            handleSearch('search', 'test query', mockSetSearchTerm)
+            expect(mockSetSearchTerm).toHaveBeenCalledWith('test query')
+        })
+
+        test('handles multi-selection correctly', () => {
+            const mockOnMultiSelect = jest.fn()
+            
+            const handleMultiSelect = (id, selected, multiSelect, selectedItems, setSelectedItems, onMultiSelect) => {
+                if (!multiSelect) return
+
+                const newSelected = selected 
+                    ? [...selectedItems, id]
+                    : selectedItems.filter(item => item !== id)
+                
+                setSelectedItems(newSelected)
+                if (onMultiSelect) {
+                    onMultiSelect(newSelected)
+                }
+            }
+
+            // Add item
+            handleMultiSelect('item1', true, true, [], jest.fn(), mockOnMultiSelect)
+            expect(mockOnMultiSelect).toHaveBeenCalledWith(['item1'])
+
+            mockOnMultiSelect.mockClear()
+
+            // Remove item
+            handleMultiSelect('item1', false, true, ['item1', 'item2'], jest.fn(), mockOnMultiSelect)
+            expect(mockOnMultiSelect).toHaveBeenCalledWith(['item2'])
+
+            mockOnMultiSelect.mockClear()
+
+            // Disabled multi-select
+            handleMultiSelect('item1', true, false, [], jest.fn(), mockOnMultiSelect)
+            expect(mockOnMultiSelect).not.toHaveBeenCalled()
+        })
+
+        test('generates CSS classes correctly', () => {
+            const generateClasses = (disabled, loading, searchable, multiSelect, className) => {
+                return [
+                    'tree',
+                    disabled && 'tree--disabled',
+                    loading && 'tree--loading',
+                    searchable && 'tree--searchable',
+                    multiSelect && 'tree--multi-select',
+                    className
+                ].filter(Boolean).join(' ')
+            }
+
+            expect(generateClasses(false, false, false, false, ''))
+                .toBe('tree')
+            
+            expect(generateClasses(true, true, true, true, 'custom'))
+                .toBe('tree tree--disabled tree--loading tree--searchable tree--multi-select custom')
+        })
+
+        test('generates accessibility attributes correctly', () => {
+            const generateAriaAttributes = (ariaLabel, disabled, loading) => {
+                return {
+                    'aria-label': ariaLabel || 'Tree',
+                    'aria-disabled': disabled,
+                    'aria-busy': loading,
+                    role: 'tree'
+                }
+            }
+
+            const result1 = generateAriaAttributes(null, false, false)
+            expect(result1['aria-label']).toBe('Tree')
+            expect(result1['aria-disabled']).toBe(false)
+            expect(result1['aria-busy']).toBe(false)
+            expect(result1.role).toBe('tree')
+
+            const result2 = generateAriaAttributes('Custom Tree', true, true)
+            expect(result2['aria-label']).toBe('Custom Tree')
+            expect(result2['aria-disabled']).toBe(true)
+            expect(result2['aria-busy']).toBe(true)
+        })
+    })
+
+    // TreeNode Component Tests
+    describe('TreeNode Component', () => {
+        test('component has correct PropTypes', () => {
+            expect(TreeNode.propTypes).toBeDefined()
+            expect(TreeNode.propTypes.id).toBeDefined()
+            expect(TreeNode.propTypes.icon).toBeDefined()
+            expect(TreeNode.propTypes.label).toBeDefined()
+            expect(TreeNode.propTypes.open).toBeDefined()
+            expect(TreeNode.propTypes.disabled).toBeDefined()
+            expect(TreeNode.propTypes.draggable).toBeDefined()
+            expect(TreeNode.propTypes.expandable).toBeDefined()
+            expect(TreeNode.propTypes.hasChildren).toBeDefined()
+            expect(TreeNode.propTypes.loading).toBeDefined()
+            expect(TreeNode.propTypes.badge).toBeDefined()
+        })
+
+        test('component has correct defaultProps', () => {
+            expect(TreeNode.defaultProps).toBeDefined()
+            expect(TreeNode.defaultProps.icon).toBe('folder')
+            expect(TreeNode.defaultProps.open).toBe(false)
+            expect(TreeNode.defaultProps.disabled).toBe(false)
+            expect(TreeNode.defaultProps.draggable).toBe(false)
+            expect(TreeNode.defaultProps.expandable).toBe(true)
+            expect(TreeNode.defaultProps.level).toBe(0)
+            expect(TreeNode.defaultProps.hasChildren).toBe(true)
+            expect(TreeNode.defaultProps.loading).toBe(false)
+        })
+
+        test('handles selection correctly', () => {
+            const mockOnSelect = jest.fn()
+
+            const handleSelect = (event, disabled, onSelect, id) => {
+                if (disabled) return
+                event.stopPropagation()
+                if (onSelect) onSelect(id)
+            }
+
+            const mockEvent = { stopPropagation: jest.fn() }
+
+            // Normal selection
+            handleSelect(mockEvent, false, mockOnSelect, 'node1')
+            expect(mockEvent.stopPropagation).toHaveBeenCalled()
+            expect(mockOnSelect).toHaveBeenCalledWith('node1')
+
+            mockOnSelect.mockClear()
+
+            // Disabled state
+            handleSelect(mockEvent, true, mockOnSelect, 'node1')
+            expect(mockOnSelect).not.toHaveBeenCalled()
+        })
+
+        test('handles toggle correctly', () => {
+            const mockSetIsOpen = jest.fn()
+
+            const handleToggle = (event, disabled, expandable, setIsOpen) => {
+                if (disabled || !expandable) return
+                event.preventDefault()
+                setIsOpen(prev => !prev)
+            }
+
+            const mockEvent = { preventDefault: jest.fn() }
+
+            // Normal toggle
+            handleToggle(mockEvent, false, true, mockSetIsOpen)
+            expect(mockEvent.preventDefault).toHaveBeenCalled()
+            expect(mockSetIsOpen).toHaveBeenCalledWith(expect.any(Function))
+
+            mockSetIsOpen.mockClear()
+
+            // Disabled state
+            handleToggle(mockEvent, true, true, mockSetIsOpen)
+            expect(mockSetIsOpen).not.toHaveBeenCalled()
+
+            // Not expandable
+            handleToggle(mockEvent, false, false, mockSetIsOpen)
+            expect(mockSetIsOpen).not.toHaveBeenCalled()
+        })
+
+        test('handles keyboard interaction correctly', () => {
+            const mockOnSelect = jest.fn()
+            const mockSetIsOpen = jest.fn()
+
+            const handleKeyDown = (event, disabled, onSelect, id, isOpen, hasChildren, setIsOpen) => {
+                if (disabled) return
+
+                switch (event.key) {
+                    case 'Enter':
+                    case ' ':
+                        event.preventDefault()
+                        if (onSelect) onSelect(id)
+                        break
+                    case 'ArrowRight':
+                        if (!isOpen && hasChildren) {
+                            event.preventDefault()
+                            setIsOpen(true)
+                        }
+                        break
+                    case 'ArrowLeft':
+                        if (isOpen && hasChildren) {
+                            event.preventDefault()
+                            setIsOpen(false)
+                        }
+                        break
+                    default:
+                        break
+                }
+            }
+
+            const mockEvent = { preventDefault: jest.fn() }
+
+            // Enter key
+            handleKeyDown({ ...mockEvent, key: 'Enter' }, false, mockOnSelect, 'node1', false, true, mockSetIsOpen)
+            expect(mockOnSelect).toHaveBeenCalledWith('node1')
+
+            mockOnSelect.mockClear()
+
+            // Arrow right (expand)
+            handleKeyDown({ ...mockEvent, key: 'ArrowRight' }, false, mockOnSelect, 'node1', false, true, mockSetIsOpen)
+            expect(mockSetIsOpen).toHaveBeenCalledWith(true)
+
+            mockSetIsOpen.mockClear()
+
+            // Arrow left (collapse)
+            handleKeyDown({ ...mockEvent, key: 'ArrowLeft' }, false, mockOnSelect, 'node1', true, true, mockSetIsOpen)
+            expect(mockSetIsOpen).toHaveBeenCalledWith(false)
+        })
+
+        test('handles drag and drop correctly', () => {
+            const mockOnDragStart = jest.fn()
+            const mockOnDrop = jest.fn()
+            const mockSetIsDragging = jest.fn()
+
+            const handleDragStart = (event, draggable, disabled, id, setIsDragging, onDragStart) => {
+                if (!draggable || disabled) return
+                setIsDragging(true)
+                event.dataTransfer.setData('text/plain', id)
+                if (onDragStart) onDragStart(id, event)
+            }
+
+            const handleDrop = (event, id, onDrop) => {
+                event.preventDefault()
+                const draggedId = event.dataTransfer.getData('text/plain')
+                if (onDrop && draggedId !== id) {
+                    onDrop(draggedId, id, event)
+                }
+            }
+
+            const mockEvent = {
+                dataTransfer: {
+                    setData: jest.fn(),
+                    getData: jest.fn().mockReturnValue('dragged-node')
+                },
+                preventDefault: jest.fn()
+            }
+
+            // Drag start
+            handleDragStart(mockEvent, true, false, 'node1', mockSetIsDragging, mockOnDragStart)
+            expect(mockSetIsDragging).toHaveBeenCalledWith(true)
+            expect(mockEvent.dataTransfer.setData).toHaveBeenCalledWith('text/plain', 'node1')
+            expect(mockOnDragStart).toHaveBeenCalledWith('node1', mockEvent)
+
+            // Drop
+            handleDrop(mockEvent, 'node2', mockOnDrop)
+            expect(mockEvent.preventDefault).toHaveBeenCalled()
+            expect(mockOnDrop).toHaveBeenCalledWith('dragged-node', 'node2', mockEvent)
+        })
+
+        test('generates CSS classes correctly', () => {
+            const generateClasses = (disabled, isDragging, hasChildren, loading, className) => {
+                return [
+                    'tree-node',
+                    disabled && 'tree-node--disabled',
+                    isDragging && 'tree-node--dragging',
+                    !hasChildren && 'tree-node--leaf',
+                    loading && 'tree-node--loading',
+                    className
+                ].filter(Boolean).join(' ')
+            }
+
+            expect(generateClasses(false, false, true, false, ''))
+                .toBe('tree-node')
+            
+            expect(generateClasses(true, true, false, true, 'custom'))
+                .toBe('tree-node tree-node--disabled tree-node--dragging tree-node--leaf tree-node--loading custom')
+        })
+
+        test('generates accessibility attributes correctly', () => {
+            const generateAriaAttributes = (hasChildren, isOpen, disabled, level, label, id) => {
+                return {
+                    'aria-expanded': hasChildren ? isOpen : undefined,
+                    'aria-disabled': disabled,
+                    'aria-level': level + 1,
+                    'aria-label': typeof label === 'string' ? label : `Tree node ${id || ''}`,
+                    role: 'treeitem',
+                    tabIndex: disabled ? -1 : 0
+                }
+            }
+
+            const result1 = generateAriaAttributes(true, true, false, 0, 'Test Node', 'node1')
+            expect(result1['aria-expanded']).toBe(true)
+            expect(result1['aria-disabled']).toBe(false)
+            expect(result1['aria-level']).toBe(1)
+            expect(result1['aria-label']).toBe('Test Node')
+            expect(result1.role).toBe('treeitem')
+            expect(result1.tabIndex).toBe(0)
+
+            const result2 = generateAriaAttributes(false, false, true, 1, null, 'node2')
+            expect(result2['aria-expanded']).toBeUndefined()
+            expect(result2['aria-disabled']).toBe(true)
+            expect(result2['aria-level']).toBe(2)
+            expect(result2['aria-label']).toBe('Tree node node2')
+            expect(result2.tabIndex).toBe(-1)
+        })
+    })
+
+    // TreeItem Component Tests
+    describe('TreeItem Component', () => {
+        test('component has correct PropTypes', () => {
+            expect(TreeItem.propTypes).toBeDefined()
+            expect(TreeItem.propTypes.id).toBeDefined()
+            expect(TreeItem.propTypes.icon).toBeDefined()
+            expect(TreeItem.propTypes.label).toBeDefined()
+            expect(TreeItem.propTypes.selected).toBeDefined()
+            expect(TreeItem.propTypes.checked).toBeDefined()
+            expect(TreeItem.propTypes.disabled).toBeDefined()
+            expect(TreeItem.propTypes.draggable).toBeDefined()
+            expect(TreeItem.propTypes.badge).toBeDefined()
+        })
+
+        test('component has correct defaultProps', () => {
+            expect(TreeItem.defaultProps).toBeDefined()
+            expect(TreeItem.defaultProps.icon).toBe('description')
+            expect(TreeItem.defaultProps.selected).toBe(false)
+            expect(TreeItem.defaultProps.checked).toBe(false)
+            expect(TreeItem.defaultProps.disabled).toBe(false)
+            expect(TreeItem.defaultProps.draggable).toBe(false)
+            expect(TreeItem.defaultProps.level).toBe(0)
+        })
+
+        test('handles selection correctly', () => {
+            const mockOnSelect = jest.fn()
+
+            const handleSelect = (event, disabled, onSelect, id) => {
+                if (disabled) return
+                event.preventDefault()
+                if (onSelect) onSelect(id)
+            }
+
+            const mockEvent = { preventDefault: jest.fn() }
+
+            // Normal selection
+            handleSelect(mockEvent, false, mockOnSelect, 'item1')
+            expect(mockEvent.preventDefault).toHaveBeenCalled()
+            expect(mockOnSelect).toHaveBeenCalledWith('item1')
+
+            mockOnSelect.mockClear()
+
+            // Disabled state
+            handleSelect(mockEvent, true, mockOnSelect, 'item1')
+            expect(mockOnSelect).not.toHaveBeenCalled()
+        })
+
+        test('handles checkbox correctly', () => {
+            const mockOnCheck = jest.fn()
+
+            const handleCheck = (event, disabled, onCheck, id) => {
+                if (disabled) return
+                event.stopPropagation()
+                if (onCheck) onCheck(id, event.target.checked)
+            }
+
+            const mockEvent = { 
+                stopPropagation: jest.fn(),
+                target: { checked: true }
+            }
+
+            // Normal check
+            handleCheck(mockEvent, false, mockOnCheck, 'item1')
+            expect(mockEvent.stopPropagation).toHaveBeenCalled()
+            expect(mockOnCheck).toHaveBeenCalledWith('item1', true)
+
+            mockOnCheck.mockClear()
+
+            // Disabled state
+            handleCheck(mockEvent, true, mockOnCheck, 'item1')
+            expect(mockOnCheck).not.toHaveBeenCalled()
+        })
+
+        test('generates CSS classes correctly', () => {
+            const generateClasses = (selected, disabled, isDragging, className) => {
+                return [
+                    'tree-item',
+                    'final',
+                    selected && 'selected',
+                    disabled && 'tree-item--disabled',
+                    isDragging && 'tree-item--dragging',
+                    className
+                ].filter(Boolean).join(' ')
+            }
+
+            expect(generateClasses(false, false, false, ''))
+                .toBe('tree-item final')
+            
+            expect(generateClasses(true, true, true, 'custom'))
+                .toBe('tree-item final selected tree-item--disabled tree-item--dragging custom')
+        })
+
+        test('generates accessibility attributes correctly', () => {
+            const generateAriaAttributes = (selected, disabled, level, label, id) => {
+                return {
+                    'aria-selected': selected,
+                    'aria-disabled': disabled,
+                    'aria-level': level + 1,
+                    'aria-label': typeof label === 'string' ? label : `Tree item ${id || ''}`,
+                    role: 'treeitem',
+                    tabIndex: disabled ? -1 : 0
+                }
+            }
+
+            const result1 = generateAriaAttributes(true, false, 0, 'Test Item', 'item1')
+            expect(result1['aria-selected']).toBe(true)
+            expect(result1['aria-disabled']).toBe(false)
+            expect(result1['aria-level']).toBe(1)
+            expect(result1['aria-label']).toBe('Test Item')
+            expect(result1.role).toBe('treeitem')
+            expect(result1.tabIndex).toBe(0)
+
+            const result2 = generateAriaAttributes(false, true, 1, null, 'item2')
+            expect(result2['aria-selected']).toBe(false)
+            expect(result2['aria-disabled']).toBe(true)
+            expect(result2['aria-level']).toBe(2)
+            expect(result2['aria-label']).toBe('Tree item item2')
+            expect(result2.tabIndex).toBe(-1)
+        })
+    })
+})