This commit is contained in:
51
scripts/tests/pageTransitionRoots.test.mjs
Normal file
51
scripts/tests/pageTransitionRoots.test.mjs
Normal file
@@ -0,0 +1,51 @@
|
||||
import test from 'node:test'
|
||||
import assert from 'node:assert/strict'
|
||||
import { readFileSync } from 'node:fs'
|
||||
import { compileTemplate, parse } from '@vue/compiler-sfc'
|
||||
|
||||
const pages = [
|
||||
['asset-information', 'div', 'PollingStateDialog', 'pollingStateTarget'],
|
||||
['device-list', 'ArtTableFullScreen', 'PollingBatchDialog', 'pollingBatchIds'],
|
||||
['iot-card-management', 'ArtTableFullScreen', 'PollingBatchDialog', 'pollingBatchIds']
|
||||
]
|
||||
|
||||
for (const [page, rootTag, dialogTag, dialogState] of pages) {
|
||||
test(`${page} keeps its polling dialog inside one transition-compatible page root`, () => {
|
||||
const filename = `src/views/asset-management/${page}/index.vue`
|
||||
const { descriptor, errors } = parse(readFileSync(filename, 'utf8'), { filename })
|
||||
assert.deepEqual(errors, [])
|
||||
const roots = descriptor.template.ast.children.filter((node) => node.type === 1)
|
||||
assert.equal(roots.length, 1, 'sibling polling dialogs turn the page into a Fragment')
|
||||
assert.equal(roots[0].tag, rootTag, 'preserve the existing page/layout root')
|
||||
|
||||
const dialog = roots[0].children.find((node) => node.type === 1 && node.tag === dialogTag)
|
||||
assert.ok(dialog, 'the polling dialog must remain available inside the page root')
|
||||
const condition = dialog.props.find((prop) => prop.type === 7 && prop.name === 'if')
|
||||
assert.equal(condition?.exp.content, dialogState)
|
||||
const close = dialog.props.find(
|
||||
(prop) => prop.type === 7 && prop.name === 'on' && prop.arg?.content === 'close'
|
||||
)
|
||||
assert.equal(close?.exp.content, `${dialogState} = null`)
|
||||
|
||||
// In production, a Fragment root never completes Transition's out-in leave,
|
||||
// leaving KeepAlive on a comment placeholder for every subsequent route.
|
||||
const compiled = compileTemplate({
|
||||
source: descriptor.template.content,
|
||||
filename,
|
||||
id: page,
|
||||
isProd: true,
|
||||
compilerOptions: { expressionPlugins: ['typescript'] }
|
||||
})
|
||||
assert.deepEqual(compiled.errors, [])
|
||||
assert.equal(compiled.ast.codegenNode.type, 13, 'the page must compile to a single VNode')
|
||||
assert.equal(typeof compiled.ast.codegenNode.tag, 'string', 'never compile a Fragment root')
|
||||
})
|
||||
}
|
||||
|
||||
test('the table page layout provides a native element root for route transitions', () => {
|
||||
const filename = 'src/components/core/tables/ArtTableFullScreen.vue'
|
||||
const { descriptor } = parse(readFileSync(filename, 'utf8'), { filename })
|
||||
const roots = descriptor.template.ast.children.filter((node) => node.type === 1)
|
||||
assert.equal(roots.length, 1)
|
||||
assert.equal(roots[0].tag, 'div')
|
||||
})
|
||||
Reference in New Issue
Block a user