taro-uno-ui 0.9.0-beta

package/src/components/feedback/Loading/Loading.styles.ts

@@ -0,0 +1,117 @@
+import { CSSProperties } from 'react';
+
+export const LoadingStyles: Record<string, CSSProperties | Record<string, CSSProperties>> = {
+  base: {
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: 8,
+  },
+
+  size: {
+    xs: { fontSize: '12px' },
+    sm: { fontSize: '14px' },
+    default: { fontSize: '16px' },
+    lg: { fontSize: '18px' },
+    xl: { fontSize: '20px' },
+  },
+
+  spinner: {
+    position: 'relative',
+    width: 32,
+    height: 32,
+    border: '4px solid #e5e7eb',
+    borderTop: '4px solid #3b82f6',
+    borderRadius: '50%',
+    animation: 'spin 1s linear infinite',
+  },
+
+  spinnerSize: {
+    xs: { width: 16, height: 16, borderWidth: 2 },
+    sm: { width: 24, height: 24, borderWidth: 3 },
+    default: { width: 32, height: 32, borderWidth: 4 },
+    lg: { width: 48, height: 48, borderWidth: 4 },
+    xl: { width: 64, height: 64, borderWidth: 6 },
+  },
+
+  spinnerInner: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    borderRadius: '50%',
+    animation: 'ping 1s cubic-bezier(0, 0, 0.2, 1) infinite',
+  },
+
+  dots: {
+    display: 'flex',
+    gap: 4,
+  },
+
+  dot: {
+    width: 8,
+    height: 8,
+    backgroundColor: '#3b82f6',
+    borderRadius: '50%',
+    animation: 'bounce 1.5s ease-in-out infinite',
+  },
+
+  dotSize: {
+    xs: { width: 4, height: 4 },
+    sm: { width: 6, height: 6 },
+    default: { width: 8, height: 8 },
+    lg: { width: 12, height: 12 },
+    xl: { width: 16, height: 16 },
+  },
+
+  pulseContainer: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+
+  pulse: {
+    width: 32,
+    height: 32,
+    backgroundColor: '#3b82f6',
+    borderRadius: '50%',
+    animation: 'pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite',
+  },
+
+  pulseSize: {
+    xs: { width: 16, height: 16 },
+    sm: { width: 24, height: 24 },
+    default: { width: 32, height: 32 },
+    lg: { width: 48, height: 48 },
+    xl: { width: 64, height: 64 },
+  },
+
+  bars: {
+    display: 'flex',
+    gap: 4,
+  },
+
+  bar: {
+    width: 4,
+    height: 32,
+    backgroundColor: '#3b82f6',
+    borderRadius: 2,
+    animation: 'pulse 1.5s ease-in-out infinite',
+  },
+
+  barSize: {
+    xs: { width: 2, height: 16 },
+    sm: { width: 4, height: 24 },
+    default: { width: 4, height: 32 },
+    lg: { width: 8, height: 48 },
+    xl: { width: 12, height: 64 },
+  },
+
+  text: {
+    fontSize: 14,
+    color: '#6b7280',
+    marginTop: 8,
+  },
+};

package/src/components/feedback/Loading/Loading.test.tsx

