Files
deepseek-harness/packages/client/ui-layout/tests/theme-presenter.client.spec.ts
imccyu 7ad54e7791 refactor(client): name the compile face in every client test filename
A test file under packages/client now says which face it covers:
`*.client.spec.{ts,tsx}` and its `*.client.{ts,tsx}` helpers belong to the
Client aggregate, `*.host.spec.ts` to the host aggregate. The carrier's four
node-half specs take the Host suffix.

The two suffixes are mutually exclusive, so each aggregate excludes the
other's and both keep one broad test glob: `exclude` wins over `include`, and
`packages/client/**` no longer has to be excluded wholesale from the host
program with per-file `files` entries carved back out of it. A Host-face spec
that reaches only Host source therefore needs no cross-face project
reference, which the split-project rule rejects.

vitest still discovers every file through `**/*.spec.{ts,tsx}`.
2026-08-12 01:41:40 +08:00

92 lines
4.3 KiB
TypeScript

// @vitest-environment jsdom
// ThemePresenter behavior account: root color-scheme and the palette attribute
// follow active.colorScheme only, token variables replace the previous apply's
// set, theme-color metadata follows the rendered body background, and dispose
// retracts everything the presenter wrote.
import { afterEach, beforeEach, describe, expect, it } from 'vitest'
import type { ThemeSnapshot } from '@deepseek-ai/dsh-client-ui-theme/client'
import { DARK_ATTRIBUTE, ThemePresenter } from '@deepseek-ai/dsh-client-ui-layout/src/client/theme-presenter.ts'
const LIGHT_THEME_COLOR = 'rgb(255, 255, 255)'
const DARK_THEME_COLOR = 'rgb(21, 21, 23)'
function snapshot(colorScheme: 'light' | 'dark', tokens: Record<string, string> = {}): ThemeSnapshot {
// The presenter must key off colorScheme, not the id — keep them distinct.
const active = { id: `${colorScheme}-test`, colorScheme, tokens }
return { preference: colorScheme, active, themes: [active], revision: 1 }
}
function clearThemePresentation(): void {
document.head.querySelectorAll('meta[name="theme-color"], style[data-theme-presenter-test]').forEach((node) => { node.remove() })
}
function themeColorMeta(): HTMLMetaElement | null {
return document.head.querySelector<HTMLMetaElement>('meta[name="theme-color"]')
}
beforeEach(() => {
clearThemePresentation()
document.documentElement.style.removeProperty('color-scheme')
document.body.removeAttribute(DARK_ATTRIBUTE)
document.body.removeAttribute('style')
const style = document.createElement('style')
style.dataset.themePresenterTest = ''
style.textContent = `
body { background-color: ${LIGHT_THEME_COLOR}; }
body[${DARK_ATTRIBUTE}] { background-color: ${DARK_THEME_COLOR}; }
`
document.head.append(style)
})
afterEach(clearThemePresentation)
describe('ThemePresenter', () => {
it('light scheme sets root color-scheme and leaves the dark attribute absent', () => {
const presenter = new ThemePresenter()
presenter.apply(snapshot('light'))
expect(document.documentElement.style.colorScheme).toBe('light')
expect(document.body.hasAttribute(DARK_ATTRIBUTE)).toBe(false)
expect(themeColorMeta()?.content).toBe(LIGHT_THEME_COLOR)
})
it('dark scheme sets root color-scheme, the attribute, and metadata; switching to light updates one node', () => {
const presenter = new ThemePresenter()
presenter.apply(snapshot('dark'))
const meta = themeColorMeta()
expect(document.documentElement.style.colorScheme).toBe('dark')
expect(document.body.hasAttribute(DARK_ATTRIBUTE)).toBe(true)
expect(meta?.content).toBe(DARK_THEME_COLOR)
presenter.apply(snapshot('light'))
expect(document.documentElement.style.colorScheme).toBe('light')
expect(document.body.hasAttribute(DARK_ATTRIBUTE)).toBe(false)
expect(themeColorMeta()).toBe(meta)
expect(meta?.content).toBe(LIGHT_THEME_COLOR)
expect(document.head.querySelectorAll('meta[name="theme-color"]')).toHaveLength(1)
})
it('applies tokens as inline variables and clears the previous set on theme change', () => {
const presenter = new ThemePresenter()
presenter.apply(snapshot('dark', { '--dsw-alias-bg': '#111', '--dsw-alias-fg': '#eee' }))
expect(document.body.style.getPropertyValue('--dsw-alias-bg')).toBe('#111')
expect(document.body.style.getPropertyValue('--dsw-alias-fg')).toBe('#eee')
presenter.apply(snapshot('light', { '--dsw-alias-bg': '#fff' }))
expect(document.body.style.getPropertyValue('--dsw-alias-bg')).toBe('#fff')
// The old theme's extra variable is gone, not merged.
expect(document.body.style.getPropertyValue('--dsw-alias-fg')).toBe('')
})
it('dispose removes color-scheme, the attribute, and every applied variable, sparing foreign inline styles', () => {
document.body.style.setProperty('--foreign', 'kept')
const presenter = new ThemePresenter()
presenter.apply(snapshot('dark', { '--dsw-alias-bg': '#111' }))
const meta = themeColorMeta()
presenter.dispose()
expect(document.documentElement.style.colorScheme).toBe('')
expect(document.body.hasAttribute(DARK_ATTRIBUTE)).toBe(false)
expect(document.body.style.getPropertyValue('--dsw-alias-bg')).toBe('')
expect(document.body.style.getPropertyValue('--foreign')).toBe('kept')
expect(meta?.isConnected).toBe(false)
})
})