feat(web): ui-goal package — GoalBar over the goal session projection
New client plugin package. The GoalBar component migrates verbatim from the
original PR (phase labels, inline edit form, resume-when-paused, pending
lockout, inline errors); its data path is rebuilt for the projection model:
- GoalDock adapter reads useProjection('goal') from the standard kit — no
controller, no store, no refresh chain, no event listener (the original
PR's Session goal fields, write-revision fence, and coalesced refetch all
dissolve into the value store's seq rule).
- The inject face carries only the three mutation verbs; each reads the CAS
ref from the session's current projected value at call time and maps the
settled RPC result inline (callbacks from inject, live state from
useProjection).
- Seats at conversation.input.dock order 1 (the slot contract names GoalBar
as a resident of this strip), below TodoPanel/QueueDock, tucked against
the composer; hero phase renders nothing for free.
- IconSparkle16 is package-local (sole consumer) — ui-primitives keeps only
the shared action icons.
- goalbar.spec migrates with GoalSnapshot props (activation is process-local
and absent from the projection; the strip renders durable phase only).
This commit is contained in:
imccyu
170
packages/client/ui-goal/tests/goalbar.spec.tsx
Normal file
170
packages/client/ui-goal/tests/goalbar.spec.tsx
Normal file
@@ -0,0 +1,170 @@
|
||||
// @vitest-environment jsdom
|
||||
// GoalBar behavior: the docked strip above the composer — phase labels,
|
||||
// inline edit form, and resume/clear icon actions — driven purely through
|
||||
// props, no wire. Loading, absent, and complete goals render nothing.
|
||||
|
||||
import { cleanup, fireEvent, render, screen, waitFor } from '@testing-library/react'
|
||||
import { afterEach, describe, expect, it, vi } from 'vitest'
|
||||
import type { GoalSnapshot } from '@deepseek-ai/dsh-goal/client'
|
||||
import { GoalBar } from '../src/client/GoalBar.tsx'
|
||||
import type { GoalBarActions } from '../src/client/slots.ts'
|
||||
|
||||
afterEach(cleanup)
|
||||
|
||||
function makeGoal(over: Partial<GoalSnapshot> = {}): GoalSnapshot {
|
||||
return {
|
||||
id: 'g1' as GoalSnapshot['id'],
|
||||
revision: 1,
|
||||
objective: 'Ship the redesign',
|
||||
phase: 'active',
|
||||
maxGoalRounds: 4,
|
||||
...over,
|
||||
}
|
||||
}
|
||||
|
||||
function makeActions() {
|
||||
return {
|
||||
onEdit: vi.fn<GoalBarActions['onEdit']>(() => Promise.resolve({ ok: true })),
|
||||
onResume: vi.fn<GoalBarActions['onResume']>(() => Promise.resolve({ ok: true })),
|
||||
onClear: vi.fn<GoalBarActions['onClear']>(() => Promise.resolve({ ok: true })),
|
||||
} satisfies GoalBarActions
|
||||
}
|
||||
|
||||
describe('GoalBar', () => {
|
||||
it('renders nothing while loading, absent, or when the goal is complete', () => {
|
||||
const actions = makeActions()
|
||||
const loading = render(<GoalBar goal={undefined} {...actions} />)
|
||||
expect(loading.container.firstChild).toBeNull()
|
||||
cleanup()
|
||||
|
||||
const absent = render(<GoalBar goal={null} {...actions} />)
|
||||
expect(absent.container.firstChild).toBeNull()
|
||||
cleanup()
|
||||
|
||||
const complete = render(<GoalBar goal={makeGoal({ phase: 'complete' })} {...actions} />)
|
||||
expect(complete.container.firstChild).toBeNull()
|
||||
})
|
||||
|
||||
it('active goal: sparkle, "Ongoing Goal", truncated objective, edit and clear actions', () => {
|
||||
const actions = makeActions()
|
||||
render(<GoalBar goal={makeGoal()} {...actions} />)
|
||||
expect(screen.getByText('Ongoing Goal')).toBeTruthy()
|
||||
expect(screen.getByText('Ship the redesign')).toBeTruthy()
|
||||
fireEvent.click(screen.getByRole('button', { name: 'Clear goal' }))
|
||||
expect(actions.onClear).toHaveBeenCalledTimes(1)
|
||||
})
|
||||
|
||||
it('edit swaps the strip for a prefilled form; Enter saves, empty stays disabled', async () => {
|
||||
const actions = makeActions()
|
||||
render(<GoalBar goal={makeGoal()} {...actions} />)
|
||||
fireEvent.click(screen.getByRole('button', { name: 'Edit goal' }))
|
||||
const box = screen.getByRole('textbox', { name: 'Goal objective' })
|
||||
expect((box as HTMLInputElement).value).toBe('Ship the redesign')
|
||||
|
||||
fireEvent.change(box, { target: { value: ' ' } })
|
||||
expect((screen.getByRole('button', { name: 'Save goal' }) as HTMLButtonElement).disabled).toBe(true)
|
||||
|
||||
fireEvent.change(box, { target: { value: 'Ship v2' } })
|
||||
fireEvent.keyDown(box, { key: 'Enter' })
|
||||
expect(actions.onEdit).toHaveBeenCalledWith('Ship v2')
|
||||
await waitFor(() => { expect(screen.getByText('Ongoing Goal')).toBeTruthy() })
|
||||
})
|
||||
|
||||
it('Esc cancels the edit without calling onEdit', () => {
|
||||
const actions = makeActions()
|
||||
render(<GoalBar goal={makeGoal()} {...actions} />)
|
||||
fireEvent.click(screen.getByRole('button', { name: 'Edit goal' }))
|
||||
fireEvent.keyDown(screen.getByRole('textbox', { name: 'Goal objective' }), { key: 'Escape' })
|
||||
expect(actions.onEdit).not.toHaveBeenCalled()
|
||||
expect(screen.getByText('Ongoing Goal')).toBeTruthy()
|
||||
})
|
||||
|
||||
it('the cancel button exits the form and drops the draft (re-edit starts from the objective)', () => {
|
||||
const actions = makeActions()
|
||||
render(<GoalBar goal={makeGoal()} {...actions} />)
|
||||
fireEvent.click(screen.getByRole('button', { name: 'Edit goal' }))
|
||||
fireEvent.change(screen.getByRole('textbox', { name: 'Goal objective' }), { target: { value: 'abandoned draft' } })
|
||||
fireEvent.click(screen.getByRole('button', { name: 'Cancel edit' }))
|
||||
expect(actions.onEdit).not.toHaveBeenCalled()
|
||||
expect(screen.getByText('Ongoing Goal')).toBeTruthy()
|
||||
|
||||
fireEvent.click(screen.getByRole('button', { name: 'Edit goal' }))
|
||||
expect((screen.getByRole('textbox', { name: 'Goal objective' }) as HTMLInputElement).value).toBe('Ship the redesign')
|
||||
})
|
||||
|
||||
it('Enter with a blank draft neither saves nor closes the form', () => {
|
||||
const actions = makeActions()
|
||||
render(<GoalBar goal={makeGoal()} {...actions} />)
|
||||
fireEvent.click(screen.getByRole('button', { name: 'Edit goal' }))
|
||||
const box = screen.getByRole('textbox', { name: 'Goal objective' })
|
||||
fireEvent.change(box, { target: { value: ' ' } })
|
||||
fireEvent.keyDown(box, { key: 'Enter' })
|
||||
expect(actions.onEdit).not.toHaveBeenCalled()
|
||||
expect(screen.getByRole('textbox', { name: 'Goal objective' })).toBeTruthy()
|
||||
})
|
||||
|
||||
it('paused goal: "Paused Goal" with a resume action before edit', () => {
|
||||
const actions = makeActions()
|
||||
render(<GoalBar goal={makeGoal({ phase: 'paused' })} {...actions} />)
|
||||
expect(screen.getByText('Paused Goal')).toBeTruthy()
|
||||
fireEvent.click(screen.getByRole('button', { name: 'Resume goal' }))
|
||||
expect(actions.onResume).toHaveBeenCalledTimes(1)
|
||||
})
|
||||
|
||||
it('a new goal identity drops the edit form (no stale draft over the new goal)', () => {
|
||||
const actions = makeActions()
|
||||
const { rerender } = render(<GoalBar goal={makeGoal()} {...actions} />)
|
||||
fireEvent.click(screen.getByRole('button', { name: 'Edit goal' }))
|
||||
fireEvent.change(screen.getByRole('textbox', { name: 'Goal objective' }), { target: { value: 'stale draft' } })
|
||||
|
||||
rerender(<GoalBar goal={makeGoal({ id: 'g2' as GoalSnapshot['id'], objective: 'New goal' })} {...actions} />)
|
||||
expect(screen.queryByRole('textbox')).toBeNull()
|
||||
expect(screen.getByText('Ongoing Goal')).toBeTruthy()
|
||||
expect(screen.getByText('New goal')).toBeTruthy()
|
||||
|
||||
rerender(<GoalBar goal={null} {...actions} />)
|
||||
expect(screen.queryByText('Ongoing Goal')).toBeNull()
|
||||
})
|
||||
|
||||
it('blocked goal: "Blocked Goal" with the block reason as the strip tooltip', () => {
|
||||
const actions = makeActions()
|
||||
const goal = makeGoal({ phase: 'blocked', blockedReason: { code: 'stalled', message: 'No progress in 3 rounds' } })
|
||||
render(<GoalBar goal={goal} {...actions} />)
|
||||
expect(screen.getByText('Blocked Goal')).toBeTruthy()
|
||||
expect(screen.getByText('Blocked Goal').closest('[title]')?.getAttribute('title')).toBe('No progress in 3 rounds')
|
||||
})
|
||||
|
||||
it('blocked goal without a reason carries no tooltip', () => {
|
||||
const actions = makeActions()
|
||||
render(<GoalBar goal={makeGoal({ phase: 'blocked' })} {...actions} />)
|
||||
expect(screen.getByText('Blocked Goal')).toBeTruthy()
|
||||
expect(screen.getByText('Blocked Goal').closest('[title]')).toBeNull()
|
||||
})
|
||||
|
||||
it('keeps the edit draft open and reports a failed save', async () => {
|
||||
const actions = makeActions()
|
||||
actions.onEdit.mockResolvedValue({ ok: false, error: { code: 'agent-busy', message: 'stale revision' } })
|
||||
render(<GoalBar goal={makeGoal()} {...actions} />)
|
||||
fireEvent.click(screen.getByRole('button', { name: 'Edit goal' }))
|
||||
const box = screen.getByRole('textbox', { name: 'Goal objective' })
|
||||
fireEvent.change(box, { target: { value: 'retry this draft' } })
|
||||
fireEvent.click(screen.getByRole('button', { name: 'Save goal' }))
|
||||
|
||||
expect((await screen.findByRole('alert')).textContent).toBe('stale revision（agent-busy）')
|
||||
expect((screen.getByRole('textbox', { name: 'Goal objective' }) as HTMLInputElement).value).toBe('retry this draft')
|
||||
})
|
||||
|
||||
it('reports resume and clear failures without hiding the goal', async () => {
|
||||
const actions = makeActions()
|
||||
actions.onResume.mockResolvedValue({ ok: false, error: { code: 'internal', message: 'resume failed' } })
|
||||
const { rerender } = render(<GoalBar goal={makeGoal({ phase: 'paused' })} {...actions} />)
|
||||
fireEvent.click(screen.getByRole('button', { name: 'Resume goal' }))
|
||||
expect((await screen.findByRole('alert')).textContent).toBe('resume failed（internal）')
|
||||
|
||||
actions.onClear.mockResolvedValue({ ok: false, error: { code: 'agent-busy', message: 'clear failed' } })
|
||||
rerender(<GoalBar goal={makeGoal()} {...actions} />)
|
||||
fireEvent.click(screen.getByRole('button', { name: 'Clear goal' }))
|
||||
expect((await screen.findByRole('alert')).textContent).toBe('clear failed（agent-busy）')
|
||||
expect(screen.getByText('Ship the redesign')).toBeTruthy()
|
||||
})
|
||||
})
|
||||
Reference in New Issue
Block a user