♻️ refactor(vscode): 卡片里的子块只留挂在子行上、点了才展开的一种，测试假数据换掉旧 React 卡片的名字

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

@@ -12,7 +12,7 @@ vi.mock('./useOccurrences', async () => {
 })
 vi.mock('./vscode', () => ({ postMessage: () => {}, onMessage: () => () => {}, viewState: { get: () => ({ editing: [], folds: {} }), update: () => {} } }))
 
-const BADGE: KindBadge = { label: 'React 组件', color: { dark: '#61dafb', light: '#0a7ea4' }, icon: 'atom' }
+const BADGE: KindBadge = { label: '卡片', color: { dark: '#61dafb', light: '#0a7ea4' }, icon: 'box' }
 
 function view(id: string, kind: string, text: string, extra: Partial<BlockView> = {}): BlockView {
   const badge = extra.badge
@@ -32,23 +32,21 @@ function view(id: string, kind: string, text: string, extra: Partial<BlockView>
   } as BlockView
 }
 
-/** 一张组件卡片：第 1 行下面放着一个副作用，第 2 行的两个子行各讲一个处理函数，后面还有一个留下的注释块。 */
+/** 一张卡片：第 1 行的两个子行各挂一张子卡片，后面还有一个留下的注释块。 */
 const CARD: BlockView = {
-  ...view('0', 'react.component', ''),
+  ...view('0', 'demo.card', ''),
   badge: BADGE,
   properties: [
-    { label: '名称', value: [{ text: 'Page', role: 'function' }] },
-    { label: '副作用', value: [{ text: '1 个', role: 'hint' }] },
-    { label: '事件处理', value: [{ text: '2 个', role: 'hint' }], columns: ['名称', '绑定在', '做什么'], items: [
-      { cells: [[{ text: 'handleA', role: 'function' }], [], []] },
-      { cells: [[{ text: 'handleB', role: 'function' }], [], []] },
+    { label: '名称', value: [{ text: 'Server', role: 'type' }] },
+    { label: '方法', value: [{ text: '2 个', role: 'hint' }], columns: ['名称', '参数', '返回'], items: [
+      { cells: [[{ text: 'start', role: 'function' }], [], []] },
+      { cells: [[{ text: 'stop', role: 'function' }], [], []] },
     ] },
   ],
   children: [
-    view('0.0', 'react.effect', '滚回顶部', { slot: { row: 1 }, badge: { ...BADGE, label: '副作用', icon: 'zap' } }),
-    view('0.1', 'react.handler', '处理 A', { slot: { row: 2, item: 0 }, badge: { ...BADGE, label: '事件处理', icon: 'mouse-pointer-click' } }),
-    view('0.2', 'react.handler', '处理 B', { slot: { row: 2, item: 1 }, badge: { ...BADGE, label: '事件处理', icon: 'mouse-pointer-click' } }),
-    view('0.3', 'comment', '留下的注释'),
+    view('0.0', 'demo.method', '启动服务', { slot: { row: 1, item: 0 }, badge: { ...BADGE, label: '方法', icon: 'square-function' } }),
+    view('0.1', 'demo.method', '停止服务', { slot: { row: 1, item: 1 }, badge: { ...BADGE, label: '方法', icon: 'square-function' } }),
+    view('0.2', 'comment', '留下的注释'),
   ],
 }
 
@@ -75,28 +73,28 @@ function render(folds: Record<string, boolean>): string {
   return renderToStaticMarkup(<BlockLevel blocks={[CARD]} tree={tree} />)
 }
 
-describe('放进卡片属性表里的子块', () => {
-  it('副作用画在它那一行下面；点子行才展开的处理函数默认不画，名称是展开它的按钮；卡片收着时留下的子块不画', () => {
+describe('挂在卡片子行上的子块', () => {
+  it('默认不画，子行的名称是展开它的按钮；卡片收着时留下的子块不画', () => {
     const html = render({})
-    expect(html).toContain('滚回顶部')
-    expect(html).not.toContain('处理 A')
+    expect(html).not.toContain('启动服务')
+    expect(html).not.toContain('停止服务')
     expect(html).not.toContain('留下的注释')
-    expect(html).toContain('<button type="button" class="cr-item-toggle" aria-expanded="false" aria-label="展开handleA">')
-    // 副作用画在「副作用」那一行后面、「事件处理」那一行前面
-    expect(html.indexOf('滚回顶部')).toBeGreaterThan(html.indexOf('副作用</button>'))
-    expect(html.indexOf('滚回顶部')).toBeLessThan(html.indexOf('事件处理</button>'))
+    expect(html).toContain('<button type="button" class="cr-item-toggle" aria-expanded="false" aria-label="展开start">')
   })
 
-  it('展开一个处理函数：画在表下面，那一行标成展开、垫上它的种类色，卡片左上角的箭头收起它', () => {
-    const html = render({ 0.1: false, 0: false })
-    expect(html).toContain('处理 A')
-    expect(html).not.toContain('处理 B')
+  it('展开一张：画在表下面，那一行标成展开、垫上它的种类色，卡片左上角的箭头收起它', () => {
+    const html = render({ '0.0': false, '0': false })
+    expect(html).toContain('启动服务')
+    expect(html).not.toContain('停止服务')
     expect(html).toContain('data-open="" data-badge="" style="--kind-dark:#61dafb;--kind-light:#0a7ea4"')
     expect(html).toContain('aria-label="收起"')
     expect(html).toContain('留下的注释')
+    // 子卡片画在「方法」那一行后面
+    expect(html.indexOf('启动服务')).toBeGreaterThan(html.indexOf('方法</button>'))
   })
 
-  it('折叠放着子块的那一行：它下面的子块跟着收起', () => {
-    expect(render({ '0/p1': true })).not.toContain('滚回顶部')
+  it('折叠挂着子块的那一行：展开着的子块跟着收起', () => {
+    expect(render({ '0.0': false })).toContain('启动服务')
+    expect(render({ '0.0': false, '0/p1': true })).not.toContain('启动服务')
   })
 })