476 lines
14 KiB
TypeScript
476 lines
14 KiB
TypeScript
/**
|
||
* StickyModeHeader (U2) 单元测试。
|
||
*
|
||
* 覆盖场景：
|
||
* - @team 模式渲染 sticky 条（"专家团" badge + 任务目标 + 专家头像）
|
||
* - @board 模式渲染 sticky 条（"私董会" badge + 主题 + 专家头像）
|
||
* - 非 team/board 模式不渲染
|
||
* - 头像 popover 内容（name / description / persona）
|
||
* - Popover 打开（openChange true）→ 关闭（openChange false）→ 焦点回归触发头像
|
||
* - 头像 > 5 时显示 +N 溢出标识，点击打开完整专家列表 popover
|
||
*
|
||
* Mount strategy: native Vue createApp + reactive props wrapper (no @vue/test-utils
|
||
* dependency — happy-dom + vi.mock stubs keep the suite hermetic).
|
||
*
|
||
* 说明：viewport<768px 隐藏任务主题文本是 CSS media query 行为（声明式），
|
||
* happy-dom 不计算 CSS，故不单独测试该场景 — 由 tokens.css + 组件 style 保证。
|
||
*/
|
||
|
||
import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
|
||
import { computed, createApp, defineComponent, h, nextTick, reactive, ref, type Ref } from 'vue'
|
||
|
||
import type { IExpertTeamState, IExpertInfo } from '@/api/types'
|
||
import type { BoardState } from '@/stores/chatStream'
|
||
|
||
// ── 共享 mock 状态（vi.mock 工厂延迟执行，引用此处已初始化的 ref） ──
|
||
const teamState: Ref<IExpertTeamState | null> = ref(null)
|
||
const boardState: Ref<BoardState | null> = ref(null)
|
||
|
||
vi.mock('@/stores/team', () => ({
|
||
useTeamStore: () =>
|
||
reactive({
|
||
teamState,
|
||
activeExperts: computed(() =>
|
||
teamState.value?.experts.filter((e) => e.status === 'active') || [],
|
||
),
|
||
isTeamMode: computed(
|
||
() =>
|
||
teamState.value !== null && teamState.value.status !== 'dissolved',
|
||
),
|
||
}),
|
||
}))
|
||
|
||
vi.mock('@/stores/chatStore', () => ({
|
||
useChatStore: () => reactive({ boardState }),
|
||
}))
|
||
|
||
// ── Mock ant-design-vue Popover：受控渲染 + 点击触发 openChange ──
|
||
// 受控模式（open prop）：open=true 渲染 content；open=false 不渲染。
|
||
// 点击 trigger 时 emit openChange(!open)，让组件的 handleOpenChange 接管。
|
||
vi.mock('ant-design-vue', async () => {
|
||
const { defineComponent, h } = await import('vue')
|
||
const Popover = defineComponent({
|
||
name: 'APopover',
|
||
props: {
|
||
trigger: { type: String, default: 'hover' },
|
||
placement: { type: String, default: 'top' },
|
||
open: { type: Boolean, default: undefined },
|
||
overlayClassName: { type: String, default: '' },
|
||
},
|
||
emits: ['openChange'],
|
||
setup(props, { slots, emit }) {
|
||
return () => {
|
||
const triggerEl = slots.default?.()
|
||
const showContent = props.open === undefined ? true : props.open
|
||
return h('div', { class: ['ant-popover-stub', props.overlayClassName] }, [
|
||
h(
|
||
'div',
|
||
{
|
||
class: 'ant-popover-stub__trigger',
|
||
onClick: () => emit('openChange', !props.open),
|
||
},
|
||
triggerEl,
|
||
),
|
||
showContent && slots.content
|
||
? h('div', { class: 'ant-popover-stub__content' }, slots.content())
|
||
: null,
|
||
])
|
||
}
|
||
},
|
||
})
|
||
return { Popover }
|
||
})
|
||
|
||
const { default: StickyModeHeader } = await import(
|
||
'@/components/chat/StickyModeHeader.vue'
|
||
)
|
||
|
||
// ── Fixtures ────────────────────────────────────────────────────────
|
||
function makeExpert(overrides: Partial<IExpertInfo> = {}): IExpertInfo {
|
||
return {
|
||
id: 'e1',
|
||
name: '专家A',
|
||
persona: '资深架构师',
|
||
avatar: '🤖',
|
||
color: '#3b82f6',
|
||
is_lead: false,
|
||
bound_skills: ['react'],
|
||
status: 'active',
|
||
...overrides,
|
||
}
|
||
}
|
||
|
||
function makeTeamState(
|
||
overrides: Partial<IExpertTeamState> = {},
|
||
): IExpertTeamState {
|
||
return {
|
||
team_id: 'team-1',
|
||
status: 'executing',
|
||
experts: [makeExpert()],
|
||
plan_phases: [],
|
||
lead_expert: '专家A',
|
||
task_description: '实现用户登录功能',
|
||
...overrides,
|
||
}
|
||
}
|
||
|
||
function makeBoardState(overrides: Partial<BoardState> = {}): BoardState {
|
||
return {
|
||
topic: '如何提升团队协作效率',
|
||
experts: [
|
||
{
|
||
name: '主持人',
|
||
avatar: '🎯',
|
||
color: '#a855f7',
|
||
is_moderator: true,
|
||
persona: '引导讨论',
|
||
},
|
||
],
|
||
max_rounds: 3,
|
||
current_round: 1,
|
||
status: 'discussing',
|
||
...overrides,
|
||
}
|
||
}
|
||
|
||
// ── Mount helper ────────────────────────────────────────────────────
|
||
interface MountHandle {
|
||
container: HTMLElement
|
||
root: HTMLElement | null
|
||
unmount: () => void
|
||
}
|
||
|
||
function mountStickyHeader(): MountHandle {
|
||
const container = document.createElement('div')
|
||
document.body.appendChild(container)
|
||
const Wrapper = defineComponent({
|
||
render() {
|
||
return h(StickyModeHeader as never)
|
||
},
|
||
})
|
||
const app = createApp(Wrapper)
|
||
app.mount(container)
|
||
const root = container.querySelector('.sticky-mode-header')
|
||
return {
|
||
container,
|
||
root: root as HTMLElement | null,
|
||
unmount() {
|
||
app.unmount()
|
||
container.remove()
|
||
},
|
||
}
|
||
}
|
||
|
||
// ── Tests ───────────────────────────────────────────────────────────
|
||
describe('StickyModeHeader (U2)', () => {
|
||
beforeEach(() => {
|
||
teamState.value = null
|
||
boardState.value = null
|
||
})
|
||
|
||
afterEach(() => {
|
||
teamState.value = null
|
||
boardState.value = null
|
||
})
|
||
|
||
it('@team 模式渲染 sticky 条：专家团 badge + 任务目标 + 专家头像', async () => {
|
||
teamState.value = makeTeamState({
|
||
task_description: '实现用户登录功能',
|
||
experts: [
|
||
makeExpert({ id: 'e1', name: '专家A', avatar: '🤖', is_lead: true }),
|
||
makeExpert({ id: 'e2', name: '专家B', avatar: '🐱' }),
|
||
],
|
||
})
|
||
const { container, unmount } = mountStickyHeader()
|
||
await nextTick()
|
||
|
||
const root = container.querySelector('.sticky-mode-header')
|
||
expect(root).toBeTruthy()
|
||
expect(root?.classList.contains('sticky-mode-header--team')).toBe(true)
|
||
|
||
const badge = container.querySelector('.sticky-mode-header__badge')
|
||
expect(badge?.textContent).toBe('专家团')
|
||
|
||
const task = container.querySelector('.sticky-mode-header__task')
|
||
expect(task?.textContent).toBe('实现用户登录功能')
|
||
|
||
const avatars = container.querySelectorAll('.sticky-mode-header__avatar')
|
||
expect(avatars.length).toBe(2)
|
||
expect(avatars[0].textContent).toBe('🤖')
|
||
|
||
unmount()
|
||
})
|
||
|
||
it('@team 模式无 task_description 时回退到首阶段 name', async () => {
|
||
teamState.value = makeTeamState({
|
||
task_description: undefined,
|
||
plan_phases: [
|
||
{
|
||
id: 'p1',
|
||
name: '需求分析',
|
||
assigned_expert: '专家A',
|
||
depends_on: [],
|
||
status: 'in_progress',
|
||
},
|
||
],
|
||
})
|
||
const { container, unmount } = mountStickyHeader()
|
||
await nextTick()
|
||
|
||
const task = container.querySelector('.sticky-mode-header__task')
|
||
expect(task?.textContent).toBe('需求分析')
|
||
|
||
unmount()
|
||
})
|
||
|
||
it('@board 模式渲染 sticky 条：私董会 badge + 主题 + 专家头像', async () => {
|
||
boardState.value = makeBoardState({
|
||
topic: '产品定价策略',
|
||
experts: [
|
||
{
|
||
name: '主持人',
|
||
avatar: '🎯',
|
||
color: '#a855f7',
|
||
is_moderator: true,
|
||
persona: '引导讨论',
|
||
},
|
||
{
|
||
name: '专家1',
|
||
avatar: '💡',
|
||
color: '#3b82f6',
|
||
is_moderator: false,
|
||
persona: '市场分析',
|
||
},
|
||
],
|
||
})
|
||
const { container, unmount } = mountStickyHeader()
|
||
await nextTick()
|
||
|
||
const root = container.querySelector('.sticky-mode-header')
|
||
expect(root).toBeTruthy()
|
||
expect(root?.classList.contains('sticky-mode-header--board')).toBe(true)
|
||
|
||
const badge = container.querySelector('.sticky-mode-header__badge')
|
||
expect(badge?.textContent).toBe('私董会')
|
||
|
||
const task = container.querySelector('.sticky-mode-header__task')
|
||
expect(task?.textContent).toBe('产品定价策略')
|
||
|
||
const avatars = container.querySelectorAll('.sticky-mode-header__avatar')
|
||
expect(avatars.length).toBe(2)
|
||
|
||
unmount()
|
||
})
|
||
|
||
it('非 team/board 模式不渲染 sticky 条', async () => {
|
||
const { container, unmount } = mountStickyHeader()
|
||
await nextTick()
|
||
|
||
expect(container.querySelector('.sticky-mode-header')).toBeNull()
|
||
unmount()
|
||
})
|
||
|
||
it('@board 模式 status=dissolved 时不渲染', async () => {
|
||
boardState.value = makeBoardState({ status: 'dissolved' })
|
||
const { container, unmount } = mountStickyHeader()
|
||
await nextTick()
|
||
|
||
expect(container.querySelector('.sticky-mode-header')).toBeNull()
|
||
unmount()
|
||
})
|
||
|
||
it('专家头像点击弹出 popover 显示 name/description/persona', async () => {
|
||
teamState.value = makeTeamState({
|
||
experts: [
|
||
makeExpert({
|
||
id: 'e1',
|
||
name: '架构师',
|
||
avatar: '🤖',
|
||
persona: '专注系统设计',
|
||
bound_skills: ['react', 'vue'],
|
||
is_lead: true,
|
||
}),
|
||
],
|
||
})
|
||
const { container, unmount } = mountStickyHeader()
|
||
await nextTick()
|
||
|
||
const avatar = container.querySelector(
|
||
'.sticky-mode-header__avatar',
|
||
) as HTMLElement
|
||
expect(avatar).toBeTruthy()
|
||
|
||
// 初始 popover 未打开（open=false → content 不渲染）
|
||
expect(container.querySelector('.expert-detail')).toBeNull()
|
||
|
||
// 点击头像 → openChange(true) → 组件设置 openKey → content 渲染
|
||
avatar.click()
|
||
await nextTick()
|
||
|
||
const detail = container.querySelector('.expert-detail')
|
||
expect(detail).toBeTruthy()
|
||
expect(detail?.querySelector('.expert-detail__name')?.textContent).toBe(
|
||
'架构师',
|
||
)
|
||
// description 来自 bound_skills（"技能: react, vue"）
|
||
expect(detail?.querySelector('.expert-detail__desc')?.textContent).toBe(
|
||
'技能: react, vue',
|
||
)
|
||
expect(detail?.querySelector('.expert-detail__persona')?.textContent).toBe(
|
||
'专注系统设计',
|
||
)
|
||
|
||
unmount()
|
||
})
|
||
|
||
it('Popover 关闭后焦点回归触发头像', async () => {
|
||
teamState.value = makeTeamState({
|
||
experts: [makeExpert({ id: 'e1', name: '专家A' })],
|
||
})
|
||
const { container, unmount } = mountStickyHeader()
|
||
await nextTick()
|
||
|
||
const avatar = container.querySelector(
|
||
'.sticky-mode-header__avatar',
|
||
) as HTMLButtonElement
|
||
expect(avatar).toBeTruthy()
|
||
|
||
// 打开 popover
|
||
avatar.click()
|
||
await nextTick()
|
||
expect(container.querySelector('.expert-detail')).toBeTruthy()
|
||
|
||
// 再次点击 → openChange(false) → 组件清除 openKey + 焦点回归
|
||
avatar.click()
|
||
await nextTick()
|
||
|
||
expect(container.querySelector('.expert-detail')).toBeNull()
|
||
// 焦点回归到触发头像
|
||
expect(document.activeElement).toBe(avatar)
|
||
|
||
unmount()
|
||
})
|
||
|
||
it('头像超过 5 个时显示 +N 溢出标识', async () => {
|
||
const experts: IExpertInfo[] = Array.from({ length: 7 }, (_, i) =>
|
||
makeExpert({
|
||
id: `e${i + 1}`,
|
||
name: `专家${i + 1}`,
|
||
avatar: `${i + 1}`,
|
||
}),
|
||
)
|
||
teamState.value = makeTeamState({ experts })
|
||
|
||
const { container, unmount } = mountStickyHeader()
|
||
await nextTick()
|
||
|
||
// 5 个可见头像 + 1 个 +N 溢出标识
|
||
const avatars = container.querySelectorAll('.sticky-mode-header__avatar')
|
||
expect(avatars.length).toBe(6) // 5 visible + 1 overflow
|
||
|
||
const overflow = container.querySelector(
|
||
'.sticky-mode-header__avatar--overflow',
|
||
)
|
||
expect(overflow).toBeTruthy()
|
||
expect(overflow?.textContent?.trim()).toBe('+2')
|
||
|
||
unmount()
|
||
})
|
||
|
||
it('+N 点击打开完整专家列表 popover', async () => {
|
||
const experts: IExpertInfo[] = Array.from({ length: 7 }, (_, i) =>
|
||
makeExpert({
|
||
id: `e${i + 1}`,
|
||
name: `专家${i + 1}`,
|
||
avatar: `${i + 1}`,
|
||
}),
|
||
)
|
||
teamState.value = makeTeamState({ experts })
|
||
|
||
const { container, unmount } = mountStickyHeader()
|
||
await nextTick()
|
||
|
||
const overflow = container.querySelector(
|
||
'.sticky-mode-header__avatar--overflow',
|
||
) as HTMLButtonElement
|
||
expect(overflow).toBeTruthy()
|
||
|
||
// 初始无专家列表
|
||
expect(container.querySelector('.expert-list')).toBeNull()
|
||
|
||
// 点击 +N → 打开列表 popover
|
||
overflow.click()
|
||
await nextTick()
|
||
|
||
const list = container.querySelector('.expert-list')
|
||
expect(list).toBeTruthy()
|
||
// 溢出专家 = 7 - 5 = 2
|
||
const items = list?.querySelectorAll('.expert-list__item')
|
||
expect(items?.length).toBe(2)
|
||
|
||
unmount()
|
||
})
|
||
|
||
it('@team 模式 lead 头像标记 --lead 样式', async () => {
|
||
teamState.value = makeTeamState({
|
||
experts: [
|
||
makeExpert({ id: 'e1', name: 'Lead', is_lead: true }),
|
||
makeExpert({ id: 'e2', name: 'Member', is_lead: false }),
|
||
],
|
||
})
|
||
const { container, unmount } = mountStickyHeader()
|
||
await nextTick()
|
||
|
||
const avatars = container.querySelectorAll('.sticky-mode-header__avatar')
|
||
expect(avatars[0].classList.contains('sticky-mode-header__avatar--lead'))
|
||
.toBe(true)
|
||
expect(avatars[1].classList.contains('sticky-mode-header__avatar--lead'))
|
||
.toBe(false)
|
||
|
||
unmount()
|
||
})
|
||
|
||
it('@board 模式主持人显示 description', async () => {
|
||
boardState.value = makeBoardState({
|
||
experts: [
|
||
{
|
||
name: '主持人',
|
||
avatar: '🎯',
|
||
color: '#a855f7',
|
||
is_moderator: true,
|
||
persona: '引导者',
|
||
},
|
||
],
|
||
})
|
||
const { container, unmount } = mountStickyHeader()
|
||
await nextTick()
|
||
|
||
const avatar = container.querySelector(
|
||
'.sticky-mode-header__avatar',
|
||
) as HTMLButtonElement
|
||
avatar.click()
|
||
await nextTick()
|
||
|
||
const desc = container.querySelector('.expert-detail__desc')
|
||
expect(desc?.textContent).toBe('主持人')
|
||
|
||
unmount()
|
||
})
|
||
|
||
it('sticky 定位使用 --z-sticky token', async () => {
|
||
teamState.value = makeTeamState()
|
||
const { container, unmount } = mountStickyHeader()
|
||
await nextTick()
|
||
|
||
const root = container.querySelector(
|
||
'.sticky-mode-header',
|
||
) as HTMLElement
|
||
expect(root).toBeTruthy()
|
||
// position: sticky 由 CSS 设置，happy-dom 不计算样式
|
||
// 断言 class 表明模式 token 应用
|
||
expect(root.classList.contains('sticky-mode-header--team')).toBe(true)
|
||
|
||
unmount()
|
||
})
|
||
})
|