77 lines
3.0 KiB
JavaScript
77 lines
3.0 KiB
JavaScript
/**
|
||
* 回归：路由过渡的页面外壳（.fms-page-holder，由 getPageWrapper 的渲染函数创建）。
|
||
*
|
||
* 路由页面是异步组件（懒加载 chunk），加载中的渲染是注释节点（非元素根）——
|
||
* <Transition> 无法动画化非元素根：既报 warning（Component inside <Transition>
|
||
* renders non-element root node that cannot be animated），out-in 下 enter 也会失败、
|
||
* 页面内容一直不显示。页面外壳是恒定元素，兜住该场景。
|
||
*
|
||
* 本用例用「先渲染 null 再渲染元素」的桩模拟异步组件加载过程，断言：
|
||
* 1. 全程不出现 non-element root 警告；
|
||
* 2. 异步就绪后内容正常显示（过渡没有吞掉页面）。
|
||
*/
|
||
import { describe, it, expect, beforeEach, vi } from 'vitest'
|
||
import { flushPromises, mount } from '@vue/test-utils'
|
||
|
||
vi.mock('@/views/dashboard/index.vue', async () => {
|
||
const { h, onMounted, ref } = await import('vue')
|
||
return {
|
||
default: {
|
||
name: 'Dashboard',
|
||
setup() {
|
||
const ready = ref(false)
|
||
onMounted(() => {
|
||
setTimeout(() => {
|
||
ready.value = true
|
||
}, 30)
|
||
})
|
||
// 加载中渲染 null（Vue 渲染为注释节点），模拟异步组件解析前的状态
|
||
return () => (ready.value ? h('div', { 'data-page': 'Dashboard' }, 'DB') : null)
|
||
},
|
||
},
|
||
}
|
||
})
|
||
vi.mock('@/views/detail/DetailPage.vue', () => ({
|
||
default: { name: 'DetailPageStub', props: ['id'], template: '<div />' },
|
||
}))
|
||
vi.mock('@/services/api', () => ({
|
||
loadDataApi: vi.fn(() => Promise.resolve({ data: [], code: 0, success: true })),
|
||
describeApi: vi.fn(() => Promise.resolve({ data: [], code: 0, success: true })),
|
||
saveObjectApi: vi.fn(() => Promise.resolve({ code: 0, success: true })),
|
||
nextIdApi: vi.fn(() => Promise.resolve({ data: 1, code: 0, success: true })),
|
||
}))
|
||
|
||
import App from '@/App.vue'
|
||
import router from '@/router'
|
||
import { createTestPinia } from '../helpers/app.js'
|
||
import { useAuthStore } from '@/stores/auth'
|
||
|
||
beforeEach(async () => {
|
||
localStorage.clear()
|
||
sessionStorage.clear()
|
||
createTestPinia()
|
||
useAuthStore().setSession({ token: 't', user: { id: 1, account: 'g3soft', name: 'U' } }, 'ORG')
|
||
await router.push('/dashboard')
|
||
await router.isReady()
|
||
})
|
||
|
||
describe('路由过渡 · 页面外壳', () => {
|
||
it('异步页面加载中不产生 non-element root 警告，完成后内容正常显示', async () => {
|
||
const warnSpy = vi.spyOn(console, 'warn').mockImplementation(() => {})
|
||
const wrapper = mount(App, { global: { plugins: [router] }, attachTo: document.body })
|
||
await flushPromises()
|
||
|
||
// 等待桩组件异步就绪（模拟 chunk 下载完成）
|
||
await new Promise((resolve) => setTimeout(resolve, 60))
|
||
await flushPromises()
|
||
|
||
const warnings = warnSpy.mock.calls.map((args) => String(args[0])).join('\n')
|
||
expect(warnings).not.toContain('non-element root node')
|
||
// 内容最终可见（过渡未吞掉页面）
|
||
expect(wrapper.find('[data-page="Dashboard"]').exists()).toBe(true)
|
||
|
||
warnSpy.mockRestore()
|
||
wrapper.unmount()
|
||
})
|
||
})
|