@argos-ci/storybook 4.0.4 → 4.0.6

package/dist/test-runner.js

@@ -107,6 +107,8 @@ async function storybookArgosScreenshot(handler, context, options) {
         }
       });
       allAttachments.push(...attachments);
+      await context.setViewportSize("default");
+      await setStorybookGlobals({ handler, globals: {} });
     }
   } else {
     const attachments = await runHooksAndScreenshot({
@@ -118,14 +120,7 @@ async function storybookArgosScreenshot(handler, context, options) {
     });
     allAttachments.push(...attachments);
   }
-  await context.setViewportSize("default");
-  if (context.applyGlobals) {
-    await context.applyGlobals({
-      handler,
-      globals: {}
-    });
-  }
-  await setStorybookGlobals({ handler, globals: {} });
+  await context.afterScreenshot?.({ handler, globals: {} });
   return allAttachments;
 }
 async function setStorybookGlobals(args) {
@@ -153,12 +148,6 @@ async function setStorybookGlobals(args) {
 }
 async function runHooksAndScreenshot(args) {
   const { handler, context, options, globals, metadata } = args;
-  if (context.applyGlobals) {
-    await context.applyGlobals({
-      handler,
-      globals
-    });
-  }
   await setStorybookGlobals({ handler, globals });
   const viewportFromGlobals = globals.viewport ? getViewport(context.story.parameters, globals.viewport) : null;
   const viewport = viewportFromGlobals ?? getDefaultViewport(context.story.parameters) ?? "default";
@@ -167,6 +156,7 @@ async function runHooksAndScreenshot(args) {
     ...metadata,
     viewport: viewport && viewport !== "default" ? viewport : void 0
   });
+  await context.beforeScreenshot?.({ handler, globals });
   return argosPlaywrightScreenshot(
     handler,
     context.name + (args.suffix ?? ""),
@@ -175,6 +165,7 @@ async function runHooksAndScreenshot(args) {
 }
 
 // src/test-runner.ts
+var DEFAULT_PLAYWRIGHT_VIEWPORT_SIZE = { width: 1280, height: 720 };
 async function argosScreenshot(page, context, options) {
   const storyContext = await getStoryContext(page, context);
   const fitToContent = getFitToContentFromParameters(storyContext.parameters);
@@ -183,7 +174,7 @@ async function argosScreenshot(page, context, options) {
     {
       name: storyContext.id,
       playwrightLibraries: ["@storybook/test-runner"],
-      applyGlobals: async ({ handler }) => {
+      beforeScreenshot: async ({ handler }) => {
         await waitForPageReady(handler);
       },
       story: {
@@ -193,10 +184,14 @@ async function argosScreenshot(page, context, options) {
         globals: null
       },
       setViewportSize: async (size) => {
-        if (size === "default") {
-          await page.setViewportSize({ width: 1280, height: 720 });
-        } else {
-          await page.setViewportSize(size);
+        const actualSize = await page.viewportSize();
+        const absoluteSize = size === "default" ? DEFAULT_PLAYWRIGHT_VIEWPORT_SIZE : size;
+        if (!actualSize || actualSize.height !== absoluteSize.height || actualSize.width !== absoluteSize.width) {
+          await page.setViewportSize(absoluteSize);
+          await page.waitForFunction(
+            ({ width, height }) => window.innerWidth === width && window.innerHeight === height,
+            { width: absoluteSize.width, height: absoluteSize.height }
+          );
         }
       }
     },

package/dist/vitest-plugin.d.ts

@@ -11,23 +11,11 @@ type StorybookScreenshotContext<Handler extends Page | Frame> = {
     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: {
+    beforeScreenshot?: (input: {
+        handler: Handler;
+        globals: StorybookGlobals;
+    }) => Promise<void>;
+    afterScreenshot?: (input: {
         handler: Handler;
         globals: StorybookGlobals;
     }) => Promise<void>;
@@ -44,12 +32,32 @@ type ArgosReporterConfig = UploadParameters;
 type ArgosScreenshotCommandArgs = [
     Pick<StorybookScreenshotContext<Frame>, "name" | "story" | "test">
 ];
-interface ArgosVitestPluginOptions extends Pick<StorybookScreenshotContext<Frame>, "applyGlobals">, ArgosReporterConfig, ArgosScreenshotOptions {
+interface ArgosVitestPluginOptions extends ArgosReporterConfig, ArgosScreenshotOptions {
     /**
      * Upload the report to Argos.
      * @default true
      */
     uploadToArgos?: boolean;
+    /**
+     * 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: Frame;
+        globals: StorybookGlobals;
+    }) => Promise<void>;
 }
 /**
  * Create a command for taking Argos screenshots in Vitest.

package/dist/vitest-plugin.js

@@ -104,6 +104,8 @@ async function storybookArgosScreenshot(handler, context, options) {
         }
       });
       allAttachments.push(...attachments);
+      await context.setViewportSize("default");
+      await setStorybookGlobals({ handler, globals: {} });
     }
   } else {
     const attachments = await runHooksAndScreenshot({
@@ -115,14 +117,7 @@ async function storybookArgosScreenshot(handler, context, options) {
     });
     allAttachments.push(...attachments);
   }
-  await context.setViewportSize("default");
-  if (context.applyGlobals) {
-    await context.applyGlobals({
-      handler,
-      globals: {}
-    });
-  }
-  await setStorybookGlobals({ handler, globals: {} });
+  await context.afterScreenshot?.({ handler, globals: {} });
   return allAttachments;
 }
 async function setStorybookGlobals(args) {
@@ -150,12 +145,6 @@ async function setStorybookGlobals(args) {
 }
 async function runHooksAndScreenshot(args) {
   const { handler, context, options, globals, metadata } = args;
-  if (context.applyGlobals) {
-    await context.applyGlobals({
-      handler,
-      globals
-    });
-  }
   await setStorybookGlobals({ handler, globals });
   const viewportFromGlobals = globals.viewport ? getViewport(context.story.parameters, globals.viewport) : null;
   const viewport = viewportFromGlobals ?? getDefaultViewport(context.story.parameters) ?? "default";
@@ -164,6 +153,7 @@ async function runHooksAndScreenshot(args) {
     ...metadata,
     viewport: viewport && viewport !== "default" ? viewport : void 0
   });
+  await context.beforeScreenshot?.({ handler, globals });
   return argosPlaywrightScreenshot(
     handler,
     context.name + (args.suffix ?? ""),
@@ -227,7 +217,8 @@ var createArgosScreenshotCommand = (pluginOptions) => {
             }
           }, size);
         },
-        applyGlobals
+        beforeScreenshot: applyGlobals,
+        afterScreenshot: applyGlobals
       },
       applyFitToContent(screenshotOptions, fitToContent)
     );

package/dist/vitest.d.ts

@@ -8,23 +8,11 @@ type StorybookScreenshotContext<Handler extends Page | Frame> = {
     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: {
+    beforeScreenshot?: (input: {
+        handler: Handler;
+        globals: StorybookGlobals;
+    }) => Promise<void>;
+    afterScreenshot?: (input: {
         handler: Handler;
         globals: StorybookGlobals;
     }) => Promise<void>;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@argos-ci/storybook",
   "description": "Visual testing for Storybook test runner.",
-  "version": "4.0.4",
+  "version": "4.0.6",
   "author": "Smooth Code",
   "license": "MIT",
   "repository": {
@@ -97,5 +97,5 @@
     "check-format": "prettier --check --ignore-unknown --ignore-path=./.gitignore --ignore-path=../../.gitignore --ignore-path=../../.prettierignore .",
     "lint": "eslint ."
   },
-  "gitHead": "7a4fac1862698b69ad47fa0c58e1fa5c13d6686f"
+  "gitHead": "c6358550bc0c149d65ea2aaa27e05bd06166cb63"
 }