render.test.ts

apps/dashboard/test/render.test.ts

1. /**
2. * These tests guard the two rules the whole dashboard rests on. Both are the
3. * kind that fail silently and look fine: the page renders, the numbers are
4. * plausible, and it is lying.
5. *
6. * 1. A number nobody can see renders as "not tracked", never as 0.
7. * 2. With no earlier run there is no delta, not an arrow pointing at zero.
8. *
9. * Everything else here is a smoke test: all six surfaces present, no unescaped
10. * data, and a dead source rendered as dead rather than as empty.
11. */
13. import { describe, expect, it } from 'vitest'
14. import { FIXTURE_SNAPSHOT } from '../src/fixtures.js'
15. import { headline, type Snapshot } from '../src/collect.js'
16. import { render } from '../src/render.js'
17. import { delta, previousRun, rowFrom, type HistoryRow } from '../src/history.js'
18. import { buildViewModel } from '../src/view-model.js'
19. import type { Briefings } from '../src/briefings.js'
20. import { viewerFor } from '../src/viewer.js'
22. const build = (snap: Snapshot = FIXTURE_SNAPSHOT, history: HistoryRow[] = []) =>
23. render(snap, headline(snap), history, '2026-08-12')
25. describe('untracked is never zero', () => {
26. it('renders "not tracked" for people no source covers', () => {
27. const vm = buildViewModel(FIXTURE_SNAPSHOT, headline(FIXTURE_SNAPSHOT), [], '2026-08-12')
29. // Ines and Theo hold no Plinth assignment, so their order count is absent.
30. for (const p of vm.people) {
31. if (p.plinthOurMove === null) {
32. expect(p.detail).toContain('orders not tracked')
33. expect(p.detail).not.toMatch(/\b0 orders\b/)
34. }
35. }
36. })
38. it('never emits a bare 0 where a person has no covering source at all', () => {
39. const orphan: Snapshot = {
40. ...FIXTURE_SNAPSHOT,
41. tasks: { ok: true, data: [], error: null },
42. orderLines: { ok: true, data: [], error: null },
43. }
44. const vm = buildViewModel(orphan, headline(orphan), [], '2026-08-12')
45. const untracked = vm.people.filter((p) => p.untracked)
46. for (const p of untracked) expect(p.load).toBeNull()
47. })
48. })
50. describe('the page orients a first-time reader', () => {
51. // The board must be readable by someone who does not already know what they
52. // are looking at. These pin the orientation aids so a refactor cannot
53. // quietly drop them.
54. const out = build()
56. it('has a skip link and a main landmark for keyboard and screen-reader users', () => {
57. expect(out).toContain('class="skip-link" href="#main"')
58. expect(out).toContain('<main id="main">')
59. })
61. it('explains the color scheme on the board tab', () => {
62. // Colors here are identity, not severity, and the page says so.
63. expect(out).toContain('How to read this board')
64. expect(out).toMatch(/our move: work we owe a step on/)
65. expect(out).toMatch(/not tracked: no source covers it/)
66. })
68. it('walks the tablist with arrow keys', () => {
69. expect(out).toContain("e.key === 'ArrowRight'")
70. })
72. it('keeps the tab bar sticky and motion optional', () => {
73. expect(out).toMatch(/\.tabs\{[^}]*position:sticky/)
74. expect(out).toContain('@media (prefers-reduced-motion:reduce)')
75. })
76. })
78. describe('dark theme survives every header', () => {
79. it('never sets text color from the raw ink token', () => {
80. // --meridian-ink is a raw hex that deliberately does not flip on dark; it is
81. // for things that stay ink in both themes. Used as a text color it renders
82. // black-on-dark; text reads --text-body, always.
83. expect(build()).not.toContain('color:var(--meridian-ink)')
84. })
85. })
87. describe('deltas', () => {
88. it('is null when there is no earlier run', () => {
89. expect(previousRun([], '2026-08-12')).toBeNull()
90. expect(delta(37, null, 'designQueue')).toBeNull()
91. })
93. it('ignores runs from the same day, so a rebuild is not "yesterday"', () => {
94. const today = rowFrom(headline(FIXTURE_SNAPSHOT), new Date('2026-08-12T11:00:00Z'))
95. expect(previousRun([today], today.day)).toBeNull()
96. })
98. it('reports direction from the number, not from whether it is good news', () => {
99. const prev: HistoryRow = {
100. day: '2026-08-11',
101. at: '2026-08-11T11:00:00Z',
102. ourMove: 150,
103. designQueue: 31,
104. waitingOnClient: 42,
105. atVendor: 88,
106. needsReply: 1,
107. openLeads: 45,
108. }
109. expect(delta(146, prev, 'ourMove')).toEqual({ value: -4, direction: 'down', since: '2026-08-11' })
110. expect(delta(37, prev, 'designQueue')).toEqual({ value: 6, direction: 'up', since: '2026-08-11' })
111. expect(delta(1, prev, 'needsReply')?.direction).toBe('flat')
112. })
114. it('says so on the page when no comparison exists', () => {
115. expect(build()).toContain('no prior run')
116. })
117. })
119. describe('a failed source renders as failed, not as zero', () => {
120. const dead: Snapshot = {
121. ...FIXTURE_SNAPSHOT,
122. orderLines: { ok: false, data: [], error: 'Plinth 503' },
123. }
125. it('names the failure', () => {
126. const html = build(dead)
127. expect(html).toContain('Plinth 503')
128. expect(html).toContain('missing from this page, not zero')
129. })
131. it('marks the source down rather than live', () => {
132. const vm = buildViewModel(dead, headline(dead), [], '2026-08-12')
133. expect(vm.sources.find((s) => s.name === 'Plinth')?.tone).toBe('failed')
134. })
136. it('does not render an empty chart as if it were data', () => {
137. expect(build(dead)).toContain('Plinth did not answer')
138. })
140. /**
141. * The one that matters most. A failure banner above a confident 0 in 38px type
142. * loses to the 0: someone scanning on a phone reads the number, not the
143. * banner. Every tile fed by a dead source must be a dash.
144. */
145. it('shows a dash, never a zero, on tiles whose source is down', () => {
146. const html = build(dead)
147. const tiles = html.match(/<div class="tile-value"[^>]*>[^<]*<\/div>/g) ?? []
148. expect(tiles.length).toBeGreaterThan(0)
149. // Plinth is down. Of the four headline tiles, only "Client replied" is fed by
150. // leads alone, so the other three show a dash, and the context strip's
151. // Plinth-fed numerals dash out too rather than showing a zero.
152. expect(tiles.filter((t) => t.includes('–')).length).toBeGreaterThanOrEqual(3)
153. expect(html).toMatch(/ctx-cell[\s\S]*?<span class="n">–<\/span>/)
154. expect(html).toContain('source unavailable, not zero')
155. })
157. it('the prose briefing leads with the outage rather than with a zero', () => {
158. const allDead: Snapshot = {
159. ...dead,
160. leads: { ok: false, data: [], error: 'Bitrix 500' },
161. }
162. const html = build(allDead)
163. expect(html).toContain('This morning’s counts are unavailable')
164. expect(html).not.toContain('0 things need a move from Meridian today')
165. })
167. it('a broken run contributes no delta at all', () => {
168. const prev: HistoryRow = {
169. day: '2026-08-11',
170. at: '2026-08-11T11:00:00Z',
171. ourMove: 146,
172. designQueue: 37,
173. waitingOnClient: 42,
174. atVendor: 88,
175. needsReply: 1,
176. openLeads: 45,
177. }
178. // main.ts passes [] when a source failed; assert the render agrees that a
179. // 146-to-0 swing is the outage and not news.
180. const html = render(dead, headline(dead), [], '2026-08-12')
181. expect(html).not.toContain(`vs ${prev.day}`)
182. })
183. })
185. describe('the page itself', () => {
186. const html = build()
188. it('carries every surface, one per tab', () => {
189. // There is no separate 'briefing-data' tab: the Briefing tab carries a
190. // prose/numbers segmented control rather than the same facts told twice.
191. for (const id of ['board', 'my-day', 'queue', 'briefing', 'elsewhere', 'health']) {
192. expect(html).toContain(`id="surface-${id}"`)
193. }
194. })
196. it('anchors user notes on queue rows and on My Day orders and tasks', () => {
197. // Shared notes attach to orders and tasks. The page carries only the anchors (the notes themselves are injected by the
198. // Worker at serve time), so what must hold here is that every order row and
199. // every Bitrix-task row is addressable. Todos and tracker rows are not.
200. expect(html).toMatch(/data-note-key="order:MD26\d+"/)
201. const myDay = build(FIXTURE_SNAPSHOT).slice(0)
202. const perViewer = render(FIXTURE_SNAPSHOT, headline(FIXTURE_SNAPSHOT), [], '2026-08-12', null, viewerFor('hello@meridiandisplay.example'))
203. expect(perViewer).toMatch(/data-note-key="task:[A-Za-z0-9_-]+"/)
204. expect(myDay).not.toContain('data-note-key="todo:')
205. })
207. it('is self-contained: no external stylesheet, script or image', () => {
208. expect(html).not.toMatch(/<link[^>]+stylesheet/i)
209. expect(html).not.toMatch(/<script[^>]+src=/i)
210. expect(html).not.toMatch(/<img\b/i)
211. })
213. it('escapes data rather than trusting it', () => {
214. const nasty: Snapshot = {
215. ...FIXTURE_SNAPSHOT,
216. leads: {
217. ok: true,
218. data: [
219. {
220. id: 'x',
221. title: '<script>alert(1)</script>',
222. company: null,
223. statusId: 'UC_Y4AE5V',
224. createdAt: new Date().toISOString(),
225. updatedAt: new Date().toISOString(),
226. assignedById: '1',
227. amount: 0,
228. noise: false,
229. noiseReason: null,
230. },
231. ],
232. error: null,
233. },
234. }
235. const out = build(nasty)
236. expect(out).not.toContain('<script>alert(1)</script>')
237. expect(out).toContain('<script>alert(1)</script>')
238. })
240. it('states the rule that keeps it honest', () => {
241. expect(html).toContain('Only “our move” is workload')
242. })
243. })
245. /**
246. * The written briefing card gates on the `company` key with the leadership view
247. * nested inside it, so a set of briefings without `company` renders as "Not
248. * generated for this sync". And a brief cut off at the output limit must be
249. * labelled, not presented as finished.
250. *
251. * Both are the same failure in different clothes: broken looking like fine.
252. */
253. describe('the written briefing', () => {
254. const snap = FIXTURE_SNAPSHOT
255. const brief = (over: Partial<Briefings> = {}): Briefings => ({
256. generatedAt: '2026-08-25T18:40:14+00:00',
257. day: '2026-08-12',
258. model: 'claude-opus-5',
259. payloadGeneratedAt: snap.syncedAt,
260. mode: 'live',
261. briefings: {
262. company: 'The company brief.',
263. 'company-allhands': 'The all-hands brief.',
264. exec: 'The leadership brief.',
265. },
266. ...over,
267. })
268. // Nora is the only exec reader; Sam sees Leadership; Marco sees neither.
269. const nora = viewerFor('nora.l@meridiandisplay.example')
270. const sam = viewerFor('hello@meridiandisplay.example')
271. const page = (b: Briefings | null, v = nora) =>
272. render(snap, headline(snap), [], '2026-08-12', b, v)
274. it('renders the company brief and the leadership view together', () => {
275. const out = page(brief())
276. expect(out).toContain('The company brief.')
277. expect(out).toContain('Leadership view')
278. expect(out).toContain('The leadership brief.')
279. expect(out).not.toContain('Not generated for this sync')
280. })
282. it('says the briefing is absent rather than rendering a blank card', () => {
283. const out = page(null)
284. expect(out).toContain('Not generated for this sync')
285. })
287. it('labels a truncated briefing instead of presenting it as finished', () => {
288. const cut = brief({
289. briefings: { company: 'Half a sen', exec: 'The leadership brief.' },
290. truncated: ['company'],
291. })
292. const out = page(cut, sam)
293. expect(out).toContain('Half a sen')
294. expect(out).toMatch(/cut off/i)
295. })
297. it('labels a truncated leadership view specifically', () => {
298. const out = page(brief({ truncated: ['exec'] }))
299. expect(out).toMatch(/cut off/i)
300. })
302. it('does not label a briefing that finished', () => {
303. expect(page(brief())).not.toMatch(/cut off/i)
304. })
306. it('treats an absent truncated list as nothing known to be truncated', () => {
307. // A briefings.json written before the field existed must not read as
308. // "everything is fine" OR as "everything is broken"; it reads as no claim.
309. const legacy = brief()
310. delete legacy.truncated
311. expect(page(legacy)).not.toMatch(/cut off/i)
312. })
314. /**
315. * The pairing caveat has two modes, because the board re-syncs every 15
316. * minutes while the prose is a once-a-morning job.
317. *
318. * Prose from earlier today is the normal state and asks for nothing. Prose
319. * from an earlier day means the morning brief did not run, and that one asks
320. * for a re-run. These assert which mode fired by whether the page asks the
321. * reader to do something, not by the sentence: tests assert behaviour rather
322. * than wording.
323. */
324. // Fixed rather than `new Date()`: the same-day and earlier-day branches are
325. // decided by America/Chicago calendar day, so a relative timestamp would make
326. // this test's meaning depend on the hour it ran.
327. const atNoon = { ...snap, syncedAt: '2026-09-02T18:00:00.000Z' }
328. const pageAt = (b: Briefings) => render(atNoon, headline(atNoon), [], '2026-09-02', b, nora)
330. it('does not ask for a re-run when the prose is from earlier the same day', () => {
331. // 06:02 Chicago prose against 13:00 Chicago numbers. Expected, by design:
332. // a warning that fires every quarter hour is one nobody reads.
333. const morning = brief({ payloadGeneratedAt: '2026-09-02T11:02:00.000Z' })
334. const out = pageAt(morning)
335. expect(out).not.toMatch(/pnpm morning/)
336. expect(out).toMatch(/refresh every 15 minutes/)
337. })
339. it('asks for a re-run when the prose is from an earlier day', () => {
340. const yesterday = brief({ payloadGeneratedAt: '2026-09-01T11:02:00.000Z' })
341. expect(pageAt(yesterday)).toMatch(/pnpm morning/)
342. })
344. it('says nothing at all when the prose and the numbers are the same sync', () => {
345. expect(pageAt(brief({ payloadGeneratedAt: atNoon.syncedAt }))).not.toMatch(
346. /refresh every 15 minutes|pnpm morning/,
347. )
348. })
350. it('shows both caveats when a briefing is stale AND truncated', () => {
351. // They are different problems and a reader needs to know which applies.
352. const both = brief({
353. payloadGeneratedAt: '2026-09-01T11:02:00.000Z',
354. truncated: ['company'],
355. })
356. const out = pageAt(both)
357. expect(out).toMatch(/pnpm morning/)
358. expect(out).toMatch(/cut off/i)
359. })
361. it('escapes a briefing rather than trusting the model not to emit markup', () => {
362. const nasty = brief({ briefings: { company: '<img src=x onerror=alert(1)>' } })
363. const out = page(nasty)
364. expect(out).not.toContain('<img src=x')
365. expect(out).toContain('<img src=x')
366. })
367. })