@argos-ci/storybook 2.1.7 → 3.0.0

package/dist/test-runner.js

@@ -81,12 +81,12 @@ async function storybookArgosScreenshot(page, context, options) {
   };
   const version = await getArgosStorybookVersion();
   const storyUrl = `http://localhost:6006/?path=/story/${context.story.id}`;
-  DO_NOT_USE_setMetadataConfig({
+  const metadata = {
     sdk: { name: "@argos-ci/storybook", version },
     playwrightLibraries: context.playwrightLibraries,
     url: storyUrl,
     test: context.test
-  });
+  };
   const argosParameters = getArgosParameters(context.story.parameters);
   const modes = argosParameters?.modes;
   const allAttachments = [];
@@ -98,8 +98,9 @@ async function storybookArgosScreenshot(page, context, options) {
       const attachments = await runHooksAndScreenshot({
         page,
         context,
+        metadata,
         options: argosOptions,
-        suffix: ` ${name}`,
+        suffix: ` mode-[${name}]`,
         globals: {
           ...context.story.globals,
           ...globals
@@ -111,6 +112,7 @@ async function storybookArgosScreenshot(page, context, options) {
     const attachments = await runHooksAndScreenshot({
       page,
       context,
+      metadata,
       options: argosOptions,
       globals: context.story.globals ?? {}
     });
@@ -150,7 +152,7 @@ async function setStorybookGlobals(args) {
   }, globals);
 }
 async function runHooksAndScreenshot(args) {
-  const { page, context, options, globals } = args;
+  const { page, context, options, globals, metadata } = args;
   if (context.applyGlobals) {
     await context.applyGlobals({
       handler: page,
@@ -161,6 +163,10 @@ async function runHooksAndScreenshot(args) {
   const viewportFromGlobals = globals.viewport ? getViewport(context.story.parameters, globals.viewport) : null;
   const viewport = viewportFromGlobals ?? getDefaultViewport(context.story.parameters) ?? "default";
   await context.setViewportSize(viewport);
+  DO_NOT_USE_setMetadataConfig({
+    ...metadata,
+    viewport: viewport && viewport !== "default" ? viewport : void 0
+  });
   return argosPlaywrightScreenshot(
     page,
     context.name + (args.suffix ?? ""),
@@ -169,14 +175,13 @@ async function runHooksAndScreenshot(args) {
 }
 
 // src/test-runner.ts
-import { join } from "node:path";
 async function argosScreenshot(page, context, options) {
   const storyContext = await getStoryContext(page, context);
   const fitToContent = getFitToContentFromParameters(storyContext.parameters);
   await storybookArgosScreenshot(
     page,
     {
-      name: join(context.title, context.name),
+      name: storyContext.id,
       playwrightLibraries: ["@storybook/test-runner"],
       applyGlobals: async ({ handler }) => {
         await waitForPageReady(handler);

package/dist/vitest-plugin.js

@@ -78,12 +78,12 @@ async function storybookArgosScreenshot(page, context, options) {
   };
   const version = await getArgosStorybookVersion();
   const storyUrl = `http://localhost:6006/?path=/story/${context.story.id}`;
-  DO_NOT_USE_setMetadataConfig({
+  const metadata = {
     sdk: { name: "@argos-ci/storybook", version },
     playwrightLibraries: context.playwrightLibraries,
     url: storyUrl,
     test: context.test
-  });
+  };
   const argosParameters = getArgosParameters(context.story.parameters);
   const modes = argosParameters?.modes;
   const allAttachments = [];
@@ -95,8 +95,9 @@ async function storybookArgosScreenshot(page, context, options) {
       const attachments = await runHooksAndScreenshot({
         page,
         context,
+        metadata,
         options: argosOptions,
-        suffix: ` ${name}`,
+        suffix: ` mode-[${name}]`,
         globals: {
           ...context.story.globals,
           ...globals
@@ -108,6 +109,7 @@ async function storybookArgosScreenshot(page, context, options) {
     const attachments = await runHooksAndScreenshot({
       page,
       context,
+      metadata,
       options: argosOptions,
       globals: context.story.globals ?? {}
     });
@@ -147,7 +149,7 @@ async function setStorybookGlobals(args) {
   }, globals);
 }
 async function runHooksAndScreenshot(args) {
-  const { page, context, options, globals } = args;
+  const { page, context, options, globals, metadata } = args;
   if (context.applyGlobals) {
     await context.applyGlobals({
       handler: page,
@@ -158,6 +160,10 @@ async function runHooksAndScreenshot(args) {
   const viewportFromGlobals = globals.viewport ? getViewport(context.story.parameters, globals.viewport) : null;
   const viewport = viewportFromGlobals ?? getDefaultViewport(context.story.parameters) ?? "default";
   await context.setViewportSize(viewport);
+  DO_NOT_USE_setMetadataConfig({
+    ...metadata,
+    viewport: viewport && viewport !== "default" ? viewport : void 0
+  });
   return argosPlaywrightScreenshot(
     page,
     context.name + (args.suffix ?? ""),

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@argos-ci/storybook",
   "description": "Visual testing for Storybook test runner.",
-  "version": "2.1.7",
+  "version": "3.0.0",
   "author": "Smooth Code",
   "license": "MIT",
   "repository": {
@@ -27,59 +27,75 @@
   "type": "module",
   "types": "./dist/index.d.ts",
   "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.js",
-      "require": "./dist/index.cjs",
-      "default": "./dist/index.cjs"
+    "./test-runner": {
+      "types": "./dist/test-runner.d.ts",
+      "import": "./dist/test-runner.js",
+      "require": "./dist/test-runner.cjs",
+      "default": "./dist/test-runner.cjs"
     },
+    "./vitest": {
+      "types": "./dist/vitest.d.ts",
+      "import": "./dist/vitest.js",
+      "default": "./dist/vitest.js"
+    },
+    "./vitest-plugin": {
+      "types": "./dist/vitest-plugin.d.ts",
+      "import": "./dist/vitest-plugin.js",
+      "default": "./dist/vitest-plugin.js"
+    },
+    "./internal/vitest-setup-file": "./dist/vitest-setup-file.js",
     "./package.json": "./package.json"
   },
   "engines": {
     "node": ">=18.16.0"
   },
   "dependencies": {
-    "@argos-ci/playwright": "5.0.9",
-    "@argos-ci/util": "2.3.2"
-  },
-  "peerDependencies": {
-    "@storybook/test-runner": "*",
-    "playwright": "*"
+    "@argos-ci/playwright": "5.0.10",
+    "@argos-ci/util": "2.3.3"
   },
   "devDependencies": {
-    "@argos-ci/cli": "2.5.8",
+    "@argos-ci/cli": "2.5.9",
+    "@argos-ci/core": "3.2.2",
     "@argos-ci/util": "workspace:*",
-    "@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",
-    "@storybook/test": "^8.6.9",
-    "@storybook/test-runner": "^0.22.0",
+    "@storybook/addon-docs": "^9.0.18",
+    "@storybook/addon-links": "^9.0.18",
+    "@storybook/addon-themes": "^9.0.18",
+    "@storybook/addon-vitest": "^9.0.18",
+    "@storybook/react-vite": "^9.0.18",
+    "@storybook/test-runner": "^0.23.0",
+    "@types/react": "^19.1.0",
+    "@types/react-dom": "^19.1.0",
+    "@vitest/browser": "^3.2.4",
+    "@vitest/coverage-v8": "^3.2.4",
+    "@vitest/ui": "^3.2.4",
     "http-server": "^14.1.1",
     "playwright": "^1.51.1",
     "prop-types": "^15.8.1",
-    "storybook": "^8.6.9",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "storybook": "^9.0.18",
+    "vitest": "catalog:",
     "wait-on": "^8.0.3"
   },
   "scripts": {
-    "build": "tsup && cp ./src/index.cjs ./dist",
+    "build": "tsup && cp ./src/test-runner.cjs ./dist",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
-    "test-storybook": "NODE_NO_WARNINGS=1 NODE_OPTIONS=--experimental-vm-modules test-storybook",
+    "test-storybook": "cross-env NODE_NO_WARNINGS=1 NODE_OPTIONS=--experimental-vm-modules test-storybook",
     "install-playwright": "playwright install chromium --with-deps",
-    "argos-upload": "argos upload screenshots --build-name \"argos-storybook-e2e-node-$NODE_VERSION-$OS\"",
+    "argos-upload-runner": "argos upload screenshots --build-name \"argos-storybook-test-runner-e2e-node-$NODE_VERSION-$OS\"",
     "serve-storybook": "http-server storybook-static --port 6006 --silent",
     "wait-storybook": "wait-on tcp:127.0.0.1:6006",
-    "build-e2e": "pnpm run build-storybook --quiet && pnpm run install-playwright",
-    "test-e2e": "pnpm run test-storybook && pnpm run argos-upload",
-    "e2e": "pnpm dlx concurrently -k -s first -n \"SB,TEST\" -c \"magenta,blue\" \"pnpm run serve-storybook\" \"pnpm run wait-storybook && pnpm run test-e2e\"",
+    "build-e2e-runner": "pnpm run build-storybook --quiet && pnpm run install-playwright",
+    "build-e2e": "pnpm run build-e2e-runner",
+    "test-e2e-runner": "pnpm run test-storybook && pnpm run argos-upload-runner",
+    "test-e2e-vitest": "vitest run",
+    "e2e-runner": "pnpm dlx concurrently -k -s first -n \"SB,TEST\" -c \"magenta,blue\" \"pnpm run serve-storybook\" \"pnpm run wait-storybook && pnpm run test-e2e-runner\"",
+    "e2e-vitest": "cross-env BUILD_NAME=\"argos-storybook-vitest-e2e-node-$NODE_VERSION-$OS\" UPLOAD_TO_ARGOS=true pnpm run test-e2e-vitest",
+    "e2e": "pnpm run e2e-runner && rm -rf ./screenshots && pnpm run e2e-vitest",
     "check-types": "tsc",
     "check-format": "prettier --check --ignore-unknown --ignore-path=./.gitignore --ignore-path=../../.gitignore --ignore-path=../../.prettierignore .",
     "lint": "eslint ."
   },
-  "gitHead": "899956c05cad3211eb2dd030a214a2e0af12e27d"
+  "gitHead": "ecab2281c36828d0c43728e3ed98e1eefe227c99"
 }

package/dist/index.cjs

@@ -1,5 +0,0 @@
-const argosScreenshot = async (...args) => {
-  const { argosScreenshot } = await import("./index.js");
-  return argosScreenshot(...args);
-};
-exports.argosScreenshot = argosScreenshot;

package/dist/index.d.ts

@@ -1,57 +0,0 @@
-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.
-     * @default true
-     */
-    fitToContent?: boolean | {
-        /**
-         * Padding around the content in pixels.
-         * @default 16
-         */
-        padding?: number;
-        /**
-         * Zoom level.
-         * @default 2
-         */
-        zoom?: number;
-    };
-} & ArgosScreenshotOptions$1;
-/**
- * Stabilize the UI and takes a screenshot of the application under test.
- *
- * @example
- *    argosScreenshot(page, "my-screenshot")
- * @see https://argos-ci.com/docs/playwright#api-overview
- */
-declare function argosScreenshot(
-/**
- * Playwright `page` object.
- */
-page: Page, 
-/**
- * Context of the test.
- */
-context: TestContext, 
-/**
- * Options for the screenshot.
- */
-options?: ArgosScreenshotOptions): Promise<void>;
-
-export { type ArgosScreenshotOptions, type ArgosStorybookParameters, argosScreenshot };

package/dist/index.js

@@ -1,134 +0,0 @@
-// src/index.ts
-import { getStoryContext, waitForPageReady } from "@storybook/test-runner";
-import {
-  argosScreenshot as argosPlaywrightScreenshot,
-  DO_NOT_USE_setMetadataConfig
-} from "@argos-ci/playwright";
-import { join } from "node:path";
-
-// src/metadata.ts
-import { readVersionFromPackage } from "@argos-ci/util";
-import { createRequire } from "node:module";
-var require2 = createRequire(import.meta.url);
-async function getArgosStorybookVersion() {
-  const pkgPath = require2.resolve("@argos-ci/storybook/package.json");
-  return readVersionFromPackage(pkgPath);
-}
-
-// src/index.ts
-async function argosScreenshot(page, context, options) {
-  const { fitToContent = true, ...screenshotOptions } = options ?? {};
-  const fitToContentOptions = (() => {
-    if (options?.element || !fitToContent) {
-      return {};
-    }
-    const { padding = 16, zoom = 2 } = fitToContent === true ? {} : fitToContent;
-    return {
-      element: "#storybook-root",
-      argosCSS: `#storybook-root { padding: ${padding}px; width: fit-content; height: fit-content; zoom: ${zoom}; }` + (options?.argosCSS ?? "")
-    };
-  })();
-  const argosOptions = {
-    ...screenshotOptions,
-    // Disable aria-busy stabilization by default
-    stabilize: screenshotOptions.stabilize ?? {
-      waitForAriaBusy: false,
-      ...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
-};