X-Financial/web/tests/travel-request-detail-responsive.test.mjs

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

const detailStyles = readFileSync(
  fileURLToPath(new URL('../src/assets/styles/views/travel-request-detail-view.css', import.meta.url)),
  'utf8'
)
const detailTemplate = readFileSync(
  fileURLToPath(new URL('../src/views/TravelRequestDetailView.vue', import.meta.url)),
  'utf8'
)
const responsiveStyles = readFileSync(
  fileURLToPath(new URL('../src/assets/styles/views/travel-request-detail-view-part2.css', import.meta.url)),
  'utf8'
)
const detailScript = readFileSync(
  fileURLToPath(new URL('../src/views/scripts/TravelRequestDetailView.js', import.meta.url)),
  'utf8'
)

test('detail hero facts keep document number and date on one row on laptop screens', () => {
  assert.match(detailStyles, /\.hero-fact strong \{[\s\S]*overflow-wrap:\s*anywhere/)
  assert.match(detailStyles, /\.hero-fact-grid \{[\s\S]*grid-template-columns:\s*minmax\(240px,\s*1\.25fr\) repeat\(3,\s*minmax\(0,\s*1fr\)\)/)
  assert.match(responsiveStyles, /@media \(max-width:\s*1320px\) \{[\s\S]*\.hero-fact-grid \{[\s\S]*grid-template-columns:\s*minmax\(280px,\s*1\.4fr\) repeat\(3,\s*minmax\(0,\s*1fr\)\)/)
  assert.match(responsiveStyles, /@media \(max-width:\s*1320px\) \{[\s\S]*\.hero-fact strong \{[\s\S]*white-space:\s*nowrap/)
  assert.match(detailStyles, /\.application-detail-facts \{[\s\S]*grid-template-columns:\s*repeat\(2,\s*minmax\(0,\s*1fr\)\)/)
  assert.match(detailStyles, /\.application-detail-fact \{[\s\S]*grid-template-columns:\s*minmax\(96px,\s*28%\) minmax\(0,\s*1fr\)/)
  assert.doesNotMatch(detailScript, /key:\s*'status'[\s\S]*label:\s*'当前状态'/)
})

test('reimbursement progress title and long linked application status are compact', () => {
  assert.match(detailTemplate, /isApplicationDocument \? '申请进度' : '报销进度'/)
  assert.doesNotMatch(detailTemplate, /差旅进度/)
  assert.match(detailStyles, /\.progress-step-status \{[\s\S]*width:\s*100%;[\s\S]*max-width:\s*136px;[\s\S]*min-width:\s*0;/)
  assert.match(detailStyles, /\.progress-step-status \{[\s\S]*white-space:\s*nowrap;[\s\S]*overflow:\s*hidden;[\s\S]*text-overflow:\s*ellipsis;/)
})