@argos-ci/storybook 2.1.6 → 2.1.7

package/dist/test-runner.cjs

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

package/dist/test-runner.d.ts

@@ -0,0 +1,54 @@
+import { TestContext } from '@storybook/test-runner';
+import { ArgosScreenshotOptions as ArgosScreenshotOptions$1 } from '@argos-ci/playwright';
+import { Page } from 'playwright';
+
+type StorybookGlobals = Record<string, any>;
+type FitToContent = {
+    /**
+     * Padding around the content in pixels.
+     * @default 16
+     */
+    padding: number;
+    /**
+     * Zoom level for the content.
+     * @default 2
+     */
+    zoom: number;
+};
+/**
+ * Argos parameters in Storybook.
+ */
+interface ArgosStorybookParameters {
+    /**
+     * Modes for the story.
+     */
+    modes?: Record<string, StorybookGlobals>;
+    /**
+     * Fit to content option for the story.
+     */
+    fitToContent?: boolean | Partial<FitToContent>;
+}
+
+type ArgosScreenshotOptions = Omit<ArgosScreenshotOptions$1, "viewports">;
+
+/**
+ * Stabilize the UI and takes a screenshot of the application under test.
+ *
+ * @example argosScreenshot(page, context, options)
+ * @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/test-runner.js

@@ -0,0 +1,214 @@
+// src/test-runner.ts
+import { getStoryContext, waitForPageReady } from "@storybook/test-runner";
+
+// src/utils/screenshot.ts
+import {
+  argosScreenshot as argosPlaywrightScreenshot,
+  DO_NOT_USE_setMetadataConfig
+} from "@argos-ci/playwright";
+
+// src/utils/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/utils/parameters.ts
+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;
+}
+var DEFAULT_FIT_TO_CONTENT = {
+  padding: 16,
+  zoom: 2
+};
+function getFitToContentFromParameters(parameters) {
+  const argosParameters = getArgosParameters(parameters);
+  if (argosParameters && "fitToContent" in argosParameters) {
+    if (typeof argosParameters.fitToContent === "boolean") {
+      return argosParameters.fitToContent ? DEFAULT_FIT_TO_CONTENT : null;
+    }
+    if (typeof argosParameters.fitToContent === "object" && argosParameters.fitToContent) {
+      return {
+        ...DEFAULT_FIT_TO_CONTENT,
+        ...argosParameters.fitToContent
+      };
+    }
+  }
+  return DEFAULT_FIT_TO_CONTENT;
+}
+
+// src/utils/screenshot.ts
+async function storybookArgosScreenshot(page, context, options) {
+  const argosOptions = {
+    ...options,
+    // Disable aria-busy stabilization by default
+    stabilize: options?.stabilize ?? {
+      waitForAriaBusy: false,
+      ...typeof options?.stabilize === "object" ? options.stabilize : {}
+    }
+  };
+  const version = await getArgosStorybookVersion();
+  const storyUrl = `http://localhost:6006/?path=/story/${context.story.id}`;
+  DO_NOT_USE_setMetadataConfig({
+    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 = [];
+  if (modes) {
+    for (const [name, globals] of Object.entries(modes)) {
+      if (globals.disabled) {
+        continue;
+      }
+      const attachments = await runHooksAndScreenshot({
+        page,
+        context,
+        options: argosOptions,
+        suffix: ` ${name}`,
+        globals: {
+          ...context.story.globals,
+          ...globals
+        }
+      });
+      allAttachments.push(...attachments);
+    }
+  } else {
+    const attachments = await runHooksAndScreenshot({
+      page,
+      context,
+      options: argosOptions,
+      globals: context.story.globals ?? {}
+    });
+    allAttachments.push(...attachments);
+  }
+  await context.setViewportSize("default");
+  if (context.applyGlobals) {
+    await context.applyGlobals({
+      handler: page,
+      globals: {}
+    });
+  }
+  await setStorybookGlobals({ page, globals: {} });
+  return allAttachments;
+}
+async function setStorybookGlobals(args) {
+  const { page, globals } = args;
+  await page.evaluate((globals2) => {
+    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."
+      );
+    }
+    const initialGlobals = channel.last("globalsUpdated")?.[0].initialGlobals;
+    channel.emit("updateGlobals", {
+      globals: { ...initialGlobals, ...globals2 }
+    });
+  }, globals);
+}
+async function runHooksAndScreenshot(args) {
+  const { page, context, options, globals } = args;
+  if (context.applyGlobals) {
+    await context.applyGlobals({
+      handler: page,
+      globals
+    });
+  }
+  await setStorybookGlobals({ page, globals });
+  const viewportFromGlobals = globals.viewport ? getViewport(context.story.parameters, globals.viewport) : null;
+  const viewport = viewportFromGlobals ?? getDefaultViewport(context.story.parameters) ?? "default";
+  await context.setViewportSize(viewport);
+  return argosPlaywrightScreenshot(
+    page,
+    context.name + (args.suffix ?? ""),
+    options
+  );
+}
+
+// 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),
+      playwrightLibraries: ["@storybook/test-runner"],
+      applyGlobals: async ({ handler }) => {
+        await waitForPageReady(handler);
+      },
+      story: {
+        id: storyContext.id,
+        parameters: storyContext.parameters,
+        // We don't have access to globals in this context.
+        globals: null
+      },
+      setViewportSize: async (size) => {
+        if (size === "default") {
+          await page.setViewportSize({ width: 1280, height: 720 });
+        } else {
+          await page.setViewportSize(size);
+        }
+      }
+    },
+    applyFitToContent(options, fitToContent)
+  );
+}
+function applyFitToContent(options, fitToContent) {
+  if (!fitToContent) {
+    return options;
+  }
+  const { padding, zoom } = fitToContent;
+  return {
+    ...options,
+    element: "#storybook-root",
+    argosCSS: `#storybook-root { padding: ${padding}px; width: fit-content; height: fit-content; zoom: ${zoom}; }` + (options?.argosCSS ?? "")
+  };
+}
+export {
+  argosScreenshot
+};

package/dist/vitest-plugin.d.ts

@@ -0,0 +1,60 @@
+import { Plugin } from 'vitest/config';
+import { BrowserCommand } from 'vitest/node';
+import { ArgosScreenshotOptions as ArgosScreenshotOptions$1, MetadataConfig } from '@argos-ci/playwright';
+import { Page, Frame, ViewportSize } from 'playwright';
+import { UploadParameters } from '@argos-ci/core';
+
+type StorybookGlobals = Record<string, any>;
+
+type StorybookScreenshotContext<Handler extends Page | Frame> = {
+    name: string;
+    playwrightLibraries: string[];
+    test?: MetadataConfig["test"];
+    setViewportSize: (size: ViewportSize | "default") => Promise<void>;
+    /**
+     * 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: Handler;
+        globals: StorybookGlobals;
+    }) => Promise<void>;
+    story: {
+        id: string;
+        parameters: Record<string, any>;
+        globals: StorybookGlobals | null;
+    };
+};
+type ArgosScreenshotOptions = Omit<ArgosScreenshotOptions$1, "viewports">;
+
+type ArgosReporterConfig = UploadParameters;
+
+type ArgosScreenshotCommandArgs = [
+    Pick<StorybookScreenshotContext<Frame>, "name" | "story" | "test">
+];
+interface ArgosVitestPluginOptions extends Pick<StorybookScreenshotContext<Frame>, "applyGlobals">, ArgosReporterConfig, ArgosScreenshotOptions {
+    /**
+     * Upload the report to Argos.
+     * @default true
+     */
+    uploadToArgos?: boolean;
+}
+/**
+ * Create a command for taking Argos screenshots in Vitest.
+ */
+declare const createArgosScreenshotCommand: (pluginOptions?: ArgosVitestPluginOptions) => BrowserCommand<ArgosScreenshotCommandArgs>;
+declare function argosVitestPlugin(options?: ArgosVitestPluginOptions): Plugin;
+
+export { type ArgosScreenshotCommandArgs, type ArgosScreenshotOptions, type ArgosVitestPluginOptions, argosVitestPlugin, createArgosScreenshotCommand };

