gut brittle tests

2026-06-26 11:24:17 +02:00
parent 40d431023a
commit 45d334a8fc
7 changed files with 35 additions and 20 deletions
@@ -4,7 +4,7 @@

 **Goal:** Apply the post-review global topbar refinements from `docs/superpowers/specs/2026-06-26-global-topbar-design.md`.

-**Architecture:** Keep the implementation inside the existing NodeBB child theme topbar partial, topbar SCSS partial, and theme client bundle. Extend the existing static topbar contract test so the refinements are pinned without adding a new test harness.
+**Architecture:** Keep the implementation inside the existing NodeBB child theme topbar partial, topbar SCSS partial, and theme client bundle. Extend the existing static topbar contract test only for durable behavior and public contracts, without adding a new test harness.

 **Tech Stack:** Node.js built-in test runner, NodeBB templates, SCSS.

@@ -32,27 +32,31 @@

 - [ ] **Step 1: Write the failing test**

-Add static contract assertions to `tests/global-topbar-contract.test.js`:
+Add static contract assertions to `tests/global-topbar-contract.test.js` that check durable behavior rather than incidental wording or implementation details:

 ```js
-assertIncludes(topbar, 'SHADOWS OVER WESTGATE', 'Topbar brand should use the single required identity line');
-assertExcludes(topbar, 'wg-topbar__brand-subtitle', 'Topbar should not repeat the site name as a subtitle');
-assertExcludes(topbar, 'wg-topbar__forums', 'Topbar should not ship a separate desktop Forums dropdown');
-assertExcludes(topbar, 'data-wg-menu="forums"', 'Forums should not use a custom topbar menu trigger');
-assertIncludes(stylesheet, '$wg-topbar-panel-bg', 'Topbar menu surfaces should use an opaque local panel base');
-assertExcludes(stylesheet, 'var(--wg-velvet-panel) !important;', 'Topbar menu surfaces should not inherit the translucent velvet panel token');
-assertExcludes(stylesheet, 'text-overflow: ellipsis;', 'Topbar brand should not truncate in normal desktop layouts');
+assertMatches(
+	topbar,
+	/<a\b(?=[^>]*class="[^"]*\bwg-topbar__brand\b[^"]*")(?=[^>]*aria-label="{config\.siteTitle}")/,
+	'Topbar brand link should use the configured site title as its accessible name'
+);
+assertMatches(
+	topbar,
+	/<span\b(?=[^>]*class="[^"]*\bwg-topbar__brand-name\b[^"]*")[^>]*>{config\.siteTitle}<\/span>/,
+	'Topbar brand text should render the configured site title'
+);
+assertExcludes(topbar, 'data-wg-menu', 'Topbar should rely on Bootstrap and NodeBB navigation instead of custom menu triggers');
 ```

 - [ ] **Step 2: Run test to verify it fails**

 Run: `node --test tests/global-topbar-contract.test.js`

-Expected: FAIL because the current topbar still has the brand subtitle, custom Forums dropdown, translucent panel token, and brand truncation.
+Expected: FAIL because the current topbar still hard-codes the brand label and visible brand text.

 - [ ] **Step 3: Write minimal implementation**

-Change the template so the brand is only the mark plus `SHADOWS OVER WESTGATE`, remove the custom desktop Forums dropdown block, and keep mobile drawer forum entry links. Change `_topbar.scss` so dropdown/drawer surfaces use an opaque local panel gradient, remove custom Forums panel rules, and remove desktop brand ellipsis. Remove now-unused custom topbar panel toggle handling from `public/client.js`.
+Change the template so the brand is only the mark plus the configured site title, remove the custom desktop Forums dropdown block, and keep mobile drawer forum entry links. Change `_topbar.scss` so dropdown/drawer surfaces use an opaque panel base, remove custom Forums panel rules, and remove desktop brand ellipsis. Remove now-unused custom topbar panel toggle handling from `public/client.js`.

 - [ ] **Step 4: Run test to verify it passes**

@@ -1,8 +1,8 @@
 <header class="wg-topbar sticky-top" data-wg-topbar>
 	<div class="wg-topbar__inner">
-		<a class="wg-topbar__brand" href="{relative_path}/" aria-label="SHADOWS OVER WESTGATE">
+		<a class="wg-topbar__brand" href="{relative_path}/" aria-label="{config.siteTitle}">
 			<span class="wg-topbar__brand-mark" aria-hidden="true">W</span>
-			<span class="wg-topbar__brand-name">SHADOWS OVER WESTGATE</span>
+			<span class="wg-topbar__brand-name">{config.siteTitle}</span>
 		</a>

 		<nav class="wg-topbar__nav" aria-label="[[global:navigation]]">
@@ -29,6 +29,13 @@ function assertExcludes(haystack, needle, message) {
 	);
 }

+function assertMatches(haystack, pattern, message) {
+	assert(
+		pattern.test(haystack),
+		message || `Expected file to match ${pattern}`
+	);
+}
+
 const header = read('templates/header.tpl');
 const footer = read('templates/footer.tpl');
 const topbar = read('templates/partials/header/topbar.tpl');
@@ -107,13 +114,17 @@ assertIncludes(topbar, '{{{ if allowRegistration }}}', 'Registration should rema
 assertIncludes(topbar, '{{{ each navigation }}}', 'Topbar should render ACP Navigation items');
 assertIncludes(topbar, '{./textClass}', 'Topbar should honor ACP Navigation text visibility classes');
 assertExcludes(topbar, 'href="{relative_path}/admin"', 'Topbar should not hard-code the administrator link');
-assertIncludes(topbar, 'SHADOWS OVER WESTGATE', 'Topbar brand should use the single required identity line');
-assertExcludes(topbar, 'wg-topbar__brand-subtitle', 'Topbar should not repeat the site name as a subtitle');
-assertExcludes(topbar, 'wg-topbar__forums', 'Topbar should not ship a separate desktop Forums dropdown');
-assertExcludes(topbar, 'data-wg-menu="forums"', 'Forums should not use a custom topbar menu trigger');
-assertIncludes(stylesheet, '$wg-topbar-panel-bg', 'Topbar menu surfaces should use an opaque local panel base');
-assertExcludes(stylesheet, 'var(--wg-velvet-panel) !important;', 'Topbar menu surfaces should not inherit the translucent velvet panel token');
-assertExcludes(stylesheet, 'text-overflow: ellipsis;', 'Topbar brand should not truncate in normal desktop layouts');
+assertMatches(
+	topbar,
+	/<a\b(?=[^>]*class="[^"]*\bwg-topbar__brand\b[^"]*")(?=[^>]*aria-label="{config\.siteTitle}")/,
+	'Topbar brand link should use the configured site title as its accessible name'
+);
+assertMatches(
+	topbar,
+	/<span\b(?=[^>]*class="[^"]*\bwg-topbar__brand-name\b[^"]*")[^>]*>{config\.siteTitle}<\/span>/,
+	'Topbar brand text should render the configured site title'
+);
+assertExcludes(topbar, 'data-wg-menu', 'Topbar should rely on Bootstrap and NodeBB navigation instead of custom menu triggers');

 assertMissing(
 	'templates/partials/header/brand.tpl',