@bongos/core 1.24.58 → 1.24.59

package/tests/wordmark_and_faces.mjs

@@ -0,0 +1,111 @@
+// tests/wordmark_and_faces.mjs — the logo wordmark is the pack's name in lowercase, and
+// no served page loads a retired face (task 1005135, goal 1000138).
+//
+// DESIGN.md "Naming": beside the mark the name is lowercase ("cloud bongos"), and
+// platform code never hardcodes either spelling; it reads the pack. The UI check found
+// the status page, the 404/500 pages and the API docs showing "Cloud Bongos" beside the
+// mark, and /brand baking the neutral pack's name into its generated HTML. The sign-in
+// error and confirming-access pages still loaded Cinzel and EB Garamond. This pins:
+//   1. every wordmark beside the mark is the {{productName}} hole (stamped from the pack
+//      at serve time), never a typed-in name, and the rule that styles it lowercases it;
+//   2. no served page source (the auth pages, the sign-in shell, the error page, the API
+//      docs, the status page, the hall, the landing) names Cinzel or Garamond, and the
+//      rendered auth pages carry the pack's own font links instead;
+//   3. the error page declares no colour of its own: it reads the hall sheet's tier.
+import { test } from 'node:test';
+import assert from 'node:assert/strict';
+import fs from 'node:fs';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { createRequire } from 'node:module';
+
+const require = createRequire(import.meta.url);
+const ROOT = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '..');
+const read = (rel) => fs.readFileSync(path.join(ROOT, rel), 'utf8');
+const stripComments = (s) => s.replace(/\/\*[\s\S]*?\*\//g, '').replace(/<!--[\s\S]*?-->/g, '').replace(/(^|[^:'"`\\])\/\/[^\n]*/g, '$1');
+
+const { errorPageTemplate } = require('../src/error-page.js');
+const { clientBranding } = require('../src/branding.js');
+const authRoutes = require('../src/bongos/routes/auth.js');
+const signIn = require('../src/bongos/sign-in-pages.js');
+
+// The CSS rule for a selector, from a sheet or an inline <style>. Throws when missing.
+function ruleOf(css, selector) {
+  const esc = selector.replace(/[.*+?^${}()|[\]\\#]/g, '\\$&');
+  const m = stripComments(css).match(new RegExp(`(?:^|[}\\s,])${esc}\\s*\\{([^}]*)\\}`));
+  assert.ok(m, `a rule for ${selector}`);
+  return m[1];
+}
+const lowercased = (body) => /text-transform\s*:\s*lowercase/.test(body);
+
+// Each wordmark beside the mark: [where, the markup that must carry the pack's hole, the
+// sheet that styles it, the selector of its rule].
+const WORDMARKS = [
+  ['the status page', read('modules/status-ui/public/index.html'), /<span class="topbar__name">\{\{productName\}\}<\/span>/, read('modules/status-ui/public/style.css'), '.topbar__name'],
+  ['the 404 page', errorPageTemplate(404), /<a class="name" href="\/">\{\{productName\}\}<\/a>/, errorPageTemplate(404), '.name'],
+  ['the 500 page', errorPageTemplate(500), /<a class="name" href="\/">\{\{productName\}\}<\/a>/, errorPageTemplate(500), '.name'],
+  ['the API docs', read('public-docs/index.html'), /<span class="wordmark">\{\{productName\}\}<\/span>/, read('public-docs/index.html'), '#topbar .wordmark'],
+  ['/brand (bar)', read('modules/ui-design/public/brand.html'), /<a class="ref-head__brand"[^>]*>.*<span>\{\{productName\}\}<\/span><\/a>/, read('modules/ui-design/public/brand.css'), '.ref-head__brand'],
+  ['/brand (lockup)', read('modules/ui-design/public/brand.html'), /<span class="ref-lockup__name">\{\{productName\}\}<\/span>/, read('modules/ui-design/public/brand.css'), '.ref-lockup'],
+  ['the hall', read('modules/hall-ui/public/style.css'), /\.brand-mark\s*\{/, read('modules/hall-ui/public/style.css'), '.brand-mark'],
+];
+
+test('every wordmark beside the mark is the pack\'s name, lowercased by its rule', () => {
+  for (const [where, markup, hole, css, selector] of WORDMARKS) {
+    assert.match(markup, hole, `${where}: the wordmark is the {{productName}} hole`);
+    assert.ok(lowercased(ruleOf(css, selector)), `${where}: ${selector} sets text-transform: lowercase`);
+  }
+});
+
+test('no typed-in product name beside the mark', () => {
+  // A capitalised (or any) literal in a wordmark element is exactly the regression.
+  const literal = /class="(?:topbar__name|name|wordmark|ref-lockup__name)"[^>]*>(?!\{\{)[^<]+</;
+  for (const [where, markup] of WORDMARKS) assert.doesNotMatch(markup, literal, `${where}: no literal name in the wordmark`);
+  assert.doesNotMatch(read('modules/ui-design/public/brand.html'), /ref-head__brand[^>]*>.*<span>(?!\{\{)[^<]+<\/span><\/a>/, '/brand bar: no literal name');
+  // the generator writes the hole, never the pack's name it happened to read
+  assert.doesNotMatch(read('modules/ui-design/scripts/gen-design-reference.js'), /productName\)?\.toLowerCase\(\)|product\.toLowerCase\(\)/);
+});
+
+const RETIRED = /Cinzel|Garamond/i;
+const SERVED = [
+  'src/bongos/routes/auth.js', 'src/bongos/sign-in-pages.js', 'src/bongos/routes/auth-google.js', 'src/error-page.js',
+  'public-docs/index.html', 'modules/status-ui/public/index.html', 'modules/status-ui/public/style.css',
+  'modules/ui-design/public/brand.html', 'modules/ui-design/public/brand.css',
+  'modules/hall-ui/public/style.css', 'modules/hall-ui/public/controls.css',
+];
+
+test('no served page source loads a retired face', () => {
+  for (const rel of SERVED) {
+    if (!fs.existsSync(path.join(ROOT, rel))) continue;
+    // read raw: a comment stripper over JS eats template strings (a `/*` in a URL glob),
+    // so these files name the retired faces nowhere at all, comments included
+    assert.doesNotMatch(read(rel), RETIRED, `${rel} names a retired face`);
+  }
+});
+
+test('the auth pages carry the pack\'s faces and the shared sheet, and nothing else', () => {
+  const links = (clientBranding().theme && clientBranding().theme.fonts && clientBranding().theme.fonts.links) || [];
+  const pages = [
+    ['sign-in error', authRoutes.renderAuthErrorPage('Sign-in failed', 'The sign-in did not complete.')],
+    ['confirming access', authRoutes.renderAccessPendingPage('someone', '/api/bongos/auth/web/start')],
+    ['sign-in chooser', signIn.renderSignInChooser({ githubHref: '/g', googleHref: '/o' })],
+  ];
+  for (const [name, html] of pages) {
+    assert.ok(html.includes('<link rel="stylesheet" href="/builders/style.css">'), `${name}: the hall sheet`);
+    for (const href of links) assert.ok(html.includes(href.replace(/&/g, '&amp;')), `${name}: the pack's font link ${href}`);
+    const own = html.match(/https:\/\/fonts\.googleapis\.com\/css2\?[^"]*/g) || [];
+    for (const href of own) assert.ok(links.some((l) => l.replace(/&/g, '&amp;') === href || l === href), `${name}: ${href} is not the pack's`);
+  }
+});
+
+test('the error page declares no colour of its own', () => {
+  for (const status of [404, 500]) {
+    const html = errorPageTemplate(status);
+    const style = (html.match(/<style>([\s\S]*?)<\/style>/) || [])[1] || '';
+    assert.ok(style, 'the page has its layout rules');
+    const declarations = style.replace(/--[\w-]+\s*:[^;}]*/g, '');
+    assert.doesNotMatch(style, /--(bg|ink|accent|rule)[\w-]*\s*:/, 'no colour token is defined on the page');
+    assert.doesNotMatch(declarations, /#[0-9a-f]{3,8}\b|rgba?\(/i, 'no typed-in colour');
+    assert.ok(html.includes('<link rel="stylesheet" href="/modules/hall-ui/public/style.css">'), 'the colours come from the shared sheet');
+  }
+});