package/dist/vitest-plugin.js

@@ -0,0 +1,307 @@
+// src/utils/screenshot.ts
+import {
+  argosScreenshot as argosPlaywrightScreenshot,
+  DO_NOT_USE_setMetadataConfig
+} from "@argos-ci/playwright";
+
+// src/utils/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/utils/parameters.ts
+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;
+}
+var DEFAULT_FIT_TO_CONTENT = {
+  padding: 16,
+  zoom: 2
+};
+function getFitToContentFromParameters(parameters) {
+  const argosParameters = getArgosParameters(parameters);
+  if (argosParameters && "fitToContent" in argosParameters) {
+    if (typeof argosParameters.fitToContent === "boolean") {
+      return argosParameters.fitToContent ? DEFAULT_FIT_TO_CONTENT : null;
+    }
+    if (typeof argosParameters.fitToContent === "object" && argosParameters.fitToContent) {
+      return {
+        ...DEFAULT_FIT_TO_CONTENT,
+        ...argosParameters.fitToContent
+      };
+    }
+  }
+  return DEFAULT_FIT_TO_CONTENT;
+}
+
+// src/utils/screenshot.ts
+async function storybookArgosScreenshot(page, context, options) {
+  const argosOptions = {
+    ...options,
+    // Disable aria-busy stabilization by default
+    stabilize: options?.stabilize ?? {
+      waitForAriaBusy: false,
+      ...typeof options?.stabilize === "object" ? options.stabilize : {}
+    }
+  };
+  const version = await getArgosStorybookVersion();
+  const storyUrl = `http://localhost:6006/?path=/story/${context.story.id}`;
+  DO_NOT_USE_setMetadataConfig({
+    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 = [];
+  if (modes) {
+    for (const [name, globals] of Object.entries(modes)) {
+      if (globals.disabled) {
+        continue;
+      }
+      const attachments = await runHooksAndScreenshot({
+        page,
+        context,
+        options: argosOptions,
+        suffix: ` ${name}`,
+        globals: {
+          ...context.story.globals,
+          ...globals
+        }
+      });
+      allAttachments.push(...attachments);
+    }
+  } else {
+    const attachments = await runHooksAndScreenshot({
+      page,
+      context,
+      options: argosOptions,
+      globals: context.story.globals ?? {}
+    });
+    allAttachments.push(...attachments);
+  }
+  await context.setViewportSize("default");
+  if (context.applyGlobals) {
+    await context.applyGlobals({
+      handler: page,
+      globals: {}
+    });
+  }
+  await setStorybookGlobals({ page, globals: {} });
+  return allAttachments;
+}
+async function setStorybookGlobals(args) {
+  const { page, globals } = args;
+  await page.evaluate((globals2) => {
+    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."
+      );
+    }
+    const initialGlobals = channel.last("globalsUpdated")?.[0].initialGlobals;
+    channel.emit("updateGlobals", {
+      globals: { ...initialGlobals, ...globals2 }
+    });
+  }, globals);
+}
+async function runHooksAndScreenshot(args) {
+  const { page, context, options, globals } = args;
+  if (context.applyGlobals) {
+    await context.applyGlobals({
+      handler: page,
+      globals
+    });
+  }
+  await setStorybookGlobals({ page, globals });
+  const viewportFromGlobals = globals.viewport ? getViewport(context.story.parameters, globals.viewport) : null;
+  const viewport = viewportFromGlobals ?? getDefaultViewport(context.story.parameters) ?? "default";
+  await context.setViewportSize(viewport);
+  return argosPlaywrightScreenshot(
+    page,
+    context.name + (args.suffix ?? ""),
+    options
+  );
+}
+
+// src/vitest-reporter.ts
+import { upload } from "@argos-ci/core";
+var ArgosReporter = class {
+  ctx;
+  config;
+  constructor(config) {
+    this.config = config;
+  }
+  onInit(ctx) {
+    this.ctx = ctx;
+  }
+  async onFinished() {
+    if (this.ctx.config.watch) {
+      return;
+    }
+    const res = await upload(this.config);
+    console.log(`\u2705 Argos build created: ${res.build.url}`);
+  }
+};
+
+// src/vitest-plugin.ts
+import { resolve } from "node:path";
+var createArgosScreenshotCommand = (pluginOptions) => {
+  const { applyGlobals, ...screenshotOptions } = pluginOptions ?? {};
+  return async (ctx, testContext) => {
+    const frame = await ctx.frame();
+    const fitToContent = getFitToContentFromParameters(
+      testContext.story.parameters
+    );
+    const after = await before(ctx);
+    const attachments = await storybookArgosScreenshot(
+      frame,
+      {
+        ...testContext,
+        playwrightLibraries: ["@storybook/addon-vitest"],
+        setViewportSize: async (size) => {
+          await ctx.page.evaluate((size2) => {
+            const iframe = document.querySelector('iframe[data-vitest="true"]');
+            if (!(iframe instanceof HTMLIFrameElement)) {
+              throw new Error("Vitest iframe not found");
+            }
+            if (size2 === "default") {
+              if (iframe.dataset.defaultWidth && iframe.dataset.defaultHeight) {
+                iframe.style.width = iframe.dataset.defaultWidth;
+                iframe.style.height = iframe.dataset.defaultHeight;
+              }
+            } else {
+              if (!iframe.dataset.defaultWidth && !iframe.dataset.defaultHeight) {
+                iframe.dataset.defaultWidth = iframe.style.width;
+                iframe.dataset.defaultHeight = iframe.style.height;
+              }
+              iframe.style.width = `${size2.width}px`;
+              iframe.style.height = `${size2.height}px`;
+            }
+          }, size);
+        },
+        applyGlobals
+      },
+      applyFitToContent(screenshotOptions, fitToContent)
+    );
+    await after();
+    return attachments;
+  };
+};
+async function before(ctx) {
+  await ctx.page.evaluate(() => {
+    const tester = document.getElementById("vitest-tester");
+    if (!(tester instanceof HTMLElement)) {
+      return;
+    }
+    const scale = tester.getAttribute("data-scale");
+    if (!scale) {
+      throw new Error("Vitest iframe data-scale attribute not found");
+    }
+    tester.dataset.bckTransform = tester.style.transform;
+    tester.style.transform = `scale(1)`;
+  });
+  return async () => {
+    await ctx.page.evaluate(() => {
+      const tester = document.getElementById("vitest-tester");
+      if (!(tester instanceof HTMLElement)) {
+        return;
+      }
+      tester.style.transform = tester.dataset.bckTransform ?? "";
+    });
+  };
+}
+function applyFitToContent(options, fitToContent) {
+  if (!fitToContent) {
+    return options;
+  }
+  const { padding, zoom } = fitToContent;
+  return {
+    ...options,
+    element: "body > div:not(.sb-wrapper)",
+    argosCSS: `body > div:not(.sb-wrapper) { padding: ${padding}px; width: fit-content; height: fit-content; zoom: ${zoom}; }` + (options?.argosCSS ?? "")
+  };
+}
+var cwd = process.cwd();
+function argosVitestPlugin(options) {
+  const {
+    root: unresolvedRoot = "./screenshots",
+    uploadToArgos,
+    ...otherOptions
+  } = options ?? {};
+  const root = resolve(cwd, unresolvedRoot);
+  const setupFile = resolve(import.meta.dirname, "./vitest-setup-file.js");
+  return {
+    name: "@argos-ci/storybook/vitest-plugin",
+    configureVitest({ vitest, project }) {
+      project.config.setupFiles.push(setupFile);
+      if (uploadToArgos) {
+        vitest.config.reporters.push(
+          new ArgosReporter({ ...otherOptions, root })
+        );
+      }
+    },
+    config() {
+      return {
+        optimizeDeps: {
+          include: ["@argos-ci/storybook/internal/vitest-setup-file"]
+        },
+        test: {
+          browser: {
+            commands: {
+              argosScreenshot: createArgosScreenshotCommand({
+                ...otherOptions,
+                root
+              })
+            }
+          }
+        }
+      };
+    }
+  };
+}
+export {
+  argosVitestPlugin,
+  createArgosScreenshotCommand
+};

