sparkdesign 0.0.1 → 0.1.10

package/registry/__tests__/chat/markdown.test.tsx

@@ -0,0 +1,387 @@
+import { describe, it, expect } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import { MarkdownBody } from '../../chat/markdown'
+
+describe('MarkdownBody', () => {
+  // ============================================================
+  // 基础渲染测试
+  // ============================================================
+  describe('基础渲染', () => {
+    it('应正确渲染组件', () => {
+      const { container } = render(<MarkdownBody>Hello World</MarkdownBody>)
+      expect(container.firstChild).toBeInTheDocument()
+    })
+
+    it('应设置正确的 displayName', () => {
+      expect(MarkdownBody.displayName).toBe('MarkdownBody')
+    })
+
+    it('应渲染普通文本', () => {
+      render(<MarkdownBody>Simple text content</MarkdownBody>)
+      expect(screen.getByText('Simple text content')).toBeInTheDocument()
+    })
+  })
+
+  // ============================================================
+  // 段落渲染测试
+  // ============================================================
+  describe('段落 (p)', () => {
+    it('应渲染段落为 p 元素', () => {
+      const { container } = render(<MarkdownBody>A paragraph</MarkdownBody>)
+      expect(container.querySelector('p')).toBeInTheDocument()
+    })
+
+    it('段落应有正确的样式类', () => {
+      const { container } = render(<MarkdownBody>Styled paragraph</MarkdownBody>)
+      const p = container.querySelector('p')
+      expect(p).toHaveClass('text-sm')
+      expect(p).toHaveClass('text-text')
+    })
+  })
+
+  // ============================================================
+  // 标题渲染测试
+  // ============================================================
+  describe('标题 (h1-h6)', () => {
+    it('应渲染 h1 标题', () => {
+      const { container } = render(<MarkdownBody># Heading 1</MarkdownBody>)
+      const h1 = container.querySelector('h1')
+      expect(h1).toBeInTheDocument()
+      expect(h1).toHaveTextContent('Heading 1')
+    })
+
+    it('应渲染 h2 标题', () => {
+      const { container } = render(<MarkdownBody>## Heading 2</MarkdownBody>)
+      const h2 = container.querySelector('h2')
+      expect(h2).toBeInTheDocument()
+      expect(h2).toHaveTextContent('Heading 2')
+    })
+
+    it('应渲染 h3 标题', () => {
+      const { container } = render(<MarkdownBody>### Heading 3</MarkdownBody>)
+      const h3 = container.querySelector('h3')
+      expect(h3).toBeInTheDocument()
+    })
+
+    it('h1 应有正确的样式', () => {
+      const { container } = render(<MarkdownBody># Title</MarkdownBody>)
+      const h1 = container.querySelector('h1')
+      expect(h1).toHaveClass('text-4xl')
+      expect(h1).toHaveClass('font-medium')
+    })
+
+    it('h2 应有边框样式', () => {
+      const { container } = render(<MarkdownBody>## Section</MarkdownBody>)
+      const h2 = container.querySelector('h2')
+      expect(h2).toHaveClass('border-b')
+    })
+  })
+
+  // ============================================================
+  // 列表渲染测试
+  // ============================================================
+  describe('列表 (ul/ol)', () => {
+    it('应渲染无序列表', () => {
+      const { container } = render(
+        <MarkdownBody>{`- Item 1\n- Item 2\n- Item 3`}</MarkdownBody>
+      )
+      const ul = container.querySelector('ul')
+      expect(ul).toBeInTheDocument()
+      expect(ul).toHaveClass('list-disc')
+    })
+
+    it('应渲染有序列表', () => {
+      const { container } = render(
+        <MarkdownBody>{`1. First\n2. Second\n3. Third`}</MarkdownBody>
+      )
+      const ol = container.querySelector('ol')
+      expect(ol).toBeInTheDocument()
+      expect(ol).toHaveClass('list-decimal')
+    })
+
+    it('列表项应正确渲染', () => {
+      const { container } = render(
+        <MarkdownBody>{`- Apple\n- Banana`}</MarkdownBody>
+      )
+      const items = container.querySelectorAll('li')
+      expect(items).toHaveLength(2)
+    })
+  })
+
+  // ============================================================
+  // 代码渲染测试
+  // ============================================================
+  describe('代码 (code/pre)', () => {
+    it('应渲染行内代码', () => {
+      const { container } = render(
+        <MarkdownBody>Use `npm install` to install</MarkdownBody>
+      )
+      const code = container.querySelector('code')
+      expect(code).toBeInTheDocument()
+      expect(code).toHaveTextContent('npm install')
+    })
+
+    it('行内代码应有背景样式', () => {
+      const { container } = render(
+        <MarkdownBody>Run `test` command</MarkdownBody>
+      )
+      const code = container.querySelector('code')
+      expect(code).toHaveClass('bg-fill-tertiary')
+      expect(code).toHaveClass('rounded')
+    })
+
+    it('应渲染代码块', () => {
+      const { container } = render(
+        <MarkdownBody>{`\`\`\`javascript\nconst x = 1;\n\`\`\``}</MarkdownBody>
+      )
+      const pre = container.querySelector('pre')
+      expect(pre).toBeInTheDocument()
+    })
+
+    it('代码块应包含在滚动容器中', () => {
+      const { container } = render(
+        <MarkdownBody>{`\`\`\`js\ncode\n\`\`\``}</MarkdownBody>
+      )
+      // Scrollbar 组件包裹
+      const scrollContainer = container.querySelector('[class*="overflow"]')
+      expect(scrollContainer).toBeInTheDocument()
+    })
+  })
+
+  // ============================================================
+  // 引用渲染测试
+  // ============================================================
+  describe('引用 (blockquote)', () => {
+    it('应渲染引用块', () => {
+      const { container } = render(
+        <MarkdownBody>{'> This is a quote'}</MarkdownBody>
+      )
+      const blockquote = container.querySelector('blockquote')
+      expect(blockquote).toBeInTheDocument()
+    })
+
+    it('引用块应有边框样式', () => {
+      const { container } = render(
+        <MarkdownBody>{'> Quote text'}</MarkdownBody>
+      )
+      const blockquote = container.querySelector('blockquote')
+      expect(blockquote).toHaveClass('border-l-2')
+      expect(blockquote).toHaveClass('italic')
+    })
+  })
+
+  // ============================================================
+  // 链接渲染测试
+  // ============================================================
+  describe('链接 (a)', () => {
+    it('应渲染链接', () => {
+      render(<MarkdownBody>[Click me](https://example.com)</MarkdownBody>)
+      const link = screen.getByRole('link')
+      expect(link).toBeInTheDocument()
+      expect(link).toHaveTextContent('Click me')
+    })
+
+    it('链接应在新标签页打开', () => {
+      render(<MarkdownBody>[Link](https://example.com)</MarkdownBody>)
+      const link = screen.getByRole('link')
+      expect(link).toHaveAttribute('target', '_blank')
+      expect(link).toHaveAttribute('rel', 'noopener noreferrer')
+    })
+
+    it('链接应有正确的 href', () => {
+      render(<MarkdownBody>[Test](https://test.com)</MarkdownBody>)
+      const link = screen.getByRole('link')
+      expect(link).toHaveAttribute('href', 'https://test.com')
+    })
+  })
+
+  // ============================================================
+  // 强调渲染测试
+  // ============================================================
+  describe('强调 (strong/em)', () => {
+    it('应渲染粗体', () => {
+      const { container } = render(
+        <MarkdownBody>**Bold text**</MarkdownBody>
+      )
+      const strong = container.querySelector('strong')
+      expect(strong).toBeInTheDocument()
+      expect(strong).toHaveTextContent('Bold text')
+    })
+
+    it('应渲染斜体', () => {
+      const { container } = render(
+        <MarkdownBody>*Italic text*</MarkdownBody>
+      )
+      const em = container.querySelector('em')
+      expect(em).toBeInTheDocument()
+      expect(em).toHaveTextContent('Italic text')
+    })
+
+    it('粗体应有正确样式', () => {
+      const { container } = render(
+        <MarkdownBody>**Strong**</MarkdownBody>
+      )
+      const strong = container.querySelector('strong')
+      expect(strong).toHaveClass('font-semibold')
+    })
+
+    it('斜体应有正确样式', () => {
+      const { container } = render(
+        <MarkdownBody>*Emphasis*</MarkdownBody>
+      )
+      const em = container.querySelector('em')
+      expect(em).toHaveClass('italic')
+    })
+  })
+
+  // ============================================================
+  // 水平线渲染测试
+  // ============================================================
+  describe('水平线 (hr)', () => {
+    it('应渲染水平线', () => {
+      const { container } = render(
+        <MarkdownBody>{`Above\n\n---\n\nBelow`}</MarkdownBody>
+      )
+      const hr = container.querySelector('hr')
+      expect(hr).toBeInTheDocument()
+    })
+  })
+
+  // ============================================================
+  // 表格渲染测试 (GFM)
+  // ============================================================
+  describe('表格 (GFM)', () => {
+    it('应渲染表格', () => {
+      const tableMarkdown = `
+| Name | Age |
+|------|-----|
+| Alice | 25 |
+| Bob | 30 |
+      `
+      const { container } = render(<MarkdownBody>{tableMarkdown}</MarkdownBody>)
+      expect(container.querySelector('table')).toBeInTheDocument()
+    })
+
+    it('应渲染表头', () => {
+      const tableMarkdown = `
+| Header1 | Header2 |
+|---------|---------|
+| Cell1 | Cell2 |
+      `
+      const { container } = render(<MarkdownBody>{tableMarkdown}</MarkdownBody>)
+      const thead = container.querySelector('thead')
+      expect(thead).toBeInTheDocument()
+    })
+
+    it('应渲染表体', () => {
+      const tableMarkdown = `
+| A | B |
+|---|---|
+| 1 | 2 |
+      `
+      const { container } = render(<MarkdownBody>{tableMarkdown}</MarkdownBody>)
+      const tbody = container.querySelector('tbody')
+      expect(tbody).toBeInTheDocument()
+    })
+
+    it('表格应在滚动容器中', () => {
+      const tableMarkdown = `
+| Col1 | Col2 |
+|------|------|
+| Data | Data |
+      `
+      const { container } = render(<MarkdownBody>{tableMarkdown}</MarkdownBody>)
+      // Scrollbar 组件包裹
+      const scrollContainer = container.querySelector('[class*="border"]')
+      expect(scrollContainer).toBeInTheDocument()
+    })
+  })
+
+  // ============================================================
+  // 任务列表测试 (GFM)
+  // ============================================================
+  describe('任务列表 (GFM)', () => {
+    it('应渲染任务列表', () => {
+      const taskList = `
+- [ ] Unchecked
+- [x] Checked
+      `
+      const { container } = render(<MarkdownBody>{taskList}</MarkdownBody>)
+      const checkboxes = container.querySelectorAll('input[type="checkbox"]')
+      expect(checkboxes.length).toBeGreaterThan(0)
+    })
+
+    it('任务列表应无圆点样式', () => {
+      const taskList = `
+- [ ] Task 1
+- [x] Task 2
+      `
+      const { container } = render(<MarkdownBody>{taskList}</MarkdownBody>)
+      const ul = container.querySelector('ul')
+      expect(ul).toHaveClass('list-none')
+    })
+  })
+
+  // ============================================================
+  // className 测试
+  // ============================================================
+  describe('className', () => {
+    it('应合并自定义 className', () => {
+      const { container } = render(
+        <MarkdownBody className="custom-markdown">Content</MarkdownBody>
+      )
+      expect(container.firstChild).toHaveClass('custom-markdown')
+    })
+
+    it('根元素应有 markdown-body 类', () => {
+      const { container } = render(
+        <MarkdownBody>Content</MarkdownBody>
+      )
+      expect(container.firstChild).toHaveClass('markdown-body')
+    })
+  })
+
+  // ============================================================
+  // 复杂内容测试
+  // ============================================================
+  describe('复杂内容', () => {
+    it('应正确渲染混合内容', () => {
+      const complexMarkdown = `
+# Title
+
+A paragraph with **bold** and *italic* text.
+
+- List item 1
+- List item 2
+
+\`\`\`js
+const x = 1;
+\`\`\`
+
+> A quote
+
+[A link](https://example.com)
+      `
+      const { container } = render(<MarkdownBody>{complexMarkdown}</MarkdownBody>)
+
+      expect(container.querySelector('h1')).toBeInTheDocument()
+      expect(container.querySelector('p')).toBeInTheDocument()
+      expect(container.querySelector('strong')).toBeInTheDocument()
+      expect(container.querySelector('em')).toBeInTheDocument()
+      expect(container.querySelector('ul')).toBeInTheDocument()
+      expect(container.querySelector('pre')).toBeInTheDocument()
+      expect(container.querySelector('blockquote')).toBeInTheDocument()
+      expect(container.querySelector('a')).toBeInTheDocument()
+    })
+
+    it('应处理空字符串', () => {
+      const { container } = render(<MarkdownBody>{''}</MarkdownBody>)
+      expect(container.firstChild).toBeInTheDocument()
+    })
+
+    it('应处理纯空白字符串', () => {
+      const { container } = render(<MarkdownBody>{'   '}</MarkdownBody>)
+      expect(container.firstChild).toBeInTheDocument()
+    })
+  })
+})

package/registry/__tests__/chat/thinking-indicator.test.tsx

@@ -0,0 +1,244 @@
+import { describe, it, expect } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import { ThinkingIndicator } from '../../chat/thinking-indicator'
+
+describe('ThinkingIndicator', () => {
+  // ============================================================
+  // 渲染测试
+  // ============================================================
+  describe('渲染', () => {
+    it('应正确渲染组件', () => {
+      const { container } = render(<ThinkingIndicator />)
+      expect(container.firstChild).toBeInTheDocument()
+    })
+
+    it('应设置正确的 displayName', () => {
+      expect(ThinkingIndicator.displayName).toBe('ThinkingIndicator')
+    })
+  })
+
+  // ============================================================
+  // 文案测试
+  // ============================================================
+  describe('text 文案', () => {
+    it('应显示默认文案 "Qoder is Thinking..."', () => {
+      render(<ThinkingIndicator />)
+      expect(screen.getByText('Qoder is Thinking...')).toBeInTheDocument()
+    })
+
+    it('应显示自定义文案', () => {
+      render(<ThinkingIndicator text="正在思考..." />)
+      expect(screen.getByText('正在思考...')).toBeInTheDocument()
+    })
+
+    it('空文案应正常渲染', () => {
+      const { container } = render(<ThinkingIndicator text="" />)
+      expect(container.firstChild).toBeInTheDocument()
+    })
+
+    it('长文案应正常渲染', () => {
+      const longText = 'AI is analyzing your complex multi-step request with deep reasoning...'
+      render(<ThinkingIndicator text={longText} />)
+      expect(screen.getByText(longText)).toBeInTheDocument()
+    })
+  })
+
+  // ============================================================
+  // Loader Slot 测试
+  // ============================================================
+  describe('loader slot', () => {
+    it('无 loader prop 时应渲染默认三点动画', () => {
+      const { container } = render(<ThinkingIndicator />)
+      expect(container.querySelector('.thinking-dots')).toBeInTheDocument()
+    })
+
+    it('默认动画应包含三个点', () => {
+      const { container } = render(<ThinkingIndicator />)
+      const dots = container.querySelectorAll('.thinking-dots span')
+      expect(dots).toHaveLength(3)
+    })
+
+    it('有 loader prop 时应渲染自定义 loader', () => {
+      render(
+        <ThinkingIndicator
+          loader={<div data-testid="custom-loader">Custom Loader</div>}
+        />
+      )
+      expect(screen.getByTestId('custom-loader')).toBeInTheDocument()
+    })
+
+    it('自定义 loader 时不应渲染默认动画', () => {
+      const { container } = render(
+        <ThinkingIndicator
+          loader={<div data-testid="custom-loader">Custom</div>}
+        />
+      )
+      expect(container.querySelector('.thinking-dots')).not.toBeInTheDocument()
+    })
+
+    it('loader 可以是复杂 React 节点', () => {
+      render(
+        <ThinkingIndicator
+          loader={
+            <div data-testid="complex-loader">
+              <span>Loading</span>
+              <span>...</span>
+            </div>
+          }
+        />
+      )
+      expect(screen.getByTestId('complex-loader')).toBeInTheDocument()
+    })
+  })
+
+  // ============================================================
+  // Shimmer 效果测试
+  // ============================================================
+  describe('shimmer 效果', () => {
+    it('默认应启用 shimmer 效果', () => {
+      render(<ThinkingIndicator text="Test" />)
+      // shimmer 使用 motion.span，在测试环境被 mock 为普通 span
+      expect(screen.getByText('Test')).toBeInTheDocument()
+    })
+
+    it('shimmer=true 时文本应有渐变样式类', () => {
+      render(<ThinkingIndicator shimmer text="Shimmer Text" />)
+      const textElement = screen.getByText('Shimmer Text')
+      expect(textElement).toHaveClass('bg-clip-text')
+      expect(textElement).toHaveClass('text-transparent')
+    })
+
+    it('shimmer=false 时应显示静态文本', () => {
+      render(<ThinkingIndicator shimmer={false} text="Static Text" />)
+      const textElement = screen.getByText('Static Text')
+      expect(textElement).toHaveClass('text-text-secondary')
+      expect(textElement).not.toHaveClass('text-transparent')
+    })
+  })
+
+  // ============================================================
+  // Shimmer 配置测试
+  // ============================================================
+  describe('shimmer 配置', () => {
+    it('应接受自定义 shimmerDuration', () => {
+      // shimmerDuration 用于动画，测试环境动画被 mock，仅验证 prop 接受
+      const { container } = render(
+        <ThinkingIndicator shimmerDuration={5} text="Custom Duration" />
+      )
+      expect(container.firstChild).toBeInTheDocument()
+    })
+
+    it('应接受自定义 shimmerSpread', () => {
+      const { container } = render(
+        <ThinkingIndicator shimmerSpread={4} text="Custom Spread" />
+      )
+      expect(container.firstChild).toBeInTheDocument()
+    })
+  })
+
+  // ============================================================
+  // textClassName 测试
+  // ============================================================
+  describe('textClassName', () => {
+    it('应将 textClassName 应用到文本元素', () => {
+      render(
+        <ThinkingIndicator text="Styled Text" textClassName="custom-text-class" />
+      )
+      const textElement = screen.getByText('Styled Text')
+      expect(textElement).toHaveClass('custom-text-class')
+    })
+
+    it('textClassName 应与默认类名共存', () => {
+      render(
+        <ThinkingIndicator
+          shimmer={false}
+          text="Mixed Classes"
+          textClassName="my-class"
+        />
+      )
+      const textElement = screen.getByText('Mixed Classes')
+      expect(textElement).toHaveClass('my-class')
+      expect(textElement).toHaveClass('text-sm')
+    })
+  })
+
+  // ============================================================
+  // className 覆盖测试
+  // ============================================================
+  describe('className', () => {
+    it('应合并自定义 className 到根元素', () => {
+      const { container } = render(
+        <ThinkingIndicator className="custom-root-class" />
+      )
+      expect(container.firstChild).toHaveClass('custom-root-class')
+    })
+
+    it('自定义 className 应与默认布局类共存', () => {
+      const { container } = render(
+        <ThinkingIndicator className="my-indicator" />
+      )
+      expect(container.firstChild).toHaveClass('my-indicator')
+      expect(container.firstChild).toHaveClass('inline-flex')
+      expect(container.firstChild).toHaveClass('items-center')
+    })
+  })
+
+  // ============================================================
+  // 原生属性透传测试
+  // ============================================================
+  describe('原生属性透传', () => {
+    it('应透传 data-* 属性', () => {
+      render(<ThinkingIndicator data-testid="thinking" />)
+      expect(screen.getByTestId('thinking')).toBeInTheDocument()
+    })
+
+    it('应透传 id 属性', () => {
+      const { container } = render(<ThinkingIndicator id="my-indicator" />)
+      expect(container.querySelector('#my-indicator')).toBeInTheDocument()
+    })
+
+    it('应透传 aria-* 属性', () => {
+      const { container } = render(
+        <ThinkingIndicator aria-label="AI is thinking" />
+      )
+      expect(container.firstChild).toHaveAttribute('aria-label', 'AI is thinking')
+    })
+  })
+
+  // ============================================================
+  // 组合场景测试
+  // ============================================================
+  describe('组合场景', () => {
+    it('应支持所有 props 组合', () => {
+      render(
+        <ThinkingIndicator
+          text="完整配置测试"
+          shimmer={true}
+          shimmerDuration={3}
+          shimmerSpread={2}
+          textClassName="text-class"
+          className="root-class"
+          data-testid="full-config"
+          loader={<span data-testid="custom-spinner">⟳</span>}
+        />
+      )
+
+      const root = screen.getByTestId('full-config')
+      expect(root).toHaveClass('root-class')
+      expect(screen.getByText('完整配置测试')).toHaveClass('text-class')
+      expect(screen.getByTestId('custom-spinner')).toBeInTheDocument()
+    })
+
+    it('shimmer=false 时 loader 仍可自定义', () => {
+      render(
+        <ThinkingIndicator
+          shimmer={false}
+          text="No Shimmer"
+          loader={<span data-testid="static-loader">●</span>}
+        />
+      )
+      expect(screen.getByTestId('static-loader')).toBeInTheDocument()
+      expect(screen.getByText('No Shimmer')).toHaveClass('text-text-secondary')
+    })
+  })
+})