sparkdesign 0.3.0 → 0.3.2

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

@@ -0,0 +1,387 @@
+import { describe, it, expect } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import { MarkdownBody } from './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()
+    })
+  })
+})