package/dist/vitest-setup-file.js

@@ -0,0 +1,34 @@
+// src/vitest.ts
+import { afterEach } from "vitest";
+import { server } from "@vitest/browser/context";
+function setupArgos() {
+  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`
+      );
+    }
+    await server.commands.argosScreenshot({
+      name: story.id,
+      story: {
+        id: story.id,
+        parameters: story.parameters,
+        globals: story.globals
+      },
+      test: {
+        id: ctx.task.id,
+        title: ctx.task.name,
+        titlePath: [ctx.task.file.name, ctx.task.name],
+        location: {
+          line: ctx.task.location?.line ?? 1,
+          column: ctx.task.location?.column ?? 1,
+          file: ctx.task.file.filepath
+        }
+      }
+    });
+  });
+}
+
+// src/vitest-setup-file.ts
+setupArgos();

package/dist/vitest.d.ts

@@ -0,0 +1,61 @@
+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> = {
+    name: string;
+    playwrightLibraries: string[];
+    test?: MetadataConfig["test"];
+    setViewportSize: (size: ViewportSize | "default") => Promise<void>;
+    /**
+     * 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: Handler;
+        globals: StorybookGlobals;
+    }) => Promise<void>;
+    story: {
+        id: string;
+        parameters: Record<string, any>;
+        globals: StorybookGlobals | null;
+    };
+};
+type ArgosScreenshotOptions = Omit<ArgosScreenshotOptions$1, "viewports">;
+
+type ArgosScreenshotCommandArgs = [
+    Pick<StorybookScreenshotContext<Frame>, "name" | "story" | "test">
+];
+
+declare module "@vitest/browser/context" {
+    interface BrowserCommands {
+        argosScreenshot: (...args: ArgosScreenshotCommandArgs) => Promise<Attachment[]>;
+    }
+}
+/**
+ * Setup Argos hooks for Vitest.
+ */
+declare function setupArgos(): void;
+/**
+ * Take an Argos screenshot of a story in Vitest.
+ */
+declare function argosScreenshot(story: {
+    parameters: Record<string, any>;
+    globals: StorybookGlobals | null;
+    id: string;
+}, name: string): Promise<void>;
+
+export { type ArgosScreenshotOptions, argosScreenshot, setupArgos };

package/dist/vitest.js

@@ -0,0 +1,45 @@
+// src/vitest.ts
+import { afterEach } from "vitest";
+import { server } from "@vitest/browser/context";
+function setupArgos() {
+  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`
+      );
+    }
+    await server.commands.argosScreenshot({
+      name: story.id,
+      story: {
+        id: story.id,
+        parameters: story.parameters,
+        globals: story.globals
+      },
+      test: {
+        id: ctx.task.id,
+        title: ctx.task.name,
+        titlePath: [ctx.task.file.name, ctx.task.name],
+        location: {
+          line: ctx.task.location?.line ?? 1,
+          column: ctx.task.location?.column ?? 1,
+          file: ctx.task.file.filepath
+        }
+      }
+    });
+  });
+}
+async function argosScreenshot(story, name) {
+  await server.commands.argosScreenshot({
+    name: `${story.id}/${name}`,
+    story: {
+      id: story.id,
+      parameters: story.parameters,
+      globals: story.globals
+    }
+  });
+}
+export {
+  argosScreenshot,
+  setupArgos
+};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@argos-ci/storybook",
   "description": "Visual testing for Storybook test runner.",
-  "version": "2.1.6",
+  "version": "2.1.7",
   "author": "Smooth Code",
   "license": "MIT",
   "repository": {
@@ -39,7 +39,7 @@
     "node": ">=18.16.0"
   },
   "dependencies": {
-    "@argos-ci/playwright": "5.0.8",
+    "@argos-ci/playwright": "5.0.9",
     "@argos-ci/util": "2.3.2"
   },
   "peerDependencies": {
@@ -81,5 +81,5 @@
     "check-format": "prettier --check --ignore-unknown --ignore-path=./.gitignore --ignore-path=../../.gitignore --ignore-path=../../.prettierignore .",
     "lint": "eslint ."
   },
-  "gitHead": "59ebec1a1883175bec3f77a2b885f7f3ef42d7cd"
+  "gitHead": "899956c05cad3211eb2dd030a214a2e0af12e27d"
 }