✨ feat(vscode): 代码阅读卡片横排多个概念图标

vscode/webview-ui/src/codeReader/kindIcons.test.tsx

@@ -1,10 +1,15 @@
-import type { BlockView, KindIconName } from './types'
+import type { BlockConcept, KindIconName } from './types'
 import { renderToStaticMarkup } from 'react-dom/server'
 import { describe, expect, it } from 'vitest'
-import { KIND_ICON_COMPONENTS, KIND_ICONS, KindIcon } from './kindIcons'
+import { KIND_ICONS } from '../../../src/codeReader/contract'
+import { KIND_ICON_COMPONENTS, KindIcon } from './kindIcons'
 
-function render(block: Pick<BlockView, 'kind' | 'badge'>, name: string): string {
-  return renderToStaticMarkup(<KindIcon block={block} name={name} />)
+function render(concepts: readonly BlockConcept[]): string {
+  return renderToStaticMarkup(<KindIcon concepts={concepts} />)
+}
+
+function concept(id: string, label: string, icon: KindIconName, color?: BlockConcept['color']): BlockConcept {
+  return { id, label, icon, ...(color && { color }) }
 }
 
 /** 标签之间的字：图标（svg）没有字 */
@@ -49,23 +54,44 @@ describe('块的种类图标', () => {
 
   it('这组图标里每个名字画的就是 lucide 里同名的图标', () => {
     for (const name of Object.keys(KIND_ICON_COMPONENTS) as KindIconName[]) {
-      const html = render({ kind: 'sqlalchemy.table', badge: { label: name, color: { dark: '#fff', light: '#000' }, icon: name } }, name)
+      const html = render([concept(name, name, name)])
       expect(html, name).toContain(`class="lucide lucide-${name}"`)
     }
   })
 
-  it('只画图标不带字，名字在悬停提示（data-tooltip，不用原生 title）和 aria-label 里；20px 的框、16px 的图形', () => {
-    const html = render({ kind: 'function' }, '函数')
+  it('只画图标不带字，名字在悬停提示（data-tooltip，不用原生 title）里；读屏念这个名字；20px 的框、16px 的图形', () => {
+    const html = render([concept('function', '函数', 'square-function')])
     expect(visibleText(html)).toBe('')
-    expect(html).toMatch(/^<span class="cr-kind [^"]*size-5[^"]*" role="img" data-tooltip="函数" aria-label="函数"><svg/)
+    expect(html).toContain('role="img" aria-label="函数"')
+    expect(html).toContain('data-tooltip="函数"')
+    expect(html).toContain('data-kind="function"')
     expect(html).not.toContain(' title=')
     expect(html).toContain('lucide-square-function')
     expect(html).toContain('width="16" height="16"')
+    expect(html).toContain('size-5')
   })
 
-  it('库规则的卡片用规则给的图标，名字是规则给的', () => {
-    const html = render({ kind: 'sqlalchemy.table', badge: { label: '数据表', color: { dark: '#e8a860', light: '#a3590d' }, icon: 'database' } }, '数据表')
-    expect(html).toContain('lucide-database')
-    expect(html).toContain('data-tooltip="数据表" aria-label="数据表"')
+  it('认到几个就横排几个：悬停各自的名字，读屏把名字连起来念；规则的图标用规则给的颜色', () => {
+    const html = render([
+      concept('class', '类', 'box'),
+      concept('dataclasses.dataclass', '数据类', 'package', { dark: '#ef7fb0', light: '#b3306c' }),
+      concept('dataclasses.frozen', '不可修改', 'lock', { dark: '#9cdcfe', light: '#001080' }),
+    ])
+    expect(visibleText(html)).toBe('')
+    expect(html).toContain('aria-label="类，数据类，不可修改"')
+    expect(html).toContain('data-tooltip="类"')
+    expect(html).toContain('data-tooltip="数据类"')
+    expect(html).toContain('data-tooltip="不可修改"')
+    expect(html).toContain('data-kind="class"')
+    expect(html).toContain('lucide-box')
+    expect(html).toContain('lucide-package')
+    expect(html).toContain('lucide-lock')
+    expect(html).toContain('--kind-dark:#ef7fb0')
+    expect(html).toContain('--kind-light:#b3306c')
+    expect(html).toContain('--kind-dark:#9cdcfe')
+    expect(html).toContain('--kind-light:#001080')
+    expect(html).not.toContain(' title=')
+    expect(html.match(/size-5/g)).toHaveLength(3)
+    expect(html).toContain('gap-0.5')
   })
 })