test(bulma-ui): Storybook smoke gate — every story, light + dark, no console errors

.github/workflows/ci.yml

@@ -67,10 +67,23 @@ jobs:
       - name: Audit (high severity)
         run: pnpm audit --audit-level=high
 
+      # Always build: the smoke pass below needs the static build, and the old
+      # changed-files condition never matched on PRs (changed_files is an
+      # integer count, not a path list).
       - name: Build Storybook (bulma-ui)
-        if: github.event_name == 'push' || contains(github.event.pull_request.changed_files, 'bulma-ui/**')
         run: pnpm --filter @allxsmith/bestax-bulma run build-storybook
 
+      - name: Install Playwright Chromium
+        run: pnpm --filter @allxsmith/bestax-bulma exec playwright install --with-deps chromium
+
+      # Smoke gate (#283): every story renders without errors and without
+      # console errors, once in light and once with data-theme="dark" —
+      # dark-mode-only CSS bugs are invisible to jsdom, so this is the only
+      # automated coverage for that defect class. Not visual regression
+      # (no screenshot baselines); see visual-regression.yml for that.
+      - name: Storybook smoke test (light + dark)
+        run: pnpm --filter @allxsmith/bestax-bulma run test-storybook:ci
+
       - name: Archive Coverage
         uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a # v7
         with:

bulma-ui/.storybook/test-runner.ts

@@ -0,0 +1,53 @@
+import type { TestRunnerConfig } from '@storybook/test-runner';
+import type { Page } from 'playwright';
+
+// Smoke-pass hooks for `test-storybook` (#283): every story must render
+// without throwing and without console errors. Run with
+// STORYBOOK_THEME=dark for a second pass with `data-theme="dark"` stamped
+// on the root — dark-mode-only CSS bugs are invisible to jsdom, so this is
+// the only automated surface that can catch them.
+const dark = process.env.STORYBOOK_THEME === 'dark';
+
+// One error sink per Playwright page; pages are reused across stories in a
+// worker, so the sink is emptied in preVisit instead of re-registering
+// listeners.
+const consoleErrors = new WeakMap<Page, string[]>();
+
+const config: TestRunnerConfig = {
+  async preVisit(page) {
+    if (dark) {
+      await page.evaluate(() =>
+        document.documentElement.setAttribute('data-theme', 'dark')
+      );
+    }
+    const sink = consoleErrors.get(page);
+    if (sink) {
+      sink.length = 0;
+    } else {
+      const fresh: string[] = [];
+      consoleErrors.set(page, fresh);
+      page.on('console', msg => {
+        if (msg.type() !== 'error') return;
+        const url = msg.location()?.url ?? '';
+        // Stories that demo broken-image fallbacks use RFC 2606 `.invalid`
+        // hosts (e.g. Avatar's https://example.invalid/missing.jpg) — those
+        // resource errors are the story working as intended.
+        if (/^https?:\/\/[^/]*\.invalid(\/|$)/.test(url)) return;
+        fresh.push(url ? `${msg.text()} (${url})` : msg.text());
+      });
+      page.on('pageerror', err => fresh.push(String(err)));
+    }
+  },
+
+  async postVisit(page, context) {
+    const errors = consoleErrors.get(page) ?? [];
+    if (errors.length > 0) {
+      throw new Error(
+        `Story ${context.id} logged console errors${dark ? ' (dark theme)' : ''}:\n` +
+          errors.map(e => `  - ${e}`).join('\n')
+      );
+    }
+  },
+};
+
+export default config;

bulma-ui/package.json

@@ -31,7 +31,10 @@
     "storybook": "storybook dev -p 6006",
     "start": "storybook dev -p 6006",
     "build-storybook": "storybook build",
