100 lines
4.3 KiB
TypeScript
100 lines
4.3 KiB
TypeScript
import type { BlockTreeState } from './BlockTree'
|
|
import type { BlockView, KindBadge } from './types'
|
|
import { renderToStaticMarkup } from 'react-dom/server'
|
|
import { describe, expect, it, vi } from 'vitest'
|
|
import { BlockLevel } from './BlockTree'
|
|
import { collapsedIds } from './viewState'
|
|
|
|
// 高亮的上下文所在的模块、编辑框都连着和 VS Code 收发消息的那一套，渲染成 HTML 用不着
|
|
vi.mock('./useOccurrences', async () => {
|
|
const { createContext } = await import('react')
|
|
return { HighlightContext: createContext(undefined) }
|
|
})
|
|
vi.mock('./vscode', () => ({ postMessage: () => {}, onMessage: () => () => {}, viewState: { get: () => ({ editing: [], folds: {} }), update: () => {} } }))
|
|
|
|
const BADGE: KindBadge = { label: 'React 组件', color: { dark: '#61dafb', light: '#0a7ea4' }, icon: 'atom' }
|
|
|
|
function view(id: string, kind: string, text: string, extra: Partial<BlockView> = {}): BlockView {
|
|
const badge = extra.badge
|
|
return {
|
|
id,
|
|
anchor: id,
|
|
kind,
|
|
startLine: 0,
|
|
endLine: 0,
|
|
code: '',
|
|
codeTokens: [],
|
|
attributes: { kind },
|
|
concepts: [{ id: kind, label: badge?.label ?? kind, icon: badge?.icon ?? 'box', ...(badge && { color: badge.color }) }],
|
|
children: [],
|
|
translation: [{ text, role: 'plain' }],
|
|
...extra,
|
|
} as BlockView
|
|
}
|
|
|
|
/** 一张组件卡片：第 1 行下面放着一个副作用，第 2 行的两个子行各讲一个处理函数，后面还有一个留下的注释块。 */
|
|
const CARD: BlockView = {
|
|
...view('0', 'react.component', ''),
|
|
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' }], [], []] },
|
|
] },
|
|
],
|
|
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', '留下的注释'),
|
|
],
|
|
}
|
|
|
|
function render(folds: Record<string, boolean>): string {
|
|
const collapsed = collapsedIds([CARD], folds)
|
|
const tree: BlockTreeState = {
|
|
version: 1,
|
|
editing: new Set(),
|
|
collapsed,
|
|
hidden: new Set(),
|
|
temporary: new Set(),
|
|
covered: new Map(),
|
|
kindName: kind => kind,
|
|
focusId: null,
|
|
onFocused: () => {},
|
|
onToggleEdit: () => {},
|
|
onToggleFold: () => {},
|
|
onSetFolds: () => {},
|
|
onOpenRun: () => {},
|
|
}
|
|
return renderToStaticMarkup(<BlockLevel blocks={[CARD]} tree={tree} />)
|
|
}
|
|
|
|
describe('放进卡片属性表里的子块', () => {
|
|
it('副作用画在它那一行下面；点子行才展开的处理函数默认不画，名称是展开它的按钮；卡片收着时留下的子块不画', () => {
|
|
const html = render({})
|
|
expect(html).toContain('滚回顶部')
|
|
expect(html).not.toContain('处理 A')
|
|
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>'))
|
|
})
|
|
|
|
it('展开一个处理函数：画在表下面，那一行标成展开、垫上它的种类色，卡片左上角的箭头收起它', () => {
|
|
const html = render({ 0.1: false, 0: false })
|
|
expect(html).toContain('处理 A')
|
|
expect(html).not.toContain('处理 B')
|
|
expect(html).toContain('data-open="" data-badge="" style="--kind-dark:#61dafb;--kind-light:#0a7ea4"')
|
|
expect(html).toContain('aria-label="收起"')
|
|
expect(html).toContain('留下的注释')
|
|
})
|
|
|
|
it('折叠放着子块的那一行：它下面的子块跟着收起', () => {
|
|
expect(render({ '0/p1': true })).not.toContain('滚回顶部')
|
|
})
|
|
})
|