64 lines
2.5 KiB
TypeScript
64 lines
2.5 KiB
TypeScript
import type { BlockView, KindIconName } from './types'
|
|
import { renderToStaticMarkup } from 'react-dom/server'
|
|
import { describe, expect, it } from 'vitest'
|
|
import { KIND_ICON_COMPONENTS, KIND_ICONS, KindIcon } from './kindIcons'
|
|
|
|
function render(block: Pick<BlockView, 'kind' | 'badge'>, name: string): string {
|
|
return renderToStaticMarkup(<KindIcon block={block} name={name} />)
|
|
}
|
|
|
|
/** 标签之间的字：图标（svg）没有字 */
|
|
const visibleText = (html: string): string => html.replace(/<[^>]*>/g, '').trim()
|
|
|
|
describe('块的种类图标', () => {
|
|
it('内置种类各有一个图标，和原型的一一对应', () => {
|
|
expect(KIND_ICONS).toEqual({
|
|
import: 'import',
|
|
function: 'square-function',
|
|
class: 'box',
|
|
type: 'braces',
|
|
enum: 'list-ordered',
|
|
exception: 'triangle-alert',
|
|
field: 'tag',
|
|
const: 'lock',
|
|
variable: 'variable',
|
|
if: 'split',
|
|
else: 'corner-down-right',
|
|
loop: 'repeat',
|
|
try: 'shield',
|
|
catch: 'shield-alert',
|
|
finally: 'shield-check',
|
|
return: 'corner-down-left',
|
|
statement: 'code',
|
|
comment: 'message-square-text',
|
|
interpreter: 'terminal',
|
|
options: 'sliders-horizontal',
|
|
case: 'signpost',
|
|
command: 'square-terminal',
|
|
pipeline: 'square-terminal',
|
|
})
|
|
})
|
|
|
|
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)
|
|
expect(html, name).toContain(`class="lucide lucide-${name}"`)
|
|
}
|
|
})
|
|
|
|
it('只画图标不带字，名字在悬停提示（data-tooltip，不用原生 title）和 aria-label 里；20px 的框、16px 的图形', () => {
|
|
const html = render({ kind: 'function' }, '函数')
|
|
expect(visibleText(html)).toBe('')
|
|
expect(html).toMatch(/^<span class="cr-kind [^"]*size-5[^"]*" role="img" data-tooltip="函数" aria-label="函数"><svg/)
|
|
expect(html).not.toContain(' title=')
|
|
expect(html).toContain('lucide-square-function')
|
|
expect(html).toContain('width="16" height="16"')
|
|
})
|
|
|
|
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="数据表"')
|
|
})
|
|
})
|