X-Financial/web/tests/expense-stats-detail-modal.test.mjs

import assert from 'node:assert/strict'
import { readFileSync } from 'node:fs'
import test from 'node:test'
import { fileURLToPath } from 'node:url'

const modal = readFileSync(
  fileURLToPath(new URL('../src/components/business/ExpenseStatsDetailModal.vue', import.meta.url)),
  'utf8'
)

test('expense stats detail modal exposes distribution, processing time and operation detail sections', () => {
  assert.match(modal, /Expense Operation Details/)
  assert.match(modal, /历史报销费用分布/)
  assert.match(modal, /单据处理时间/)
  assert.match(modal, /系统操作详情/)
  assert.match(modal, /ElDialog/)
  assert.match(modal, /destroy-on-close/)
  assert.match(modal, /ElTag/)
  assert.match(modal, /import DonutChart from '\.\.\/charts\/DonutChart\.vue'/)
  assert.match(modal, /<DonutChart/)
  assert.match(modal, /:key="distributionChartRenderKey"/)
  assert.match(modal, /:show-legend="false"/)
  assert.match(modal, /distributionChartItems/)
  assert.match(modal, /distributionCenterValue/)
  assert.match(modal, /const chartRenderSeq = ref\(0\)/)
  assert.match(modal, /const distributionChartRenderKey = computed\(\(\) => `expense-distribution-\$\{chartRenderSeq\.value\}`\)/)
  assert.match(modal, /watch\([\s\S]*\(\) => props\.visible[\s\S]*chartRenderSeq\.value \+= 1/)
  assert.match(modal, /distributionRows/)
  assert.match(modal, /expense-distribution-summary-list/)
  assert.match(modal, /resolveDistributionColor/)
  assert.match(modal, /processingRows/)
  assert.match(modal, /operationRows/)
  assert.match(modal, /width="min\(900px, calc\(100vw - 64px\)\)"/)
  assert.match(modal, /max-height:\s*min\(580px, calc\(100dvh - 176px\)\)/)
  assert.match(
    modal,
    /@media \(min-width: 861px\) and \(max-width: 1440px\),\s*\n\s*\(min-width: 861px\) and \(max-height: 820px\)/
  )
  assert.match(modal, /width:\s*min\(860px, calc\(100vw - 96px\)\) !important;/)
  assert.match(modal, /max-height:\s*min\(520px, calc\(100dvh - 152px\)\)/)
  assert.match(modal, /\.expense-distribution-donut :deep\(\.donut-body\) \{[\s\S]*height:\s*170px;/)
  assert.doesNotMatch(modal, /--expense-detail-percent/)
  assert.doesNotMatch(modal, /expense-distribution-track/)
  assert.match(modal, /统计口径来自当前工作台已加载的个人单据/)
})