fonts.test.ts

apps/dashboard/test/fonts.test.ts

1. /**
2. * The display face has to be able to spell everyone's name.
3. *
4. * A face subset to "A-Z 0-9 and the marks" renders "Rosa Galván" in two
5. * typefaces: the display face and one á in a fallback, in a 26px heading. A
6. * missing glyph is hard to see in review unless you are looking at that one
7. * character and know what the face should look like, and from outside it reads
8. * as an encoding problem while the bytes are right.
9. *
10. * What this pins, and what it cannot: it checks names against the DECLARED
11. * ranges in fonts.ts, not against the font binary: reading a brotli-compressed
12. * woff2 cmap needs fonttools, and this suite runs offline with no dependency
13. * the repo does not already carry. So the guard is only as true as the
14. * declaration is kept in step with the pyftsubset command beside it. That is a
15. * real limit and it is written down rather than papered over, but it still
16. * catches the likely case, which is a person arriving with a character nobody
17. * thought about.
18. */
20. import { describe, expect, it } from 'vitest'
21. import {
22. FONT_FACES,
23. DISPLAY_SUBSET_RANGES,
24. inBodySubset,
25. inDisplaySubset,
26. } from '../src/fonts.js'
27. import { THEME_CSS } from '../src/theme.js'
28. import { MERIDIAN_PEOPLE } from '../../../config/meridian-people.js'
29. import { ONBOARDING } from '../../../config/onboarding.js'
31. /** Everything the display face is actually asked to draw. */
32. const displayStrings = (): { what: string; text: string }[] => [
33. ...MERIDIAN_PEOPLE.map((p) => ({ what: `roster name ${p.name}`, text: p.name })),
34. ...ONBOARDING.flatMap((p) => [
35. { what: `plan subject ${p.person}`, text: p.person },
36. { what: `plan role ${p.role}`, text: p.role },
37. ...(p.trainedBy ? [{ what: `trainer ${p.trainedBy}`, text: p.trainedBy }] : []),
38. ...p.days.map((d) => ({ what: `day title "${d.title}"`, text: d.title })),
39. ...p.days.flatMap((d) =>
40. d.sections.map((sec) => ({ what: `topic "${sec.title}"`, text: sec.title })),
41. ),
42. ]),
43. ]
45. const hex = (ch: string): string =>
46. `U+${ch.codePointAt(0)!.toString(16).toUpperCase().padStart(4, '0')}`
48. /** A letter has to be in the display face itself; punctuation may fall through. */
49. const isLetter = (ch: string): boolean => /\p{L}|\p{M}/u.test(ch)
51. describe('every name the display face has to render', () => {
52. it('has every LETTER in the display face itself, in both cases', () => {
53. // Both cases: the eyebrow uppercases with CSS, so a lowercase á in the data
54. // becomes Á on the page and it is the UPPERCASE glyph that has to exist.
55. // Subsetting the one that appears in the source file is half a fix.
56. //
57. // Letters only, because a letter is the one thing that CANNOT fall back
58. // gracefully: one Georgia á inside twenty display-face capitals is the bug this
59. // file is named for. Punctuation is handled by the next test.
60. for (const { what, text } of displayStrings()) {
61. for (const ch of [...text, ...text.toUpperCase(), ...text.toLowerCase()]) {
62. if (!isLetter(ch)) continue
63. expect(
64. inDisplaySubset(ch),
65. `${what}: "${ch}" (${hex(ch)}) is not in the display face subset, so it renders in Georgia`,
66. ).toBe(true)
67. }
68. }
69. })
71. it('has everything else in the body face, which is what the stack falls through to', () => {
72. // The display face has no em dash, en dash, ellipsis or arrow: the glyphs are
73. // absent from the font, so no subset can add them. Every "Name: heading"
74. // on this board drew its dash in Georgia until the stack gained the body face.
75. for (const { what, text } of displayStrings()) {
76. for (const ch of text) {
77. if (isLetter(ch)) continue
78. expect(
79. inDisplaySubset(ch) || inBodySubset(ch),
80. `${what}: "${ch}" (${hex(ch)}) is in neither face, so it falls to Georgia`,
81. ).toBe(true)
82. }
83. }
84. })
86. it('puts the body face ahead of Georgia in the display stack', () => {
87. // The whole previous test is worthless if the stack does not actually
88. // reach the body face before the serif.
89. const stack = THEME_CSS.match(/--font-display:([^;]+);/)![1]!
90. expect(stack.indexOf('Inter')).toBeGreaterThan(stack.indexOf('Anton'))
91. expect(stack.indexOf('Georgia')).toBeGreaterThan(stack.indexOf('Inter'))
92. })
94. it('covers Galván and Ibáñez specifically, because those are the two on the roster today', () => {
95. for (const ch of 'áÁñÑ') expect(inDisplaySubset(ch), ch).toBe(true)
96. })
98. it('has not been narrowed back to a list of the accents we happen to use', () => {
99. // The fix was a RANGE, deliberately. A list of the characters currently on
100. // the roster is the same decision that caused the bug, one hire later: it
101. // would have carried Galván and still broken on a François or a João.
102. for (const ch of 'çÇãÃõÕüÜøØåÅßæÆéÉ') expect(inDisplaySubset(ch), ch).toBe(true)
103. })
105. it('still excludes what it never needed, so the range is a decision and not a shrug', () => {
106. // The U+00A0-00BF symbol block is out on purpose: a display heading has no
107. // use for a section mark, and it is ~2KB of base64 on every page.
108. for (const ch of '§¶©«»¿¡') expect(inDisplaySubset(ch), ch).toBe(false)
109. })
110. })
112. describe('the embedded faces', () => {
113. it('ships all three, as data URIs, because nothing else can reach them', () => {
114. // CSP is default-src 'none' and the page is self-contained; a @font-face
115. // pointing at a repo-relative file rendered in Georgia in production for
116. // the entire time the board had been live.
117. expect(FONT_FACES).toContain('font-family:"Anton"')
118. expect((FONT_FACES.match(/font-family:"Inter"/g) ?? []).length).toBe(2)
119. expect((FONT_FACES.match(/data:font\/woff2;base64,/g) ?? []).length).toBe(3)
120. expect(FONT_FACES).not.toMatch(/url\((?!data:)/)
121. })
123. it('declares ranges that are ordered and non-empty', () => {
124. expect(DISPLAY_SUBSET_RANGES.length).toBeGreaterThan(0)
125. for (const [lo, hi] of DISPLAY_SUBSET_RANGES) expect(hi).toBeGreaterThanOrEqual(lo)
126. })
127. })