@argos-ci/storybook 4.0.10 → 5.0.0

package/dist/test-runner.js

@@ -90,54 +90,89 @@ async function storybookArgosScreenshot(handler, context, options) {
   const argosParameters = getArgosParameters(context.story.parameters);
   const modes = argosParameters?.modes;
   const allAttachments = [];
-  if (modes) {
-    for (const [name, globals] of Object.entries(modes)) {
-      if (globals.disabled) {
-        continue;
+  if (context.mode === "automatic") {
+    if (modes) {
+      for (const [name, globals] of Object.entries(modes)) {
+        if (globals.disabled) {
+          continue;
+        }
+        await handler.evaluate((name2) => {
+          globalThis.__ARGOS_CURRENT_MODE = name2;
+        }, name);
+        const attachments = await runHooksAndScreenshot({
+          handler,
+          context,
+          metadata,
+          options: argosOptions,
+          suffix: getModeSuffix(name),
+          globals: {
+            ...context.story.globals,
+            ...globals
+          }
+        });
+        allAttachments.push(...attachments);
+        await context.setViewportSize("default");
+        await handler.evaluate(() => {
+          delete globalThis.__ARGOS_CURRENT_MODE;
+        });
       }
+    } else {
       const attachments = await runHooksAndScreenshot({
         handler,
         context,
         metadata,
         options: argosOptions,
-        suffix: ` mode-[${name}]`,
-        globals: {
-          ...context.story.globals,
-          ...globals
-        }
+        globals: context.story.globals ?? {}
       });
       allAttachments.push(...attachments);
-      await context.setViewportSize("default");
-      await setStorybookGlobals({ handler, globals: {} });
     }
-  } else {
-    const attachments = await runHooksAndScreenshot({
-      handler,
-      context,
-      metadata,
-      options: argosOptions,
-      globals: context.story.globals ?? {}
+  } else if (context.mode === "manual") {
+    const currentMode = await handler.evaluate(() => {
+      return globalThis.__ARGOS_CURRENT_MODE || null;
     });
-    allAttachments.push(...attachments);
+    if (modes && !currentMode) {
+      return;
+    }
+    await markStoryAsRendered(handler, context.story.id);
+    await argosPlaywrightScreenshot(
+      handler,
+      composeName(context.name, getModeSuffix(currentMode)),
+      options
+    );
   }
   await context.afterScreenshot?.({ handler, globals: {} });
   return allAttachments;
 }
-async function setStorybookGlobals(args) {
-  const { handler, globals } = args;
-  await handler.evaluate((globals2) => {
+async function runStory(args) {
+  const { handler, globals, storyId } = args;
+  await handler.evaluate(async (globals2) => {
+    if ("__ARGOS_STORYBOOK_STORY" in globalThis) {
+      const storyFn = globalThis.__ARGOS_STORYBOOK_STORY;
+      if (!storyFn) {
+        throw new Error(
+          "@argos-ci/storybook: Unable to find `__ARGOS_STORYBOOK_STORY`."
+        );
+      }
+      const canvasElement = (() => {
+        const existing = document.getElementById("storybook-root");
+        existing?.remove();
+        const canvasElement2 = document.createElement("div");
+        canvasElement2.id = "storybook-root";
+        document.body.appendChild(canvasElement2);
+        return canvasElement2;
+      })();
+      await storyFn.run({ globals: globals2, canvasElement });
+      return;
+    }
     const channel = (() => {
       if ("__STORYBOOK_PREVIEW__" in globalThis) {
         return globalThis.__STORYBOOK_PREVIEW__.channel;
       }
-      if ("__STORYBOOK_ADDONS_CHANNEL__" in globalThis) {
-        return globalThis.__STORYBOOK_ADDONS_CHANNEL__;
-      }
       return null;
     })();
     if (!channel) {
       throw new Error(
-        "@argos-ci/storybook: Unable to find Storybook preview instance."
+        "@argos-ci/storybook: Unable to find `__STORYBOOK_PREVIEW__`."
       );
     }
     const initialGlobals = channel.last("globalsUpdated")?.[0].initialGlobals;
@@ -145,10 +180,24 @@ async function setStorybookGlobals(args) {
       globals: { ...initialGlobals, ...globals2 }
     });
   }, globals);
+  await markStoryAsRendered(handler, storyId);
+}
+async function markStoryAsRendered(handler, storyId) {
+  await handler.evaluate((storyId2) => {
+    if ("__ARGOS_STORYBOOK_STORY" in globalThis) {
+      const addons = globalThis.__STORYBOOK_ADDONS_PREVIEW;
+      if (!addons) {
+        throw new Error(
+          "@argos-ci/storybook: Unable to find `__STORYBOOK_ADDONS_PREVIEW`."
+        );
+      }
+      addons.getChannel().emit("storyRendered", storyId2);
+    }
+  }, storyId);
 }
 async function runHooksAndScreenshot(args) {
   const { handler, context, options, globals, metadata } = args;
-  await setStorybookGlobals({ handler, globals });
+  await runStory({ handler, globals, storyId: context.story.id });
   const viewportFromGlobals = globals.viewport ? getViewport(context.story.parameters, globals.viewport) : null;
   const viewport = viewportFromGlobals ?? getDefaultViewport(context.story.parameters) ?? "default";
   await context.setViewportSize(viewport);
@@ -159,10 +208,16 @@ async function runHooksAndScreenshot(args) {
   await context.beforeScreenshot?.({ handler, globals });
   return argosPlaywrightScreenshot(
     handler,
-    context.name + (args.suffix ?? ""),
+    composeName(context.name, args.suffix),
     options
   );
 }
+function getModeSuffix(mode) {
+  return mode ? ` mode-[${mode}]` : "";
+}
+function composeName(name, suffix) {
+  return name + (suffix ?? "");
+}
 
 // src/test-runner.ts
 var DEFAULT_PLAYWRIGHT_VIEWPORT_SIZE = { width: 1280, height: 720 };
@@ -172,6 +227,7 @@ async function argosScreenshot(page, context, options) {
   await storybookArgosScreenshot(
     page,
     {
+      mode: "automatic",
       name: storyContext.id,
       playwrightLibraries: ["@storybook/test-runner"],
       beforeScreenshot: async ({ handler }) => {

package/dist/vitest-plugin.d.ts

@@ -7,6 +7,11 @@ import { UploadParameters } from '@argos-ci/core';
 type StorybookGlobals = Record<string, any>;
 
 type StorybookScreenshotContext<Handler extends Page | Frame> = {
+    /**
+     * - "manual" means the `argosScreenshot` has been called in the story play function.
+     * - "automatic" means the screenshot is taken automatically after each test.
+     */
+    mode: "manual" | "automatic";
     name: string;
     playwrightLibraries: string[];
     test?: MetadataConfig["test"];
@@ -30,7 +35,7 @@ type ArgosScreenshotOptions = Omit<ArgosScreenshotOptions$1, "viewports">;
 type ArgosReporterConfig = UploadParameters;
 
 type ArgosScreenshotCommandArgs = [
-    Pick<StorybookScreenshotContext<Frame>, "name" | "story" | "test">
+    Pick<StorybookScreenshotContext<Frame>, "name" | "story" | "test" | "mode">
 ];
 interface ArgosVitestPluginOptions extends ArgosReporterConfig, ArgosScreenshotOptions {
     /**
@@ -38,26 +43,6 @@ interface ArgosVitestPluginOptions extends ArgosReporterConfig, ArgosScreenshotO
      * @default true
      */
     uploadToArgos?: boolean;
-    /**
-     * Opportunity to apply globals or other context-specific settings.
-     * This can be useful to emulate dark mode or other visual modes.
-     * @example
-     * ```typescript
-     * applyGlobals: async ({ frame, globals }) => {
-     *   await frame.evaluate((globals) => {
-     *     if (globals.theme === "dark") {
-     *       document.documentElement.classList.add("dark");
-     *     } else {
-     *       document.documentElement.classList.remove("dark");
-     *     }
-     *   }, globals);
-     * }
-     * ```
-     */
-    applyGlobals?: (input: {
-        handler: Frame;
-        globals: StorybookGlobals;
-    }) => Promise<void>;
 }
 /**
  * Create a command for taking Argos screenshots in Vitest.

package/dist/vitest-plugin.js

@@ -87,54 +87,89 @@ async function storybookArgosScreenshot(handler, context, options) {
   const argosParameters = getArgosParameters(context.story.parameters);
   const modes = argosParameters?.modes;
   const allAttachments = [];
-  if (modes) {
-    for (const [name, globals] of Object.entries(modes)) {
-      if (globals.disabled) {
-        continue;
+  if (context.mode === "automatic") {
+    if (modes) {
+      for (const [name, globals] of Object.entries(modes)) {
+        if (globals.disabled) {
+          continue;
+        }
+        await handler.evaluate((name2) => {
+          globalThis.__ARGOS_CURRENT_MODE = name2;
+        }, name);
+        const attachments = await runHooksAndScreenshot({
+          handler,
+          context,
+          metadata,
+          options: argosOptions,
+          suffix: getModeSuffix(name),
+          globals: {
+            ...context.story.globals,
+            ...globals
+          }
+        });
+        allAttachments.push(...attachments);
+        await context.setViewportSize("default");
+        await handler.evaluate(() => {
+          delete globalThis.__ARGOS_CURRENT_MODE;
+        });
       }
+    } else {
       const attachments = await runHooksAndScreenshot({
         handler,
         context,
         metadata,
         options: argosOptions,
-        suffix: ` mode-[${name}]`,
-        globals: {
-          ...context.story.globals,
-          ...globals
-        }
+        globals: context.story.globals ?? {}
       });
       allAttachments.push(...attachments);
-      await context.setViewportSize("default");
-      await setStorybookGlobals({ handler, globals: {} });
     }
-  } else {
-    const attachments = await runHooksAndScreenshot({
-      handler,
-      context,
-      metadata,
-      options: argosOptions,
-      globals: context.story.globals ?? {}
+  } else if (context.mode === "manual") {
+    const currentMode = await handler.evaluate(() => {
+      return globalThis.__ARGOS_CURRENT_MODE || null;
     });
-    allAttachments.push(...attachments);
+    if (modes && !currentMode) {
+      return;
+    }
+    await markStoryAsRendered(handler, context.story.id);
+    await argosPlaywrightScreenshot(
+      handler,
+      composeName(context.name, getModeSuffix(currentMode)),
+      options
+    );
   }
   await context.afterScreenshot?.({ handler, globals: {} });
   return allAttachments;
 }
-async function setStorybookGlobals(args) {
-  const { handler, globals } = args;
-  await handler.evaluate((globals2) => {
+async function runStory(args) {
+  const { handler, globals, storyId } = args;
+  await handler.evaluate(async (globals2) => {
+    if ("__ARGOS_STORYBOOK_STORY" in globalThis) {
+      const storyFn = globalThis.__ARGOS_STORYBOOK_STORY;
+      if (!storyFn) {
+        throw new Error(
+          "@argos-ci/storybook: Unable to find `__ARGOS_STORYBOOK_STORY`."
+        );
+      }
+      const canvasElement = (() => {
+        const existing = document.getElementById("storybook-root");
+        existing?.remove();
+        const canvasElement2 = document.createElement("div");
+        canvasElement2.id = "storybook-root";
+        document.body.appendChild(canvasElement2);
+        return canvasElement2;
+      })();
+      await storyFn.run({ globals: globals2, canvasElement });
+      return;
+    }
     const channel = (() => {
       if ("__STORYBOOK_PREVIEW__" in globalThis) {
         return globalThis.__STORYBOOK_PREVIEW__.channel;
       }
-      if ("__STORYBOOK_ADDONS_CHANNEL__" in globalThis) {
-        return globalThis.__STORYBOOK_ADDONS_CHANNEL__;
-      }
       return null;
     })();
     if (!channel) {
       throw new Error(
-        "@argos-ci/storybook: Unable to find Storybook preview instance."
+        "@argos-ci/storybook: Unable to find `__STORYBOOK_PREVIEW__`."
       );
     }
     const initialGlobals = channel.last("globalsUpdated")?.[0].initialGlobals;
@@ -142,10 +177,24 @@ async function setStorybookGlobals(args) {
       globals: { ...initialGlobals, ...globals2 }
     });
   }, globals);
+  await markStoryAsRendered(handler, storyId);
+}
+async function markStoryAsRendered(handler, storyId) {
+  await handler.evaluate((storyId2) => {
+    if ("__ARGOS_STORYBOOK_STORY" in globalThis) {
+      const addons = globalThis.__STORYBOOK_ADDONS_PREVIEW;
+      if (!addons) {
+        throw new Error(
+          "@argos-ci/storybook: Unable to find `__STORYBOOK_ADDONS_PREVIEW`."
+        );
+      }
+      addons.getChannel().emit("storyRendered", storyId2);
+    }
+  }, storyId);
 }
 async function runHooksAndScreenshot(args) {
   const { handler, context, options, globals, metadata } = args;
-  await setStorybookGlobals({ handler, globals });
+  await runStory({ handler, globals, storyId: context.story.id });
   const viewportFromGlobals = globals.viewport ? getViewport(context.story.parameters, globals.viewport) : null;
   const viewport = viewportFromGlobals ?? getDefaultViewport(context.story.parameters) ?? "default";
   await context.setViewportSize(viewport);
@@ -156,10 +205,16 @@ async function runHooksAndScreenshot(args) {
   await context.beforeScreenshot?.({ handler, globals });
   return argosPlaywrightScreenshot(
     handler,
-    context.name + (args.suffix ?? ""),
+    composeName(context.name, args.suffix),
     options
   );
 }
+function getModeSuffix(mode) {
+  return mode ? ` mode-[${mode}]` : "";
+}
+function composeName(name, suffix) {
+  return name + (suffix ?? "");
+}
 
 // src/vitest-reporter.ts
 import { upload } from "@argos-ci/core";
@@ -184,7 +239,7 @@ var ArgosReporter = class {
 // src/vitest-plugin.ts
 import { resolve } from "path";
 var createArgosScreenshotCommand = (pluginOptions) => {
-  const { applyGlobals, ...screenshotOptions } = pluginOptions ?? {};
+  const screenshotOptions = pluginOptions ?? {};
   return async (ctx, testContext) => {
     const frame = await ctx.frame();
     const fitToContent = getFitToContentFromParameters(
@@ -216,9 +271,7 @@ var createArgosScreenshotCommand = (pluginOptions) => {
               iframe.style.height = `${size2.height}px`;
             }
           }, size);
-        },
-        beforeScreenshot: applyGlobals,
-        afterScreenshot: applyGlobals
+        }
       },
       applyFitToContent(screenshotOptions, fitToContent)
     );

package/dist/vitest-setup-file.js

@@ -1,15 +1,19 @@
-// src/vitest.ts
+// src/vitest-setup-file.ts
 import { afterEach } from "vitest";
-import { server } from "@vitest/browser/context";
-function setupArgos() {
-  afterEach(async (ctx) => {
+
+// src/vitest.ts
+function setupArgos(api) {
+  api.afterEach(async (ctx) => {
     const story = "story" in ctx ? ctx.story : null;
     if (!story) {
       throw new Error(
         `@argos-ci/storybook/vitest-plugin should be used with @storybook/addon-vitest/vitest-plugin`
       );
     }
+    const { server } = await import("@vitest/browser/context");
+    globalThis.__ARGOS_STORYBOOK_STORY = story;
     await server.commands.argosScreenshot({
+      mode: "automatic",
       name: story.id,
       story: {
         id: story.id,
@@ -31,4 +35,4 @@ function setupArgos() {
 }
 
 // src/vitest-setup-file.ts
-setupArgos();
+setupArgos({ afterEach });

package/dist/vitest.d.ts

@@ -1,9 +1,15 @@
+import * as vitest from 'vitest';
 import { MetadataConfig, ArgosScreenshotOptions as ArgosScreenshotOptions$1, Attachment } from '@argos-ci/playwright';
 import { Page, Frame, ViewportSize } from 'playwright';
 
 type StorybookGlobals = Record<string, any>;
 
 type StorybookScreenshotContext<Handler extends Page | Frame> = {
+    /**
+     * - "manual" means the `argosScreenshot` has been called in the story play function.
+     * - "automatic" means the screenshot is taken automatically after each test.
+     */
+    mode: "manual" | "automatic";
     name: string;
     playwrightLibraries: string[];
     test?: MetadataConfig["test"];
@@ -25,7 +31,7 @@ type StorybookScreenshotContext<Handler extends Page | Frame> = {
 type ArgosScreenshotOptions = Omit<ArgosScreenshotOptions$1, "viewports">;
 
 type ArgosScreenshotCommandArgs = [
-    Pick<StorybookScreenshotContext<Frame>, "name" | "story" | "test">
+    Pick<StorybookScreenshotContext<Frame>, "name" | "story" | "test" | "mode">
 ];
 
 declare module "@vitest/browser/context" {
@@ -36,7 +42,9 @@ declare module "@vitest/browser/context" {
 /**
  * Setup Argos hooks for Vitest.
  */
-declare function setupArgos(): void;
+declare function setupArgos(api: {
+    afterEach: typeof vitest.afterEach;
+}): void;
 /**
  * Take an Argos screenshot of a story in Vitest.
  */

package/dist/vitest.js

@@ -1,15 +1,16 @@
 // src/vitest.ts
-import { afterEach } from "vitest";
-import { server } from "@vitest/browser/context";
-function setupArgos() {
-  afterEach(async (ctx) => {
+function setupArgos(api) {
+  api.afterEach(async (ctx) => {
     const story = "story" in ctx ? ctx.story : null;
     if (!story) {
       throw new Error(
         `@argos-ci/storybook/vitest-plugin should be used with @storybook/addon-vitest/vitest-plugin`
       );
     }
+    const { server } = await import("@vitest/browser/context");
+    globalThis.__ARGOS_STORYBOOK_STORY = story;
     await server.commands.argosScreenshot({
+      mode: "automatic",
       name: story.id,
       story: {
         id: story.id,
@@ -30,7 +31,13 @@ function setupArgos() {
   });
 }
 async function argosScreenshot(story, name) {
+  const isVitest = await checkIsVitestEnv();
+  if (!isVitest) {
+    return;
+  }
+  const { server } = await import("@vitest/browser/context");
   await server.commands.argosScreenshot({
+    mode: "manual",
     name: `${story.id}/${name}`,
     story: {
       id: story.id,
@@ -39,6 +46,14 @@ async function argosScreenshot(story, name) {
     }
   });
 }
+async function checkIsVitestEnv() {
+  try {
+    await import("@vitest/browser/context");
+    return true;
+  } catch {
+    return false;
+  }
+}
 export {
   argosScreenshot,
   setupArgos

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@argos-ci/storybook",
   "description": "Visual testing for Storybook test runner.",
-  "version": "4.0.10",
+  "version": "5.0.0",
   "author": "Smooth Code",
   "license": "MIT",
   "repository": {
@@ -50,18 +50,18 @@
     "node": ">=20.0.0"
   },
   "dependencies": {
-    "@argos-ci/playwright": "6.1.3",
+    "@argos-ci/playwright": "6.1.4",
     "@argos-ci/util": "3.1.0"
   },
   "devDependencies": {
-    "@argos-ci/cli": "3.0.6",
-    "@argos-ci/core": "4.1.2",
+    "@argos-ci/cli": "3.0.7",
+    "@argos-ci/core": "4.1.3",
     "@argos-ci/util": "workspace:*",
-    "@storybook/addon-docs": "^9.1.0",
-    "@storybook/addon-links": "^9.1.0",
-    "@storybook/addon-themes": "^9.1.0",
-    "@storybook/addon-vitest": "^9.1.0",
-    "@storybook/react-vite": "^9.1.0",
+    "@storybook/addon-docs": "^9.1.5",
+    "@storybook/addon-links": "^9.1.5",
+    "@storybook/addon-themes": "^9.1.5",
+    "@storybook/addon-vitest": "^9.1.5",
+    "@storybook/react-vite": "^9.1.5",
     "@storybook/test-runner": "^0.23.0",
     "@types/react": "^19.1.9",
     "@types/react-dom": "^19.1.7",
@@ -73,7 +73,8 @@
     "prop-types": "^15.8.1",
     "react": "^19.1.1",
     "react-dom": "^19.1.1",
-    "storybook": "^9.1.0",
+    "storybook": "^9.1.5",
+    "storybook-addon-pseudo-states": "^9.1.5",
     "vitest": "catalog:",
     "wait-on": "^8.0.4"
   },
@@ -97,5 +98,5 @@
     "check-format": "prettier --check --ignore-unknown --ignore-path=./.gitignore --ignore-path=../../.gitignore --ignore-path=../../.prettierignore .",
     "lint": "eslint ."
   },
-  "gitHead": "c705285fa19c31ef0c071bc7bf5182f7a366e2c4"
+  "gitHead": "9bda48090685f3215301526c7d979716d485f3ed"
 }