comparadise-utils 1.25.2 → 1.26.1

package/commands.js

@@ -1 +1,2 @@
 require('./dist/match-screenshot');
+require('./dist/create-base-image');

package/dist/create-base-image.d.ts

@@ -0,0 +1,20 @@
+import { MatchScreenshotArgs } from './match-screenshot.js';
+import 'pixelmatch';
+
+declare function createBaseImage(subject: Cypress.JQueryWithSelector | Window | Document | void, args?: MatchScreenshotArgs): void;
+interface ExtendedCurrentRunnable extends Mocha.Runnable {
+    currentRunnable?: {
+        order?: unknown;
+    };
+}
+declare global {
+    namespace Cypress {
+        interface Cypress {
+            mocha: {
+                getRunner: () => ExtendedCurrentRunnable;
+            };
+        }
+    }
+}
+
+export { createBaseImage };

package/dist/create-base-image.js

@@ -0,0 +1,146 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// create-base-image.ts
+var create_base_image_exports = {};
+__export(create_base_image_exports, {
+  createBaseImage: () => createBaseImage
+});
+module.exports = __toCommonJS(create_base_image_exports);
+
+// match-screenshot.ts
+var PREFIX_DIFFERENTIATOR = "___";
+var SUFFIX_TEST_IDENTIFIER = ".spec.ts";
+var SCREENSHOTS_FOLDER_NAME = "screenshots";
+function forceFont() {
+  const iframe = window.parent.document.querySelector("iframe");
+  const contentDocument = iframe && iframe.contentDocument;
+  if (contentDocument) {
+    const style = contentDocument.createElement("style");
+    style.type = "text/css";
+    style.appendChild(
+      contentDocument.createTextNode("* { font-family: Arial !important; }")
+    );
+    contentDocument.head.appendChild(style);
+    return style;
+  }
+  return false;
+}
+function getTestFolderPathFromScripts(rawName) {
+  const relativeTestPath = Cypress.spec.relative;
+  if (!relativeTestPath) {
+    throw new Error(
+      "\u274C Could not find matching script in the Cypress DOM to infer the test folder path"
+    );
+  }
+  const currentTestNumber = Cypress.mocha.getRunner().currentRunnable?.order;
+  if (!rawName && typeof currentTestNumber === "number" && currentTestNumber > 1) {
+    throw new Error(
+      "\u274C The rawName argument was not provided to matchScreenshot and is required for test files containing multiple tests!"
+    );
+  }
+  const testName = relativeTestPath.substring(
+    relativeTestPath.lastIndexOf("/") + 1,
+    relativeTestPath.lastIndexOf(SUFFIX_TEST_IDENTIFIER)
+  );
+  const name = rawName || testName;
+  const screenshotsFolder = `${SCREENSHOTS_FOLDER_NAME}/${relativeTestPath.substring(
+    0,
+    relativeTestPath.lastIndexOf(testName)
+  )}${name}`;
+  return {
+    name,
+    screenshotsFolder
+  };
+}
+function verifyImages() {
+  if (Cypress.$("img:visible").length > 0) {
+    cy.document().its("body").find("img").filter(":visible").then((images) => {
+      if (images) {
+        cy.wrap(images).each(($img) => {
+          cy.wrap($img).should("exist").and("have.prop", "naturalWidth");
+        });
+      }
+    });
+  }
+}
+function matchScreenshot(subject, args) {
+  const { rawName, options } = args || {};
+  forceFont();
+  verifyImages();
+  const { name, screenshotsFolder } = getTestFolderPathFromScripts(rawName);
+  cy.task("baseExists", screenshotsFolder).then((hasBase) => {
+    const target = subject ? cy.wrap(subject) : cy;
+    target.screenshot(
+      `${PREFIX_DIFFERENTIATOR}${screenshotsFolder}/new`,
+      options
+    );
+    if (!hasBase) {
+      cy.task(
+        "log",
+        `\u2705 A new base image was created for ${name}. Create this as a new base image via Comparadise!`
+      );
+      return null;
+    }
+    const pixelMatchOptions = options?.pixelMatchOptions;
+    const compareScreenshotsArg = {
+      screenshotsFolder,
+      pixelMatchOptions
+    };
+    cy.task("compareScreenshots", compareScreenshotsArg).then((diffPixels) => {
+      if (diffPixels === 0) {
+        cy.log(`\u2705 Actual image of ${name} was the same as base`);
+      } else {
+        throw new Error(
+          `\u274C Actual image of ${name} differed by ${diffPixels} pixels.`
+        );
+      }
+      return null;
+    });
+    return null;
+  });
+}
+Cypress.Commands.add(
+  "matchScreenshot",
+  { prevSubject: ["optional", "element", "window", "document"] },
+  matchScreenshot
+);
+
+// create-base-image.ts
+function createBaseImage(subject, args) {
+  const { rawName, options } = args || {};
+  forceFont();
+  verifyImages();
+  const { name, screenshotsFolder } = getTestFolderPathFromScripts(rawName);
+  const target = subject ? cy.wrap(subject) : cy;
+  target.screenshot(
+    `${PREFIX_DIFFERENTIATOR}${screenshotsFolder}/base`,
+    options
+  );
+  cy.task("log", `\u2705 A new base image was created for ${name}.`);
+}
+Cypress.Commands.add(
+  "createBaseImage",
+  { prevSubject: ["optional", "element", "window", "document"] },
+  createBaseImage
+);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  createBaseImage
+});

