ywana-core8 0.1.74 → 0.1.76

package/src/html/tab_enhanced.test.js

@@ -0,0 +1,504 @@
+import React from 'react'
+import { Tabs, Tab, Stack } from './tab'
+
+// Pruebas unitarias para los componentes Tab mejorados
+describe('Enhanced Tab Components', () => {
+    // Mock de los componentes dependientes
+    const mockIcon = jest.fn()
+    const mockText = jest.fn()
+
+    beforeEach(() => {
+        jest.clearAllMocks()
+        
+        // Mock de componentes
+        jest.doMock('./icon', () => ({ Icon: mockIcon }))
+        jest.doMock('./text', () => ({ Text: mockText }))
+        
+        // Mock de console.warn
+        jest.spyOn(console, 'warn').mockImplementation(() => {})
+        
+        // Mock de localStorage
+        const localStorageMock = {
+            getItem: jest.fn(),
+            setItem: jest.fn(),
+            removeItem: jest.fn(),
+            clear: jest.fn(),
+        }
+        global.localStorage = localStorageMock
+    })
+
+    afterEach(() => {
+        console.warn.mockRestore()
+    })
+
+    // Tabs Component Tests
+    describe('Tabs Component', () => {
+        test('component exports correctly', () => {
+            expect(Tabs).toBeDefined()
+            expect(typeof Tabs).toBe('function')
+        })
+
+        test('component has correct PropTypes', () => {
+            expect(Tabs.propTypes).toBeDefined()
+            expect(Tabs.propTypes.children).toBeDefined()
+            expect(Tabs.propTypes.selected).toBeDefined()
+            expect(Tabs.propTypes.onChange).toBeDefined()
+            expect(Tabs.propTypes.fillLeft).toBeDefined()
+            expect(Tabs.propTypes.fillRight).toBeDefined()
+            expect(Tabs.propTypes.orientation).toBeDefined()
+            expect(Tabs.propTypes.variant).toBeDefined()
+            expect(Tabs.propTypes.disabled).toBeDefined()
+            expect(Tabs.propTypes.animated).toBeDefined()
+            expect(Tabs.propTypes.persistent).toBeDefined()
+        })
+
+        test('component has correct defaultProps', () => {
+            expect(Tabs.defaultProps).toBeDefined()
+            expect(Tabs.defaultProps.fillLeft).toBe(false)
+            expect(Tabs.defaultProps.fillRight).toBe(true)
+            expect(Tabs.defaultProps.orientation).toBe('horizontal')
+            expect(Tabs.defaultProps.variant).toBe('standard')
+            expect(Tabs.defaultProps.disabled).toBe(false)
+            expect(Tabs.defaultProps.animated).toBe(true)
+            expect(Tabs.defaultProps.persistent).toBe(false)
+        })
+
+        test('warns when children is empty', () => {
+            const validateChildren = (children) => {
+                if (children && !React.Children.count(children)) {
+                    console.warn('Tabs component: children prop should contain Tab components')
+                }
+            }
+            
+            validateChildren([])
+            expect(console.warn).toHaveBeenCalledWith('Tabs component: children prop should contain Tab components')
+
+            console.warn.mockClear()
+            validateChildren(null)
+            expect(console.warn).not.toHaveBeenCalled()
+        })
+
+        test('handles selection correctly', () => {
+            const mockOnChange = jest.fn()
+            
+            const handleSelect = async (id, index, disabled, beforeChange, onChange, selected) => {
+                if (disabled) return
+
+                if (beforeChange) {
+                    try {
+                        const canChange = await beforeChange(id || index, selected)
+                        if (canChange === false) return
+                    } catch (error) {
+                        console.warn('Tabs beforeChange hook error:', error)
+                        return
+                    }
+                }
+
+                if (onChange) onChange(id || index)
+            }
+
+            // Normal selection
+            handleSelect('tab1', 0, false, null, mockOnChange, null)
+            expect(mockOnChange).toHaveBeenCalledWith('tab1')
+
+            mockOnChange.mockClear()
+
+            // Disabled state
+            handleSelect('tab1', 0, true, null, mockOnChange, null)
+            expect(mockOnChange).not.toHaveBeenCalled()
+        })
+
+        test('handles beforeChange hook correctly', async () => {
+            const mockOnChange = jest.fn()
+            const mockBeforeChange = jest.fn()
+            
+            const handleSelect = async (id, index, disabled, beforeChange, onChange, selected) => {
+                if (disabled) return
+
+                if (beforeChange) {
+                    try {
+                        const canChange = await beforeChange(id || index, selected)
+                        if (canChange === false) return
+                    } catch (error) {
+                        console.warn('Tabs beforeChange hook error:', error)
+                        return
+                    }
+                }
+
+                if (onChange) onChange(id || index)
+            }
+
+            // Allow change
+            mockBeforeChange.mockResolvedValue(true)
+            await handleSelect('tab1', 0, false, mockBeforeChange, mockOnChange, 'tab0')
+            expect(mockBeforeChange).toHaveBeenCalledWith('tab1', 'tab0')
+            expect(mockOnChange).toHaveBeenCalledWith('tab1')
+
+            mockOnChange.mockClear()
+            mockBeforeChange.mockClear()
+
+            // Prevent change
+            mockBeforeChange.mockResolvedValue(false)
+            await handleSelect('tab1', 0, false, mockBeforeChange, mockOnChange, 'tab0')
+            expect(mockBeforeChange).toHaveBeenCalledWith('tab1', 'tab0')
+            expect(mockOnChange).not.toHaveBeenCalled()
+
+            mockOnChange.mockClear()
+            mockBeforeChange.mockClear()
+
+            // Error in beforeChange
+            mockBeforeChange.mockRejectedValue(new Error('Test error'))
+            await handleSelect('tab1', 0, false, mockBeforeChange, mockOnChange, 'tab0')
+            expect(console.warn).toHaveBeenCalledWith('Tabs beforeChange hook error:', expect.any(Error))
+            expect(mockOnChange).not.toHaveBeenCalled()
+        })
+
+        test('handles keyboard navigation correctly', () => {
+            const mockHandleSelect = jest.fn()
+            const children = [
+                { props: { id: 'tab1' } },
+                { props: { id: 'tab2' } },
+                { props: { id: 'tab3' } }
+            ]
+
+            const handleKeyDown = (event, disabled, selected, notNullChildren, handleSelect) => {
+                if (disabled) return
+
+                const currentIndex = typeof selected === 'number' ? selected : 
+                    notNullChildren.findIndex(child => child.props.id === selected)
+                
+                let newIndex = currentIndex
+
+                switch (event.key) {
+                    case 'ArrowLeft':
+                    case 'ArrowUp':
+                        event.preventDefault()
+                        newIndex = currentIndex > 0 ? currentIndex - 1 : notNullChildren.length - 1
+                        break
+                    case 'ArrowRight':
+                    case 'ArrowDown':
+                        event.preventDefault()
+                        newIndex = currentIndex < notNullChildren.length - 1 ? currentIndex + 1 : 0
+                        break
+                    case 'Home':
+                        event.preventDefault()
+                        newIndex = 0
+                        break
+                    case 'End':
+                        event.preventDefault()
+                        newIndex = notNullChildren.length - 1
+                        break
+                    default:
+                        return
+                }
+
+                const targetChild = notNullChildren[newIndex]
+                if (targetChild && !targetChild.props.disabled) {
+                    handleSelect(targetChild.props.id, newIndex)
+                }
+            }
+
+            const mockEvent = { preventDefault: jest.fn() }
+
+            // Arrow right from first tab
+            handleKeyDown({ ...mockEvent, key: 'ArrowRight' }, false, 0, children, mockHandleSelect)
+            expect(mockHandleSelect).toHaveBeenCalledWith('tab2', 1)
+
+            mockHandleSelect.mockClear()
+
+            // Arrow left from last tab (wrap around)
+            handleKeyDown({ ...mockEvent, key: 'ArrowLeft' }, false, 2, children, mockHandleSelect)
+            expect(mockHandleSelect).toHaveBeenCalledWith('tab2', 1)
+
+            mockHandleSelect.mockClear()
+
+            // Home key
+            handleKeyDown({ ...mockEvent, key: 'Home' }, false, 2, children, mockHandleSelect)
+            expect(mockHandleSelect).toHaveBeenCalledWith('tab1', 0)
+
+            mockHandleSelect.mockClear()
+
+            // End key
+            handleKeyDown({ ...mockEvent, key: 'End' }, false, 0, children, mockHandleSelect)
+            expect(mockHandleSelect).toHaveBeenCalledWith('tab3', 2)
+        })
+
+        test('generates CSS classes correctly', () => {
+            const generateClasses = (orientation, variant, scrollable, centered, disabled, animated, className) => {
+                return [
+                    'tabs',
+                    `tabs--${orientation}`,
+                    `tabs--${variant}`,
+                    scrollable && 'tabs--scrollable',
+                    centered && 'tabs--centered',
+                    disabled && 'tabs--disabled',
+                    animated && 'tabs--animated',
+                    className
+                ].filter(Boolean).join(' ')
+            }
+
+            expect(generateClasses('horizontal', 'standard', false, false, false, false, ''))
+                .toBe('tabs tabs--horizontal tabs--standard')
+            
+            expect(generateClasses('vertical', 'scrollable', true, true, true, true, 'custom'))
+                .toBe('tabs tabs--vertical tabs--scrollable tabs--scrollable tabs--centered tabs--disabled tabs--animated custom')
+        })
+
+        test('generates accessibility attributes correctly', () => {
+            const generateAriaAttributes = (ariaLabel, disabled, orientation) => {
+                return {
+                    'aria-label': ariaLabel || 'Tabs',
+                    'aria-disabled': disabled,
+                    'aria-orientation': orientation,
+                    role: 'tablist'
+                }
+            }
+
+            const result1 = generateAriaAttributes(null, false, 'horizontal')
+            expect(result1['aria-label']).toBe('Tabs')
+            expect(result1['aria-disabled']).toBe(false)
+            expect(result1['aria-orientation']).toBe('horizontal')
+            expect(result1.role).toBe('tablist')
+
+            const result2 = generateAriaAttributes('Custom Tabs', true, 'vertical')
+            expect(result2['aria-label']).toBe('Custom Tabs')
+            expect(result2['aria-disabled']).toBe(true)
+            expect(result2['aria-orientation']).toBe('vertical')
+        })
+
+        test('handles persistent tabs correctly', () => {
+            const mockOnChange = jest.fn()
+
+            // Test persistence logic
+            const testPersistence = (persistent, persistKey, savedValue, currentSelected) => {
+                if (persistent && persistKey && savedValue !== null) {
+                    const parsedTab = isNaN(savedValue) ? savedValue : parseInt(savedValue)
+                    if (parsedTab !== currentSelected) {
+                        return parsedTab
+                    }
+                }
+                return currentSelected
+            }
+
+            // Test loading saved tab
+            const result1 = testPersistence(true, 'test-tabs', '2', 0)
+            expect(result1).toBe(2)
+
+            // Test no change when same tab
+            const result2 = testPersistence(true, 'test-tabs', '1', 1)
+            expect(result2).toBe(1)
+
+            // Test disabled persistence
+            const result3 = testPersistence(false, 'test-tabs', '2', 0)
+            expect(result3).toBe(0)
+
+            // Test save logic
+            const testSave = (persistent, persistKey, selected) => {
+                if (persistent && persistKey && selected !== undefined) {
+                    return `tabs-${persistKey}:${selected.toString()}`
+                }
+                return null
+            }
+
+            expect(testSave(true, 'test-tabs', 1)).toBe('tabs-test-tabs:1')
+            expect(testSave(false, 'test-tabs', 1)).toBe(null)
+        })
+    })
+
+    // Tab Component Tests
+    describe('Tab Component', () => {
+        test('component has correct PropTypes', () => {
+            expect(Tab.propTypes).toBeDefined()
+            expect(Tab.propTypes.id).toBeDefined()
+            expect(Tab.propTypes.icon).toBeDefined()
+            expect(Tab.propTypes.label).toBeDefined()
+            expect(Tab.propTypes.selected).toBeDefined()
+            expect(Tab.propTypes.disabled).toBeDefined()
+            expect(Tab.propTypes.closeable).toBeDefined()
+            expect(Tab.propTypes.badge).toBeDefined()
+        })
+
+        test('component has correct defaultProps', () => {
+            expect(Tab.defaultProps).toBeDefined()
+            expect(Tab.defaultProps.disabled).toBe(false)
+            expect(Tab.defaultProps.closeable).toBe(false)
+            expect(Tab.defaultProps.animated).toBe(true)
+        })
+
+        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, 'tab1')
+            expect(mockEvent.preventDefault).toHaveBeenCalled()
+            expect(mockOnSelect).toHaveBeenCalledWith('tab1')
+
+            mockOnSelect.mockClear()
+
+            // Disabled state
+            handleSelect(mockEvent, true, mockOnSelect, 'tab1')
+            expect(mockOnSelect).not.toHaveBeenCalled()
+        })
+
+        test('handles close correctly', () => {
+            const mockOnClose = jest.fn()
+
+            const handleClose = (event, onClose, id) => {
+                event.stopPropagation()
+                if (onClose) onClose(id)
+            }
+
+            const mockEvent = { stopPropagation: jest.fn() }
+
+            handleClose(mockEvent, mockOnClose, 'tab1')
+            expect(mockEvent.stopPropagation).toHaveBeenCalled()
+            expect(mockOnClose).toHaveBeenCalledWith('tab1')
+        })
+
+        test('handles keyboard interaction correctly', () => {
+            const mockOnSelect = jest.fn()
+            const mockOnClose = jest.fn()
+
+            const handleKeyDown = (event, disabled, onSelect, id, closeable, onClose) => {
+                if (disabled) return
+
+                switch (event.key) {
+                    case 'Enter':
+                    case ' ':
+                        event.preventDefault()
+                        if (onSelect) onSelect(id)
+                        break
+                    case 'Delete':
+                    case 'Backspace':
+                        if (closeable && onClose) {
+                            event.preventDefault()
+                            onClose(id)
+                        }
+                        break
+                    default:
+                        break
+                }
+            }
+
+            const mockEvent = { preventDefault: jest.fn() }
+
+            // Enter key
+            handleKeyDown({ ...mockEvent, key: 'Enter' }, false, mockOnSelect, 'tab1', false, null)
+            expect(mockOnSelect).toHaveBeenCalledWith('tab1')
+
+            mockOnSelect.mockClear()
+
+            // Delete key with closeable tab
+            handleKeyDown({ ...mockEvent, key: 'Delete' }, false, mockOnSelect, 'tab1', true, mockOnClose)
+            expect(mockOnClose).toHaveBeenCalledWith('tab1')
+        })
+
+        test('generates CSS classes correctly', () => {
+            const generateClasses = (selected, disabled, closeable, animated, orientation, variant, className) => {
+                return [
+                    'tab',
+                    selected && 'selected',
+                    disabled && 'tab--disabled',
+                    closeable && 'tab--closeable',
+                    animated && 'tab--animated',
+                    `tab--${orientation}`,
+                    `tab--${variant}`,
+                    className
+                ].filter(Boolean).join(' ')
+            }
+
+            expect(generateClasses(false, false, false, false, 'horizontal', 'standard', ''))
+                .toBe('tab tab--horizontal tab--standard')
+            
+            expect(generateClasses(true, true, true, true, 'vertical', 'scrollable', 'custom'))
+                .toBe('tab selected tab--disabled tab--closeable tab--animated tab--vertical tab--scrollable custom')
+        })
+
+        test('generates accessibility attributes correctly', () => {
+            const generateAriaAttributes = (selected, disabled, id, tabIndex, label) => {
+                return {
+                    'aria-selected': selected,
+                    'aria-disabled': disabled,
+                    'aria-controls': `tabpanel-${id || tabIndex}`,
+                    'aria-label': typeof label === 'string' ? label : `Tab ${(tabIndex || 0) + 1}`,
+                    role: 'tab',
+                    tabIndex: selected ? 0 : -1,
+                    id: `tab-${id || tabIndex}`
+                }
+            }
+
+            const result1 = generateAriaAttributes(true, false, 'tab1', 0, 'First Tab')
+            expect(result1['aria-selected']).toBe(true)
+            expect(result1['aria-disabled']).toBe(false)
+            expect(result1['aria-controls']).toBe('tabpanel-tab1')
+            expect(result1['aria-label']).toBe('First Tab')
+            expect(result1.role).toBe('tab')
+            expect(result1.tabIndex).toBe(0)
+            expect(result1.id).toBe('tab-tab1')
+
+            const result2 = generateAriaAttributes(false, true, null, 1, null)
+            expect(result2['aria-selected']).toBe(false)
+            expect(result2['aria-disabled']).toBe(true)
+            expect(result2['aria-label']).toBe('Tab 2')
+            expect(result2.tabIndex).toBe(-1)
+        })
+    })
+
+    // Stack Component Tests
+    describe('Stack Component', () => {
+        test('component has correct PropTypes', () => {
+            expect(Stack.propTypes).toBeDefined()
+            expect(Stack.propTypes.selected).toBeDefined()
+            expect(Stack.propTypes.children).toBeDefined()
+            expect(Stack.propTypes.lazy).toBeDefined()
+            expect(Stack.propTypes.keepMounted).toBeDefined()
+            expect(Stack.propTypes.animated).toBeDefined()
+        })
+
+        test('component has correct defaultProps', () => {
+            expect(Stack.defaultProps).toBeDefined()
+            expect(Stack.defaultProps.selected).toBe(0)
+            expect(Stack.defaultProps.lazy).toBe(false)
+            expect(Stack.defaultProps.keepMounted).toBe(false)
+            expect(Stack.defaultProps.animated).toBe(true)
+        })
+
+        test('handles lazy loading correctly', () => {
+            const handleLazyLoading = (selected, lazy, keepMounted, mountedTabs) => {
+                if (lazy || keepMounted) {
+                    return new Set([...mountedTabs, selected])
+                }
+                return mountedTabs
+            }
+
+            const initialMounted = new Set([0])
+            
+            // Add new tab to mounted set
+            const newMounted = handleLazyLoading(2, true, false, initialMounted)
+            expect(newMounted.has(0)).toBe(true)
+            expect(newMounted.has(2)).toBe(true)
+            expect(newMounted.has(1)).toBe(false)
+        })
+
+        test('generates CSS classes correctly', () => {
+            const generateClasses = (animated, className) => {
+                return [
+                    'stack',
+                    animated && 'stack--animated',
+                    className
+                ].filter(Boolean).join(' ')
+            }
+
+            expect(generateClasses(false, '')).toBe('stack')
+            expect(generateClasses(true, 'custom')).toBe('stack stack--animated custom')
+        })
+    })
+})