张翔
e78df62cd1
- 重构 Button、Card、Badge、Input、Textarea 等基础组件 - 新增 Accordion、Alert、Dialog、Dropdown、Form 等 shadcn/ui 组件 - 新增 AnimatedCounter、StatsShowcase、MetricCard 等数据展示组件 - 新增 ScrollReveal 滚动动画组件 - 重构 Toast 通知系统与 Tooltip 提示组件 - 更新设计令牌系统，对齐新品牌视觉
114 lines
4.0 KiB
TypeScript
114 lines
4.0 KiB
TypeScript
import { describe, it, expect, beforeEach, jest } from '@jest/globals';
|
||
import { render, screen } from '@testing-library/react';
|
||
import '@testing-library/jest-dom';
|
||
import { Badge } from './badge';
|
||
|
||
describe('Badge', () => {
|
||
beforeEach(() => {
|
||
jest.clearAllMocks();
|
||
});
|
||
|
||
describe('Rendering', () => {
|
||
it('should render badge with text', () => {
|
||
render(<Badge>Test Badge</Badge>);
|
||
expect(screen.getByText('Test Badge')).toBeInTheDocument();
|
||
});
|
||
|
||
it('should render as span by default', () => {
|
||
const { container } = render(<Badge>Badge</Badge>);
|
||
const badge = container.querySelector('span');
|
||
expect(badge).toBeInTheDocument();
|
||
});
|
||
|
||
it('should have data-slot attribute', () => {
|
||
const { container } = render(<Badge>Badge</Badge>);
|
||
const badge = container.querySelector('[data-slot="badge"]');
|
||
expect(badge).toBeInTheDocument();
|
||
});
|
||
});
|
||
|
||
describe('Variants', () => {
|
||
it('should render default variant', () => {
|
||
const { container } = render(<Badge>Default</Badge>);
|
||
const badge = container.querySelector('[data-variant="default"]');
|
||
expect(badge).toBeInTheDocument();
|
||
});
|
||
|
||
it('should render secondary variant', () => {
|
||
const { container } = render(<Badge variant="secondary">Secondary</Badge>);
|
||
const badge = container.querySelector('[data-variant="secondary"]');
|
||
expect(badge).toBeInTheDocument();
|
||
});
|
||
|
||
it('should render error variant', () => {
|
||
const { container } = render(<Badge variant="error">Error</Badge>);
|
||
const badge = container.querySelector('[data-variant="error"]');
|
||
expect(badge).toBeInTheDocument();
|
||
});
|
||
|
||
it('should render outline variant', () => {
|
||
const { container } = render(<Badge variant="outline">Outline</Badge>);
|
||
const badge = container.querySelector('[data-variant="outline"]');
|
||
expect(badge).toBeInTheDocument();
|
||
});
|
||
|
||
it('should render ghost variant', () => {
|
||
const { container } = render(<Badge variant="ghost">Ghost</Badge>);
|
||
const badge = container.querySelector('[data-variant="ghost"]');
|
||
expect(badge).toBeInTheDocument();
|
||
});
|
||
|
||
it('should render success variant', () => {
|
||
const { container } = render(<Badge variant="success">Success</Badge>);
|
||
const badge = container.querySelector('[data-variant="success"]');
|
||
expect(badge).toBeInTheDocument();
|
||
});
|
||
|
||
it('should render warning variant', () => {
|
||
const { container } = render(<Badge variant="warning">Warning</Badge>);
|
||
const badge = container.querySelector('[data-variant="warning"]');
|
||
expect(badge).toBeInTheDocument();
|
||
});
|
||
|
||
it('should render info variant', () => {
|
||
const { container } = render(<Badge variant="info">Info</Badge>);
|
||
const badge = container.querySelector('[data-variant="info"]');
|
||
expect(badge).toBeInTheDocument();
|
||
});
|
||
});
|
||
|
||
describe('Styling', () => {
|
||
it('should apply custom className', () => {
|
||
const { container } = render(<Badge className="custom-class">Badge</Badge>);
|
||
const badge = container.querySelector('.custom-class');
|
||
expect(badge).toBeInTheDocument();
|
||
});
|
||
|
||
it('should have rounded-full class', () => {
|
||
const { container } = render(<Badge>Badge</Badge>);
|
||
// Badge 使用 rounded-sm（shadcn/ui 规范）
|
||
const badge = container.querySelector('.rounded-sm');
|
||
expect(badge).toBeInTheDocument();
|
||
});
|
||
|
||
it('should have inline-flex class', () => {
|
||
const { container } = render(<Badge>Badge</Badge>);
|
||
const badge = container.querySelector('.inline-flex');
|
||
expect(badge).toBeInTheDocument();
|
||
});
|
||
});
|
||
|
||
describe('AsChild', () => {
|
||
it('should render as child component when asChild is true', () => {
|
||
const { container } = render(
|
||
<Badge asChild>
|
||
<button>Button Badge</button>
|
||
</Badge>
|
||
);
|
||
const button = container.querySelector('button');
|
||
expect(button).toBeInTheDocument();
|
||
expect(button).toHaveTextContent('Button Badge');
|
||
});
|
||
});
|
||
});
|