@argos-ci/vitest 0.4.1 → 0.4.3

package/dist/index.d.mts

@@ -1,7 +1,7 @@
+import "@argos-ci/core";
 import { ScreenshotMetadata } from "@argos-ci/util";
 import { ArgosAttachment } from "@argos-ci/playwright";
 import { StabilizationPluginOptions, ViewportOption } from "@argos-ci/browser";
-
 //#region src/metadata.d.ts
 /** The `test` slice of {@link ScreenshotMetadata}. */
 type TestMetadata = ScreenshotMetadata["test"];

package/dist/index.mjs

@@ -138,7 +138,7 @@ async function getTestMetadata() {
 	return buildTestMetadata(task);
 }
 //#endregion
-//#region ../../node_modules/.pnpm/tinyrainbow@3.1.0/node_modules/tinyrainbow/dist/index.js
+//#region ../../node_modules/.pnpm/tinyrainbow@3.1.1/node_modules/tinyrainbow/dist/index.js
 var b = {
 	reset: [0, 0],
 	bold: [
@@ -221,7 +221,7 @@ function C({ force: e } = {}) {
 }
 var y = C();
 //#endregion
-//#region ../../node_modules/.pnpm/@vitest+pretty-format@4.1.9/node_modules/@vitest/pretty-format/dist/index.js
+//#region ../../node_modules/.pnpm/@vitest+pretty-format@4.1.10/node_modules/@vitest/pretty-format/dist/index.js
 function _mergeNamespaces(n, m) {
 	m.forEach(function(e) {
 		e && typeof e !== "string" && !Array.isArray(e) && Object.keys(e).forEach(function(k) {
@@ -1188,7 +1188,7 @@ async function argosSnapshot(content, options = {}) {
 		const { server } = await import("vitest/browser");
 		return server.commands.argosSnapshot(resolvedName, serialized, serializableOptions, test);
 	}
-	const { writeSnapshotFile } = await import("./snapshot-file-DYQmhYf1.mjs");
+	const { writeSnapshotFile } = await import("./snapshot-file-D8dL3z_T.mjs");
 	return writeSnapshotFile(resolvedName, serialized, serializableOptions, test);
 }
 /**

package/dist/internal.d.mts

@@ -1,7 +1,6 @@
 import { ArgosAttachment, ArgosScreenshotOptions } from "@argos-ci/playwright";
 import { BrowserCommandContext } from "vitest/node";
 import { ViewportSize } from "@argos-ci/browser";
-
 //#region src/iframe.d.ts
 /**
  * Selector of the iframe Vitest renders the test into on the orchestrator page.
@@ -26,7 +25,7 @@ declare function resetTesterScale(ctx: BrowserCommandContext): Promise<() => Pro
  * box is not painted, so the iframe must be sized to hold the content.
  *
  * @param size - The viewport size, `"default"` to keep the natural size, or
- *   `"initial"` to restore the size backed up on the first resize.
+ *   `"initial"` to restore the size the iframe had before Argos resized it.
  * @param options.fullPage - When `true`, grow the height to fit the content
  *   while keeping the viewport width (Playwright-style full page).
  */
@@ -36,9 +35,12 @@ declare function setIframeViewportSize(ctx: BrowserCommandContext, size: Viewpor
 /**
  * Grow the Vitest iframe to fit its content so nothing is clipped.
  *
- * This must run *after* `argosCSS` (which may inject a `zoom`) is applied,
- * because `setIframeViewportSize` sizes the iframe *before* the content's final
- * size is known. It only ever grows the iframe, never shrinks it.
+ * This must run once the content has reached its final size — after `argosCSS`
+ * (which may inject a `zoom`) is applied *and* after stabilization has waited
+ * for images and fonts. `setIframeViewportSize` sizes the iframe before any of
+ * that, so it can't account for the final content size. It only ever grows the
+ * iframe, never shrinks it; use `setIframeViewportSize(ctx, "initial")` to
+ * restore the original size afterwards.
  *
  * @param options.fitWidth - Also grow the iframe horizontally to paint content
  *   wider than the viewport. When `false`, only the height grows (to match
@@ -56,9 +58,9 @@ declare function fitIframeToContent(ctx: BrowserCommandContext, options: {
  * on. It:
  * - strips the Vitest-specific `viewports`/`fullPage` options (they drive the
  *   iframe resize, not Playwright);
- * - wraps `beforeScreenshot` so the content is grown to fit *after* `argosCSS`
- *   (and any user `beforeScreenshot`) has been applied — otherwise wide/tall
- *   content would be clipped;
+ * - wraps `beforeScreenshot` so the iframe is grown to fit once the content has
+ *   settled (see {@link fitIframeToContent}) — otherwise wide/tall content
+ *   would be clipped;
  * - captures the iframe's `<body>` via `@argos-ci/playwright`.
  *
  * @param config.fitWidth - Grow the iframe horizontally as well as vertically

package/dist/internal.mjs

@@ -12,6 +12,15 @@ const VITEST_IFRAME_SELECTOR = "iframe[data-vitest=\"true\"]";
 */
 const VITEST_TESTER_ID = "vitest-tester";
 /**
+* Attribute holding the iframe's inline size from before Argos resized it, as
+* JSON.
+*
+* The presence of the attribute — not the values it holds — is what marks the
+* size as backed up: the original `style.width`/`style.height` are usually
+* empty strings, which are indistinguishable from "nothing was saved yet".
+*/
+const SIZE_BACKUP_ATTRIBUTE = "data-argos-size-backup";
+/**
 * Remove the scale from the Vitest `#vitest-tester` element before taking a
 * screenshot to avoid ending up with small screenshots.
 * @returns A function to restore the scale after the screenshot.
@@ -40,26 +49,29 @@ async function resetTesterScale(ctx) {
 * box is not painted, so the iframe must be sized to hold the content.
 *
 * @param size - The viewport size, `"default"` to keep the natural size, or
-*   `"initial"` to restore the size backed up on the first resize.
+*   `"initial"` to restore the size the iframe had before Argos resized it.
 * @param options.fullPage - When `true`, grow the height to fit the content
 *   while keeping the viewport width (Playwright-style full page).
 */
 async function setIframeViewportSize(ctx, size, options = {}) {
-	await ctx.page.evaluate(({ size, fullPage, selector }) => {
+	await ctx.page.evaluate(({ size, fullPage, selector, backupAttribute }) => {
 		const iframe = document.querySelector(selector);
 		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;
+			const backup = iframe.getAttribute(backupAttribute);
+			if (backup !== null) {
+				const { width, height } = JSON.parse(backup);
+				iframe.style.width = width;
+				iframe.style.height = height;
+				iframe.removeAttribute(backupAttribute);
 			}
 			return;
 		}
-		if (!iframe.dataset.initialWidth && !iframe.dataset.initialHeight) {
-			iframe.dataset.initialWidth = iframe.style.width;
-			iframe.dataset.initialHeight = iframe.style.height;
-		}
+		if (!iframe.hasAttribute(backupAttribute)) iframe.setAttribute(backupAttribute, JSON.stringify({
+			width: iframe.style.width,
+			height: 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`);
@@ -73,24 +85,32 @@ async function setIframeViewportSize(ctx, size, options = {}) {
 	}, {
 		size,
 		fullPage: options.fullPage ?? false,
-		selector: VITEST_IFRAME_SELECTOR
+		selector: VITEST_IFRAME_SELECTOR,
+		backupAttribute: SIZE_BACKUP_ATTRIBUTE
 	});
 }
 /**
 * Grow the Vitest iframe to fit its content so nothing is clipped.
 *
-* This must run *after* `argosCSS` (which may inject a `zoom`) is applied,
-* because `setIframeViewportSize` sizes the iframe *before* the content's final
-* size is known. It only ever grows the iframe, never shrinks it.
+* This must run once the content has reached its final size — after `argosCSS`
+* (which may inject a `zoom`) is applied *and* after stabilization has waited
+* for images and fonts. `setIframeViewportSize` sizes the iframe before any of
+* that, so it can't account for the final content size. It only ever grows the
+* iframe, never shrinks it; use `setIframeViewportSize(ctx, "initial")` to
+* restore the original size afterwards.
 *
 * @param options.fitWidth - Also grow the iframe horizontally to paint content
 *   wider than the viewport. When `false`, only the height grows (to match
 *   Playwright's `fullPage` semantics: full height, viewport width).
 */
 async function fitIframeToContent(ctx, options) {
-	await ctx.page.evaluate(({ fitWidth, selector }) => {
+	await ctx.page.evaluate(({ fitWidth, selector, backupAttribute }) => {
 		const iframe = document.querySelector(selector);
 		if (!(iframe instanceof HTMLIFrameElement) || !iframe.contentDocument) return;
+		if (!iframe.hasAttribute(backupAttribute)) iframe.setAttribute(backupAttribute, JSON.stringify({
+			width: iframe.style.width,
+			height: iframe.style.height
+		}));
 		const { body, documentElement } = iframe.contentDocument;
 		const contentHeight = Math.max(body.scrollHeight, body.offsetHeight, documentElement.scrollHeight);
 		if (contentHeight > iframe.clientHeight) iframe.style.height = `${contentHeight}px`;
@@ -100,7 +120,8 @@ async function fitIframeToContent(ctx, options) {
 		}
 	}, {
 		fitWidth: options.fitWidth,
-		selector: VITEST_IFRAME_SELECTOR
+		selector: VITEST_IFRAME_SELECTOR,
+		backupAttribute: SIZE_BACKUP_ATTRIBUTE
 	});
 }
 //#endregion
@@ -112,9 +133,9 @@ async function fitIframeToContent(ctx, options) {
 * on. It:
 * - strips the Vitest-specific `viewports`/`fullPage` options (they drive the
 *   iframe resize, not Playwright);
-* - wraps `beforeScreenshot` so the content is grown to fit *after* `argosCSS`
-*   (and any user `beforeScreenshot`) has been applied — otherwise wide/tall
-*   content would be clipped;
+* - wraps `beforeScreenshot` so the iframe is grown to fit once the content has
+*   settled (see {@link fitIframeToContent}) — otherwise wide/tall content
+*   would be clipped;
 * - captures the iframe's `<body>` via `@argos-ci/playwright`.
 *
 * @param config.fitWidth - Grow the iframe horizontally as well as vertically
@@ -127,10 +148,12 @@ async function screenshotFrame(ctx, name, options, config) {
 		...rest,
 		beforeScreenshot: async (api) => {
 			await userBeforeScreenshot?.(api);
+			await api.runStabilization();
 			await fitIframeToContent(ctx, { fitWidth: config.fitWidth });
 		}
 	};
-	return argosScreenshot(await ctx.frame(), name, playwrightOptions);
+	const frame = await ctx.frame();
+	return argosScreenshot(frame, name, playwrightOptions);
 }
 //#endregion
 //#region src/version.ts
@@ -139,7 +162,8 @@ const require = createRequire(import.meta.url);
 * Get the version of the Argos Vitest SDK.
 */
 async function getArgosVitestVersion() {
-	return readVersionFromPackage(require.resolve("@argos-ci/vitest/package.json"));
+	const pkgPath = require.resolve("@argos-ci/vitest/package.json");
+	return readVersionFromPackage(pkgPath);
 }
 //#endregion
 export { VITEST_IFRAME_SELECTOR, VITEST_TESTER_ID, fitIframeToContent, getArgosVitestVersion, resetTesterScale, screenshotFrame, setIframeViewportSize };

package/dist/plugin.d.mts

@@ -5,7 +5,6 @@ import { UploadParameters } from "@argos-ci/core";
 import { Plugin } from "vitest/config";
 import { BrowserCommand, Vitest } from "vitest/node";
 import { Reporter } from "vitest/reporters";
-
 //#region src/options.d.ts
 /**
  * Configuration for the Argos Vitest reporter.

package/dist/plugin.mjs

@@ -16,6 +16,15 @@ const VITEST_IFRAME_SELECTOR = "iframe[data-vitest=\"true\"]";
 */
 const VITEST_TESTER_ID = "vitest-tester";
 /**
+* Attribute holding the iframe's inline size from before Argos resized it, as
+* JSON.
+*
+* The presence of the attribute — not the values it holds — is what marks the
+* size as backed up: the original `style.width`/`style.height` are usually
+* empty strings, which are indistinguishable from "nothing was saved yet".
+*/
+const SIZE_BACKUP_ATTRIBUTE = "data-argos-size-backup";
+/**
 * Remove the scale from the Vitest `#vitest-tester` element before taking a
 * screenshot to avoid ending up with small screenshots.
 * @returns A function to restore the scale after the screenshot.
@@ -44,26 +53,29 @@ async function resetTesterScale(ctx) {
 * box is not painted, so the iframe must be sized to hold the content.
 *
 * @param size - The viewport size, `"default"` to keep the natural size, or
-*   `"initial"` to restore the size backed up on the first resize.
+*   `"initial"` to restore the size the iframe had before Argos resized it.
 * @param options.fullPage - When `true`, grow the height to fit the content
 *   while keeping the viewport width (Playwright-style full page).
 */
 async function setIframeViewportSize(ctx, size, options = {}) {
-	await ctx.page.evaluate(({ size, fullPage, selector }) => {
+	await ctx.page.evaluate(({ size, fullPage, selector, backupAttribute }) => {
 		const iframe = document.querySelector(selector);
 		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;
+			const backup = iframe.getAttribute(backupAttribute);
+			if (backup !== null) {
+				const { width, height } = JSON.parse(backup);
+				iframe.style.width = width;
+				iframe.style.height = height;
+				iframe.removeAttribute(backupAttribute);
 			}
 			return;
 		}
-		if (!iframe.dataset.initialWidth && !iframe.dataset.initialHeight) {
-			iframe.dataset.initialWidth = iframe.style.width;
-			iframe.dataset.initialHeight = iframe.style.height;
-		}
+		if (!iframe.hasAttribute(backupAttribute)) iframe.setAttribute(backupAttribute, JSON.stringify({
+			width: iframe.style.width,
+			height: 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`);
@@ -77,24 +89,32 @@ async function setIframeViewportSize(ctx, size, options = {}) {
 	}, {
 		size,
 		fullPage: options.fullPage ?? false,
-		selector: VITEST_IFRAME_SELECTOR
+		selector: VITEST_IFRAME_SELECTOR,
+		backupAttribute: SIZE_BACKUP_ATTRIBUTE
 	});
 }
 /**
 * Grow the Vitest iframe to fit its content so nothing is clipped.
 *
-* This must run *after* `argosCSS` (which may inject a `zoom`) is applied,
-* because `setIframeViewportSize` sizes the iframe *before* the content's final
-* size is known. It only ever grows the iframe, never shrinks it.
+* This must run once the content has reached its final size — after `argosCSS`
+* (which may inject a `zoom`) is applied *and* after stabilization has waited
+* for images and fonts. `setIframeViewportSize` sizes the iframe before any of
+* that, so it can't account for the final content size. It only ever grows the
+* iframe, never shrinks it; use `setIframeViewportSize(ctx, "initial")` to
+* restore the original size afterwards.
 *
 * @param options.fitWidth - Also grow the iframe horizontally to paint content
 *   wider than the viewport. When `false`, only the height grows (to match
 *   Playwright's `fullPage` semantics: full height, viewport width).
 */
 async function fitIframeToContent(ctx, options) {
-	await ctx.page.evaluate(({ fitWidth, selector }) => {
+	await ctx.page.evaluate(({ fitWidth, selector, backupAttribute }) => {
 		const iframe = document.querySelector(selector);
 		if (!(iframe instanceof HTMLIFrameElement) || !iframe.contentDocument) return;
+		if (!iframe.hasAttribute(backupAttribute)) iframe.setAttribute(backupAttribute, JSON.stringify({
+			width: iframe.style.width,
+			height: iframe.style.height
+		}));
 		const { body, documentElement } = iframe.contentDocument;
 		const contentHeight = Math.max(body.scrollHeight, body.offsetHeight, documentElement.scrollHeight);
 		if (contentHeight > iframe.clientHeight) iframe.style.height = `${contentHeight}px`;
@@ -104,7 +124,8 @@ async function fitIframeToContent(ctx, options) {
 		}
 	}, {
 		fitWidth: options.fitWidth,
-		selector: VITEST_IFRAME_SELECTOR
+		selector: VITEST_IFRAME_SELECTOR,
+		backupAttribute: SIZE_BACKUP_ATTRIBUTE
 	});
 }
 //#endregion
@@ -116,9 +137,9 @@ async function fitIframeToContent(ctx, options) {
 * on. It:
 * - strips the Vitest-specific `viewports`/`fullPage` options (they drive the
 *   iframe resize, not Playwright);
-* - wraps `beforeScreenshot` so the content is grown to fit *after* `argosCSS`
-*   (and any user `beforeScreenshot`) has been applied — otherwise wide/tall
-*   content would be clipped;
+* - wraps `beforeScreenshot` so the iframe is grown to fit once the content has
+*   settled (see {@link fitIframeToContent}) — otherwise wide/tall content
+*   would be clipped;
 * - captures the iframe's `<body>` via `@argos-ci/playwright`.
 *
 * @param config.fitWidth - Grow the iframe horizontally as well as vertically
@@ -131,10 +152,12 @@ async function screenshotFrame(ctx, name, options, config) {
 		...rest,
 		beforeScreenshot: async (api) => {
 			await userBeforeScreenshot?.(api);
+			await api.runStabilization();
 			await fitIframeToContent(ctx, { fitWidth: config.fitWidth });
 		}
 	};
-	return argosScreenshot(await ctx.frame(), name, playwrightOptions);
+	const frame = await ctx.frame();
+	return argosScreenshot(frame, name, playwrightOptions);
 }
 //#endregion
 //#region src/version.ts
@@ -143,14 +166,16 @@ const require = createRequire(import.meta.url);
 * Get the version of the Argos Vitest SDK.
 */
 async function getArgosVitestVersion() {
-	return readVersionFromPackage(require.resolve("@argos-ci/vitest/package.json"));
+	const pkgPath = require.resolve("@argos-ci/vitest/package.json");
+	return readVersionFromPackage(pkgPath);
 }
 /**
 * Get the version of Vitest itself (used as the automation library for
 * `argosSnapshot`, which does not rely on a browser).
 */
 async function getVitestVersion() {
-	return readVersionFromPackage(require.resolve("vitest/package.json"));
+	const pkgPath = require.resolve("vitest/package.json");
+	return readVersionFromPackage(pkgPath);
 }
 //#endregion
 //#region src/command.ts
@@ -206,6 +231,7 @@ const createArgosScreenshotCommand = (pluginOptions = {}) => {
 			}
 			return attachments;
 		} finally {
+			await setIframeViewportSize(ctx, "initial");
 			await restore();
 		}
 	};
@@ -254,7 +280,8 @@ async function writeSnapshotFile(name, content, options = {}, test) {
 	if (!name) throw new Error("The `name` argument is required.");
 	const root = options.root ?? "./snapshots";
 	const extension = normalizeExtension(options.extension ?? DEFAULT_EXTENSION);
-	const snapshotPath = resolve(root, `${getScreenshotName(name)}${SNAPSHOT_INFIX}${extension}`);
+	const filename = `${getScreenshotName(name)}${SNAPSHOT_INFIX}${extension}`;
+	const snapshotPath = resolve(root, filename);
 	const [vitestVersion, sdkVersion, resolvedTest] = await Promise.all([
 		getVitestVersion(),
 		getArgosVitestVersion(),
@@ -343,6 +370,7 @@ var ArgosReporter = class {
 		if (this.vitest.config.watch) return;
 		const { ignoreUploadFailures, ...uploadParameters } = this.config;
 		try {
+			const parallel = await getParallelFromConfig(this.vitest.config);
 			const res = await upload({
 				files: [
 					"**/*.png",
@@ -350,7 +378,7 @@ var ArgosReporter = class {
 					"**/*.snapshot.*"
 				],
 				ignore: ["**/*.argos.json"],
-				parallel: await getParallelFromConfig(this.vitest.config) ?? void 0,
+				parallel: parallel ?? void 0,
 				...uploadParameters
 			});
 			console.log(`✅ Argos build created: ${res.build.url}`);

package/dist/{snapshot-file-DYQmhYf1.mjs → snapshot-file-D8dL3z_T.mjs}

@@ -9,14 +9,16 @@ const require = createRequire(import.meta.url);
 * Get the version of the Argos Vitest SDK.
 */
 async function getArgosVitestVersion() {
-	return readVersionFromPackage(require.resolve("@argos-ci/vitest/package.json"));
+	const pkgPath = require.resolve("@argos-ci/vitest/package.json");
+	return readVersionFromPackage(pkgPath);
 }
 /**
 * Get the version of Vitest itself (used as the automation library for
 * `argosSnapshot`, which does not rely on a browser).
 */
 async function getVitestVersion() {
-	return readVersionFromPackage(require.resolve("vitest/package.json"));
+	const pkgPath = require.resolve("vitest/package.json");
+	return readVersionFromPackage(pkgPath);
 }
 //#endregion
 //#region src/snapshot-file.ts
@@ -62,7 +64,8 @@ async function writeSnapshotFile(name, content, options = {}, test) {
 	if (!name) throw new Error("The `name` argument is required.");
 	const root = options.root ?? "./snapshots";
 	const extension = normalizeExtension(options.extension ?? DEFAULT_EXTENSION);
-	const snapshotPath = resolve(root, `${getScreenshotName(name)}${SNAPSHOT_INFIX}${extension}`);
+	const filename = `${getScreenshotName(name)}${SNAPSHOT_INFIX}${extension}`;
+	const snapshotPath = resolve(root, filename);
 	const [vitestVersion, sdkVersion, resolvedTest] = await Promise.all([
 		getVitestVersion(),
 		getArgosVitestVersion(),

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@argos-ci/vitest",
   "description": "Vitest SDK for visual testing with Argos.",
-  "version": "0.4.1",
+  "version": "0.4.3",
   "author": "Smooth Code",
   "license": "MIT",
   "repository": {
@@ -51,9 +51,9 @@
     "node": ">=22.0.0"
   },
   "dependencies": {
-    "@argos-ci/browser": "6.4.4",
-    "@argos-ci/core": "6.7.1",
-    "@argos-ci/playwright": "7.4.1",
+    "@argos-ci/browser": "6.4.5",
+    "@argos-ci/core": "6.7.2",
+    "@argos-ci/playwright": "7.4.3",
     "@argos-ci/util": "4.1.0"
   },
   "peerDependencies": {
@@ -64,10 +64,10 @@
   },
   "devDependencies": {
     "@types/node": "catalog:",
-    "@vitest/browser": "^4.1.9",
-    "@vitest/browser-playwright": "^4.1.9",
-    "@vitest/pretty-format": "^4.1.9",
-    "playwright": "^1.61.0",
+    "@vitest/browser": "^4.1.10",
+    "@vitest/browser-playwright": "^4.1.10",
+    "@vitest/pretty-format": "^4.1.10",
+    "playwright": "^1.62.1",
     "vitest": "catalog:"
   },
   "scripts": {
@@ -81,5 +81,5 @@
     "check-format": "prettier --check --ignore-unknown --ignore-path=./.gitignore --ignore-path=../../.gitignore --ignore-path=../../.prettierignore .",
     "lint": "eslint ."
   },
-  "gitHead": "3fd83ec12c4e291e813c91cd1e2d4737d014a1d0"
+  "gitHead": "fd20b0af878b8186d6950c2e9c4ab381ca3fcaa1"
 }