| 12345678910111213141516171819202122232425262728293031323334 |
- import assert from 'node:assert/strict'
- import { readFile } from 'node:fs/promises'
- import test from 'node:test'
- import postcss from 'postcss'
- import { parse } from '@vue/compiler-sfc'
- const pagePath = new URL('../src/views/subSystem/waterSupply/components/WaterAlarmPage.vue', import.meta.url)
- const themePath = new URL('../src/views/subSystem/waterSupply/components/waterSupplyPageTheme.scss', import.meta.url)
- async function effectiveDeclarations(selector) {
- const { descriptor } = parse(await readFile(pagePath, 'utf8'))
- const sharedTheme = await readFile(themePath, 'utf8')
- const scopedStyle = descriptor.styles.find(style => style.scoped)?.content || ''
- const declarations = {}
- // 实际页面在全局共享主题之后加载 scoped 页面样式；同名选择器按顺序覆盖。
- postcss.parse(`${sharedTheme}\n${scopedStyle}`).walkRules(rule => {
- if (!rule.selectors.some(item => item.trim() === selector)) return
- rule.walkDecls(decl => { declarations[decl.prop] = decl.value })
- })
- return declarations
- }
- test('alarm metric icon remains in flex flow when the shared page theme is loaded', async () => {
- const icon = await effectiveDeclarations('.metric-icon')
- const card = await effectiveDeclarations('.metric')
- assert.equal(icon.position, 'static', '绝对定位会让图标脱离卡片弹性布局，与数字文字重叠')
- assert.match(card.display || '', /flex/u)
- })
- test('alarm filter title keeps its text adjacent to the search icon', async () => {
- const heading = await effectiveDeclarations('.card-title')
- assert.equal(heading['justify-content'], 'flex-start', 'space-between 会将标题推到筛选卡片右侧')
- assert.ok(Number.parseFloat(heading.gap) > 0)
- })
|
