test(gui): cover the tooltip primitive and the inert expanded search control

This commit is contained in:
Yif
2026-07-23 17:08:47 +08:00
parent 20720ef238
commit 789e9daaf6
2 changed files with 103 additions and 0 deletions

View File

@@ -0,0 +1,100 @@
// @vitest-environment jsdom
import { 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('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.
expect(bubble.style.left).toBe('10px')
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')
expect(bubble.style.left).toBe('0px')
expect(bubble.style.top).toBe('8px')
fireEvent.blur(anchor)
expect(screen.queryByRole('tooltip')).toBeNull()
})
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('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()
})
})

View File

@@ -197,6 +197,9 @@ describe('SidebarRoot', () => {
vi.useFakeTimers()
try {
const { onToggleSidebar } = mount(...projectData())
// While expanded the search control is inert (the row click focuses instead).
act(() => { fireEvent.click(screen.getByLabelText('Search sessions')) })
expect(onToggleSidebar).not.toHaveBeenCalled()
act(() => { fireEvent.click(screen.getByLabelText('Collapse sidebar')) })
act(() => { vi.advanceTimersByTime(300) })
act(() => { fireEvent.click(screen.getByLabelText('Search sessions')) })