@argos-ci/storybook 2.0.1 → 2.1.1

package/dist/index.d.ts

@@ -2,6 +2,19 @@ import { TestContext } from '@storybook/test-runner';
 import { ArgosScreenshotOptions as ArgosScreenshotOptions$1 } from '@argos-ci/playwright';
 import { Page } from 'playwright';
 
+/**
+ * Storybook mode.
+ */
+type StorybookGlobals = Record<string, any>;
+/**
+ * Argos parameters in Storybook.
+ */
+interface ArgosStorybookParameters {
+    /**
+     * Modes for the story.
+     */
+    modes?: Record<string, StorybookGlobals>;
+}
 type ArgosScreenshotOptions = {
     /**
      * Fit the screenshot to the content size.
@@ -41,4 +54,4 @@ context: TestContext,
  */
 options?: ArgosScreenshotOptions): Promise<void>;
 
-export { type ArgosScreenshotOptions, argosScreenshot };
+export { type ArgosScreenshotOptions, type ArgosStorybookParameters, argosScreenshot };

package/dist/index.js

@@ -1,5 +1,5 @@
 // src/index.ts
-import { waitForPageReady } from "@storybook/test-runner";
+import { getStoryContext, waitForPageReady } from "@storybook/test-runner";
 import {
   argosScreenshot as argosPlaywrightScreenshot,
   DO_NOT_USE_setMetadataConfig
@@ -18,7 +18,6 @@ async function getArgosStorybookVersion() {
 // src/index.ts
 async function argosScreenshot(page, context, options) {
   const { fitToContent = true, ...screenshotOptions } = options ?? {};
-  await waitForPageReady(page);
   const fitToContentOptions = (() => {
     if (options?.element || !fitToContent) {
       return {};
@@ -29,12 +28,7 @@ async function argosScreenshot(page, context, options) {
       argosCSS: `#storybook-root { padding: ${padding}px; width: fit-content; height: fit-content; zoom: ${zoom}; }` + (options?.argosCSS ?? "")
     };
   })();
-  const version = await getArgosStorybookVersion();
-  DO_NOT_USE_setMetadataConfig({
-    sdk: { name: "@argos-ci/storybook", version },
-    playwrightLibraries: ["@storybook/test-runner"]
-  });
-  await argosPlaywrightScreenshot(page, join(context.title, context.name), {
+  const argosOptions = {
     ...screenshotOptions,
     // Disable aria-busy stabilization by default
     stabilize: screenshotOptions.stabilize ?? {
@@ -42,7 +36,98 @@ async function argosScreenshot(page, context, options) {
       ...typeof screenshotOptions.stabilize === "object" ? screenshotOptions.stabilize : {}
     },
     ...fitToContentOptions
+  };
+  const [version, storyContext] = await Promise.all([
+    getArgosStorybookVersion(),
+    getStoryContext(page, context)
+  ]);
+  const defaultViewport = getDefaultViewport(storyContext.parameters);
+  if (defaultViewport) {
+    await page.setViewportSize(defaultViewport);
+  } else {
+    await page.setViewportSize({ width: 1280, height: 720 });
+  }
+  DO_NOT_USE_setMetadataConfig({
+    sdk: { name: "@argos-ci/storybook", version },
+    playwrightLibraries: ["@storybook/test-runner"]
   });
+  const argosParameters = getArgosParameters(storyContext.parameters);
+  const modes = argosParameters?.modes;
+  if (modes) {
+    for (const [name, globals] of Object.entries(modes)) {
+      if (globals.disabled) {
+        continue;
+      }
+      await setStorybookGlobals({ page, globals });
+      if (globals.viewport) {
+        const viewport = getViewport(storyContext.parameters, globals.viewport);
+        if (viewport) {
+          await page.setViewportSize(viewport);
+        }
+      }
+      await stabilizeAndScreenshot({
+        page,
+        context,
+        options: argosOptions,
+        suffix: ` ${name}`
+      });
+    }
+  } else {
+    await stabilizeAndScreenshot({ page, context, options: argosOptions });
+  }
+}
+async function setStorybookGlobals(args) {
+  const { page, globals } = args;
+  await page.evaluate((globals2) => {
+    const channel = globalThis.__STORYBOOK_PREVIEW__.channel;
+    channel.emit("updateGlobals", {
+      globals: {
+        ...channel.last("globalsUpdated")?.[0].initialGlobals,
+        ...globals2
+      }
+    });
+  }, globals);
+}
+async function stabilizeAndScreenshot(args) {
+  const { page, context, options } = args;
+  await waitForPageReady(page);
+  return argosPlaywrightScreenshot(
+    page,
+    join(context.title, context.name) + (args.suffix ?? ""),
+    options
+  );
+}
+function getDefaultViewport(parameters) {
+  const defaultViewport = parameters?.viewport?.defaultViewport;
+  if (defaultViewport) {
+    return getViewport(parameters, defaultViewport);
+  }
+  return null;
+}
+function getViewport(parameters, viewportName) {
+  if (typeof viewportName === "number") {
+    return { width: viewportName, height: 720 };
+  }
+  const viewports = parameters?.viewport?.viewports;
+  if (viewports && viewportName in viewports) {
+    if ("styles" in viewports[viewportName] && viewports[viewportName].styles) {
+      const width = parseInt(viewports[viewportName].styles.width, 10);
+      const height = parseInt(viewports[viewportName].styles.height, 10);
+      if (!isNaN(width) && !isNaN(height)) {
+        return { width, height };
+      }
+    }
+  }
+  return null;
+}
+function getArgosParameters(parameters) {
+  if ("argos" in parameters && parameters.argos && typeof parameters.argos === "object") {
+    return parameters.argos;
+  }
+  if ("chromatic" in parameters && parameters.chromatic && typeof parameters.chromatic === "object") {
+    return parameters.chromatic;
+  }
+  return null;
 }
 export {
   argosScreenshot

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@argos-ci/storybook",
   "description": "Visual testing for Storybook test runner.",
-  "version": "2.0.1",
+  "version": "2.1.1",
   "author": "Smooth Code",
   "license": "MIT",
   "repository": {
@@ -39,7 +39,7 @@
     "node": ">=18.16.0"
   },
   "dependencies": {
-    "@argos-ci/playwright": "5.0.1",
+    "@argos-ci/playwright": "5.0.3",
     "@argos-ci/util": "2.3.1"
   },
   "peerDependencies": {
@@ -52,6 +52,8 @@
     "@storybook/addon-essentials": "^8.6.9",
     "@storybook/addon-interactions": "^8.6.9",
     "@storybook/addon-links": "^8.6.9",
+    "@storybook/addon-themes": "^8.6.11",
+    "@storybook/addon-viewport": "^8.6.11",
     "@storybook/blocks": "^8.6.9",
     "@storybook/react": "^8.6.9",
     "@storybook/react-vite": "^8.6.9",
@@ -79,5 +81,5 @@
     "check-format": "prettier --check --ignore-unknown --ignore-path=./.gitignore --ignore-path=../../.gitignore --ignore-path=../../.prettierignore .",
     "lint": "eslint ."
   },
-  "gitHead": "333ae8a299204b5d32edcdec5b7cb9bbb54766ca"
+  "gitHead": "fe8946c2796b7565834b4ec275e50f6bad20f498"
 }