yaoyao/tests/client/typingIndicator.test.ts

import { mount } from '@vue/test-utils'
import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
import { defineComponent, nextTick, type Component } from 'vue'
import TypingIndicator from '@/components/common/TypingIndicator.vue'
import MessageTimeline from '@/components/messages/MessageTimeline.vue'
import WorkspaceMessageTimeline from '@/components/workspace/WorkspaceMessageTimeline.vue'
import type { UiMessage } from '@/components/messages/types'

const AgentAvatarStub = defineComponent({
  props: {
    name: { type: String, required: true },
    avatar: { type: String, default: '' },
    size: { type: Number, required: true },
    state: { type: String, required: true },
  },
  template: `<span class="agent-avatar-stub" :data-name="name" :data-avatar="avatar" :data-size="size" :data-state="state" />`,
})

const stubs = {
  AgentAvatar: AgentAvatarStub,
  EmptyState: true,
  InteractionCard: true,
  MarkdownContent: true,
  ToolTrace: true,
  TurnTrace: true,
  WorkspaceApprovalCard: true,
}

const user: UiMessage = { id: 'user', role: 'user', content: '请继续' }

function streamingAssistant(): UiMessage {
  return {
    id: 'assistant-streaming',
    role: 'assistant',
    author: '流式助手',
    profile: 'streaming-profile',
    content: '正文已经开始输出',
    reasoning: '思考也已经出现',
    status: 'streaming',
    tools: [{ id: 'tool', name: 'read_file', status: 'running' }],
  }
}

function mountTimeline(component: Component, messages: UiMessage[], thinking: boolean) {
  return mount(component, {
    props: {
      ...(component === WorkspaceMessageTimeline ? { identity: 'timeline' } : {}),
      messages,
      thinking,
      agentAvatars: {
        'streaming-profile': 'avatar-streaming',
        'history-profile': 'avatar-history',
      },
    },
    global: { stubs },
  })
}

describe('TypingIndicator', () => {
  it('renders a compact avatar, three dots, elapsed time and status semantics', () => {
    const wrapper = mount(TypingIndicator, {
      props: { avatarName: '丫头', avatar: '', elapsedLabel: '3 秒' },
    })

    expect(wrapper.attributes('role')).toBe('status')
    expect(wrapper.attributes('aria-live')).toBe('polite')
    expect(wrapper.attributes('aria-label')).toBe('机器人正在输入')
    expect(wrapper.attributes('data-testid')).toBe('chat-run-thinking-dots')
    expect(wrapper.get('.agent-avatar').attributes('style')).toContain('width: 20px')
    expect(wrapper.findAll('.thinking-indicator__dot')).toHaveLength(3)
    expect(wrapper.text()).toContain('3 秒')
    wrapper.unmount()
  })
})

describe('message timeline typing state', () => {
  const timelines: Array<{ name: string; component: Component }> = [
    { name: 'ordinary', component: MessageTimeline },
    { name: 'workspace', component: WorkspaceMessageTimeline },
  ]

  beforeEach(() => {
    Element.prototype.scrollTo = vi.fn()
    vi.stubGlobal('ResizeObserver', class {
      observe() {}
      unobserve() {}
      disconnect() {}
    })
  })

  afterEach(() => {
    delete (Element.prototype as { scrollTo?: () => void }).scrollTo
    vi.unstubAllGlobals()
    vi.useRealTimers()
  })

  it.each(timelines)('keeps the typing row visible after content, reasoning and tools start ($name)', async ({ component }) => {
    const wrapper = mountTimeline(component, [user, streamingAssistant()], true)

    const indicator = wrapper.get('[data-testid="chat-run-thinking-dots"]')
    expect(indicator.attributes('role')).toBe('status')
    expect(indicator.attributes('aria-label')).toBe('机器人正在输入')
    expect(wrapper.findAll('.thinking-indicator__dot')).toHaveLength(3)
    expect(wrapper.text()).toContain('0 秒')
    const avatar = wrapper.get('[data-testid="chat-run-thinking-dots"] .agent-avatar-stub')
    expect(avatar.attributes('data-name')).toBe('流式助手')
    expect(avatar.attributes('data-avatar')).toBe('avatar-streaming')
    wrapper.unmount()
  })

  it.each(timelines)('hides the typing row when the run is no longer thinking ($name)', ({ component }) => {
    const wrapper = mountTimeline(component, [user, streamingAssistant()], false)

    expect(wrapper.find('[data-testid="chat-run-thinking-dots"]').exists()).toBe(false)
    wrapper.unmount()
  })

  it.each(timelines)('falls back from streaming agent to history agent and default agent ($name)', ({ component }) => {
    const streaming = mountTimeline(component, [
      user,
      { id: 'assistant-history', role: 'assistant', author: '历史助手', profile: 'history-profile', content: '旧回复' },
      streamingAssistant(),
    ], true)
    expect(streaming.get('[data-testid="chat-run-thinking-dots"] .agent-avatar-stub').attributes('data-name')).toBe('流式助手')
    streaming.unmount()

    const history = mountTimeline(component, [
      user,
      { id: 'assistant-history', role: 'assistant', author: '历史助手', profile: 'history-profile', content: '旧回复' },
    ], true)
    expect(history.get('[data-testid="chat-run-thinking-dots"] .agent-avatar-stub').attributes('data-name')).toBe('历史助手')
    expect(history.get('[data-testid="chat-run-thinking-dots"] .agent-avatar-stub').attributes('data-avatar')).toBe('avatar-history')
    history.unmount()

    const fallback = mountTimeline(component, [user], true)
    expect(fallback.get('[data-testid="chat-run-thinking-dots"] .agent-avatar-stub').attributes('data-name')).toBe('夭')
    expect(fallback.get('[data-testid="chat-run-thinking-dots"] .agent-avatar-stub').attributes('data-avatar')).toBe('')
    fallback.unmount()
  })

  it('counts elapsed time while thinking remains active', async () => {
    vi.useFakeTimers()
    const wrapper = mountTimeline(MessageTimeline, [user, streamingAssistant()], true)

    expect(wrapper.text()).toContain('0 秒')
    vi.advanceTimersByTime(1_100)
    await nextTick()
    expect(wrapper.text()).toContain('1 秒')
    wrapper.unmount()
  })
})