@argos-ci/storybook 6.0.17 → 6.1.3

package/README.md

@@ -7,7 +7,7 @@
   </a>
 </p>
 
-<p align="center"><strong>The open source visual testing plaform for modern engineering teams.</strong></p>
+<p align="center"><strong>The open source visual testing platform for AI-native engineering teams.</strong></p>
 
 # Official Argos Storybook integration
 
@@ -15,9 +15,52 @@
 [![npm dm](https://img.shields.io/npm/dm/@argos-ci/storybook.svg)](https://www.npmjs.com/package/@argos-ci/storybook)
 [![npm dt](https://img.shields.io/npm/dt/@argos-ci/storybook.svg)](https://www.npmjs.com/package/@argos-ci/storybook)
 
-Visit [argos-ci.com/docs/storybook](https://argos-ci.com/docs/storybook) for guides, API and more.
+Capture and review visual changes of your [Storybook](https://storybook.js.org/) stories with Argos. It runs your stories in a real browser and uploads a screenshot of each one to Argos in your CI.
+
+Visit the [Storybook SDK documentation](https://argos-ci.com/docs/sdks-reference/storybook) for guides, the API reference, and more.
+
+## Installation
+
+```sh
+npm install --save-dev @argos-ci/storybook
+```
+
+## Usage
+
+The recommended way to run visual tests is with the [Storybook Vitest addon](https://storybook.js.org/docs/writing-tests/integrations/vitest-addon). Register the Argos plugin in your Vitest config:
+
+```ts
+// vitest.config.ts
+import { defineConfig } from "vitest/config";
+import { argosVitestPlugin } from "@argos-ci/storybook/vitest-plugin";
+
+export default defineConfig({
+  plugins: [
+    argosVitestPlugin({
+      // Upload the screenshots to Argos only on CI.
+      uploadToArgos: process.env.CI === "true",
+    }),
+  ],
+});
+```
+
+A screenshot is captured for every story automatically. To capture additional screenshots (for example, at different steps of an interaction), call `argosScreenshot` inside a story's `play` function:
+
+```ts
+// Button.stories.tsx
+import { argosScreenshot } from "@argos-ci/storybook/vitest";
+
+export const Example: Story = {
+  play: async (ctx) => {
+    await argosScreenshot(ctx, "example");
+  },
+};
+```
+
+> Using the [Storybook Test Runner](https://storybook.js.org/docs/writing-tests/integrations/test-runner) instead? Import `argosScreenshot` from `@argos-ci/storybook/test-runner` and call it from the `postVisit` hook. See the [Test Runner quickstart](https://argos-ci.com/docs/quickstart/storybook-quickstart/storybook-test-runner-quickstart).
 
 ## Links
 
-- [Official SDK Docs](https://argos-ci.com/docs/)
+- [Official SDK Docs](https://argos-ci.com/docs/sdks-reference/storybook)
+- [Quickstart](https://argos-ci.com/docs/quickstart/storybook-quickstart)
 - [Discord](https://argos-ci.com/discord)

package/dist/test-runner.d.mts

@@ -38,7 +38,7 @@ 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
+ * @see https://argos-ci.com/docs/sdks-reference/playwright
  */
 declare function argosScreenshot(
 /**

package/dist/test-runner.mjs

@@ -263,7 +263,7 @@ const DEFAULT_PLAYWRIGHT_VIEWPORT_SIZE = {
 * 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
+* @see https://argos-ci.com/docs/sdks-reference/playwright
 */
 async function argosScreenshot(page, context, options) {
 	const storyContext = await getStoryContext(page, context);

package/dist/vitest-plugin.d.mts

@@ -1,8 +1,9 @@
 import { ArgosScreenshotOptions as ArgosScreenshotOptions$1, MetadataConfig } from "@argos-ci/playwright";
-import { UploadParameters } from "@argos-ci/core";
+import { ArgosReporterConfig } from "@argos-ci/vitest/plugin";
 import { Plugin } from "vitest/config";
 import { BrowserCommand } from "vitest/node";
 import { Frame, Page, ViewportSize } from "playwright";
+
 //#region src/utils/parameters.d.ts
 type StorybookGlobals = Record<string, any>;
 //#endregion
@@ -35,9 +36,6 @@ type StorybookScreenshotContext<Handler extends Page | Frame> = {
 };
 type ArgosScreenshotOptions = Omit<ArgosScreenshotOptions$1, "viewports">;
 //#endregion
-//#region src/vitest-reporter.d.ts
-type ArgosReporterConfig = UploadParameters;
-//#endregion
 //#region src/vitest-plugin.d.ts
 type ArgosScreenshotCommandArgs = [Pick<StorybookScreenshotContext<Frame>, "name" | "story" | "test" | "mode">];
 interface ArgosVitestPluginOptions extends ArgosReporterConfig, ArgosScreenshotOptions {

package/dist/vitest-plugin.mjs

@@ -1,7 +1,8 @@
 import { createRequire } from "node:module";
 import { DO_NOT_USE_setMetadataConfig, argosScreenshot } from "@argos-ci/playwright";
 import { readVersionFromPackage } from "@argos-ci/util";
-import { upload } from "@argos-ci/core";
+import { ArgosReporter } from "@argos-ci/vitest/plugin";
+import { fitIframeToContent, resetTesterScale, setIframeViewportSize } from "@argos-ci/vitest/internal";
 import { dirname, resolve } from "node:path";
 import { fileURLToPath } from "node:url";
 //#region src/utils/metadata.ts
@@ -240,26 +241,6 @@ function composeName(name, suffix) {
 	return name + (suffix ?? "");
 }
 //#endregion
-//#region src/vitest-reporter.ts
-var ArgosReporter = class {
-	vitest;
-	config;
-	constructor(config) {
-		this.config = config;
-	}
-	onInit(vitest) {
-		this.vitest = vitest;
-	}
-	async onFinished() {
-		await this.onTestRunEnd();
-	}
-	async onTestRunEnd() {
-		if (this.vitest.config.watch) return;
-		const res = await upload(this.config);
-		console.log(`✅ Argos build created: ${res.build.url}`);
-	}
-};
-//#endregion
 //#region src/vitest-plugin.ts
 /**
 * Create a command for taking Argos screenshots in Vitest.
@@ -269,55 +250,21 @@ const createArgosScreenshotCommand = (pluginOptions) => {
 	return async (ctx, testContext) => {
 		const frame = await ctx.frame();
 		const fitToContent = getFitToContentFromParameters(testContext.story.parameters);
-		const after = await before(ctx);
+		const after = await resetTesterScale(ctx);
 		const options = applyFitToContent(screenshotOptions, fitToContent);
 		const userBeforeScreenshot = options?.beforeScreenshot;
 		const optionsWithFit = {
 			...options,
 			beforeScreenshot: async (api) => {
 				await userBeforeScreenshot?.(api);
-				await ctx.page.evaluate(() => {
-					const iframe = document.querySelector("iframe[data-vitest=\"true\"]");
-					if (!(iframe instanceof HTMLIFrameElement) || !iframe.contentDocument) return;
-					const { body, documentElement } = iframe.contentDocument;
-					const contentHeight = Math.max(body.scrollHeight, body.offsetHeight, documentElement.scrollHeight);
-					if (contentHeight > iframe.clientHeight) iframe.style.height = `${contentHeight}px`;
-				});
+				await fitIframeToContent(ctx, { fitWidth: Boolean(fitToContent) });
 			}
 		};
 		const attachments = await storybookArgosScreenshot(frame, {
 			...testContext,
 			playwrightLibraries: ["@storybook/addon-vitest"],
 			setViewportSize: async (size) => {
-				await ctx.page.evaluate(({ size, fullPage }) => {
-					const iframe = document.querySelector("iframe[data-vitest=\"true\"]");
-					if (!(iframe instanceof HTMLIFrameElement)) throw new Error("Vitest iframe not found");
-					if (!iframe.contentDocument) throw new Error("Vitest iframe contentDocument not found");
-					if (size === "initial") {
-						if (iframe.dataset.initialWidth && iframe.dataset.initialHeight) {
-							iframe.style.width = iframe.dataset.initialWidth;
-							iframe.style.height = iframe.dataset.initialHeight;
-						}
-						return;
-					}
-					if (!iframe.dataset.initialWidth && !iframe.dataset.initialHeight) {
-						iframe.dataset.initialWidth = iframe.style.width;
-						iframe.dataset.initialHeight = iframe.style.height;
-					}
-					if (size !== "default") iframe.style.width = `${size.width}px`;
-					if (fullPage) {
-						if (!iframe.contentWindow) throw new Error(`Can't access iframe window`);
-						const viewportHeight = size === "default" ? iframe.contentWindow.innerHeight : size.height;
-						iframe.style.height = "auto";
-						iframe.style.height = viewportHeight < iframe.contentDocument.body.offsetHeight ? `${iframe.contentDocument.body.offsetHeight}px` : "100%";
-					} else if (size !== "default") {
-						iframe.style.height = "auto";
-						iframe.style.height = `${size.height}px`;
-					}
-				}, {
-					size,
-					fullPage: screenshotOptions.fullPage ?? !fitToContent
-				});
+				await setIframeViewportSize(ctx, size, { fullPage: screenshotOptions.fullPage ?? !fitToContent });
 			}
 		}, optionsWithFit);
 		await after();
@@ -325,28 +272,6 @@ const createArgosScreenshotCommand = (pluginOptions) => {
 	};
 };
 /**
-* Run before taking the screenshots.
-* Remove the scale from vitest "vitest-tester" div
-* to avoid ending up with small screenshots.
-* @returns A function to restore the scale after the test.
-*/
-async function before(ctx) {
-	await ctx.page.evaluate(() => {
-		const tester = document.getElementById("vitest-tester");
-		if (!(tester instanceof HTMLElement)) return;
-		if (!tester.getAttribute("data-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 ?? "";
-		});
-	};
-}
-/**
 * Apply fitToContent options to the screenshot options.
 */
 function applyFitToContent(options, fitToContent) {
@@ -375,7 +300,7 @@ function argosVitestPlugin(options) {
 		config() {
 			return {
 				optimizeDeps: { include: ["@argos-ci/storybook/internal/vitest-setup-file"] },
-				test: { browser: { commands: { argosScreenshot: createArgosScreenshotCommand({
+				test: { browser: { commands: { argosStorybookScreenshot: createArgosScreenshotCommand({
 					...otherOptions,
 					root
 				}) } } }

package/dist/vitest-setup-file.mjs

@@ -27,7 +27,7 @@ function setupArgos(api) {
 		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");
 		globalThis.__ARGOS_STORYBOOK_STORY = story;
-		await server.commands.argosScreenshot({
+		await server.commands.argosStorybookScreenshot({
 			mode: "automatic",
 			name: story.id,
 			story: {

package/dist/vitest.d.mts

@@ -39,7 +39,7 @@ type ArgosScreenshotCommandArgs = [Pick<StorybookScreenshotContext<Frame>, "name
 //#region src/vitest.d.ts
 declare module "vitest/browser" {
   interface BrowserCommands {
-    argosScreenshot: (...args: ArgosScreenshotCommandArgs) => Promise<ArgosAttachment[]>;
+    argosStorybookScreenshot: (...args: ArgosScreenshotCommandArgs) => Promise<ArgosAttachment[]>;
   }
 }
 /**

package/dist/vitest.mjs

@@ -26,7 +26,7 @@ function setupArgos(api) {
 		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");
 		globalThis.__ARGOS_STORYBOOK_STORY = story;
-		await server.commands.argosScreenshot({
+		await server.commands.argosStorybookScreenshot({
 			mode: "automatic",
 			name: story.id,
 			story: {
@@ -55,7 +55,7 @@ function setupArgos(api) {
 async function argosScreenshot(story, name) {
 	if (!await checkIsVitestEnv()) return;
 	const { server } = await import("vitest/browser");
-	await server.commands.argosScreenshot({
+	await server.commands.argosStorybookScreenshot({
 		mode: "manual",
 		name: `${story.id}/${name}`,
 		story: {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@argos-ci/storybook",
   "description": "Visual testing for Storybook test runner.",
-  "version": "6.0.17",
+  "version": "6.1.3",
   "author": "Smooth Code",
   "license": "MIT",
   "repository": {
@@ -9,7 +9,7 @@
     "url": "https://github.com/argos-ci/argos-javascript.git",
     "directory": "packages/storybook"
   },
-  "homepage": "https://argos-ci.com/docs/storybook",
+  "homepage": "https://argos-ci.com/docs/sdks-reference/storybook",
   "keywords": [
     "storybook",
     "storybook-addon",
@@ -49,12 +49,13 @@
     "node": ">=22.0.0"
   },
   "dependencies": {
-    "@argos-ci/core": "6.4.0",
-    "@argos-ci/playwright": "7.3.0",
-    "@argos-ci/util": "4.0.0"
+    "@argos-ci/core": "6.5.3",
+    "@argos-ci/playwright": "7.3.4",
+    "@argos-ci/util": "4.0.4",
+    "@argos-ci/vitest": "0.2.3"
   },
   "devDependencies": {
-    "@argos-ci/cli": "6.1.0",
+    "@argos-ci/cli": "6.1.4",
     "@argos-ci/util": "workspace:*",
     "@storybook/addon-docs": "^10.4.6",
     "@storybook/addon-links": "^10.4.6",
@@ -62,6 +63,7 @@
     "@storybook/addon-vitest": "^10.4.6",
     "@storybook/react-vite": "^10.4.6",
     "@storybook/test-runner": "^0.24.4",
+    "@types/node": "catalog:",
     "@types/react": "^19.2.17",
     "@types/react-dom": "^19.2.3",
     "@vitest/browser": "^4.1.9",
@@ -98,5 +100,5 @@
     "check-format": "prettier --check --ignore-unknown --ignore-path=./.gitignore --ignore-path=../../.gitignore --ignore-path=../../.prettierignore .",
     "lint": "eslint ."
   },
-  "gitHead": "3502fe8f348376405f56703b351037150d2c9136"
+  "gitHead": "1b25b7c1109a3d032d627c5f9d2f2c3937731aea"
 }