mirror of
https://github.com/deepseek-ai/deepseek-harness
synced 2026-08-15 21:04:50 +00:00
7ad54e7791
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}`.
358 lines
13 KiB
TypeScript
358 lines
13 KiB
TypeScript
// @vitest-environment jsdom
|
|
import { act, cleanup, fireEvent, render, screen } from '@testing-library/react'
|
|
import { afterEach, describe, expect, it, vi } from 'vitest'
|
|
import { Tooltip } from '@deepseek-ai/dsh-client-ui-primitives'
|
|
|
|
afterEach(cleanup)
|
|
|
|
describe('Tooltip', () => {
|
|
it('resolves lazy labels only after the bubble becomes visible', () => {
|
|
vi.useFakeTimers()
|
|
try {
|
|
const label = vi.fn(() => 'Timing details')
|
|
render(
|
|
<Tooltip label={label} delayMs={500}>
|
|
<button type="button">anchor</button>
|
|
</Tooltip>,
|
|
)
|
|
expect(label).not.toHaveBeenCalled()
|
|
fireEvent.mouseEnter(screen.getByText('anchor'))
|
|
act(() => { vi.advanceTimersByTime(499) })
|
|
expect(label).not.toHaveBeenCalled()
|
|
act(() => { vi.advanceTimersByTime(1) })
|
|
expect(screen.getByRole('tooltip').textContent).toBe('Timing details')
|
|
expect(label).toHaveBeenCalledOnce()
|
|
} finally {
|
|
vi.useRealTimers()
|
|
}
|
|
})
|
|
|
|
it('can delay pointer hover without delaying keyboard focus', () => {
|
|
vi.useFakeTimers()
|
|
try {
|
|
render(
|
|
<Tooltip label="Timing details" delayMs={500}>
|
|
<button type="button">anchor</button>
|
|
</Tooltip>,
|
|
)
|
|
const anchor = screen.getByText('anchor')
|
|
fireEvent.mouseEnter(anchor)
|
|
act(() => { vi.advanceTimersByTime(499) })
|
|
expect(screen.queryByRole('tooltip')).toBeNull()
|
|
fireEvent.mouseLeave(anchor)
|
|
act(() => { vi.advanceTimersByTime(1) })
|
|
expect(screen.queryByRole('tooltip')).toBeNull()
|
|
fireEvent.mouseEnter(anchor)
|
|
act(() => { vi.advanceTimersByTime(500) })
|
|
expect(screen.getByRole('tooltip').textContent).toBe('Timing details')
|
|
fireEvent.mouseLeave(anchor)
|
|
fireEvent.focus(anchor)
|
|
expect(screen.getByRole('tooltip').textContent).toBe('Timing details')
|
|
} finally {
|
|
vi.useRealTimers()
|
|
}
|
|
})
|
|
|
|
it('shows the bubble to the right on hover and hides it on leave', () => {
|
|
render(
|
|
<Tooltip label="Open sidebar">
|
|
<button type="button">anchor</button>
|
|
</Tooltip>,
|
|
)
|
|
const anchor = screen.getByText('anchor')
|
|
fireEvent.mouseEnter(anchor)
|
|
const bubble = screen.getByRole('tooltip')
|
|
expect(bubble.textContent).toBe('Open sidebar')
|
|
expect(bubble.getAttribute('data-side')).toBe('right')
|
|
// jsdom rects are all-zero: right placement lands at the +10 gutter, then
|
|
// the zero-width measured rect clamps to the 12px edge margin (10 + 12).
|
|
expect(bubble.style.left).toBe('22px')
|
|
expect(bubble.style.top).toBe('0px')
|
|
fireEvent.mouseLeave(anchor)
|
|
expect(screen.queryByRole('tooltip')).toBeNull()
|
|
})
|
|
|
|
it('supports bottom placement and the focus/blur channel', () => {
|
|
render(
|
|
<Tooltip label="Below" side="bottom">
|
|
<button type="button">anchor</button>
|
|
</Tooltip>,
|
|
)
|
|
const anchor = screen.getByText('anchor')
|
|
fireEvent.focus(anchor)
|
|
const bubble = screen.getByRole('tooltip')
|
|
expect(bubble.getAttribute('data-side')).toBe('bottom')
|
|
// Zero-width jsdom rect at x=0 clamps to the 12px edge margin.
|
|
expect(bubble.style.left).toBe('12px')
|
|
expect(bubble.style.top).toBe('8px')
|
|
fireEvent.blur(anchor)
|
|
expect(screen.queryByRole('tooltip')).toBeNull()
|
|
})
|
|
|
|
// jsdom's default rects are all-zero, so the clamp tests stub the measured
|
|
// rect (anchor and bubble share the prototype stub) and derive expectations
|
|
// from it: pos.x = anchor center, then shifted by the measured overflow.
|
|
const rect = (left: number, right: number): DOMRect =>
|
|
({ left, right, top: 0, bottom: 20, width: right - left, height: 20, x: left, y: 0, toJSON: () => ({}) })
|
|
|
|
it('caps the bubble width where the label would otherwise slab across the surface', () => {
|
|
render(
|
|
<Tooltip label="A description long enough to need a cap" side="bottom" maxWidth={360}>
|
|
<button type="button">anchor</button>
|
|
</Tooltip>,
|
|
)
|
|
fireEvent.mouseEnter(screen.getByText('anchor'))
|
|
|
|
// The stylesheet's half-viewport cap stays the default; this one overrides it.
|
|
expect(screen.getByRole('tooltip').style.maxWidth).toBe('360px')
|
|
})
|
|
|
|
it('clamps a bubble overflowing the right viewport edge back inside', () => {
|
|
const spy = vi.spyOn(Element.prototype, 'getBoundingClientRect').mockReturnValue(rect(900, 1100))
|
|
try {
|
|
render(
|
|
<Tooltip label="Wide" side="bottom">
|
|
<button type="button">anchor</button>
|
|
</Tooltip>,
|
|
)
|
|
fireEvent.mouseEnter(screen.getByText('anchor'))
|
|
// pos.x = 1000 (anchor center); measured right edge 1100 overflows the
|
|
// 1024 viewport's 12px safe margin (limit 1012) by 88, so the clamp
|
|
// shifts left to 912.
|
|
expect(screen.getByRole('tooltip').style.left).toBe('912px')
|
|
} finally {
|
|
spy.mockRestore()
|
|
}
|
|
})
|
|
|
|
it('reclamps after label and viewport width changes', () => {
|
|
const originalWidth = window.innerWidth
|
|
const spy = vi.spyOn(Element.prototype, 'getBoundingClientRect').mockImplementation(function (this: Element) {
|
|
if (this.getAttribute('role') !== 'tooltip') return rect(900, 1000)
|
|
return this.textContent === 'Wide' ? rect(900, 1100) : rect(850, 950)
|
|
})
|
|
try {
|
|
const view = render(
|
|
<Tooltip label="Wide" side="bottom">
|
|
<button type="button">anchor</button>
|
|
</Tooltip>,
|
|
)
|
|
fireEvent.mouseEnter(screen.getByText('anchor'))
|
|
expect(screen.getByRole('tooltip').style.left).toBe('862px')
|
|
|
|
view.rerender(
|
|
<Tooltip label="Short" side="bottom">
|
|
<button type="button">anchor</button>
|
|
</Tooltip>,
|
|
)
|
|
expect(screen.getByRole('tooltip').style.left).toBe('950px')
|
|
|
|
Object.defineProperty(window, 'innerWidth', { configurable: true, value: 900 })
|
|
fireEvent(window, new Event('resize'))
|
|
expect(screen.getByRole('tooltip').style.left).toBe('888px')
|
|
} finally {
|
|
Object.defineProperty(window, 'innerWidth', { configurable: true, value: originalWidth })
|
|
spy.mockRestore()
|
|
}
|
|
})
|
|
|
|
it('clamps a bubble past the left viewport edge back inside', () => {
|
|
const spy = vi.spyOn(Element.prototype, 'getBoundingClientRect').mockReturnValue(rect(-20, 80))
|
|
try {
|
|
render(
|
|
<Tooltip label="Wide" side="bottom">
|
|
<button type="button">anchor</button>
|
|
</Tooltip>,
|
|
)
|
|
fireEvent.mouseEnter(screen.getByText('anchor'))
|
|
// pos.x = 30 (anchor center); measured left edge -20 underflows the
|
|
// 12px safe margin by 32, so the clamp shifts right to 62.
|
|
expect(screen.getByRole('tooltip').style.left).toBe('62px')
|
|
} finally {
|
|
spy.mockRestore()
|
|
}
|
|
})
|
|
|
|
/** Anchor and bubble rects, so a placement test measures real room rather than jsdom's all-zero boxes. */
|
|
const placed = (anchorTop: number, anchorBottom: number, bubbleHeight: number) =>
|
|
vi.spyOn(Element.prototype, 'getBoundingClientRect').mockImplementation(function (this: Element) {
|
|
const [top, bottom] = this.getAttribute('role') === 'tooltip'
|
|
? [0, bubbleHeight]
|
|
: [anchorTop, anchorBottom]
|
|
return {
|
|
left: 100, right: 200, top, bottom, width: 100, height: bottom - top, x: 100, y: top, toJSON: () => ({}),
|
|
}
|
|
})
|
|
|
|
it('supports top placement for anchors at the viewport bottom', () => {
|
|
const spy = placed(700, 720, 20)
|
|
try {
|
|
render(
|
|
<Tooltip label="Above" side="top">
|
|
<button type="button">anchor</button>
|
|
</Tooltip>,
|
|
)
|
|
fireEvent.mouseEnter(screen.getByText('anchor'))
|
|
const bubble = screen.getByRole('tooltip')
|
|
// There is room above, so the requested side stands: the bubble's own
|
|
// top sits at the anchor's top less the 8px gutter.
|
|
expect(bubble.getAttribute('data-side')).toBe('top')
|
|
expect(bubble.style.top).toBe('692px')
|
|
expect(bubble.style.left).toBe('150px')
|
|
} finally {
|
|
spy.mockRestore()
|
|
}
|
|
})
|
|
|
|
it('flips a bottom bubble above an anchor with no room below', () => {
|
|
// jsdom's viewport is 768 tall: a 300px bubble under an anchor ending at
|
|
// 700 would run off, and there is room for it above.
|
|
const spy = placed(600, 700, 300)
|
|
try {
|
|
render(
|
|
<Tooltip label="Tall" side="bottom">
|
|
<button type="button">anchor</button>
|
|
</Tooltip>,
|
|
)
|
|
fireEvent.mouseEnter(screen.getByText('anchor'))
|
|
const bubble = screen.getByRole('tooltip')
|
|
expect(bubble.getAttribute('data-side')).toBe('top')
|
|
expect(bubble.style.top).toBe('592px')
|
|
} finally {
|
|
spy.mockRestore()
|
|
}
|
|
})
|
|
|
|
it('flips a top bubble below an anchor with no room above', () => {
|
|
const spy = placed(10, 40, 100)
|
|
try {
|
|
render(
|
|
<Tooltip label="Tall" side="top">
|
|
<button type="button">anchor</button>
|
|
</Tooltip>,
|
|
)
|
|
fireEvent.mouseEnter(screen.getByText('anchor'))
|
|
const bubble = screen.getByRole('tooltip')
|
|
expect(bubble.getAttribute('data-side')).toBe('bottom')
|
|
expect(bubble.style.top).toBe('48px')
|
|
} finally {
|
|
spy.mockRestore()
|
|
}
|
|
})
|
|
|
|
it('keeps the requested side when neither side fits', () => {
|
|
// A bubble taller than the viewport has no home; oscillating between the
|
|
// two would be worse than honouring the request.
|
|
const spy = placed(300, 400, 900)
|
|
try {
|
|
render(
|
|
<Tooltip label="Huge" side="bottom">
|
|
<button type="button">anchor</button>
|
|
</Tooltip>,
|
|
)
|
|
fireEvent.mouseEnter(screen.getByText('anchor'))
|
|
expect(screen.getByRole('tooltip').getAttribute('data-side')).toBe('bottom')
|
|
} finally {
|
|
spy.mockRestore()
|
|
}
|
|
})
|
|
|
|
it('chains the anchor\'s own handlers ahead of the tooltip\'s', () => {
|
|
const onMouseEnter = vi.fn()
|
|
const onMouseLeave = vi.fn()
|
|
const onFocus = vi.fn()
|
|
const onBlur = vi.fn()
|
|
render(
|
|
<Tooltip label="Chained">
|
|
<button type="button" onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave} onFocus={onFocus} onBlur={onBlur}>anchor</button>
|
|
</Tooltip>,
|
|
)
|
|
const anchor = screen.getByText('anchor')
|
|
fireEvent.mouseEnter(anchor)
|
|
fireEvent.mouseLeave(anchor)
|
|
fireEvent.focus(anchor)
|
|
fireEvent.blur(anchor)
|
|
expect(onMouseEnter).toHaveBeenCalledOnce()
|
|
expect(onMouseLeave).toHaveBeenCalledOnce()
|
|
expect(onFocus).toHaveBeenCalledOnce()
|
|
expect(onBlur).toHaveBeenCalledOnce()
|
|
})
|
|
|
|
it('suppresses the bubble while disabled without remounting the anchor', () => {
|
|
const { rerender } = render(
|
|
<Tooltip label="Rail" disabled>
|
|
<button type="button">anchor</button>
|
|
</Tooltip>,
|
|
)
|
|
const anchor = screen.getByText('anchor')
|
|
fireEvent.mouseEnter(anchor)
|
|
expect(screen.queryByRole('tooltip')).toBeNull()
|
|
rerender(
|
|
<Tooltip label="Rail">
|
|
<button type="button">anchor</button>
|
|
</Tooltip>,
|
|
)
|
|
// Same DOM node: toggling disabled never remounted the anchor.
|
|
expect(screen.getByText('anchor')).toBe(anchor)
|
|
fireEvent.mouseEnter(anchor)
|
|
expect(screen.getByRole('tooltip')).toBeTruthy()
|
|
})
|
|
|
|
it('mouse leave hides the bubble immediately, even while the anchor stays focused', () => {
|
|
render(
|
|
<Tooltip label="Sticky">
|
|
<button type="button">anchor</button>
|
|
</Tooltip>,
|
|
)
|
|
const anchor = screen.getByText('anchor')
|
|
// Focused AND hovered: leaving with the mouse drops the bubble at once.
|
|
fireEvent.focus(anchor)
|
|
fireEvent.mouseEnter(anchor)
|
|
fireEvent.mouseLeave(anchor)
|
|
expect(screen.queryByRole('tooltip')).toBeNull()
|
|
// Re-entering shows it again; blurring while still hovered keeps it.
|
|
fireEvent.mouseEnter(anchor)
|
|
fireEvent.blur(anchor)
|
|
expect(screen.getByRole('tooltip')).toBeTruthy()
|
|
fireEvent.mouseLeave(anchor)
|
|
expect(screen.queryByRole('tooltip')).toBeNull()
|
|
})
|
|
|
|
it('forwards the anchor element to the child ref (object and callback)', () => {
|
|
const objectRef = { current: null as HTMLButtonElement | null }
|
|
const callbackRef = vi.fn()
|
|
const { rerender } = render(
|
|
<Tooltip label="Add">
|
|
<button type="button" ref={objectRef}>anchor</button>
|
|
</Tooltip>,
|
|
)
|
|
expect(objectRef.current).toBe(screen.getByText('anchor'))
|
|
// Tooltip's own positioning still works through the merged ref.
|
|
fireEvent.mouseEnter(screen.getByText('anchor'))
|
|
expect(screen.getByRole('tooltip')).toBeTruthy()
|
|
rerender(
|
|
<Tooltip label="Add">
|
|
<button type="button" ref={callbackRef}>anchor</button>
|
|
</Tooltip>,
|
|
)
|
|
expect(callbackRef).toHaveBeenCalledWith(screen.getByText('anchor'))
|
|
})
|
|
|
|
it('drops an already-visible bubble when disabled flips mid-hover', () => {
|
|
const { rerender } = render(
|
|
<Tooltip label="Rail">
|
|
<button type="button">anchor</button>
|
|
</Tooltip>,
|
|
)
|
|
fireEvent.mouseEnter(screen.getByText('anchor'))
|
|
expect(screen.getByRole('tooltip')).toBeTruthy()
|
|
// e.g. clicking a rail control expands the sidebar: no mouseleave fires.
|
|
rerender(
|
|
<Tooltip label="Rail" disabled>
|
|
<button type="button">anchor</button>
|
|
</Tooltip>,
|
|
)
|
|
expect(screen.queryByRole('tooltip')).toBeNull()
|
|
})
|
|
})
|