-    "release": "npx semantic-release"
+    "release": "npx semantic-release",
+    "test-storybook": "test-storybook",
+    "test-storybook:dark": "STORYBOOK_THEME=dark test-storybook",
+    "test-storybook:ci": "node scripts/test-storybook-ci.mjs"
   },
   "devDependencies": {
     "@faker-js/faker": "^10.5.0",
@@ -43,6 +46,7 @@
     "@storybook/addon-docs": "^10.1.11",
     "@storybook/addon-onboarding": "^10.1.11",
     "@storybook/react-vite": "^10.1.11",
+    "@storybook/test-runner": "^0.24.4",
     "@testing-library/jest-dom": "^6.5.0",
     "@testing-library/react": "^16.3.1",
     "@testing-library/user-event": "^14.5.2",
@@ -61,6 +65,7 @@
     "jest-environment-jsdom": "^30.2.0",
     "material-icons": "^1.13.14",
     "material-symbols": "^0.45.2",
+    "playwright": "^1.61.1",
     "prettier": "^3.9.4",
     "rimraf": "^6.0.1",
     "rollup": "^4.55.1",

bulma-ui/scripts/test-storybook-ci.mjs

@@ -0,0 +1,91 @@
+#!/usr/bin/env node
+// Serve the built storybook (storybook-static/) on a local port and run the
+// test-runner smoke pass against it twice: default (light) and dark theme
+// (STORYBOOK_THEME=dark, see .storybook/test-runner.ts). Uses node's http
+// module rather than adding http-server/wait-on/concurrently dependencies.
+import { createServer } from 'node:http';
+import { readFile, stat } from 'node:fs/promises';
+import { spawn } from 'node:child_process';
+import { extname, join, normalize, resolve } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const root = resolve(fileURLToPath(new URL('.', import.meta.url)), '..');
+const staticDir = join(root, 'storybook-static');
+
+try {
+  await stat(join(staticDir, 'index.html'));
+} catch {
+  console.error(
+    'storybook-static/index.html not found — run `pnpm build-storybook` first.'
+  );
+  process.exit(1);
+}
+
+const MIME = {
+  '.html': 'text/html',
+  '.js': 'text/javascript',
+  '.mjs': 'text/javascript',
+  '.css': 'text/css',
+  '.json': 'application/json',
+  '.svg': 'image/svg+xml',
+  '.png': 'image/png',
+  '.jpg': 'image/jpeg',
+  '.gif': 'image/gif',
+  '.woff': 'font/woff',
+  '.woff2': 'font/woff2',
+  '.ttf': 'font/ttf',
+  '.eot': 'application/vnd.ms-fontobject',
+  '.map': 'application/json',
+  '.txt': 'text/plain',
+};
+
+const server = createServer(async (req, res) => {
+  const urlPath = decodeURIComponent(new URL(req.url, 'http://x').pathname);
+  // normalize() collapses any ../ so requests can't escape staticDir
+  let filePath = join(staticDir, normalize(urlPath).replace(/^([/\\])+/, ''));
+  try {
+    if ((await stat(filePath)).isDirectory()) {
+      filePath = join(filePath, 'index.html');
+    }
+    const body = await readFile(filePath);
+    res.writeHead(200, {
+      'content-type': MIME[extname(filePath)] ?? 'application/octet-stream',
+    });
+    res.end(body);
+  } catch {
+    res.writeHead(404).end('not found');
+  }
+});
+
+await new Promise(ok => server.listen(0, '127.0.0.1', ok));
+const url = `http://127.0.0.1:${server.address().port}`;
+console.log(`Serving ${staticDir} at ${url}`);
+
+function runPass(theme) {
+  return new Promise(done => {
+    const label = theme === 'dark' ? 'dark' : 'light';
+    console.log(`\n=== Storybook smoke pass (${label}) ===`);
+    // Build the env explicitly both ways so an ambient STORYBOOK_THEME can't
+    // silently turn the light pass into a second dark pass.
+    const env = { ...process.env };
+    if (theme === 'dark') env.STORYBOOK_THEME = 'dark';
+    else delete env.STORYBOOK_THEME;
+    const child = spawn(
+      'pnpm',
+      ['exec', 'test-storybook', '--url', url, '--maxWorkers', '50%'],
+      { cwd: root, stdio: 'inherit', env }
+    );
+    child.on('close', code => done(code ?? 1));
+    // A failed spawn (e.g. ENOENT) emits 'error' without 'close' — resolve
+    // instead of hanging the CI job forever.
+    child.on('error', err => {
+      console.error(`Failed to start test-storybook (${label}):`, err);
+      done(1);
+    });
+  });
+}
+
+const lightCode = await runPass('light');
+const darkCode = await runPass('dark');
+server.close();
+process.exit(lightCode || darkCode);

bulma-ui/src/elements/Image.stories.tsx

@@ -128,15 +128,15 @@ export const Retina: Story = {
 
 export const AspectRatio16by9: Story = {
   args: {
-    src: '/logo.png',
+    src: '/img/logo.png',
     alt: '16:9 aspect ratio image',
     size: '16by9',
   },
 };
 
 export const AspectRatio4by3: Story = {
   args: {
-    src: '/logo.png',
+    src: '/img/logo.png',
     alt: '4:3 aspect ratio image',
     size: '4by3',
   },