taro-uno-ui 0.9.0-beta

package/src/components/display/Avatar/Avatar.test.tsx

@@ -0,0 +1,390 @@
+/**
+ * Avatar Component Test
+ * 测试头像组件的各种功能
+ */
+
+import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest'
+import { render, screen, fireEvent } from '@testing-library/react'
+import { Avatar } from './Avatar'
+import { createTestProps, renderComponent, testAssertions } from '@/utils/test-utils'
+
+describe('Avatar Component', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  afterEach(() => {
+    vi.clearAllMocks()
+  })
+
+  describe('Rendering', () => {
+    it('should render avatar with default props', () => {
+      const props = createTestProps({})
+      const { container } = renderComponent(Avatar, props)
+      expect(container.firstChild).toBeInTheDocument()
+    })
+
+    it('should render avatar with custom className', () => {
+      const props = createTestProps({
+        className: 'custom-avatar'
+      })
+      const { container } = renderComponent(Avatar, props)
+      expect(container.firstChild).toHaveClass('custom-avatar')
+    })
+
+    it('should render avatar with custom style', () => {
+      const props = createTestProps({
+        style: { backgroundColor: 'red' }
+      })
+      const { container } = renderComponent(Avatar, props)
+      expect(container.firstChild).toHaveStyle('background-color: red')
+    })
+  })
+
+  describe('Image Avatar', () => {
+    it('should render avatar with image src', () => {
+      const props = createTestProps({
+        src: 'https://example.com/avatar.jpg'
+      })
+      const { container } = renderComponent(Avatar, props)
+      const image = container.querySelector('img')
+      expect(image).toBeInTheDocument()
+      expect(image).toHaveAttribute('src', 'https://example.com/avatar.jpg')
+    })
+
+    it('should render avatar with alt text', () => {
+      const props = createTestProps({
+        alt: 'User Avatar'
+      })
+      const { container } = renderComponent(Avatar, props)
+      expect(container).toHaveTextContent('U')
+    })
+
+    it('should handle image load error', () => {
+      const consoleSpy = vi.spyOn(console, 'error')
+      const props = createTestProps({
+        src: 'invalid-image.jpg'
+      })
+      const { container } = renderComponent(Avatar, props)
+      const image = container.querySelector('img')
+
+      // 触发错误事件
+      if (image) {
+        fireEvent.error(image)
+        expect(consoleSpy).toHaveBeenCalledWith('Avatar image load error:', expect.any(Object))
+      }
+    })
+  })
+
+  describe('Text Avatar', () => {
+    it('should render avatar with children text', () => {
+      const props = createTestProps({
+        children: 'AB'
+      })
+      const { container } = renderComponent(Avatar, props)
+      expect(container).toHaveTextContent('AB')
+    })
+
+    it('should render avatar with alt text as fallback', () => {
+      const props = createTestProps({
+        alt: 'John Doe'
+      })
+      const { container } = renderComponent(Avatar, props)
+      expect(container).toHaveTextContent('J')
+    })
+
+    it('should render avatar with default fallback text', () => {
+      const props = createTestProps({})
+      const { container } = renderComponent(Avatar, props)
+      expect(container).toHaveTextContent('U')
+    })
+
+    it('should handle empty children', () => {
+      const props = createTestProps({
+        children: ''
+      })
+      const { container } = renderComponent(Avatar, props)
+      expect(container).toHaveTextContent('U')
+    })
+  })
+
+  describe('Icon Avatar', () => {
+    it('should render avatar with icon', () => {
+      const props = createTestProps({
+        icon: <span data-testid="avatar-icon">👤</span>
+      })
+      const { getByTestId } = renderComponent(Avatar, props)
+      expect(getByTestId('avatar-icon')).toBeInTheDocument()
+    })
+
+    it('should prioritize icon over text', () => {
+      const props = createTestProps({
+        icon: <span data-testid="avatar-icon">👤</span>,
+        children: 'AB'
+      })
+      const { getByTestId, container } = renderComponent(Avatar, props)
+      expect(getByTestId('avatar-icon')).toBeInTheDocument()
+      expect(container).not.toHaveTextContent('AB')
+    })
+
+    it('should prioritize icon over image', () => {
+      const props = createTestProps({
+        icon: <span data-testid="avatar-icon">👤</span>,
+        src: 'https://example.com/avatar.jpg'
+      })
+      const { getByTestId, container } = renderComponent(Avatar, props)
+      expect(getByTestId('avatar-icon')).toBeInTheDocument()
+      expect(container.querySelector('img')).not.toBeInTheDocument()
+    })
+  })
+
+  describe('Size Variations', () => {
+    it('should render small avatar', () => {
+      const props = createTestProps({
+        size: 'small'
+      })
+      const { container } = renderComponent(Avatar, props)
+      expect(container.firstChild).toHaveClass('taro-uno-avatar--size-small')
+    })
+
+    it('should render medium avatar', () => {
+      const props = createTestProps({
+        size: 'medium'
+      })
+      const { container } = renderComponent(Avatar, props)
+      expect(container.firstChild).toHaveClass('taro-uno-avatar--size-medium')
+    })
+
+    it('should render large avatar', () => {
+      const props = createTestProps({
+        size: 'large'
+      })
+      const { container } = renderComponent(Avatar, props)
+      expect(container.firstChild).toHaveClass('taro-uno-avatar--size-large')
+    })
+
+    it('should render avatar with custom numeric size', () => {
+      const props = createTestProps({
+        size: 64
+      })
+      const { container } = renderComponent(Avatar, props)
+      expect(container.firstChild).toHaveStyle(expect.stringContaining('64px'))
+    })
+  })
+
+  describe('Shape Variations', () => {
+    it('should render circle avatar', () => {
+      const props = createTestProps({
+        shape: 'circle'
+      })
+      const { container } = renderComponent(Avatar, props)
+      expect(container.firstChild).toHaveClass('taro-uno-avatar--shape-circle')
+    })
+
+    it('should render square avatar', () => {
+      const props = createTestProps({
+        shape: 'square'
+      })
+      const { container } = renderComponent(Avatar, props)
+      expect(container.firstChild).toHaveClass('taro-uno-avatar--shape-square')
+    })
+  })
+
+  describe('Events', () => {
+    it('should call onClick when clicked', () => {
+      const handleClick = vi.fn()
+      const props = createTestProps({
+        onClick: handleClick
+      })
+      const { container } = renderComponent(Avatar, props)
+
+      fireEvent.click(container.firstChild as HTMLElement)
+      expect(handleClick).toHaveBeenCalledTimes(1)
+    })
+
+    it('should pass click event details', () => {
+      const handleClick = vi.fn()
+      const props = createTestProps({
+        onClick: handleClick
+      })
+      const { container } = renderComponent(Avatar, props)
+
+      const mockEvent = new MouseEvent('click', { bubbles: true })
+      fireEvent.click(container.firstChild as HTMLElement, mockEvent)
+      expect(handleClick).toHaveBeenCalledWith(mockEvent)
+    })
+  })
+
+  describe('Accessibility', () => {
+    it('should have proper ARIA attributes', () => {
+      const props = createTestProps({
+        alt: 'User Avatar'
+      })
+      const { container } = renderComponent(Avatar, props)
+      const avatar = container.firstChild as HTMLElement
+      expect(avatar).toBeInTheDocument()
+    })
+
+    it('should be keyboard accessible', () => {
+      const handleClick = vi.fn()
+      const props = createTestProps({
+        onClick: handleClick
+      })
+      const { container } = renderComponent(Avatar, props)
+      const avatar = container.firstChild as HTMLElement
+
+      avatar.focus()
+      fireEvent.keyDown(avatar, { key: 'Enter' })
+      fireEvent.keyDown(avatar, { key: ' ' })
+
+      expect(handleClick).toHaveBeenCalledTimes(2)
+    })
+  })
+
+  describe('Responsive Design', () => {
+    it('should handle different viewport sizes', () => {
+      const props = createTestProps({
+        size: 'medium'
+      })
+      const { container } = renderComponent(Avatar, props)
+
+      // 测试不同视口大小
+      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('Performance', () => {
+    it('should render efficiently', () => {
+      const props = createTestProps({})
+      const startTime = performance.now()
+
+      const { container } = renderComponent(Avatar, props)
+
+      const endTime = performance.now()
+      expect(endTime - startTime).toBeLessThan(50) // 渲染时间小于50ms
+      expect(container.firstChild).toBeInTheDocument()
+    })
+
+    it('should handle multiple renders efficiently', () => {
+      const props = createTestProps({})
+      let renderCount = 0
+
+      const TestComponent = () => {
+        renderCount++
+        return <Avatar {...props} />
+      }
+
+      const { rerender } = renderComponent(TestComponent, {})
+      rerender(<TestComponent />)
+
+      expect(renderCount).toBeLessThan(5) // 避免过度渲染
+    })
+  })
+
+  describe('Edge Cases', () => {
+    it('should handle very long alt text', () => {
+      const longText = 'A'.repeat(1000)
+      const props = createTestProps({
+        alt: longText
+      })
+      const { container } = renderComponent(Avatar, props)
+      expect(container).toHaveTextContent('A')
+    })
+
+    it('should handle special characters in children', () => {
+      const props = createTestProps({
+        children: '@#$%'
+      })
+      const { container } = renderComponent(Avatar, props)
+      expect(container).toHaveTextContent('@#$%')
+    })
+
+    it('should handle null/undefined src', () => {
+      const props = createTestProps({
+        src: null
+      })
+      const { container } = renderComponent(Avatar, props)
+      expect(container).toHaveTextContent('U')
+    })
+
+    it('should handle empty string src', () => {
+      const props = createTestProps({
+        src: ''
+      })
+      const { container } = renderComponent(Avatar, props)
+      expect(container).toHaveTextContent('U')
+    })
+  })
+
+  describe('CSS Classes', () => {
+    it('should have correct BEM classes', () => {
+      const props = createTestProps({
+        size: 'medium',
+        shape: 'circle'
+      })
+      const { container } = renderComponent(Avatar, props)
+      const avatar = container.firstChild as HTMLElement
+
+      expect(avatar).toHaveClass('taro-uno-avatar')
+      expect(avatar).toHaveClass('taro-uno-avatar--size-medium')
+      expect(avatar).toHaveClass('taro-uno-avatar--shape-circle')
+    })
+
+    it('should handle custom className correctly', () => {
+      const props = createTestProps({
+        className: 'my-avatar'
+      })
+      const { container } = renderComponent(Avatar, props)
+      const avatar = container.firstChild as HTMLElement
+
+      expect(avatar).toHaveClass('taro-uno-avatar')
+      expect(avatar).toHaveClass('my-avatar')
+    })
+  })
+
+  describe('Content Priority', () => {
+    it('should prioritize src over children and alt', () => {
+      const props = createTestProps({
+        src: 'https://example.com/avatar.jpg',
+        children: 'AB',
+        alt: 'John Doe'
+      })
+      const { container } = renderComponent(Avatar, props)
+      expect(container.querySelector('img')).toBeInTheDocument()
+      expect(container).not.toHaveTextContent('AB')
+    })
+
+    it('should prioritize icon over children and alt', () => {
+      const props = createTestProps({
+        icon: <span data-testid="avatar-icon">👤</span>,
+        children: 'AB',
+        alt: 'John Doe'
+      })
+      const { getByTestId, container } = renderComponent(Avatar, props)
+      expect(getByTestId('avatar-icon')).toBeInTheDocument()
+      expect(container).not.toHaveTextContent('AB')
+    })
+
+    it('should prioritize children over alt', () => {
+      const props = createTestProps({
+        children: 'AB',
+        alt: 'John Doe'
+      })
+      const { container } = renderComponent(Avatar, props)
+      expect(container).toHaveTextContent('AB')
+      expect(container).not.toHaveTextContent('J')
+    })
+  })
+})

package/src/components/display/Avatar/Avatar.tsx

@@ -0,0 +1,79 @@
+import { forwardRef } from 'react';
+import { View, Image, Text } from '@tarojs/components';
+import { createNamespace } from '@/utils/createNamespace';
+import type { AvatarProps, AvatarRef } from './Avatar.types';
+import { avatarStyles } from './Avatar.styles';
+
+const { bem } = createNamespace('avatar');
+
+export const Avatar = forwardRef<AvatarRef, AvatarProps>((props, ref) => {
+  const {
+    src,
+    alt,
+    size = 'medium',
+    shape = 'circle',
+    icon,
+    children,
+    style,
+    className,
+    onClick,
+    ...rest
+  } = props;
+
+  const handleClick = (event: any) => {
+    onClick?.(event);
+  };
+
+  const getAvatarContent = () => {
+    if (src) {
+      return (
+        <Image
+          src={src}
+          className={bem('image')}
+          mode="aspectFill"
+          onError={(e) => {
+            console.error('Avatar image load error:', e);
+          }}
+        />
+      );
+    }
+
+    if (icon) {
+      return <View className={bem('icon')}>{icon}</View>;
+    }
+
+    if (children) {
+      return (
+        <Text className={bem('text')}>
+          {children}
+        </Text>
+      );
+    }
+
+    return (
+      <Text className={bem('text')}>
+        {String(alt || 'U').charAt(0).toUpperCase()}
+      </Text>
+    );
+  };
+
+  return (
+    <View
+      ref={ref}
+      className={`${bem()} ${bem('size-' + size)} ${bem('shape-' + shape)} ${className || ''}`.trim()}
+      style={{
+        ...avatarStyles[size],
+        ...avatarStyles[shape],
+        ...style,
+      }}
+      onClick={handleClick}
+      {...rest}
+    >
+      {getAvatarContent()}
+    </View>
+  );
+});
+
+Avatar.displayName = 'Avatar';
+
+export default Avatar;

package/src/components/display/Avatar/Avatar.types.ts

@@ -0,0 +1,40 @@
+import type { CSSProperties } from 'react';
+
+export interface AvatarProps {
+  /** 头像图片地址 */
+  src?: string;
+  /** 图片无法显示时的替代文本 */
+  alt?: string;
+  /** 头像大小 */
+  size?: 'small' | 'medium' | 'large' | number;
+  /** 头像形状 */
+  shape?: 'circle' | 'square';
+  /** 头像图标 */
+  icon?: React.ReactNode;
+  /** 子节点（通常用于文字头像） */
+  children?: React.ReactNode;
+  /** 自定义样式 */
+  style?: CSSProperties;
+  /** 自定义类名 */
+  className?: string;
+  /** 点击事件 */
+  onClick?: (_event: any) => void;
+}
+
+export interface AvatarRef {
+  /** DOM 元素 */
+  element: any;
+  /** 获取头像尺寸 */
+  getSize: () => number;
+  /** 获取头像形状 */
+  getShape: () => 'circle' | 'square';
+  /** 检查是否有图片 */
+  hasImage: () => boolean;
+  /** 检查是否有图标 */
+  hasIcon: () => boolean;
+  /** 检查是否有文字 */
+  hasText: () => boolean;
+}
+
+export type AvatarSize = 'small' | 'medium' | 'large' | number;
+export type AvatarShape = 'circle' | 'square';

package/src/components/display/Avatar/index.ts

@@ -0,0 +1,3 @@
+export { Avatar } from './Avatar';
+export type { AvatarProps, AvatarRef, AvatarSize, AvatarShape } from './Avatar.types';
+export { avatarStyles } from './Avatar.styles';

package/src/components/display/Badge/Badge.tsx

@@ -0,0 +1,42 @@
+import { forwardRef } from 'react';
+import { View, Text } from '@tarojs/components';
+import { createNamespace } from '@/utils/createNamespace';
+import type { BadgeProps, BadgeRef } from './Badge.types';
+
+const { bem } = createNamespace('badge');
+
+export const Badge = forwardRef<BadgeRef, BadgeProps>((props, ref) => {
+  const {
+    count,
+    dot = false,
+    overflowCount = 99,
+    showZero = false,
+    children,
+    style,
+    className,
+    ...rest
+  } = props;
+
+  const displayCount = count !== undefined && count > overflowCount ? `${overflowCount}+` : count;
+
+  const shouldShowBadge = dot || (count !== undefined && (count > 0 || showZero));
+
+  return (
+    <View ref={ref} className={`${bem('wrapper')} ${className || ''}`.trim()} style={style} {...rest}>
+      {children}
+      {shouldShowBadge && (
+        <View className={`${bem('badge')} ${dot ? bem('dot') : ''}`.trim()}>
+          {dot ? null : (
+            <Text className={bem('count')}>
+              {displayCount}
+            </Text>
+          )}
+        </View>
+      )}
+    </View>
+  );
+});
+
+Badge.displayName = 'Badge';
+
+export default Badge;

package/src/components/display/Badge/Badge.types.ts

@@ -0,0 +1,29 @@
+import type { CSSProperties, ReactNode } from 'react';
+
+export interface BadgeProps {
+  /** 显示的数字 */
+  count?: number;
+  /** 是否显示为小红点 */
+  dot?: boolean;
+  /** 封顶的数字值 */
+  overflowCount?: number;
+  /** 当数字为 0 时是否显示 */
+  showZero?: boolean;
+  /** 子节点 */
+  children?: ReactNode;
+  /** 自定义样式 */
+  style?: CSSProperties;
+  /** 自定义类名 */
+  className?: string;
+}
+
+export interface BadgeRef {
+  /** DOM 元素 */
+  element: any;
+  /** 获取当前计数 */
+  getCount: () => number | undefined;
+  /** 检查是否为点状 */
+  isDot: () => boolean;
+  /** 检查是否显示 */
+  isVisible: () => boolean;
+}

package/src/components/display/Badge/index.ts

@@ -0,0 +1,2 @@
+export { Badge } from './Badge';
+export type { BadgeProps, BadgeRef } from './Badge.types';