X-Financial/web/tests/expense-profile-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/ExpenseProfileDetailModal.vue', import.meta.url)),
  'utf8'
)

const radarChart = readFileSync(
  fileURLToPath(new URL('../src/components/charts/RadarChart.vue', import.meta.url)),
  'utf8'
)

const modalStyles = readFileSync(
  fileURLToPath(new URL('../src/assets/styles/components/expense-profile-detail-modal.css', import.meta.url)),
  'utf8'
)

test('expense profile modal remounts the behavior radar when opened', () => {
  assert.match(modal, /destroy-on-close/)
  assert.match(modal, /<RadarChart/)
  assert.match(modal, /:key="radarRenderKey"/)
  assert.match(modal, /const radarRenderKey = ref\(0\)/)
  assert.match(modal, /watch\([\s\S]*\(\) => props\.visible[\s\S]*radarRenderKey\.value \+= 1/)
  assert.match(modal, /scheduleRadarFrame/)
})

test('expense profile modal uses compact laptop dialog sizing', () => {
  assert.match(modal, /width="min\(960px, calc\(100vw - 64px\)\)"/)
  assert.match(modalStyles, /max-height:\s*min\(580px, calc\(100dvh - 176px\)\)/)
  assert.match(
    modalStyles,
    /@media \(min-width: 861px\) and \(max-width: 1440px\),\s*\n\s*\(min-width: 861px\) and \(max-height: 820px\)/
  )
  assert.match(modalStyles, /width:\s*min\(900px, calc\(100vw - 96px\)\) !important;/)
  assert.match(modalStyles, /max-height:\s*min\(520px, calc\(100dvh - 152px\)\)/)
  assert.match(modalStyles, /\.profile-radar-chart \{[\s\S]*height:\s*248px;/)
})

test('radar chart uses the shared echarts lifecycle and enables entrance animation', () => {
  assert.match(radarChart, /import \{ useEcharts \} from '\.\.\/\.\.\/composables\/useEcharts\.js'/)
  assert.match(radarChart, /useEcharts\(chartElement, chartOptions\)/)
  assert.match(radarChart, /animation: true/)
  assert.match(radarChart, /animationDuration: 980/)
  assert.match(radarChart, /animationDurationUpdate: 760/)
  assert.match(radarChart, /animationEasing: 'cubicOut'/)
  assert.doesNotMatch(radarChart, /import \{[^}]*init[^}]*\} from 'echarts\/core'/)
})