ywana-core8 0.1.103 → 0.2.1

package/src/html/progress.test.js

@@ -1,313 +0,0 @@
-import React from 'react'
-import { CircularProgress, LinearProgress, StepProgress, RadialProgress, MultiProgress } from './progress'
-
-// Pruebas unitarias para los componentes Progress mejorados
-describe('Progress Components', () => {
-    // Mock de los componentes dependientes
-    const mockIcon = jest.fn()
-
-    beforeEach(() => {
-        jest.clearAllMocks()
-        
-        // Mock del componente Icon
-        jest.doMock('./icon', () => ({
-            Icon: mockIcon
-        }))
-    })
-
-    describe('CircularProgress Component', () => {
-        test('component exports correctly', () => {
-            expect(CircularProgress).toBeDefined()
-            expect(typeof CircularProgress).toBe('function')
-        })
-
-        test('component has correct PropTypes', () => {
-            expect(CircularProgress.propTypes).toBeDefined()
-            expect(CircularProgress.propTypes.value).toBeDefined()
-            expect(CircularProgress.propTypes.max).toBeDefined()
-            expect(CircularProgress.propTypes.size).toBeDefined()
-            expect(CircularProgress.propTypes.variant).toBeDefined()
-            expect(CircularProgress.propTypes.color).toBeDefined()
-            expect(CircularProgress.propTypes.showValue).toBeDefined()
-            expect(CircularProgress.propTypes.animated).toBeDefined()
-        })
-
-        test('component has correct defaultProps', () => {
-            expect(CircularProgress.defaultProps).toBeDefined()
-            expect(CircularProgress.defaultProps.value).toBe(0)
-            expect(CircularProgress.defaultProps.max).toBe(100)
-            expect(CircularProgress.defaultProps.size).toBe('medium')
-            expect(CircularProgress.defaultProps.variant).toBe('indeterminate')
-            expect(CircularProgress.defaultProps.color).toBe('primary')
-            expect(CircularProgress.defaultProps.animated).toBe(true)
-        })
-
-        test('calculates dimensions correctly', () => {
-            const calculateDimensions = (size) => {
-                const sizes = {
-                    small: { size: 24, strokeWidth: 2 },
-                    medium: { size: 40, strokeWidth: 3 },
-                    large: { size: 56, strokeWidth: 4 },
-                    xlarge: { size: 80, strokeWidth: 5 }
-                }
-                return sizes[size] || sizes.medium
-            }
-
-            expect(calculateDimensions('small')).toEqual({ size: 24, strokeWidth: 2 })
-            expect(calculateDimensions('medium')).toEqual({ size: 40, strokeWidth: 3 })
-            expect(calculateDimensions('large')).toEqual({ size: 56, strokeWidth: 4 })
-            expect(calculateDimensions('xlarge')).toEqual({ size: 80, strokeWidth: 5 })
-            expect(calculateDimensions('invalid')).toEqual({ size: 40, strokeWidth: 3 })
-        })
-
-        test('calculates circle properties correctly', () => {
-            const calculateCircleProps = (size, thickness, value, max, variant) => {
-                const radius = (size - thickness) / 2
-                const circumference = 2 * Math.PI * radius
-                const strokeDasharray = circumference
-                const strokeDashoffset = variant === 'determinate' 
-                    ? circumference - (value / max) * circumference 
-                    : 0
-                
-                return { radius, circumference, strokeDasharray, strokeDashoffset }
-            }
-
-            const result = calculateCircleProps(40, 4, 50, 100, 'determinate')
-            expect(result.radius).toBe(18)
-            expect(result.circumference).toBeCloseTo(113.1, 1)
-            expect(result.strokeDasharray).toBeCloseTo(113.1, 1)
-            expect(result.strokeDashoffset).toBeCloseTo(56.55, 1)
-        })
-
-        test('formats display value correctly', () => {
-            const formatDisplayValue = (value, max, formatValue, variant) => {
-                if (formatValue) {
-                    return formatValue(value, max)
-                }
-                return variant === 'determinate' 
-                    ? `${Math.round((value / max) * 100)}%`
-                    : ''
-            }
-
-            expect(formatDisplayValue(50, 100, null, 'determinate')).toBe('50%')
-            expect(formatDisplayValue(33, 100, null, 'determinate')).toBe('33%')
-            expect(formatDisplayValue(50, 100, null, 'indeterminate')).toBe('')
-            
-            const customFormatter = (value, max) => `${value}/${max}`
-            expect(formatDisplayValue(50, 100, customFormatter, 'determinate')).toBe('50/100')
-        })
-
-        test('generates CSS classes correctly', () => {
-            const generateClasses = (size, variant, color, disabled, isComplete, animated, className) => {
-                return [
-                    'circular-progress',
-                    `circular-progress--${size}`,
-                    `circular-progress--${variant}`,
-                    `circular-progress--${color}`,
-                    disabled && 'circular-progress--disabled',
-                    isComplete && 'circular-progress--complete',
-                    animated && 'circular-progress--animated',
-                    className
-                ].filter(Boolean).join(' ')
-            }
-
-            expect(generateClasses('medium', 'determinate', 'primary', false, false, true, ''))
-                .toBe('circular-progress circular-progress--medium circular-progress--determinate circular-progress--primary circular-progress--animated')
-            
-            expect(generateClasses('large', 'indeterminate', 'success', true, false, false, 'custom'))
-                .toBe('circular-progress circular-progress--large circular-progress--indeterminate circular-progress--success circular-progress--disabled custom')
-        })
-    })
-
-    describe('LinearProgress Component', () => {
-        test('component exports correctly', () => {
-            expect(LinearProgress).toBeDefined()
-            expect(typeof LinearProgress).toBe('function')
-        })
-
-        test('component has correct PropTypes', () => {
-            expect(LinearProgress.propTypes).toBeDefined()
-            expect(LinearProgress.propTypes.value).toBeDefined()
-            expect(LinearProgress.propTypes.max).toBeDefined()
-            expect(LinearProgress.propTypes.variant).toBeDefined()
-            expect(LinearProgress.propTypes.color).toBeDefined()
-            expect(LinearProgress.propTypes.size).toBeDefined()
-            expect(LinearProgress.propTypes.showValue).toBeDefined()
-            expect(LinearProgress.propTypes.buffer).toBeDefined()
-            expect(LinearProgress.propTypes.striped).toBeDefined()
-        })
-
-        test('component has correct defaultProps', () => {
-            expect(LinearProgress.defaultProps).toBeDefined()
-            expect(LinearProgress.defaultProps.value).toBe(0)
-            expect(LinearProgress.defaultProps.max).toBe(100)
-            expect(LinearProgress.defaultProps.variant).toBe('determinate')
-            expect(LinearProgress.defaultProps.color).toBe('primary')
-            expect(LinearProgress.defaultProps.size).toBe('medium')
-            expect(LinearProgress.defaultProps.striped).toBe(false)
-        })
-
-        test('calculates percentages correctly', () => {
-            const calculatePercentages = (value, max, buffer) => {
-                const progressPercent = (value / max) * 100
-                const bufferPercent = buffer !== undefined ? (buffer / max) * 100 : 0
-                return { progressPercent, bufferPercent }
-            }
-
-            expect(calculatePercentages(50, 100, 75)).toEqual({ progressPercent: 50, bufferPercent: 75 })
-            expect(calculatePercentages(25, 100, undefined)).toEqual({ progressPercent: 25, bufferPercent: 0 })
-            expect(calculatePercentages(0, 100, 0)).toEqual({ progressPercent: 0, bufferPercent: 0 })
-        })
-
-        test('formats time remaining correctly', () => {
-            const formatTimeRemaining = (timeRemaining) => {
-                if (!timeRemaining) return ''
-                
-                const minutes = Math.floor(timeRemaining / 60)
-                const seconds = Math.floor(timeRemaining % 60)
-                
-                if (minutes > 0) {
-                    return `${minutes}m ${seconds}s remaining`
-                }
-                return `${seconds}s remaining`
-            }
-
-            expect(formatTimeRemaining(null)).toBe('')
-            expect(formatTimeRemaining(30)).toBe('30s remaining')
-            expect(formatTimeRemaining(90)).toBe('1m 30s remaining')
-            expect(formatTimeRemaining(125)).toBe('2m 5s remaining')
-        })
-    })
-
-    describe('StepProgress Component', () => {
-        test('component exports correctly', () => {
-            expect(StepProgress).toBeDefined()
-            expect(typeof StepProgress).toBe('function')
-        })
-
-        test('component has correct PropTypes', () => {
-            expect(StepProgress.propTypes).toBeDefined()
-            expect(StepProgress.propTypes.steps).toBeDefined()
-            expect(StepProgress.propTypes.currentStep).toBeDefined()
-            expect(StepProgress.propTypes.variant).toBeDefined()
-            expect(StepProgress.propTypes.allowClickNavigation).toBeDefined()
-        })
-
-        test('determines step states correctly', () => {
-            const determineStepState = (stepIndex, currentStep) => {
-                return {
-                    isCompleted: stepIndex < currentStep,
-                    isCurrent: stepIndex === currentStep,
-                    isClickable: stepIndex <= currentStep
-                }
-            }
-
-            expect(determineStepState(0, 2)).toEqual({ isCompleted: true, isCurrent: false, isClickable: true })
-            expect(determineStepState(2, 2)).toEqual({ isCompleted: false, isCurrent: true, isClickable: true })
-            expect(determineStepState(3, 2)).toEqual({ isCompleted: false, isCurrent: false, isClickable: false })
-        })
-    })
-
-    describe('RadialProgress Component', () => {
-        test('component exports correctly', () => {
-            expect(RadialProgress).toBeDefined()
-            expect(typeof RadialProgress).toBe('function')
-        })
-
-        test('component has correct PropTypes', () => {
-            expect(RadialProgress.propTypes).toBeDefined()
-            expect(RadialProgress.propTypes.value).toBeDefined()
-            expect(RadialProgress.propTypes.size).toBeDefined()
-            expect(RadialProgress.propTypes.thickness).toBeDefined()
-            expect(RadialProgress.propTypes.gradient).toBeDefined()
-        })
-
-        test('calculates circle properties correctly', () => {
-            const calculateRadialProps = (size, thickness, value, max) => {
-                const radius = (size - thickness) / 2
-                const circumference = 2 * Math.PI * radius
-                const strokeDasharray = circumference
-                const strokeDashoffset = circumference - (value / max) * circumference
-                const percentage = Math.round((value / max) * 100)
-                
-                return { radius, circumference, strokeDasharray, strokeDashoffset, percentage }
-            }
-
-            const result = calculateRadialProps(120, 8, 75, 100)
-            expect(result.radius).toBe(56)
-            expect(result.circumference).toBeCloseTo(351.86, 1)
-            expect(result.strokeDashoffset).toBeCloseTo(87.96, 1)
-            expect(result.percentage).toBe(75)
-        })
-    })
-
-    describe('MultiProgress Component', () => {
-        test('component exports correctly', () => {
-            expect(MultiProgress).toBeDefined()
-            expect(typeof MultiProgress).toBe('function')
-        })
-
-        test('component has correct PropTypes', () => {
-            expect(MultiProgress.propTypes).toBeDefined()
-            expect(MultiProgress.propTypes.items).toBeDefined()
-            expect(MultiProgress.propTypes.showLabels).toBeDefined()
-            expect(MultiProgress.propTypes.showValues).toBeDefined()
-        })
-
-        test('formats item values correctly', () => {
-            const formatItemValue = (item) => {
-                return item.formatValue ? 
-                    item.formatValue(item.value, item.max) : 
-                    `${Math.round((item.value / item.max) * 100)}%`
-            }
-
-            const item1 = { value: 50, max: 100 }
-            const item2 = { value: 75, max: 100, formatValue: (v, m) => `${v}/${m}` }
-
-            expect(formatItemValue(item1)).toBe('50%')
-            expect(formatItemValue(item2)).toBe('75/100')
-        })
-    })
-
-    describe('Accessibility', () => {
-        test('generates correct ARIA attributes', () => {
-            const generateAriaAttributes = (variant, value, max, ariaLabel) => {
-                return {
-                    'aria-label': ariaLabel || (variant === 'determinate' ? `Progress: ${Math.round((value / max) * 100)}%` : 'Loading'),
-                    'aria-valuenow': variant === 'determinate' ? value : undefined,
-                    'aria-valuemin': variant === 'determinate' ? 0 : undefined,
-                    'aria-valuemax': variant === 'determinate' ? max : undefined,
-                    'aria-valuetext': variant === 'determinate' ? `${Math.round((value / max) * 100)}%` : 'Loading',
-                    role: 'progressbar'
-                }
-            }
-
-            const result1 = generateAriaAttributes('determinate', 50, 100, null)
-            expect(result1['aria-label']).toBe('Progress: 50%')
-            expect(result1['aria-valuenow']).toBe(50)
-            expect(result1['aria-valuemin']).toBe(0)
-            expect(result1['aria-valuemax']).toBe(100)
-            expect(result1.role).toBe('progressbar')
-
-            const result2 = generateAriaAttributes('indeterminate', 0, 100, 'Custom loading')
-            expect(result2['aria-label']).toBe('Custom loading')
-            expect(result2['aria-valuenow']).toBeUndefined()
-            expect(result2['aria-valuetext']).toBe('Loading')
-        })
-    })
-
-    describe('Animation Logic', () => {
-        test('calculates easing functions correctly', () => {
-            const easeOutQuart = (progress) => 1 - Math.pow(1 - progress, 4)
-            const easeOutCubic = (progress) => 1 - Math.pow(1 - progress, 3)
-
-            expect(easeOutQuart(0)).toBe(0)
-            expect(easeOutQuart(1)).toBe(1)
-            expect(easeOutQuart(0.5)).toBeCloseTo(0.9375, 4)
-
-            expect(easeOutCubic(0)).toBe(0)
-            expect(easeOutCubic(1)).toBe(1)
-            expect(easeOutCubic(0.5)).toBeCloseTo(0.875, 3)
-        })
-    })
-})