@linxin666/dsh-pet 0.1.20 → 0.2.1

package/src/client/PetDockEntry.test.tsx

@@ -0,0 +1,93 @@
+// @vitest-environment jsdom
+/**
+ * The hidden-state summon button opts into the L2 semantic attributes
+ * (issue #506): it carries data-dsh-part="summon-button" so skins can target
+ * it without hash-class selectors.
+ */
+import { afterEach, beforeAll, describe, expect, it, vi } from 'vitest'
+import { cleanup, render, screen } from '@testing-library/react'
+// The npm SDK's client half is a closure-factory bundle for the GUI's
+// __ModuleLoader__ (not importable under vitest); provide the defineStore
+// the pet store needs (same fake-store pattern as the settings-card tests).
+vi.mock('@deepseek-ai/dsh-client-runtime/client', () => ({
+  defineStore: (spec: {
+    init: () => unknown
+    actions: Record<string, (draft: never, ...args: never[]) => void>
+  }) => ({
+    create: () => {
+      let value = spec.init()
+      const listeners = new Set<() => void>()
+      const actions: Record<string, (...args: unknown[]) => void> = {}
+      for (const [name, fn] of Object.entries(spec.actions)) {
+        actions[name] = (...args: unknown[]) => {
+          fn(value as never, ...(args as never[]))
+          for (const listener of listeners) listener()
+        }
+      }
+      return {
+        getSnapshot: () => value,
+        subscribe: (listener: () => void) => {
+          listeners.add(listener)
+          return () => { listeners.delete(listener) }
+        },
+        actions,
+      }
+    },
+  }),
+}))
+import { PetDockEntry, type PetInjected } from './PetDockEntry.tsx'
+import { createPetStore } from './pet-store.ts'
+import { t } from './locales.ts'
+import type { PetStateView } from '../service.ts'
+
+beforeAll(() => {
+  document.documentElement.lang = 'zh'
+})
+
+afterEach(cleanup)
+
+/** Snapshot fixture with the pet hidden (the summon-button state). */
+const hiddenSnapshot: PetStateView = {
+  animation: 'idle',
+  phase: 'idle',
+  sessionActive: false,
+  affinity: {
+    points: 0,
+    rank: '幼鲸',
+    rankEmoji: '*',
+    pets: 0,
+    feeds: 0,
+    turns: 0,
+    petCooldown: false,
+    feedCooldown: false,
+  },
+  display: { visible: false, size: 160, right: 24, bottom: 20 },
+  pet: { id: 'whale-girl', displayName: '鲸鱼娘', description: '测试用鲸鱼娘' },
+  name: '泡泡',
+  treats: { stocked: 0, max: 5 },
+}
+
+function injected(): PetInjected {
+  return {
+    store: createPetStore().create(),
+    ensure: vi.fn(),
+    pet: vi.fn(),
+    feed: vi.fn(),
+    hide: vi.fn(),
+    summon: vi.fn(),
+    dragEnd: vi.fn(),
+    rename: vi.fn(),
+    openSession: vi.fn(),
+    feedbackDone: vi.fn(),
+  }
+}
+
+describe('PetDockEntry L2 semantic attributes (#506)', () => {
+  it('tags the summon button as the summon-button part', () => {
+    const props = injected()
+    props.store.actions.setSnapshot(hiddenSnapshot)
+    render(<PetDockEntry {...props} t={t} />)
+    const summon = screen.getByTestId('pet-summon')
+    expect(summon.getAttribute('data-dsh-part')).toBe('summon-button')
+  })
+})

package/src/client/PetDockEntry.tsx

@@ -106,6 +106,7 @@ export function PetDockEntry(props: PetDockEntryProps): ReactElement {
       }}
       onClick={props.summon}
       data-testid="pet-summon"
+      data-dsh-part="summon-button"
     >
       {props.t('pet.summon', { name: snapshot?.name ?? '' })}
     </button>

package/src/client/PetSprite.test.tsx

