112 lines
4.6 KiB
JavaScript
112 lines
4.6 KiB
JavaScript
import assert from 'node:assert/strict'
|
|
import test from 'node:test'
|
|
import { readFile } from 'node:fs/promises'
|
|
|
|
const root = new URL('../', import.meta.url)
|
|
const read = (path) => readFile(new URL(path, root), 'utf8')
|
|
|
|
test('普通业务头仅提供固定标题与可选搜索，不暴露票根或动态摘要插槽', async () => {
|
|
const source = await read('src/components/mp/MpBusinessHeader.vue')
|
|
assert.match(source, /class="mp-wv-header"/)
|
|
assert.match(source, /class="mp-wv-header__title"[^>]*>\{\{ title \}\}/)
|
|
assert.match(source, /v-if="searchable"[\s\S]*?class="mp-wv-search\b/)
|
|
assert.match(source, /name="before-search"/)
|
|
assert.match(source, /name="after-search"/)
|
|
assert.match(source, /\$slots\.actions[\s\S]*?name="actions"/)
|
|
assert.doesNotMatch(source, /ticket|hero|mp-wv-header__sub/i)
|
|
})
|
|
|
|
test('状态 Tab 与三栏筛选保持独立局部 modifier，并给更多筛选红点', async () => {
|
|
const [tabs, filters, legacyStyles, styles] = await Promise.all([
|
|
read('src/components/mp/MpStatusTabs.vue'),
|
|
read('src/components/mp/MpThreeColumnFilters.vue'),
|
|
read('src/styles/mp-webview.scss'),
|
|
read('src/styles/mp-crm-primitives.scss')
|
|
])
|
|
assert.match(tabs, /class="mp-wv-status-tabs"/)
|
|
assert.match(tabs, /class="filter-tag"/)
|
|
assert.match(tabs, /<nav[^>]*class="mp-wv-status-tabs"/)
|
|
assert.match(tabs, /:aria-pressed="tab\.value === modelValue"/)
|
|
assert.match(filters, /mp-wv-filter-bar--three/)
|
|
assert.match(filters, /mp-wv-filter-more/)
|
|
assert.match(filters, /v-if="moreActive"[^>]*class="mp-wv-filter-more__dot"/)
|
|
assert.match(legacyStyles, /\.mp-wv-filter-bar\s*\{[\s\S]*?grid-template-columns:\s*1fr 1fr;/)
|
|
assert.match(
|
|
styles,
|
|
/\.mp-wv-filter-bar\.mp-wv-filter-bar--three\s*\{[\s\S]*?grid-template-columns:\s*repeat\(3, minmax\(0, 1fr\)\);/
|
|
)
|
|
assert.match(
|
|
styles,
|
|
/\.mp-wv-filter-wrap--business \.mp-wv-filter-opt\s*\{[\s\S]*?min-height:\s*44px;/
|
|
)
|
|
assert.match(
|
|
styles,
|
|
/\.mp-wv-filter-wrap--business > \.mp-wv-filter-mask\s*\{[\s\S]*?z-index:\s*7;/,
|
|
'局部遮罩必须低于下拉面板，否则选项无法点击'
|
|
)
|
|
})
|
|
|
|
test('备用金式卡片完整声明六层 DOM，状态标签使用浅底语义色', async () => {
|
|
const [card, styles] = await Promise.all([
|
|
read('src/components/mp/MpExpenseCard.vue'),
|
|
read('src/styles/mp-crm-primitives.scss')
|
|
])
|
|
for (const className of [
|
|
'expense-card',
|
|
'ec-top',
|
|
'status-tag',
|
|
'ec-amount',
|
|
'ec-emphasis',
|
|
'list-card-kv',
|
|
'ec-time',
|
|
'ec-bottom',
|
|
'op-actions'
|
|
]) {
|
|
assert.match(card, new RegExp(`\\b${className}\\b`), `卡片缺少 ${className} 层`)
|
|
}
|
|
assert.doesNotMatch(card, /<article[\s\S]*?role="link"/, '卡片容器不得形成嵌套交互语义')
|
|
assert.match(card, /class="expense-card__open mp-wv-touch-target"/)
|
|
assert.match(styles, /\.status-tag--success[^{]*\{[\s\S]*?background:\s*#e9f9f2;/)
|
|
const statusBlocks = [...styles.matchAll(/\.status-tag(?:--\w+)?[^{]*\{([^}]*)\}/g)]
|
|
assert.ok(statusBlocks.length >= 5, '状态标签应声明基础样式与语义色')
|
|
for (const [, declarations] of statusBlocks) {
|
|
assert.doesNotMatch(declarations, /color:\s*#fff;/, '状态标签不得使用实心白字样式')
|
|
}
|
|
})
|
|
|
|
test('附件、审批时间轴与通用触达尺寸满足移动端契约', async () => {
|
|
const [attachments, timeline, styles] = await Promise.all([
|
|
read('src/components/mp/MpAttachmentGrid.vue'),
|
|
read('src/components/mp/MpApprovalTimeline.vue'),
|
|
read('src/styles/mp-crm-primitives.scss')
|
|
])
|
|
assert.match(attachments, /<ul class="mp-crm-att-grid" aria-label="附件列表"/)
|
|
assert.match(attachments, /class="att-img"/)
|
|
assert.match(attachments, /class="att-doc"/)
|
|
assert.match(attachments, /<button class="att-add" type="button" @click="emit\('add'\)"/)
|
|
assert.match(attachments, /:disabled="Boolean\(item\.uploading\) \|\| !item\.url"/)
|
|
assert.match(
|
|
attachments,
|
|
/v-if="editable && !item\.uploading"[\s\S]*?class="att-icon att-icon--del"/
|
|
)
|
|
assert.match(
|
|
attachments,
|
|
/v-if="item\.url && !item\.uploading"[\s\S]*?class="att-icon att-icon--dl"/
|
|
)
|
|
assert.match(timeline, /class="mp-crm-approval-timeline"/)
|
|
assert.match(timeline, /class="mp-crm-approval-timeline__avatar"/)
|
|
assert.match(
|
|
styles,
|
|
/\.mp-crm-att-grid\s*\{[\s\S]*?grid-template-columns:\s*repeat\(auto-fill, minmax\(96px, 1fr\)\);/
|
|
)
|
|
assert.match(styles, /\.mp-crm-att-grid \.att-item\s*\{[\s\S]*?aspect-ratio:\s*1;/)
|
|
assert.match(
|
|
styles,
|
|
/\.mp-crm-att-grid \.att-icon\s*\{[\s\S]*?width:\s*44px;[\s\S]*?height:\s*44px;/
|
|
)
|
|
assert.match(
|
|
styles,
|
|
/\.mp-wv-touch-target\s*\{[\s\S]*?min-width:\s*44px;[\s\S]*?min-height:\s*44px;/
|
|
)
|
|
})
|