feat: 收口组件样式并调整移动端侧栏
This commit is contained in:
GJ
@@ -0,0 +1,218 @@
|
||||
import { h } from 'vue'
|
||||
import { createMemoryHistory, createRouter } from 'vue-router'
|
||||
import { flushPromises, mount, type VueWrapper } from '@vue/test-utils'
|
||||
import { afterEach, describe, expect, it, vi } from 'vitest'
|
||||
import { readFileSync } from 'node:fs'
|
||||
import App from '@/App.vue'
|
||||
import ProjectLayout from '@/features/projects/ProjectLayout.vue'
|
||||
import { isProjectComplete } from '@/features/projects/access'
|
||||
import { projectsApi } from '@/features/projects/api'
|
||||
import type { ProjectDetail, ProjectStatus } from '@/features/projects/types'
|
||||
import { readAllStyles } from '@/testing/styles'
|
||||
|
||||
const downstream = ['breakdown', 'visual-style', 'subject-identity', 'subject-images', 'storyboard', 'production']
|
||||
let wrapper: VueWrapper | undefined
|
||||
afterEach(() => {
|
||||
wrapper?.unmount()
|
||||
wrapper = undefined
|
||||
document.body.innerHTML = ''
|
||||
localStorage.clear()
|
||||
vi.useRealTimers()
|
||||
vi.restoreAllMocks()
|
||||
})
|
||||
|
||||
/** 用已有剧集模拟中途生成的项目，完成与否必须取 status 而非数组长度。 */
|
||||
function project(id: string, status: ProjectStatus): ProjectDetail {
|
||||
return {
|
||||
id,
|
||||
status,
|
||||
title: '访问限制测试',
|
||||
topic: '',
|
||||
style: null,
|
||||
createdAt: '',
|
||||
updatedAt: '',
|
||||
episodes: [{ episode: 1, title: '部分剧集', content: '已经写入的内容' }],
|
||||
characters: [],
|
||||
world: null,
|
||||
reviews: [],
|
||||
tasks: []
|
||||
}
|
||||
}
|
||||
|
||||
/** 真实项目布局与侧栏，子工作区以挂载探针代替，防止测试发起实际生成请求。 */
|
||||
async function openProject(initialPath: string) {
|
||||
const mounted = vi.fn<(path: string) => void>()
|
||||
const router = createRouter({
|
||||
history: createMemoryHistory(),
|
||||
routes: [
|
||||
{ path: '/projects', component: { render: () => h('div', '项目列表') } },
|
||||
{
|
||||
path: '/projects/:projectId',
|
||||
component: ProjectLayout,
|
||||
children: ['create-drama', ...downstream].map(path => ({
|
||||
path,
|
||||
component: {
|
||||
setup() {
|
||||
mounted(path)
|
||||
return () => h('div', { class: 'workspace-probe' }, path)
|
||||
}
|
||||
}
|
||||
}))
|
||||
}
|
||||
]
|
||||
})
|
||||
await router.push(initialPath)
|
||||
wrapper = mount(App, { attachTo: document.body, global: { plugins: [router] } })
|
||||
await flushPromises()
|
||||
return { router, mounted }
|
||||
}
|
||||
|
||||
describe('剧本完成前的下游访问限制', () => {
|
||||
it('进入图库暂停父级轮询，返回其他工作区恢复定时更新', async () => {
|
||||
vi.useFakeTimers()
|
||||
const detail = vi.spyOn(projectsApi, 'detail').mockResolvedValue(project('manual-gallery', 'completed'))
|
||||
const checkpoints = vi.spyOn(projectsApi, 'checkpoints').mockResolvedValue([])
|
||||
const { router } = await openProject('/projects/manual-gallery/production')
|
||||
await router.push('/projects/manual-gallery/subject-images')
|
||||
await flushPromises()
|
||||
await vi.advanceTimersByTimeAsync(30_000)
|
||||
expect(detail).toHaveBeenCalledTimes(1)
|
||||
expect(checkpoints).toHaveBeenCalledTimes(1)
|
||||
await router.push('/projects/manual-gallery/production')
|
||||
await flushPromises()
|
||||
await vi.advanceTimersByTimeAsync(6000)
|
||||
expect(detail).toHaveBeenCalledTimes(2)
|
||||
expect(checkpoints).toHaveBeenCalledTimes(2)
|
||||
})
|
||||
|
||||
it('图库直接链接只读取一次项目，未完成时可手动刷新解锁', async () => {
|
||||
vi.useFakeTimers()
|
||||
let status: ProjectStatus = 'generating'
|
||||
const detail = vi.spyOn(projectsApi, 'detail').mockImplementation(async id => project(id, status))
|
||||
vi.spyOn(projectsApi, 'checkpoints').mockResolvedValue([])
|
||||
await openProject('/projects/manual-gate/subject-images')
|
||||
await vi.advanceTimersByTimeAsync(30_000)
|
||||
expect(detail).toHaveBeenCalledTimes(1)
|
||||
expect(wrapper!.get('.project-access-gate').text()).not.toContain('状态会自动更新')
|
||||
status = 'completed'
|
||||
const refresh = wrapper!.findAll('button').find(button => button.text() === '刷新项目状态')!
|
||||
await refresh.trigger('click')
|
||||
await flushPromises()
|
||||
expect(detail).toHaveBeenCalledTimes(2)
|
||||
expect(wrapper!.get('.workspace-probe').text()).toBe('subject-images')
|
||||
})
|
||||
|
||||
it.each(['draft', 'generating', 'need_review', 'failed'] as const)(
|
||||
'%s 不解锁导航，也不挂载直接链接对应的工作区',
|
||||
async status => {
|
||||
vi.spyOn(projectsApi, 'detail').mockResolvedValue(project('unfinished', status))
|
||||
vi.spyOn(projectsApi, 'checkpoints').mockResolvedValue([])
|
||||
const { router, mounted } = await openProject('/projects/unfinished/production')
|
||||
for (const path of downstream) {
|
||||
await router.push(`/projects/unfinished/${path}`)
|
||||
await flushPromises()
|
||||
expect(wrapper!.get('.project-access-gate').text()).toContain('请先完成剧本创作')
|
||||
expect(wrapper!.find('.workspace-probe').exists()).toBe(false)
|
||||
expect(wrapper!.find(`.n-menu a[href="/projects/unfinished/${path}"]`).exists()).toBe(false)
|
||||
}
|
||||
expect(mounted).not.toHaveBeenCalled()
|
||||
expect(wrapper!.findAll('.n-menu [aria-disabled="true"]')).toHaveLength(6)
|
||||
await wrapper!.get('.project-access-gate button').trigger('click')
|
||||
await flushPromises()
|
||||
expect(router.currentRoute.value.path).toBe('/projects/unfinished/create-drama')
|
||||
expect(wrapper!.get('.workspace-probe').text()).toBe('create-drama')
|
||||
expect(mounted).toHaveBeenCalledExactlyOnceWith('create-drama')
|
||||
}
|
||||
)
|
||||
|
||||
it('轮询完成状态自动解锁；重新变为待审核时撤下下游面板', async () => {
|
||||
vi.useFakeTimers()
|
||||
let status: ProjectStatus = 'generating'
|
||||
vi.spyOn(projectsApi, 'detail').mockImplementation(async id => project(id, status))
|
||||
vi.spyOn(projectsApi, 'checkpoints').mockResolvedValue([])
|
||||
const { mounted } = await openProject('/projects/polling/production')
|
||||
expect(mounted).not.toHaveBeenCalled()
|
||||
status = 'completed'
|
||||
await vi.advanceTimersByTimeAsync(6000)
|
||||
await flushPromises()
|
||||
expect(wrapper!.get('.workspace-probe').text()).toBe('production')
|
||||
expect(wrapper!.findAll('.n-menu a')).toHaveLength(8)
|
||||
status = 'need_review'
|
||||
await vi.advanceTimersByTimeAsync(6000)
|
||||
await flushPromises()
|
||||
expect(wrapper!.find('.workspace-probe').exists()).toBe(false)
|
||||
expect(wrapper!.get('.project-access-gate').text()).toContain('请先完成剧本创作')
|
||||
expect(wrapper!.findAll('.n-menu a')).toHaveLength(2)
|
||||
expect(mounted).toHaveBeenCalledExactlyOnceWith('production')
|
||||
})
|
||||
|
||||
it('切换项目与首次读取期间不能沿用上一个已完成项目的权限', async () => {
|
||||
let resolveSecond!: (value: ProjectDetail) => void
|
||||
const pending = new Promise<ProjectDetail>(resolve => {
|
||||
resolveSecond = resolve
|
||||
})
|
||||
vi.spyOn(projectsApi, 'detail').mockImplementation(async id =>
|
||||
id === 'first' ? project(id, 'completed') : pending
|
||||
)
|
||||
vi.spyOn(projectsApi, 'checkpoints').mockResolvedValue([])
|
||||
const { router, mounted } = await openProject('/projects/first/production')
|
||||
expect(wrapper!.findAll('.n-menu a')).toHaveLength(8)
|
||||
await router.push('/projects/second/production')
|
||||
await flushPromises()
|
||||
expect(wrapper!.findAll('.n-menu a')).toHaveLength(2)
|
||||
expect(wrapper!.find('.workspace-probe').exists()).toBe(false)
|
||||
resolveSecond(project('second', 'draft'))
|
||||
await flushPromises()
|
||||
expect(wrapper!.find('.workspace-probe').exists()).toBe(false)
|
||||
expect(mounted).toHaveBeenCalledExactlyOnceWith('production')
|
||||
await router.push('/projects')
|
||||
await flushPromises()
|
||||
expect(wrapper!.findAll('.n-menu a')).toHaveLength(1)
|
||||
})
|
||||
|
||||
it('读取失败保持锁定；错误区重试成功后解锁，页头不恢复标签与刷新按钮', async () => {
|
||||
const detail = vi
|
||||
.spyOn(projectsApi, 'detail')
|
||||
.mockRejectedValueOnce(new Error('项目读取失败'))
|
||||
.mockResolvedValue(project('retry', 'completed'))
|
||||
vi.spyOn(projectsApi, 'checkpoints').mockResolvedValue([])
|
||||
const { mounted } = await openProject('/projects/retry/storyboard')
|
||||
expect(mounted).not.toHaveBeenCalled()
|
||||
expect(wrapper!.findAll('.n-menu a')).toHaveLength(2)
|
||||
expect(wrapper!.find('.project-header .n-button').exists()).toBe(false)
|
||||
expect(wrapper!.find('.project-header .n-tag').exists()).toBe(false)
|
||||
await wrapper!.get('.project-notices button').trigger('click')
|
||||
await flushPromises()
|
||||
expect(detail).toHaveBeenCalledTimes(2)
|
||||
expect(mounted).toHaveBeenCalledExactlyOnceWith('storyboard')
|
||||
})
|
||||
|
||||
it('不存在、未知状态或项目 ID 不匹配时默认锁定', () => {
|
||||
expect(isProjectComplete(null, 'p')).toBe(false)
|
||||
expect(isProjectComplete({ id: 'other', status: 'completed' }, 'p')).toBe(false)
|
||||
expect(isProjectComplete({ id: 'p', status: 'unknown' as ProjectStatus }, 'p')).toBe(false)
|
||||
expect(isProjectComplete({ id: 'p', status: 'completed' }, 'p')).toBe(true)
|
||||
})
|
||||
|
||||
it('配置复选框居中对齐，输入表面随面板背景分层而非增加边框', () => {
|
||||
// 保护布局契约；实际像素对齐仍需浏览器视觉验收。
|
||||
const css = readAllStyles()
|
||||
expect(css).toMatch(
|
||||
/\.n-checkbox\.control-row-checkbox\s*\{[^}]*align-items:\s*center;[^}]*min-height:\s*34px;[^}]*padding-block:\s*0/
|
||||
)
|
||||
expect(css).toMatch(/\.app-dialog\s*\{[^}]*--app-field:\s*var\(--app-control\)/)
|
||||
expect(readFileSync('src/styles/styles.css', 'utf8')).toMatch(
|
||||
/\.panel\s*\{[^}]*--app-field:\s*var\(--app-control\)/
|
||||
)
|
||||
for (const path of [
|
||||
'production/ProductionPage.vue',
|
||||
'storyboard/StoryboardPage.vue',
|
||||
'subject-identity/SubjectIdentityPage.vue',
|
||||
'subject-images/SubjectImagesPage.vue'
|
||||
]) {
|
||||
const source = readFileSync(`src/features/${path}`, 'utf8')
|
||||
expect(source).toContain('control-row-checkbox')
|
||||
expect(source).not.toMatch(/<NCheckbox\b[^>]*class="[^"]*pb-[23]/)
|
||||
}
|
||||
})
|
||||
})
|
||||
Reference in New Issue
Block a user