shanxia2.0/web-admin/scripts/mp-crm-primitives.test.mjs

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;/
  )
})