X-Financial/web/tests/receipt-folder-view.test.mjs

import assert from 'node:assert/strict'
import { readFileSync } from 'node:fs'
import { join } from 'node:path'

const root = process.cwd()

function readProjectFile(path) {
  return readFileSync(join(root, path), 'utf8')
}

function testReceiptFolderViewSurface() {
  const view = readProjectFile('web/src/views/ReceiptFolderView.vue')

  assert.match(view, /activeStatus = ref\('all'\)/)
  assert.match(view, /value: 'all'/)
  assert.match(view, /value: 'unlinked'/)
  assert.match(view, /value: 'linked'/)
  assert.match(view, /openAssociateDialog/)
  assert.match(view, /<EnterpriseDetailPage/)
  assert.match(view, /variant="receipt-folder-detail"/)
  assert.match(view, /<template #main>/)
  assert.match(view, /<template #side>/)
  assert.match(view, /<template #bottom>/)
  assert.match(view, /receipt-preview-panel/)
  assert.match(view, /receipt-ticket-info-panel/)
  assert.match(view, /receipt-association-panel/)
  assert.match(view, /receipt-edit-log-section/)
  assert.match(view, /receipt-all-field-grid/)
  assert.match(view, /receiptInfoEditing/)
  assert.match(view, /startReceiptInfoEdit/)
  assert.match(view, /cancelReceiptInfoEdit/)
  assert.match(view, /receiptEditLogs/)
  assert.match(view, /previewFrameUrl/)
  assert.match(view, /previewTransform/)
  assert.match(view, /String\(value \?\? ''\)\.trim\(\)/)
  assert.match(view, /openAssociateDialogForCurrentReceipt/)
  assert.match(view, /createReceiptDetailDashboardModel/)
  assert.match(view, /createReceiptDetailFieldModel/)
  assert.doesNotMatch(view, /receipt-detail-toolbar/)
  assert.doesNotMatch(view, /receipt-side-stack/)
  assert.doesNotMatch(view, /receipt-bottom-grid/)
  assert.doesNotMatch(view, /receipt-status-panel/)
  assert.doesNotMatch(view, /receipt-key-grid/)
  assert.doesNotMatch(view, /receipt-other-collapse/)
  assert.doesNotMatch(view, /ElCollapse/)
  assert.doesNotMatch(view, /openSourceFile/)
  assert.match(view, /back-label=/)
  assert.match(view, /deleteCurrentReceipt/)
  assert.match(view, /ElCheckboxGroup/)
  assert.match(view, /fetchReceiptFolderItems\('all'\)/)
  assert.match(view, /DocumentDropdownFilter/)
  assert.match(view, /receiptFilterControls/)
  assert.match(view, /clear-filter-btn/)
  assert.match(view, /receiptFilters\[control\.key\]/)
  assert.match(view, /clearReceiptFilters/)
  assert.doesNotMatch(view, /class="filter-btn" type="button" @click="reloadReceipts"/)
  assert.match(view, /buildReceiptFile\(item\)/)
  assert.match(view, /source: selectedDraft \? 'detail' : 'receipt-folder'/)
  assert.match(view, /emit\('open-assistant'/)
  assert.match(view, /REIMBURSEMENT_LIST_PREVIEW_PARAMS/)
  assert.match(view, /fetchExpenseClaims\(REIMBURSEMENT_LIST_PREVIEW_PARAMS\)/)
  assert.doesNotMatch(view, /const claims = await fetchExpenseClaims\(\)/)
}

function testReceiptFolderServiceContract() {
  const service = readProjectFile('web/src/services/receiptFolder.js')
  const ocrService = readProjectFile('web/src/services/ocr.js')
  const reimbursementService = readProjectFile('web/src/services/reimbursements.js')

  assert.match(service, /\/receipt-folder\$\{buildStatusQuery\(status\)\}/)
  assert.match(service, /\/receipt-folder\/\$\{encodeURIComponent/)
  assert.match(service, /responseType: 'blob'/)
  assert.match(service, /new File\(\[blob\], fileName/)
  assert.match(service, /receiptId/)
  assert.match(ocrService, /formData\.append\('receipt_ids'/)
  assert.match(reimbursementService, /formData\.append\('receipt_id'/)
}

function testAppShellWiresReceiptFolder() {
  const shell = readProjectFile('web/src/views/AppShellRouteView.vue')
  const topBar = readProjectFile('web/src/components/layout/TopBar.vue')

  assert.match(shell, /activeView === 'receiptFolder'/)
  assert.match(shell, /ReceiptFolderView/)
  assert.match(shell, /@open-assistant="openSmartEntry"/)
  assert.match(shell, /@detail-open-change="receiptFolderDetailOpen = \$event"/)
  assert.match(shell, /@detail-topbar-change="detailTopBarPayload = \$event"/)
  assert.match(shell, /receipt-folder-workarea/)
  assert.match(topBar, /receiptFolder/)
  assert.match(topBar, /eyebrowLabel/)
}

function testSharedDocumentListStyleReuse() {
  const receiptView = readProjectFile('web/src/views/ReceiptFolderView.vue')
  const documentView = readProjectFile('web/src/views/DocumentsCenterView.vue')
  const receiptStyles = readProjectFile('web/src/assets/styles/views/receipt-folder-view.css')
  const sharedStyles = readProjectFile('web/src/assets/styles/components/document-list-shared.css')

  assert.match(receiptView, /document-list-shared\.css/)
  assert.match(documentView, /document-list-shared\.css/)
  assert.match(sharedStyles, /\.table-wrap\b/)
  assert.match(sharedStyles, /\.doc-kind-tag\b/)
  assert.match(sharedStyles, /\.list-foot\b/)
  assert.match(sharedStyles, /\.clear-filter-btn\b/)
  assert.match(sharedStyles, /\.document-filter-menu\b/)
  assert.doesNotMatch(receiptStyles, /\.table-wrap\b/)
  assert.doesNotMatch(receiptStyles, /\.doc-kind-tag\b/)
  assert.doesNotMatch(receiptStyles, /\.list-foot\b/)
  assert.doesNotMatch(receiptStyles, /\.receipt-select-filter\b/)
  assert.doesNotMatch(receiptStyles, /\.receipt-clear-filters\b/)
}

function testReceiptFolderDetailLayoutAdjustments() {
  const receiptView = readProjectFile('web/src/views/ReceiptFolderView.vue')
  const receiptStyles = readProjectFile('web/src/assets/styles/views/receipt-folder-view.css')
  const fieldModel = readProjectFile('web/src/views/scripts/receiptFolderDetailFields.js')
  const dashboardModel = readProjectFile('web/src/views/scripts/receiptFolderDetailDashboard.js')
  const detailPage = readProjectFile('web/src/components/shared/EnterpriseDetailPage.vue')

  assert.match(receiptView, /showStatusColumn/)
  assert.match(receiptView, /<col v-if="showStatusColumn" class="col-status">/)
  assert.match(receiptView, /document_date/)
  assert.match(receiptView, /<td[^>]*>\s*<strong class="doc-id">/)
  assert.match(receiptView, /buildDetailPayload\(\)/)
  assert.match(receiptView, /receiptDetailSubtitle/)
  assert.match(receiptView, /receiptDetailTopBarPayload/)
  assert.match(receiptView, /detail-topbar-change/)
  assert.doesNotMatch(receiptView, /<article v-else class="receipt-folder-detail/)
  assert.doesNotMatch(receiptView, /class="back-btn"/)
  assert.doesNotMatch(receiptView, /receipt-basic-panel/)
  assert.doesNotMatch(receiptView, /receipt-ocr-panel/)
  assert.match(receiptStyles, /\.receipt-folder-list th:first-child/)
  assert.match(receiptStyles, /\.receipt-folder-detail :deep\(\.detail-scroll\)[\s\S]*display: flex/)
  assert.match(receiptStyles, /\.receipt-folder-detail :deep\(\.detail-grid\)/)
  assert.match(receiptStyles, /\.receipt-folder-detail :deep\(\.detail-bottom\)/)
  assert.match(receiptStyles, /\.receipt-folder-detail :deep\(\.detail-actions\)/)
  assert.match(receiptStyles, /\.receipt-folder-detail :deep\(\.enterprise-detail-card \.card-head\)/)
  assert.match(receiptStyles, /\.receipt-preview-panel/)
  assert.match(receiptStyles, /\.receipt-ticket-info-panel/)
  assert.match(receiptStyles, /\.receipt-association-panel/)
  assert.match(receiptStyles, /\.receipt-preview-box[\s\S]*height: clamp\(380px, 56vh, 640px\)/)
  assert.match(receiptStyles, /\.receipt-all-field-grid/)
  assert.match(receiptStyles, /\.receipt-all-field-grid[\s\S]*grid-template-columns: repeat\(auto-fit, minmax\(260px, 1fr\)\)/)
  assert.match(receiptStyles, /\.receipt-edit-log-list/)
  assert.doesNotMatch(receiptStyles, /\.receipt-detail-toolbar/)
  assert.doesNotMatch(receiptStyles, /\.receipt-side-stack/)
  assert.doesNotMatch(receiptStyles, /\.receipt-bottom-grid/)
  assert.doesNotMatch(receiptStyles, /\.receipt-log-list/)
  assert.match(detailPage, /\$slots\.bottom/)
  assert.match(detailPage, /class="detail-bottom"/)
  assert.match(fieldModel, /TRAIN_KEY_FIELD_DEFINITIONS/)
  assert.match(fieldModel, /id: 'invoice_number'/)
  assert.match(fieldModel, /id: 'invoice_date'/)
  assert.match(fieldModel, /id: 'fare'/)
  assert.match(fieldModel, /id: 'passenger_name'/)
  assert.match(fieldModel, /syncEditableFieldsToTopLevel/)
  assert.match(dashboardModel, /createReceiptDetailDashboardModel/)
  assert.match(dashboardModel, /basicInfoItems/)
  assert.match(dashboardModel, /linkedClaimItems/)
  assert.doesNotMatch(dashboardModel, /operationLogs/)
  assert.doesNotMatch(dashboardModel, /archiveInfoItems/)
}

function testAssistantUnlinkedReceiptPrompt() {
  const submitComposer = readProjectFile('web/src/views/scripts/useTravelReimbursementSubmitComposer.js')
  const attachmentFlow = readProjectFile('web/src/views/scripts/travelReimbursementSubmitAttachmentFlow.js')
  const suggestedActions = readProjectFile('web/src/views/scripts/useTravelReimbursementSuggestedActions.js')

  assert.match(submitComposer, /fetchReceiptFolderItems/)
  assert.match(submitComposer, /promptUnlinkedReceiptFolderIfNeeded/)
  assert.match(attachmentFlow, /fetchReceiptFolderItems\('unlinked'\)/)
  assert.match(attachmentFlow, /skipReceiptFolderUnlinkedPrompt/)
  assert.match(attachmentFlow, /open_receipt_folder/)
  assert.match(attachmentFlow, /continue_upload_with_unlinked_receipts/)
  assert.match(suggestedActions, /actionType === 'open_receipt_folder'/)
  assert.match(suggestedActions, /router\.push\(\{ name: 'app-receiptFolder' \}\)/)
  assert.match(suggestedActions, /actionType === 'continue_upload_with_unlinked_receipts'/)
  assert.match(suggestedActions, /skipReceiptFolderUnlinkedPrompt: true/)
}

function run() {
  testReceiptFolderViewSurface()
  testReceiptFolderServiceContract()
  testAppShellWiresReceiptFolder()
  testSharedDocumentListStyleReuse()
  testReceiptFolderDetailLayoutAdjustments()
  testAssistantUnlinkedReceiptPrompt()
  console.log('receipt folder view tests passed')
}

run()