fix(testing): use viewport for Puppeteer screenshot clip dimensions (#…

…5359)

* fix(testing): use viewport for Puppeteer screenshot clip dimensions

Fixes #5353

STENCIL-1135

* export options function and test

* pr feedback

src/testing/puppeteer/puppeteer-screenshot.ts

@@ -106,11 +106,6 @@ export async function pageCompareScreenshot(
     });
   });
 
-  const screenshotOpts = createPuppeteerScreenshotOptions(opts);
-  const screenshotBuf = await page.screenshot(screenshotOpts);
-  const pixelmatchThreshold =
-    typeof opts.pixelmatchThreshold === 'number' ? opts.pixelmatchThreshold : screenshotBuildData.pixelmatchThreshold;
-
   let width = emulateConfig.viewport.width;
   let height = emulateConfig.viewport.height;
 
@@ -123,6 +118,15 @@ export async function pageCompareScreenshot(
     }
   }
 
+  // The width and height passed into this function will be the dimensions of the generated image
+  // This is _not_ guaranteed to be the viewport dimensions specified in the emulate config. If clip
+  // options were provided this comparison function, the width and height will be set to those clip dimensions.
+  // Otherwise, it will default to the emulate config viewport dimensions.
+  const screenshotOpts = createPuppeteerScreenshotOptions(opts, { width, height });
+  const screenshotBuf = await page.screenshot(screenshotOpts);
+  const pixelmatchThreshold =
+    typeof opts.pixelmatchThreshold === 'number' ? opts.pixelmatchThreshold : screenshotBuildData.pixelmatchThreshold;
+
   const results = await compareScreenshot(
     emulateConfig,
     screenshotBuildData,
@@ -137,7 +141,10 @@ export async function pageCompareScreenshot(
   return results;
 }
 
-function createPuppeteerScreenshotOptions(opts: ScreenshotOptions) {
+export function createPuppeteerScreenshotOptions(
+  opts: ScreenshotOptions,
+  { width, height }: { width: number; height: number },
+) {
   const puppeteerOpts: puppeteer.ScreenshotOptions = {
     type: 'png',
     fullPage: opts.fullPage,
@@ -152,6 +159,13 @@ function createPuppeteerScreenshotOptions(opts: ScreenshotOptions) {
       width: opts.clip.width,
       height: opts.clip.height,
     };
+  } else {
+    puppeteerOpts.clip = {
+      x: 0,
+      y: 0,
+      width,
+      height,
+    };
   }
 
   return puppeteerOpts;

src/testing/puppeteer/test/puppeteer-screenshot.spec.ts

@@ -0,0 +1,37 @@
+import { createPuppeteerScreenshotOptions } from '../puppeteer-screenshot';
+
+describe('Puppeteer Screenshot', () => {
+  describe('createPuppeteerScreenshotOptions', () => {
+    it('should use the viewport width and height by default', () => {
+      const options = createPuppeteerScreenshotOptions({}, { width: 800, height: 600 });
+
+      expect(options.clip).toEqual({
+        x: 0,
+        y: 0,
+        width: 800,
+        height: 600,
+      });
+    });
+
+    it('should use clip options if provided', () => {
+      const options = createPuppeteerScreenshotOptions(
+        {
+          clip: {
+            x: 10,
+            y: 20,
+            width: 100,
+            height: 200,
+          },
+        },
+        { width: 800, height: 600 },
+      );
+
+      expect(options.clip).toEqual({
+        x: 10,
+        y: 20,
+        width: 100,
+        height: 200,
+      });
+    });
+  });
+});