import { test } from 'node:test' import assert from 'node:assert/strict' import { readFileSync } from 'node:fs' import { parse } from 'vue/compiler-sfc' import { breakdownAthleteName, breakdownRevisionLine, breakdownSourceTag, type BreakdownItem } from '@/shared' import { resultTextOrPlaceholder } from '../results' /** * 大屏积分明细覆盖层的「运动员」列。 * * 现场裁判长的原话:推到大屏的明细只有项目 / 名次 / 成绩 / 积分,看不出「谁在哪个项目拿了多少分」, * 这种明细说服不了观众单位名字为什么升上去。数据(athleteName)服务端一直有,是覆盖层漏了这一列。 * * 项目没有 jsdom 与组件测试工具,这里沿用仓库既有做法:`.vue` 模板用源码契约断言 * (列头顺序、每个格子绑了什么),文案内容交给 `breakdownAthleteName` 这个纯函数用例守。 */ const OVERLAY_SOURCE = readFileSync(new URL('../components/DetailOverlay.vue', import.meta.url), 'utf8') /** 取模板里以某个固定串开头、到下一个 为止的片段(这些行里没有嵌套 div)。 */ function block(startPattern: RegExp): string { const found = startPattern.exec(OVERLAY_SOURCE) assert.ok(found !== null, `模板里应有 ${startPattern}`) const rest = OVERLAY_SOURCE.slice(found.index) const end = rest.indexOf('') assert.ok(end > 0, '行片段应以 结束') return rest.slice(0, end) } interface Cell { cls: string inner: string } function cellsOf(fragment: string): Cell[] { return [...fragment.matchAll(/([\s\S]*?)<\/span>/g)].map((match) => ({ cls: match[1] ?? '', inner: (match[2] ?? '').replace(/\s+/g, ' ').trim(), })) } const HEAD_ROW = block(/
/) const BODY_ROW = block(/
/) function styleText(source: string): string { const { descriptor } = parse(source, { filename: 'style.vue' }) return descriptor.styles[0]?.content ?? '' } function cssRule(style: string, selector: string): string { const escaped = selector.replace(/[.*+?^${}()|[\]\\]/g, '\\$&') const match = new RegExp(`${escaped}\\s*\\{([^}]*)\\}`).exec(style) assert.ok(match !== null, `样式里应存在 ${selector} 规则`) return match[1] ?? '' } function item(over: Partial = {}): BreakdownItem { return { ledgerId: 1, sourceType: 'result', eventId: 1, eventCode: 'M100', eventName: '100米跑', categoryName: '男子', athleteId: 7, athleteName: '张伟', rank: 1, resultText: '11.58', points: 10, createdAt: '2026-09-13 10:00:00', revisionCount: null, lastRevisionAt: null, lastRevisionReason: null, lastRevisedBy: null, ...over, } } test('列头按「项目/组别 · 运动员 · 名次 · 成绩 · 积分」排列,运动员插在项目与名次之间', () => { const labels = [...HEAD_ROW.matchAll(/([^<]*)<\/span>/g)].map((match) => (match[1] ?? '').trim(), ) assert.deepEqual(labels, ['项目 / 组别', '运动员', '名次', '成绩', '积分']) }) test('明细行渲染运动员格,绑定的是团队共用的降级函数', () => { const cells = cellsOf(BODY_ROW) assert.deepEqual( cells.map((cell) => cell.cls), ['col-name', 'col-athlete', 'col-rank', 'col-result', 'col-points'], ) assert.equal(cells[1]?.inner, '{{ breakdownAthleteName(item, teamName) }}') }) test('项目 / 名次 / 成绩 / 积分四列原样保留(是加列不是改列)', () => { const cells = cellsOf(BODY_ROW) assert.match(cells[0]?.inner ?? '', /item\.eventName \?\? '人工调整'/) assert.equal(cells[2]?.inner, "{{ item.rank ?? '—' }}") // 成绩格与分项成绩页 / 实时赛况页同一个口径:`??` 只挡 null,手录名次的项目给空串就画成空白。 assert.equal(cells[3]?.inner, '{{ resultTextOrPlaceholder(item.resultText) }}') assert.equal(cells[4]?.inner, '{{ item.points }}') }) test('个人流水那一行大屏上看得见是谁:运动员格是姓名,四个老格子照旧', () => { const row = item() const rendered = [ row.eventName ?? '人工调整', breakdownAthleteName(row, '第一分公司'), row.rank ?? '—', resultTextOrPlaceholder(row.resultText), row.points, ] assert.deepEqual(rendered, ['100米跑', '张伟', 1, '11.58', 10]) }) test('团体项目流水没有运动员名:降级成单位名,不出现空白格或 null', () => { const row = item({ athleteName: null, athleteId: null, sourceType: 'result' }) const cell = breakdownAthleteName(row, '第一分公司') assert.equal(cell, '第一分公司') assert.doesNotMatch(cell, /null|undefined/) }) test('覆盖层是 16:9 右半屏:五列加间距放得下,姓名列留得够宽', () => { const row = cssRule(styleText(OVERLAY_SOURCE), '.row') const tracks = /grid-template-columns:\s*([^;]+);/.exec(row) assert.ok(tracks !== null, '.row 应声明 grid-template-columns') const parts = (tracks[1] ?? '').trim().split(/\s+(?![^(]*\))/) assert.equal(parts.length, 5, '五列:项目/组别、运动员、名次、成绩、积分') const gap = Number(/gap:\s*(\d+)px/.exec(row)?.[1] ?? 0) const fixed = parts.reduce((sum, part) => sum + Number(/(\d+)px/.exec(part)?.[1] ?? 0), 0) // 1920 宽的 16:9 屏幕:覆盖层占右半边 960px,减去左右内边距 44px×2。 const available = 960 - 44 * 2 assert.ok(fixed + gap * (parts.length - 1) <= available, `五列 ${fixed}px + 间距会挤出右半屏`) const nameTrack = /minmax\(0,\s*1fr\)/.test(parts[0] ?? '') assert.ok(nameTrack, '项目 / 组别列应可伸缩') const athleteWidth = Number(/(\d+)px/.exec(parts[1] ?? '')?.[1] ?? 0) assert.ok(athleteWidth >= 180, '运动员列至少 180px,单位名才不至于只剩几个字') const athlete = cssRule(styleText(OVERLAY_SOURCE), '.col-athlete') assert.match(athlete, /text-overflow:\s*ellipsis/, '长姓名 / 单位名要省略号收尾') assert.match(athlete, /white-space:\s*nowrap/) }) /** * 「这几分怎么来的、有没有被改过」——大屏不能悬停,所以: * - 非普通成绩(破纪录加分)在项目名后面打一个来源小标签; * - 被改过的成绩多一行整行小字 `10:42 已修订(成绩录入笔误)`。 * * 两处都只在需要时才渲染(v-if),没改过的行连元素都没有 —— 大屏行高与加这一行之前完全一致。 */ test('来源标签只在非普通成绩时渲染,普通成绩不打(行高与列宽都不受影响)', () => { assert.match(BODY_ROW, /v-if="breakdownSourceTag\(item\)"/) assert.match(BODY_ROW, //) assert.equal(breakdownSourceTag(item()), '') // 大屏标签用短词:项目名后面那一行放不下「破纪录加分」五个字。 assert.equal(breakdownSourceTag(item({ sourceType: 'record_bonus' })), '破纪录') }) test('修订小字占满一整行(grid-column: 1 / -1),不与五列抢宽度', () => { assert.match(BODY_ROW, /v-if="breakdownRevisionLine\(item\)"/) assert.match(BODY_ROW, /class="col-revision"/) assert.match(BODY_ROW, /\{\{ breakdownRevisionLine\(item\) \}\}/) const css = cssRule(styleText(OVERLAY_SOURCE), '.col-revision') assert.match(css, /grid-column:\s*1\s*\/\s*-1/, '修订小字要横跨整行,不能挤第六列') }) test('没改过的成绩不渲染小字,渲染出来的也只有一行短句', () => { assert.equal(breakdownRevisionLine(item()), '') const line = breakdownRevisionLine( item({ revisionCount: 1, lastRevisionAt: '2026-09-13 10:42:00', lastRevisionReason: '成绩录入笔误' }), ) assert.doesNotMatch(line, /null|undefined|NaN|×1/) assert.ok(line.length <= 30, `大屏一行小字要短:${line}`) })