@fohte/storybook-addon 0.1.8 → 0.1.9

package/README.md

@@ -112,6 +112,17 @@ Screenshots for a project land in `<rootDir>/__screenshots__/<screenshotsSubdir>
 
 `storycapNetworkIdle` and `storycapFullPageStitch` are also exported on their own, for building a project without `createStorybookProject`. `storycapFullPageStitch` must be placed after storycap's own plugin in the `plugins` array — it works by overriding the `__storycap_takeScreenshot` command storycap registers, and Vite resolves conflicting plugin `config()` keys in plugin order, later wins.
 
+`createStorybookProject` blocks non-`localhost` network requests in the browser by passing `BLOCK_EXTERNAL_REQUESTS_ARGS` to `playwright()`'s `launchOptions.args`, so a story can't depend on an external CDN request completing before the test's `afterEach` runs. It's a Chromium-only launch flag (matching `createStorybookProject`'s own `instances: [{ browser: 'chromium' }]`) — a `firefox`/`webkit` instance would silently get no blocking at all. If you build your `playwright()` call by hand instead of using `createStorybookProject`, spread this in yourself:
+
+```ts
+import { BLOCK_EXTERNAL_REQUESTS_ARGS } from '@fohte/storybook-addon/vitest-plugin'
+import { playwright } from '@vitest/browser-playwright'
+
+playwright({
+  launchOptions: { args: [...BLOCK_EXTERNAL_REQUESTS_ARGS] },
+})
+```
+
 Your `setupFiles` entry needs an `afterEach` that calls storycap's own `screenshot()` — see [`@storycap-testrun/browser`'s "Setup Screenshot Capture"](https://github.com/reg-viz/storycap-testrun/tree/main/packages/browser#2-setup-screenshot-capture) for the exact shape. Don't call `setProjectAnnotations()` there, and don't even mention that identifier in a comment: `@storybook/addon-vitest` decides whether to inject this package's checks by a plain substring search over the setup file's source text, so its mere presence silently disables every check in the project, with no error.
 
 ### Check failures don't block the screenshot

package/lib/checks/check.js

@@ -1,9 +1,9 @@
-import { assert } from 'vitest';
 export function throwIfNotEmpty(urls, message) {
     if (urls.length === 0)
         return;
     const list = urls.join('\n');
     urls.length = 0;
-    assert.fail(`${message}:\n${list}`);
+    // eslint-disable-next-line no-restricted-syntax -- interop boundary: Storybook's afterEach (preview.ts) only reports a check as a story failure when assert() throws
+    throw new Error(`${message}:\n${list}`);
 }
 //# sourceMappingURL=check.js.map

package/lib/checks/external-resource-check.js

@@ -13,9 +13,16 @@ function isExternalResourceUrl(url) {
     return ((protocol === 'http:' || protocol === 'https:') &&
         origin !== window.location.origin);
 }
+function isPerformanceResourceTiming(entry) {
+    return entry.entryType === 'resource';
+}
 new PerformanceObserver((list) => {
     for (const entry of list.getEntries()) {
-        if (entry.startTime >= resetAt && isExternalResourceUrl(entry.name)) {
+        if (!isPerformanceResourceTiming(entry))
+            continue;
+        // Entries are queued at completion, so responseEnd (not startTime) is
+        // what must be compared against resetAt.
+        if (entry.responseEnd >= resetAt && isExternalResourceUrl(entry.name)) {
             externalResourceUrls.push(entry.name);
         }
     }

package/lib/vitest-plugin.d.ts

@@ -3,6 +3,7 @@ export declare const storycapNetworkIdle: {
     name: string;
     transform(code: string, id: string): string | null;
 };
+export declare const BLOCK_EXTERNAL_REQUESTS_ARGS: string[];
 export interface CreateStorybookProjectOptions {
     /** Project name, as shown by `vitest --project <name>`. */
     name: string;

package/lib/vitest-plugin.js

@@ -45,6 +45,12 @@ export const storycapNetworkIdle = {
         return patched;
     },
 };
+// Blocks all requests except to localhost (Vitest's dev server), so a story
+// can't depend on an external CDN request finishing before `afterEach`.
+// Doesn't affect Playwright's own CDP connection, which uses a local pipe, not DNS.
+export const BLOCK_EXTERNAL_REQUESTS_ARGS = [
+    '--host-resolver-rules=MAP * ~NOTFOUND, EXCLUDE localhost',
+];
 export function createStorybookProject({ name, rootDir, viewport, screenshotsSubdir, setupFiles, excludeTags = [], ciMaxWorkers = 8, }) {
     const configDir = path.join(rootDir, '.storybook');
     const screenshotsDir = path.join(rootDir, '__screenshots__', screenshotsSubdir);
@@ -116,6 +122,7 @@ export function createStorybookProject({ name, rootDir, viewport, screenshotsSub
                 // silently truncates every fullPage tile's clip rect below it.
                 provider: playwright({
                     contextOptions: { timezoneId: 'Asia/Tokyo', viewport },
+                    launchOptions: { args: [...BLOCK_EXTERNAL_REQUESTS_ARGS] },
                 }),
                 headless: true,
                 instances: [{ browser: 'chromium' }],

package/package.json

@@ -74,7 +74,7 @@
     "typescript": "6.0.3",
     "vitest": "4.1.11"
   },
-  "version": "0.1.8",
+  "version": "0.1.9",
   "scripts": {
     "clean": "rimraf lib tsconfig.tsbuildinfo",
     "prebuild": "pnpm run clean",