package/dist/index.d.ts

@@ -6,6 +6,7 @@ declare global {
     namespace Cypress {
         interface Chainable {
             matchScreenshot(args?: MatchScreenshotArgs): Chainable;
+            createBaseImage(args?: MatchScreenshotArgs): Chainable;
         }
     }
 }

package/dist/match-screenshot.d.ts

@@ -2,6 +2,13 @@ import pixelmatch from 'pixelmatch';
 
 type PixelMatchOptions = Parameters<typeof pixelmatch>[5];
 
+declare const PREFIX_DIFFERENTIATOR = "___";
+declare function forceFont(): false | HTMLStyleElement;
+declare function getTestFolderPathFromScripts(rawName?: string): {
+    name: string;
+    screenshotsFolder: string;
+};
+declare function verifyImages(): void;
 type MatchScreenshotArgs = {
     rawName?: string;
     options?: Partial<Cypress.ScreenshotOptions> & {
@@ -24,4 +31,4 @@ declare global {
     }
 }
 
-export { type MatchScreenshotArgs, matchScreenshot };
+export { type MatchScreenshotArgs, PREFIX_DIFFERENTIATOR, forceFont, getTestFolderPathFromScripts, matchScreenshot, verifyImages };

package/dist/match-screenshot.js

@@ -20,7 +20,11 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // match-screenshot.ts
 var match_screenshot_exports = {};
 __export(match_screenshot_exports, {
-  matchScreenshot: () => matchScreenshot
+  PREFIX_DIFFERENTIATOR: () => PREFIX_DIFFERENTIATOR,
+  forceFont: () => forceFont,
+  getTestFolderPathFromScripts: () => getTestFolderPathFromScripts,
+  matchScreenshot: () => matchScreenshot,
+  verifyImages: () => verifyImages
 });
 module.exports = __toCommonJS(match_screenshot_exports);
 var PREFIX_DIFFERENTIATOR = "___";
@@ -121,5 +125,9 @@ Cypress.Commands.add(
 );
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  matchScreenshot
+  PREFIX_DIFFERENTIATOR,
+  forceFont,
+  getTestFolderPathFromScripts,
+  matchScreenshot,
+  verifyImages
 });

package/package.json

@@ -28,10 +28,10 @@
   "peerDependencies": {
     "cypress": ">=12"
   },
-  "version": "1.25.2",
+  "version": "1.26.1",
   "scripts": {
     "build": "tsup",
-    "postbuild": "echo \"require('./dist/match-screenshot');\" > commands.js",
+    "postbuild": "echo \"require('./dist/match-screenshot');\nrequire('./dist/create-base-image');\" > commands.js",
     "test": "jest"
   }
 }