Files
deepseek-harness/packages/client/ui-primitives/tests/icons.client.spec.tsx
T
Yif 625711e718 fix(client): distinguish grep/glob rows from the web search row
The grep, glob, and web_search tool rows all rendered as "Search" with
the same magnifier icon, so a transcript full of local searches was
indistinguishable from web searches. Grep and glob now carry their own
command-named titles through TOOL_TITLES, and the web_search row wears
a new globe glyph (IconGlobeOutline14) while keeping its "Search" title.
2026-08-12 12:57:59 +08:00

69 lines
3.0 KiB
TypeScript

// @vitest-environment jsdom
import { cleanup, render } from '@testing-library/react'
import { afterEach, describe, expect, it } from 'vitest'
import * as primitives from '@deepseek-ai/dsh-client-ui-primitives'
import {
IconApiOutline14, IconArchiveOutline20, IconFolderClose16, IconGoalOutline16, IconSendOutline16,
} from '@deepseek-ai/dsh-client-ui-primitives'
afterEach(cleanup)
// Icon components all share the IconProps signature; the barrel also exports
// non-icon atoms (different props shapes), so filter by prefix BEFORE typing.
const icons = Object.fromEntries(
Object.entries(primitives).filter(([name]) => name.startsWith('Icon')),
) as Record<string, (p: primitives.IconProps) => React.JSX.Element>
const iconNames = Object.keys(icons)
describe('ic_ds_ icon set', () => {
it('exports the full icon set (46 deepsuite + 20 figma extracts + three product glyphs outside those sets)', () => {
expect(iconNames.length).toBe(69)
})
it.each(iconNames)('%s renders an svg with currentColor fills and no hardcoded palette', (name) => {
const Icon = icons[name]!
const { container } = render(<Icon />)
const svg = container.querySelector('svg')
expect(svg).not.toBeNull()
const markup = container.innerHTML
expect(markup).not.toMatch(/#[0-9a-fA-F]{3,8}"/)
expect(markup).toContain('currentColor')
})
it('size and className props land on the root svg', () => {
const { container } = render(<IconSendOutline16 size={20} className="x" />)
const svg = container.querySelector('svg')!
expect(svg.getAttribute('width')).toBe('20')
expect(svg.getAttribute('height')).toBe('20')
expect(svg.classList.contains('x')).toBe(true)
})
it('each glyph defaults to its own drawn size, not one set-wide default', () => {
const api = render(<IconApiOutline14 />)
expect(api.container.querySelector('svg')!.getAttribute('width')).toBe('14')
const folder = render(<IconFolderClose16 />)
expect(folder.container.querySelector('svg')!.getAttribute('width')).toBe('16')
const archive = render(<IconArchiveOutline20 />)
expect(archive.container.querySelector('svg')!.getAttribute('width')).toBe('20')
})
it('renders reusable goal glyphs without document-global ids', () => {
const { container } = render(<><IconGoalOutline16 /><IconGoalOutline16 /></>)
expect(container.querySelector('[id]')).toBeNull()
expect(container.querySelector('[clip-path]')).toBeNull()
})
})
describe('FishLogo', () => {
it('renders the fish path in currentColor at the native ratio', () => {
const { container } = render(<primitives.FishLogo />)
const svg = container.querySelector('svg')!
expect(svg.getAttribute('width')).toBe('24')
expect(Number(svg.getAttribute('height'))).toBeCloseTo(17.66, 1)
expect(svg.getAttribute('viewBox')).toBe('0 0 23.16 17.04')
expect(container.querySelectorAll('path')).toHaveLength(1)
expect(container.innerHTML).toContain('currentColor')
expect(container.innerHTML).not.toContain('M0 0L23.16')
})
})