@@ -5,7 +5,7 @@
  * selection) as composition input, never as submit/cancel (issue #89).
  */
 import { afterEach, beforeAll, describe, expect, it, vi } from 'vitest'
-import { cleanup, fireEvent, render, screen } from '@testing-library/react'
+import { act, cleanup, fireEvent, render, screen } from '@testing-library/react'
 import { PetSprite, type PetSpriteProps } from './PetSprite.tsx'
 import { t } from './locales.ts'
 import type { PetStateView } from '../service.ts'
@@ -27,6 +27,7 @@ function petDefinition(): PetDefinition {
     cell: { width: 192, height: 208 },
     columns: 8,
     rows: [6, 8, 8, 4, 5, 8, 6, 6, 6],
+    atlasRows: 9,
     tracks: {
       idle: track([0, 1, 2, 3, 4, 5], [400, 400, 400, 400, 400, 400]),
       'running-right': track([0, 1, 2, 3, 4, 5, 6, 7], [225, 225, 225, 225, 225, 225, 225, 225]),
@@ -86,6 +87,7 @@ beforeAll(() => {
 
 afterEach(() => {
   cleanup()
+  vi.restoreAllMocks()
 })
 
 /** Render the pet with mocked callbacks; returns the rename and open spys. */
@@ -176,6 +178,129 @@ describe('PetSprite rename input', () => {
     expect(onRename).not.toHaveBeenCalled()
     expect(screen.queryByPlaceholderText('输入新名字')).toBeNull()
   })
+
+  it('ignores Enter between compositionStart and compositionEnd even when isComposing is false (#303)', () => {
+    // WeChat IME (Windows) marks composition keydowns with isComposing ===
+    // false; only the explicit composition events can be trusted.
+    const { onRename } = renderPet()
+    const input = openRename()
+    fireEvent.change(input, { target: { value: '泡泡酱' } })
+    fireEvent.compositionStart(input)
+    fireEvent.keyDown(input, { key: 'Enter' })
+    expect(onRename).not.toHaveBeenCalled()
+    expect(screen.getByPlaceholderText('输入新名字')).toBe(input)
+    fireEvent.compositionEnd(input)
+    fireEvent.keyDown(input, { key: 'Enter' })
+    expect(onRename).toHaveBeenCalledWith('泡泡酱')
+  })
+
+  it("ignores 'Process' keydowns emitted by IMEs mid-composition (#303)", () => {
+    const { onRename } = renderPet()
+    const input = openRename()
+    fireEvent.change(input, { target: { value: '泡泡酱' } })
+    fireEvent.keyDown(input, { key: 'Process' })
+    expect(onRename).not.toHaveBeenCalled()
+    expect(screen.getByPlaceholderText('输入新名字')).toBe(input)
+  })
+
+  it('keeps the rename panel open when the pointer leaves mid-rename (#303)', () => {
+    // An IME candidate window is an OS-level window: moving the pointer onto
+    // it fires pointerleave on the float. The hide timer must not unmount
+    // the input mid-composition (that crashes some IMEs / the renderer).
+    vi.useFakeTimers()
+    try {
+      renderPet()
+      const input = openRename()
+      const float = input.parentElement?.parentElement?.parentElement
+      expect(float).not.toBeNull()
+      fireEvent.pointerOut(float!, { relatedTarget: null })
+      act(() => { vi.advanceTimersByTime(1000) })
+      expect(screen.getByPlaceholderText('输入新名字')).toBe(input)
+      // After the rename ends, hover behavior works again.
+      fireEvent.keyDown(input, { key: 'Escape' })
+      fireEvent.pointerOut(float!, { relatedTarget: null })
+      act(() => { vi.advanceTimersByTime(1000) })
+      expect(screen.queryByText('改名')).toBeNull()
+    } finally {
+      vi.useRealTimers()
+    }
+  })
+})
+
+describe('PetSprite hover panel placement', () => {
+  it('places the panel above when an old saved position leaves no room below', () => {
+    Object.defineProperty(window, 'innerHeight', { configurable: true, value: 900 })
+    vi.spyOn(HTMLElement.prototype, 'getBoundingClientRect').mockImplementation(function (this: HTMLElement) {
+      if (this.style.bottom !== '') {
+        return { top: 720, right: 1256, bottom: 880, left: 1108, width: 148, height: 160, x: 1108, y: 720, toJSON: () => ({}) }
+      }
+      return { top: 888, right: 1259, bottom: 974, left: 1105, width: 154, height: 86, x: 1105, y: 888, toJSON: () => ({}) }
+    })
+
+    renderPet({ display: { ...snapshot.display, bottom: 20 } })
+    fireEvent.pointerOver(screen.getByRole('button', { name: '鲸鱼娘' }))
+
+    const panel = screen.getByText('改名').closest('[data-placement]') as HTMLElement
+    expect(panel.getAttribute('data-placement')).toBe('above')
+    // No bubble above the sprite: the panel keeps its default 8px gap.
+    expect(panel.style.marginBottom).toBe('')
+  })
+
+  it('lifts the above-panel clear of the status bubble instead of overlapping it', () => {
+    // Regression: the fallback above-placement anchored the panel at the
+    // sprite's top edge — the exact region the status bubble occupies — so
+    // the panel covered the bubble. The panel must now ride above it.
+    Object.defineProperty(window, 'innerHeight', { configurable: true, value: 900 })
+    vi.spyOn(HTMLElement.prototype, 'getBoundingClientRect').mockImplementation(function (this: HTMLElement) {
+      if (this.className.includes('bubbleStack')) {
+        // The bubble area (stack wrapping the status bubble): 40px tall.
+        return { top: 650, right: 1200, bottom: 690, left: 1120, width: 80, height: 40, x: 1120, y: 650, toJSON: () => ({}) }
+      }
+      // Sprite (bottom 974 of a 900px viewport) and panel (86px tall).
+      return { top: 888, right: 1259, bottom: 974, left: 1105, width: 154, height: 86, x: 1105, y: 888, toJSON: () => ({}) }
+    })
+
+    renderPet({
+      snapshot: { ...snapshot, bubble: '正在思考' },
+      display: { ...snapshot.display, bottom: 20 },
+    })
+    fireEvent.pointerOver(screen.getByRole('button', { name: '鲸鱼娘' }))
+
+    const panel = screen.getByText('改名').closest('[data-placement]') as HTMLElement
+    expect(panel.getAttribute('data-placement')).toBe('above')
+    // 40px bubble height + 14px (8px base gap + 6px clearance).
+    expect(panel.style.marginBottom).toBe('54px')
+    // The bubble stays rendered while the lifted panel is open.
+    expect(screen.queryByText('正在思考')).not.toBeNull()
+  })
+
+  it('lifts the above-panel clear of the session bubble stack', () => {
+    Object.defineProperty(window, 'innerHeight', { configurable: true, value: 900 })
+    vi.spyOn(HTMLElement.prototype, 'getBoundingClientRect').mockImplementation(function (this: HTMLElement) {
+      if (this.className.includes('bubbleStack')) {
+        // Two stacked bubbles: 88px tall.
+        return { top: 600, right: 1200, bottom: 688, left: 1100, width: 100, height: 88, x: 1100, y: 600, toJSON: () => ({}) }
+      }
+      return { top: 888, right: 1259, bottom: 974, left: 1105, width: 154, height: 86, x: 1105, y: 888, toJSON: () => ({}) }
+    })
+
+    renderPet({
+      snapshot: {
+        ...snapshot,
+        sessions: [
+          { sessionId: 's-a', animation: 'running', phase: 'thinking', bubble: '正在思考' },
+          { sessionId: 's-b', animation: 'running-right', phase: 'tool', bubble: '正在使用 grep' },
+        ],
+      },
+      display: { ...snapshot.display, bottom: 20 },
+    })
+    fireEvent.pointerOver(screen.getByRole('button', { name: '鲸鱼娘' }))
+
+    const panel = screen.getByText('改名').closest('[data-placement]') as HTMLElement
+    expect(panel.getAttribute('data-placement')).toBe('above')
+    // 88px stack height + 14px clearance.
+    expect(panel.style.marginBottom).toBe('102px')
+  })
 })
 
 describe('PetSprite status bubble', () => {
@@ -200,7 +325,54 @@ describe('PetSprite status bubble', () => {
     expect(screen.queryByText('正在思考')).toBeNull()
   })
 
-  it('renders one bubble per concurrent session without duplicating the global bubble', () => {
+  /** Expand a collapsed session stack by hovering its bubble area. */
+  function expandStack(): void {
+    const stack = screen.getByText('正在思考').closest('div')
+    expect(stack).not.toBeNull()
+    fireEvent.pointerOver(stack!)
+  }
+
+  it('collapses concurrent sessions behind the display session bubble', () => {
+    renderPet({
+      snapshot: {
+        ...workingSnapshot,
+        bubble: '正在思考',
+        sessions: [
+          { sessionId: 's-a', animation: 'running', phase: 'thinking', bubble: '正在思考' },
+          { sessionId: 's-b', animation: 'running-right', phase: 'tool', bubble: '正在使用 grep' },
+        ],
+      },
+    })
+    // Only the display session speaks; the other session hides behind the
+    // '+1' badge so the pet never wears a tall bubble stack.
+    expect(screen.getAllByText('正在思考')).toHaveLength(1)
+    expect(screen.queryByText('正在使用 grep')).toBeNull()
+    expect(screen.queryByRole('button', { name: '展开其余 1 个会话的气泡' })).not.toBeNull()
+  })
+
+  it('expands the collapsed stack on hover and on badge tap', () => {
+    renderPet({
+      snapshot: {
+        ...workingSnapshot,
+        sessions: [
+          { sessionId: 's-a', animation: 'running', phase: 'thinking', bubble: '正在思考' },
+          { sessionId: 's-b', animation: 'running-right', phase: 'tool', bubble: '正在使用 grep' },
+        ],
+      },
+    })
+    // Hover peek: extras appear, and leaving collapses them again.
+    expandStack()
+    expect(screen.queryByText('正在使用 grep')).not.toBeNull()
+    fireEvent.pointerOut(screen.getByText('正在思考').closest('div')!)
+    expect(screen.queryByText('正在使用 grep')).toBeNull()
+    // Badge tap pins the stack open (touch path); tapping again collapses.
+    fireEvent.click(screen.getByRole('button', { name: '展开其余 1 个会话的气泡' }))
+    expect(screen.queryByText('正在使用 grep')).not.toBeNull()
+    fireEvent.click(screen.getByRole('button', { name: '收起会话气泡' }))
+    expect(screen.queryByText('正在使用 grep')).toBeNull()
+  })
+
+  it('renders one bubble per concurrent session in the expanded stack', () => {
     renderPet({
       snapshot: {
         ...workingSnapshot,
@@ -211,12 +383,54 @@ describe('PetSprite status bubble', () => {
         ],
       },
     })
+    expandStack()
     // The display session appears in the stack exactly once: the legacy
     // single bubble is not rendered on top of the session list.
     expect(screen.getAllByText('正在思考')).toHaveLength(1)
     expect(screen.queryByText('正在使用 grep')).not.toBeNull()
   })
 
+  it('lets the inner whisper take over the status bubble', () => {
+    renderPet({ snapshot: { ...workingSnapshot, whisper: '哼哧哼哧，大脑转得飞快～' } })
+    // The whisper speaks THROUGH the bubble: it replaces (not accompanies)
+    // the status copy, so the pet never shows two bubbles at once.
+    expect(screen.queryByText('哼哧哼哧，大脑转得飞快～')).not.toBeNull()
+    expect(screen.queryByText('正在思考')).toBeNull()
+  })
+
+  it('lets the whisper take over the display session bubble in the stack', () => {
+    const { onOpenSession } = renderPet({
+      snapshot: {
+        ...workingSnapshot,
+        whisper: '我在这儿陪着你呢，别急别急',
+        sessions: [
+          { sessionId: 's-a', animation: 'running', phase: 'thinking', bubble: '正在思考' },
+          { sessionId: 's-b', animation: 'running-right', phase: 'tool', bubble: '正在使用 grep' },
+        ],
+      },
+    })
+    // The primary bubble (the display session) speaks the whisper instead
+    // of its status copy; the collapsed extra session hides behind the badge.
+    expect(screen.queryByText('我在这儿陪着你呢，别急别急')).not.toBeNull()
+    expect(screen.queryByText('正在思考')).toBeNull()
+    expect(screen.queryByText('正在使用 grep')).toBeNull()
+    // Expanding reveals the other session's own bubble, untouched.
+    fireEvent.pointerOver(screen.getByText('我在这儿陪着你呢，别急别急').closest('div')!)
+    expect(screen.queryByText('正在使用 grep')).not.toBeNull()
+    // The whisper-toned bubble stays clickable and still opens its session.
+    fireEvent.click(screen.getByText('我在这儿陪着你呢，别急别急'))
+    expect(onOpenSession).toHaveBeenCalledWith('s-a')
+  })
+
+  it('lets transient interaction feedback take over the whisper too', () => {
+    renderPet({
+      snapshot: { ...workingSnapshot, whisper: '哼哧哼哧，大脑转得飞快～' },
+      feedback: { text: '摸摸成功', kind: 'pet', at: 1 },
+    })
+    expect(screen.queryByText('摸摸成功')).not.toBeNull()
+    expect(screen.queryByText('哼哧哼哧，大脑转得飞快～')).toBeNull()
+  })
+
   it('lets feedback replace the whole session bubble stack', () => {
     renderPet({
       snapshot: {
@@ -244,6 +458,8 @@ describe('PetSprite status bubble', () => {
         ],
       },
     })
+    // The collapsed stack must be expanded before its extras can be hit.
+    fireEvent.pointerOver(screen.getByText('正在思考').closest('div')!)
     fireEvent.click(screen.getByText('正在使用 grep'))
     expect(onOpenSession).toHaveBeenCalledTimes(1)
     expect(onOpenSession).toHaveBeenCalledWith('s-b')
@@ -275,7 +491,9 @@ describe('PetSprite status bubble', () => {
     fireEvent.pointerOver(screen.getByRole('button', { name: '鲸鱼娘' }))
     // The hover panel is open...
     expect(screen.queryByText('改名')).not.toBeNull()
-    // ...and the bubbles are still there, still clickable.
+    // ...and the bubbles are still there, still clickable once the collapsed
+    // stack is expanded by hovering it.
+    fireEvent.pointerOver(screen.getByText('正在思考').closest('div')!)
     expect(screen.getByText('正在使用 grep')).not.toBeNull()
     fireEvent.click(screen.getByText('正在使用 grep'))
     expect(onOpenSession).toHaveBeenCalledWith('s-b')
@@ -293,4 +511,36 @@ describe('PetSprite definition-driven render', () => {
     fireEvent.pointerOver(screen.getByRole('button', { name: '鲸鱼娘' }))
     expect(screen.queryByText('泡泡')).not.toBeNull()
   })
+
+  it('advances a configured scene sequence after the current track duration', () => {
+    vi.spyOn(window, 'matchMedia').mockReturnValue({
+      matches: false,
+      media: '(prefers-reduced-motion: reduce)',
+      onchange: null,
+      addEventListener: () => {},
+      removeEventListener: () => {},
+      addListener: () => {},
+      removeListener: () => {},
+      dispatchEvent: () => false,
+    })
+    vi.spyOn(performance, 'now').mockReturnValue(0)
+    let nextFrame: FrameRequestCallback | undefined
+    vi.spyOn(window, 'requestAnimationFrame').mockImplementation(callback => {
+      nextFrame = callback
+      return 1
+    })
+    vi.spyOn(window, 'cancelAnimationFrame').mockImplementation(() => {})
+    const definition = petDefinition()
+    definition.sequences = {
+      thinking: ['running', 'waiting', 'running', 'waiting', 'running'],
+    }
+    renderPet({
+      definition,
+      snapshot: { ...snapshot, animation: 'running', phase: 'thinking' },
+    })
+    const sprite = screen.getByRole('button', { name: '鲸鱼娘' })
+    expect(sprite.style.backgroundPosition).toBe('0px -1120px')
+    act(() => { nextFrame?.(1_500) })
+    expect(sprite.style.backgroundPosition).toBe('0px -960px')
+  })
 })