@@ -0,0 +1,534 @@
+/**
+ * Loading Component Test
+ * 测试加载指示器组件的各种功能
+ */
+
+import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest'
+import { render, screen, fireEvent, act } from '@testing-library/react'
+import { Loading } from './Loading'
+import { createTestProps, renderComponent, testAssertions } from '@/utils/test-utils'
+
+describe('Loading Component', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    vi.useFakeTimers()
+  })
+
+  afterEach(() => {
+    vi.clearAllMocks()
+    vi.useRealTimers()
+  })
+
+  describe('Rendering', () => {
+    it('should render loading with default props', () => {
+      const props = createTestProps({})
+      const { container } = renderComponent(Loading, props)
+      expect(container.firstChild).toBeInTheDocument()
+    })
+
+    it('should render loading with custom className', () => {
+      const props = createTestProps({
+        className: 'custom-loading'
+      })
+      const { container } = renderComponent(Loading, props)
+      expect(container.firstChild).toHaveClass('custom-loading')
+    })
+
+    it('should render loading with custom style', () => {
+      const props = createTestProps({
+        style: { backgroundColor: 'red' }
+      })
+      const { container } = renderComponent(Loading, props)
+      expect(container.firstChild).toHaveStyle('background-color: red')
+    })
+
+    it('should not render initially when delay > 0', () => {
+      const props = createTestProps({
+        delay: 1000
+      })
+      const { container } = renderComponent(Loading, props)
+      expect(container.firstChild).toBeNull()
+    })
+
+    it('should render after delay when delay > 0', () => {
+      const props = createTestProps({
+        delay: 1000
+      })
+      const { container } = renderComponent(Loading, props)
+
+      expect(container.firstChild).toBeNull()
+
+      act(() => {
+        vi.advanceTimersByTime(1000)
+      })
+
+      expect(container.firstChild).toBeInTheDocument()
+    })
+  })
+
+  describe('Types', () => {
+    it('should render spinner type by default', () => {
+      const props = createTestProps({})
+      const { container } = renderComponent(Loading, props)
+      expect(container.firstChild).toBeInTheDocument()
+    })
+
+    it('should render spinner type explicitly', () => {
+      const props = createTestProps({
+        type: 'spinner'
+      })
+      const { container } = renderComponent(Loading, props)
+      expect(container.firstChild).toBeInTheDocument()
+    })
+
+    it('should render dots type', () => {
+      const props = createTestProps({
+        type: 'dots'
+      })
+      const { container } = renderComponent(Loading, props)
+      expect(container.firstChild).toBeInTheDocument()
+    })
+
+    it('should render pulse type', () => {
+      const props = createTestProps({
+        type: 'pulse'
+      })
+      const { container } = renderComponent(Loading, props)
+      expect(container.firstChild).toBeInTheDocument()
+    })
+
+    it('should render bars type', () => {
+      const props = createTestProps({
+        type: 'bars'
+      })
+      const { container } = renderComponent(Loading, props)
+      expect(container.firstChild).toBeInTheDocument()
+    })
+
+    it('should fallback to spinner for unknown type', () => {
+      const props = createTestProps({
+        type: 'unknown' as any
+      })
+      const { container } = renderComponent(Loading, props)
+      expect(container.firstChild).toBeInTheDocument()
+    })
+  })
+
+  describe('Sizes', () => {
+    const sizes = ['small', 'default', 'large']
+
+    sizes.forEach(size => {
+      it(`should render ${size} size`, () => {
+        const props = createTestProps({
+          size: size as any
+        })
+        const { container } = renderComponent(Loading, props)
+        expect(container.firstChild).toBeInTheDocument()
+        expect(container.firstChild).toHaveClass(`taro-uno-loading--${size}`)
+      })
+    })
+  })
+
+  describe('Text Support', () => {
+    it('should render without text by default', () => {
+      const props = createTestProps({})
+      const { container } = renderComponent(Loading, props)
+      expect(container.firstChild).toBeInTheDocument()
+      expect(container.querySelector('text')).toBeNull()
+    })
+
+    it('should render with text', () => {
+      const props = createTestProps({
+        text: 'Loading...'
+      })
+      const { container } = renderComponent(Loading, props)
+      expect(container.firstChild).toBeInTheDocument()
+      expect(container).toHaveTextContent('Loading...')
+    })
+
+    it('should render with empty text', () => {
+      const props = createTestProps({
+        text: ''
+      })
+      const { container } = renderComponent(Loading, props)
+      expect(container.firstChild).toBeInTheDocument()
+      expect(container.querySelector('text')).toBeInTheDocument()
+    })
+
+    it('should render with long text', () => {
+      const longText = 'A'.repeat(100)
+      const props = createTestProps({
+        text: longText
+      })
+      const { container } = renderComponent(Loading, props)
+      expect(container).toHaveTextContent(longText)
+    })
+  })
+
+  describe('Delay Feature', () => {
+    it('should show immediately with delay=0', () => {
+      const props = createTestProps({
+        delay: 0
+      })
+      const { container } = renderComponent(Loading, props)
+      expect(container.firstChild).toBeInTheDocument()
+    })
+
+    it('should delay showing with delay>0', () => {
+      const props = createTestProps({
+        delay: 500
+      })
+      const { container } = renderComponent(Loading, props)
+
+      expect(container.firstChild).toBeNull()
+
+      act(() => {
+        vi.advanceTimersByTime(499)
+      })
+
+      expect(container.firstChild).toBeNull()
+
+      act(() => {
+        vi.advanceTimersByTime(1)
+      })
+
+      expect(container.firstChild).toBeInTheDocument()
+    })
+
+    it('should clear timer on unmount', () => {
+      const clearTimeoutSpy = vi.spyOn(global, 'clearTimeout')
+      const props = createTestProps({
+        delay: 1000
+      })
+      const { container, unmount } = renderComponent(Loading, props)
+
+      unmount()
+
+      expect(clearTimeoutSpy).toHaveBeenCalled()
+    })
+  })
+
+  describe('Ref Methods', () => {
+    it('should provide ref methods', () => {
+      const ref = vi.fn()
+      const props = createTestProps({})
+
+      renderComponent(Loading, { ...props, ref })
+
+      expect(ref).toHaveBeenCalled()
+    })
+
+    it('should allow programmatic show/hide via ref', () => {
+      const mockRef = {
+        getElement: vi.fn(),
+        show: vi.fn(),
+        hide: vi.fn(),
+      } as any
+
+      const props = createTestProps({})
+      renderComponent(Loading, { ...props, ref: mockRef })
+
+      mockRef.show()
+      mockRef.hide()
+
+      expect(mockRef.show).toHaveBeenCalled()
+      expect(mockRef.hide).toHaveBeenCalled()
+    })
+
+    it('should control visibility via ref methods', () => {
+      const { container, rerender } = renderComponent(Loading, {
+        delay: 1000
+      })
+
+      expect(container.firstChild).toBeNull()
+
+      // Mock ref with show method
+      const mockRef = {
+        show: vi.fn(() => {
+          rerender(<Loading delay={0} />)
+        }),
+        hide: vi.fn(() => {
+          rerender(<Loading delay={999999} />)
+        }),
+      } as any
+
+      rerender(<Loading delay={1000} ref={mockRef} />)
+
+      mockRef.show()
+      expect(container.firstChild).toBeInTheDocument()
+
+      mockRef.hide()
+      expect(container.firstChild).toBeNull()
+    })
+  })
+
+  describe('Accessibility', () => {
+    it('should have proper ARIA attributes', () => {
+      const props = createTestProps({
+        text: 'Loading content'
+      })
+      const { container } = renderComponent(Loading, props)
+      expect(container.firstChild).toBeInTheDocument()
+    })
+
+    it('should be accessible with screen readers', () => {
+      const props = createTestProps({
+        text: 'Loading content'
+      })
+      const { container } = renderComponent(Loading, props)
+      const loading = container.firstChild as HTMLElement
+
+      expect(loading).toBeInTheDocument()
+    })
+  })
+
+  describe('Performance', () => {
+    it('should render efficiently', () => {
+      const props = createTestProps({})
+      const startTime = performance.now()
+
+      const { container } = renderComponent(Loading, props)
+
+      const endTime = performance.now()
+      expect(endTime - startTime).toBeLessThan(50)
+      expect(container.firstChild).toBeInTheDocument()
+    })
+
+    it('should handle multiple renders efficiently', () => {
+      const props = createTestProps({})
+      let renderCount = 0
+
+      const TestComponent = () => {
+        renderCount++
+        return <Loading {...props} />
+      }
+
+      const { rerender } = renderComponent(TestComponent, {})
+      rerender(<TestComponent />)
+
+      expect(renderCount).toBeLessThan(5)
+    })
+
+    it('should handle complex animations efficiently', () => {
+      const props = createTestProps({
+        type: 'bars',
+        size: 'large'
+      })
+      const startTime = performance.now()
+
+      const { container } = renderComponent(Loading, props)
+
+      const endTime = performance.now()
+      expect(endTime - startTime).toBeLessThan(50)
+      expect(container.firstChild).toBeInTheDocument()
+    })
+  })
+
+  describe('Edge Cases', () => {
+    it('should handle negative delay', () => {
+      const props = createTestProps({
+        delay: -100
+      })
+      const { container } = renderComponent(Loading, props)
+      expect(container.firstChild).toBeInTheDocument()
+    })
+
+    it('should handle zero delay', () => {
+      const props = createTestProps({
+        delay: 0
+      })
+      const { container } = renderComponent(Loading, props)
+      expect(container.firstChild).toBeInTheDocument()
+    })
+
+    it('should handle very large delay', () => {
+      const props = createTestProps({
+        delay: 999999
+      })
+      const { container } = renderComponent(Loading, props)
+      expect(container.firstChild).toBeNull()
+    })
+
+    it('should handle delay change', () => {
+      const { container, rerender } = renderComponent(Loading, {
+        delay: 1000
+      })
+
+      expect(container.firstChild).toBeNull()
+
+      rerender(<Loading delay={0} />)
+      expect(container.firstChild).toBeInTheDocument()
+    })
+
+    it('should handle type change', () => {
+      const { container, rerender } = renderComponent(Loading, {
+        type: 'spinner'
+      })
+
+      expect(container.firstChild).toBeInTheDocument()
+
+      rerender(<Loading type="dots" />)
+      expect(container.firstChild).toBeInTheDocument()
+
+      rerender(<Loading type="pulse" />)
+      expect(container.firstChild).toBeInTheDocument()
+
+      rerender(<Loading type="bars" />)
+      expect(container.firstChild).toBeInTheDocument()
+    })
+
+    it('should handle size change', () => {
+      const { container, rerender } = renderComponent(Loading, {
+        size: 'small'
+      })
+
+      expect(container.firstChild).toHaveClass('taro-uno-loading--small')
+
+      rerender(<Loading size="default" />)
+      expect(container.firstChild).toHaveClass('taro-uno-loading--default')
+
+      rerender(<Loading size="large" />)
+      expect(container.firstChild).toHaveClass('taro-uno-loading--large')
+    })
+  })
+
+  describe('Animation Handling', () => {
+    it('should handle spinner animation', () => {
+      const props = createTestProps({
+        type: 'spinner'
+      })
+      const { container } = renderComponent(Loading, props)
+      expect(container.firstChild).toBeInTheDocument()
+    })
+
+    it('should handle dots animation delays', () => {
+      const props = createTestProps({
+        type: 'dots'
+      })
+      const { container } = renderComponent(Loading, props)
+      expect(container.firstChild).toBeInTheDocument()
+    })
+
+    it('should handle bars animation delays', () => {
+      const props = createTestProps({
+        type: 'bars'
+      })
+      const { container } = renderComponent(Loading, props)
+      expect(container.firstChild).toBeInTheDocument()
+    })
+
+    it('should handle pulse animation', () => {
+      const props = createTestProps({
+        type: 'pulse'
+      })
+      const { container } = renderComponent(Loading, props)
+      expect(container.firstChild).toBeInTheDocument()
+    })
+  })
+
+  describe('State Management', () => {
+    it('should maintain visibility state correctly', () => {
+      const { container, rerender } = renderComponent(Loading, {
+        delay: 500
+      })
+
+      expect(container.firstChild).toBeNull()
+
+      act(() => {
+        vi.advanceTimersByTime(500)
+      })
+
+      expect(container.firstChild).toBeInTheDocument()
+
+      // Change delay back to large value
+      rerender(<Loading delay={999999} />)
+      expect(container.firstChild).toBeNull()
+    })
+
+    it('should reset timer when delay changes', () => {
+      const { container, rerender } = renderComponent(Loading, {
+        delay: 1000
+      })
+
+      act(() => {
+        vi.advanceTimersByTime(500)
+      })
+
+      expect(container.firstChild).toBeNull()
+
+      // Change delay to 0
+      rerender(<Loading delay={0} />)
+      expect(container.firstChild).toBeInTheDocument()
+    })
+  })
+
+  describe('CSS Classes', () => {
+    it('should have correct BEM classes', () => {
+      const props = createTestProps({
+        size: 'medium'
+      })
+      const { container } = renderComponent(Loading, props)
+      const loading = container.firstChild as HTMLElement
+
+      expect(loading).toHaveClass('taro-uno-loading')
+      expect(loading).toHaveClass('taro-uno-loading--default')
+    })
+
+    it('should handle custom className correctly', () => {
+      const props = createTestProps({
+        className: 'my-loading'
+      })
+      const { container } = renderComponent(Loading, props)
+      const loading = container.firstChild as HTMLElement
+
+      expect(loading).toHaveClass('taro-uno-loading')
+      expect(loading).toHaveClass('my-loading')
+    })
+  })
+
+  describe('Responsive Design', () => {
+    it('should handle different viewport sizes', () => {
+      const props = createTestProps({
+        size: 'default'
+      })
+      const { container } = renderComponent(Loading, props)
+
+      // Test different viewport sizes
+      Object.defineProperty(window, 'innerWidth', {
+        writable: true,
+        configurable: true,
+        value: 320,
+      })
+      expect(container.firstChild).toBeInTheDocument()
+
+      Object.defineProperty(window, 'innerWidth', {
+        writable: true,
+        configurable: true,
+        value: 1920,
+      })
+      expect(container.firstChild).toBeInTheDocument()
+    })
+  })
+
+  describe('Memory Management', () => {
+    it('should clean up timers properly', () => {
+      const clearTimeoutSpy = vi.spyOn(global, 'clearTimeout')
+      const { unmount } = renderComponent(Loading, {
+        delay: 1000
+      })
+
+      unmount()
+      expect(clearTimeoutSpy).toHaveBeenCalled()
+    })
+
+    it('should handle rapid unmount', () => {
+      const { unmount } = renderComponent(Loading, {
+        delay: 1000
+      })
+
+      // Rapid mount/unmount
+      unmount()
+      expect(true).toBe(true) // Should not crash
+    })
+  })
+})