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') })