215 lines
9.1 KiB
TypeScript
215 lines
9.1 KiB
TypeScript
import { computed, ref } from 'vue'
|
|
import { flushPromises, mount, type VueWrapper } from '@vue/test-utils'
|
|
import { afterEach, describe, expect, it, vi } from 'vitest'
|
|
import BreakdownPage from './BreakdownPage.vue'
|
|
import { projectContextKey, type useProjectData } from '../projects/context'
|
|
import type { ProjectDetail } from '../projects/types'
|
|
import type { Checkpoint } from '../workflows/types'
|
|
import type { BreakdownModule, EpisodePlan } from './types'
|
|
|
|
let wrapper: VueWrapper | undefined
|
|
afterEach(() => {
|
|
wrapper?.unmount()
|
|
wrapper = undefined
|
|
document.body.innerHTML = ''
|
|
vi.unstubAllGlobals()
|
|
})
|
|
|
|
/** 长主体、长分镜与长任务列表，用真实 Naive 滚动组件验证内容边界。 */
|
|
function checkpoint(): Checkpoint {
|
|
const plan: EpisodePlan = {
|
|
episodeNo: 1,
|
|
episodeTitle: '长剧集',
|
|
storyGoal: '',
|
|
centralConflict: '',
|
|
emotionalArc: '',
|
|
pacing: '',
|
|
endingHook: '',
|
|
beats: Array.from({ length: 25 }, (_, i) => ({
|
|
beatNo: i + 1,
|
|
title: `节拍 ${i + 1}`,
|
|
purpose: 'action',
|
|
description: '节拍内容'.repeat(100),
|
|
visualFocus: '',
|
|
narrativeGoal: '',
|
|
emotionalTone: '',
|
|
estimatedDurationSeconds: 5,
|
|
subjectRefs: [],
|
|
isKeyBeat: false
|
|
}))
|
|
}
|
|
return {
|
|
checkpointId: 'long-breakdown',
|
|
workflowName: 'breakdown',
|
|
createdAt: '2026-08-28T00:00:00Z',
|
|
state: {
|
|
workflowExecution: { executionId: 'run', status: 'completed', startedAt: '2026-08-28T00:00:00Z' },
|
|
breakdownResult: {
|
|
subjectCandidates: (['character', 'scene', 'prop'] as BreakdownModule[]).flatMap(module =>
|
|
Array.from({ length: 30 }, (_, i) => ({
|
|
profileId: `${module}-${i}`,
|
|
name: `${module} 主体 ${i + 1}`,
|
|
ref: `@${module}${i}`,
|
|
description: '很长的主体描述。'.repeat(100),
|
|
module,
|
|
appearance_prompt: '外观描述'
|
|
}))
|
|
),
|
|
subjectForms: [],
|
|
storyboardPlans: [plan],
|
|
storyboardEpisodeShots: [
|
|
{
|
|
episodeNo: 1,
|
|
episodePlan: plan,
|
|
beatShots: plan.beats.map(beat => ({
|
|
beatNo: beat.beatNo,
|
|
shots: [
|
|
{
|
|
shotNo: 1,
|
|
title: `镜头 ${beat.beatNo}`,
|
|
description: '镜头内容',
|
|
visualFocus: '',
|
|
subjectRefs: [],
|
|
durationSeconds: 5
|
|
}
|
|
]
|
|
}))
|
|
}
|
|
]
|
|
},
|
|
tasks: Array.from({ length: 50 }, (_, i) => ({
|
|
taskId: `task-${i}`,
|
|
module: 'character',
|
|
group: {
|
|
groupId: `group-${i}`,
|
|
groupNo: i + 1,
|
|
startEpisodeNo: i + 1,
|
|
endEpisodeNo: i + 1,
|
|
episodes: []
|
|
},
|
|
status: 'failed',
|
|
attempt: 1,
|
|
errorMessage: `任务错误 ${i + 1}`
|
|
}))
|
|
}
|
|
}
|
|
}
|
|
|
|
/** 提供响应式 checkpoint，模拟轮询更新但不连接后端或启动模型任务。 */
|
|
function mountPage(records = [checkpoint()], episodes = 1): ReturnType<typeof useProjectData> {
|
|
const project: ProjectDetail = {
|
|
id: 'breakdown-scroll-test',
|
|
title: '滚动回归',
|
|
topic: '',
|
|
style: '',
|
|
status: 'completed',
|
|
createdAt: '',
|
|
updatedAt: '',
|
|
characters: [],
|
|
world: null,
|
|
reviews: [],
|
|
tasks: [],
|
|
episodes: episodes ? [{ episode: 1, title: '第一集', content: '正文' }] : []
|
|
}
|
|
const data = ref({ project, checkpoints: records })
|
|
const provided: ReturnType<typeof useProjectData> = {
|
|
data,
|
|
project: computed(() => data.value.project),
|
|
checkpoints: computed(() => data.value.checkpoints),
|
|
loading: ref(false),
|
|
error: ref(''),
|
|
updatedAt: ref(''),
|
|
refresh: vi.fn<() => Promise<void>>().mockResolvedValue()
|
|
}
|
|
wrapper = mount(BreakdownPage, {
|
|
attachTo: document.body,
|
|
global: { provide: { [projectContextKey as symbol]: provided }, stubs: { RouterLink: true } }
|
|
})
|
|
return provided
|
|
}
|
|
|
|
/** 切换真实标签，不直接修改组件内部状态。 */
|
|
async function selectTab(label: string) {
|
|
await wrapper!
|
|
.findAll('.result-toolbar .n-tabs-tab')
|
|
.find(tab => tab.text().startsWith(label))!
|
|
.trigger('click')
|
|
await flushPromises()
|
|
}
|
|
|
|
describe('拆解页内容滚动', () => {
|
|
it.each([
|
|
['人物', 'character 主体 30'],
|
|
['场景', 'scene 主体 30'],
|
|
['道具', 'prop 主体 30'],
|
|
['分镜', '镜头 25'],
|
|
['任务明细', '任务错误 50']
|
|
])('%s 的末项始终放在独立结果滚动容器内', async (label, lastItem) => {
|
|
mountPage()
|
|
await selectTab(label)
|
|
expect(wrapper!.find('.workspace-scroll').exists()).toBe(false)
|
|
const results = wrapper!.get('.breakdown-results-scroll .n-scrollbar-container')
|
|
expect(results.text()).toContain(lastItem)
|
|
expect(results.find('.result-toolbar').exists()).toBe(false)
|
|
expect(results.find('.history-panel').exists()).toBe(false)
|
|
expect(wrapper!.get('.history-panel .n-scrollbar-container').text()).toContain('执行记录')
|
|
expect(wrapper!.get('[data-workspace-tools]').attributes('aria-expanded')).toBe('false')
|
|
expect(results.find('.table-scroll').exists()).toBe(label === '任务明细')
|
|
})
|
|
|
|
it('刷新和开关配置保留阅读位置，切换标签只重置结果区，不改变执行记录位置', async () => {
|
|
const fetcher = vi.fn<typeof fetch>()
|
|
vi.stubGlobal('fetch', fetcher)
|
|
const provided = mountPage()
|
|
const results = wrapper!.get<HTMLElement>('.breakdown-results-scroll .n-scrollbar-container').element
|
|
const history = wrapper!.get<HTMLElement>('.history-panel .n-scrollbar-container').element
|
|
results.scrollTop = 900
|
|
history.scrollTop = 120
|
|
await wrapper!.get('[data-workspace-tools]').trigger('click')
|
|
await flushPromises()
|
|
expect(wrapper!.get('.workspace-tools-drawer').element.closest('.workspace-split')).toBeNull()
|
|
await wrapper!.get('#group-size').setValue('2')
|
|
await wrapper!.get('[aria-label="关闭操作面板"]').trigger('click')
|
|
provided.data.value!.checkpoints = [checkpoint()]
|
|
await flushPromises()
|
|
expect(wrapper!.get('.breakdown-results-scroll .n-scrollbar-container').element).toBe(results)
|
|
expect(results.scrollTop).toBe(900)
|
|
await selectTab('场景')
|
|
const next = wrapper!.get<HTMLElement>('.breakdown-results-scroll .n-scrollbar-container').element
|
|
expect(next).not.toBe(results)
|
|
expect(next.scrollTop).toBe(0)
|
|
expect(wrapper!.get('.history-panel .n-scrollbar-container').element).toBe(history)
|
|
expect(history.scrollTop).toBe(120)
|
|
await wrapper!.get('[data-workspace-tools]').trigger('click')
|
|
await flushPromises()
|
|
expect(wrapper!.get<HTMLInputElement>('#group-size').element.value).toBe('2')
|
|
expect(fetcher).not.toHaveBeenCalled()
|
|
})
|
|
|
|
it('关闭设置时错误仍可见，详细校验与恢复在面板内，不挤占结果高度', async () => {
|
|
const record = checkpoint()
|
|
record.state.workflowExecution!.status = 'failed'
|
|
record.state.workflowExecution!.errorMessage = '工作流中断'
|
|
record.state.breakdownResult!.storyboardShotValidation = {
|
|
valid: false,
|
|
issues: [{ episodeNo: 1, message: '缺少形态绑定' }]
|
|
}
|
|
mountPage([record])
|
|
const feedback = wrapper!.get('.workspace-feedback')
|
|
expect(feedback.text()).toContain('工作流中断')
|
|
expect(feedback.text()).toContain('分镜校验未通过，共 1 项问题')
|
|
expect(feedback.find('.breakdown-results-section').exists()).toBe(false)
|
|
await feedback.get('button').trigger('click')
|
|
await flushPromises()
|
|
expect(wrapper!.get('.workspace-tools-drawer').text()).toContain('缺少形态绑定')
|
|
expect(wrapper!.get('.workspace-tools-drawer').text()).toContain('重试失败抽取')
|
|
})
|
|
|
|
it('没有正式剧集时保留可滚动的空状态，不显示拆解设置与结果', () => {
|
|
mountPage([], 0)
|
|
expect(wrapper!.get('.panel-scroll .n-scrollbar-container').text()).toContain('还没有可拆解的剧集')
|
|
expect(wrapper!.find('.breakdown-results-section').exists()).toBe(false)
|
|
expect(wrapper!.find('[data-workspace-tools]').exists()).toBe(false)
|
|
})
|
|
})
|