refactor: raise code quality based on static analyzer report

Signed-off-by: Jakub Freisler <[email protected]>

Author: FRSgit

src/commands.ts

@@ -27,6 +27,14 @@ declare global {
 
 const nameCacheCounter: Record<string, number> = {};
 
+const constructCypressError = (log: Cypress.Log, err: Error) => {
+  // only way to throw & log the message properly in Cypress
+  // https://github.com/cypress-io/cypress/blob/5f94cad3cb4126e0567290b957050c33e3a78e3c/packages/driver/src/cypress/error_utils.ts#L214-L216
+  (err as unknown as { onFail: (e: Error) => void }).onFail = (err: Error) =>
+    log.error(err);
+  return err;
+};
+
 Cypress.Commands.add(
   "matchImage",
   { prevSubject: "optional" },
@@ -128,13 +136,7 @@ Cypress.Commands.add(
 
         if (!res) {
           log.set("message", "Unexpected error!");
-          const err = new Error("Unexpected error!");
-          // only way to throw & log the message properly in Cypress
-          // https://github.com/cypress-io/cypress/blob/5f94cad3cb4126e0567290b957050c33e3a78e3c/packages/driver/src/cypress/error_utils.ts#L214-L216
-          (err as unknown as { onFail: (e: Error) => void }).onFail = (
-            err: Error
-          ) => log.error(err);
-          throw err;
+          throw constructCypressError(log, new Error("Unexpected error!"));
         }
 
         if (res.error) {
@@ -150,13 +152,7 @@ Cypress.Commands.add(
             )})`
           );
           log.set("consoleProps", () => res);
-          const err = new Error(res.message);
-          // only way to throw & log the message properly in Cypress
-          // https://github.com/cypress-io/cypress/blob/5f94cad3cb4126e0567290b957050c33e3a78e3c/packages/driver/src/cypress/error_utils.ts#L214-L216
-          (err as unknown as { onFail: (e: Error) => void }).onFail = (
-            err: Error
-          ) => log.error(err);
-          throw err;
+          throw constructCypressError(log, new Error(res.message));
         } else {
           log.set("message", res.message);
         }

src/plugins.ts

@@ -9,6 +9,16 @@ import sanitize from "sanitize-filename";
 
 type NotFalsy<T> = T extends false | null | undefined ? never : T;
 
+type CompareImagesCfg = {
+  scaleFactor: number;
+  title: string;
+  imgNew: string;
+  imgOld: string;
+  updateImages: boolean;
+  maxDiffThreshold: number;
+  diffConfig: Parameters<typeof pixelmatch>[5];
+} & Parameters<typeof pixelmatch>[5];
+
 const round = (n: number) => Math.ceil(n * 1000) / 1000;
 
 const createImageResizer = (width: number, height: number) => (source: PNG) => {
@@ -17,11 +27,13 @@ const createImageResizer = (width: number, height: number) => (source: PNG) => {
   return resized;
 };
 
+const inArea = (x: number, y: number, height: number, width: number) =>
+  y > height || x > width;
+
 const fillSizeDifference = (width: number, height: number) => (image: PNG) => {
-  const inArea = (x: number, y: number) => y > height || x > width;
   for (let y = 0; y < image.height; y++) {
     for (let x = 0; x < image.width; x++) {
-      if (inArea(x, y)) {
+      if (inArea(x, y, height, width)) {
         const idx = (image.width * y + x) << 2;
         image.data[idx] = 0;
         image.data[idx + 1] = 0;
@@ -81,25 +93,22 @@ const getConfigVariableOrThrow = <K extends keyof Cypress.PluginConfigOptions>(
   throw `[Image snapshot] CypressConfig.${name} cannot be missing or \`false\`!`;
 };
 
-export const initPlugin = (
-  on: Cypress.PluginEvents,
-  config: Cypress.PluginConfigOptions
-) => {
-  if (config.env["pluginVisualRegressionForceDeviceScaleFactor"] !== false) {
-    // based on https://github.com/cypress-io/cypress/issues/2102#issuecomment-521299946
-    on("before:browser:launch", (browser, launchOptions) => {
-      if (browser.name === "chrome" || browser.name === "chromium") {
-        launchOptions.args.push("--force-device-scale-factor=1");
-        launchOptions.args.push("--high-dpi-support=1");
-      } else if (browser.name === "electron" && browser.isHeaded) {
-        // eslint-disable-next-line no-console
-        console.log(
-          "There isn't currently a way of setting the device scale factor in Cypress when running headed electron so we disable the image regression commands."
-        );
-      }
-    });
-  }
+const initForceDeviceScaleFactor = (on: Cypress.PluginEvents) => {
+  // based on https://github.com/cypress-io/cypress/issues/2102#issuecomment-521299946
+  on("before:browser:launch", (browser, launchOptions) => {
+    if (browser.name === "chrome" || browser.name === "chromium") {
+      launchOptions.args.push("--force-device-scale-factor=1");
+      launchOptions.args.push("--high-dpi-support=1");
+    } else if (browser.name === "electron" && browser.isHeaded) {
+      // eslint-disable-next-line no-console
+      console.log(
+        "There isn't currently a way of setting the device scale factor in Cypress when running headed electron so we disable the image regression commands."
+      );
+    }
+  });
+};
 
+const initTaskHooks = (on: Cypress.PluginEvents) => {
   on("task", {
     [TASK.getScreenshotPath]({ title, imagesDir, specPath }) {
       return path.join(
@@ -123,17 +132,7 @@ export const initPlugin = (
 
       return null;
     },
-    async [TASK.compareImages](
-      cfg: {
-        scaleFactor: number;
-        title: string;
-        imgNew: string;
-        imgOld: string;
-        updateImages: boolean;
-        maxDiffThreshold: number;
-        diffConfig: Parameters<typeof pixelmatch>[5];
-      } & Parameters<typeof pixelmatch>[5]
-    ): Promise<null | {
+    async [TASK.compareImages](cfg: CompareImagesCfg): Promise<null | {
       error?: boolean;
       message?: string;
       imgDiff?: number;
@@ -227,7 +226,12 @@ export const initPlugin = (
       return null;
     },
   });
+};
 
+const initAfterScreenshotHook = (
+  on: Cypress.PluginEvents,
+  config: Cypress.PluginConfigOptions
+) => {
   on("after:screenshot", (details) => {
     if (details.name?.indexOf(IMAGE_SNAPSHOT_PREFIX) !== 0) return;
 
@@ -260,3 +264,15 @@ export const initPlugin = (
     });
   });
 };
+
+export const initPlugin = (
+  on: Cypress.PluginEvents,
+  config: Cypress.PluginConfigOptions
+) => {
+  if (config.env["pluginVisualRegressionForceDeviceScaleFactor"] !== false) {
+    initForceDeviceScaleFactor(on);
+  }
+
+  initTaskHooks(on);
+  initAfterScreenshotHook(on, config);
+};

src/support.ts

@@ -15,14 +15,19 @@ function queueRun() {
   (cy as unknown as { queue: { run: () => void } }).queue.run();
 }
 
-function generateOverlayTemplate(
-  title: string,
-  imgNewBase64: string,
-  imgOldBase64: string,
-  imgDiffBase64: string,
-  wasImageNotUpdatedYet: boolean
-) {
-  return `<div class="${OVERLAY_CLASS} runner" style="position:fixed;z-index:10;top:0;bottom:0;left:0;right:0;display:flex;flex-flow:column">
+const generateOverlayTemplate = ({
+  title,
+  imgNewBase64,
+  imgOldBase64,
+  imgDiffBase64,
+  wasImageNotUpdatedYet,
+}: {
+  title: string;
+  imgNewBase64: string;
+  imgOldBase64: string;
+  imgDiffBase64: string;
+  wasImageNotUpdatedYet: boolean;
+}) => `<div class="${OVERLAY_CLASS} runner" style="position:fixed;z-index:10;top:0;bottom:0;left:0;right:0;display:flex;flex-flow:column">
   <header style="position:static">
   <nav style="display:flex;width:100%;align-items:center;justify-content:space-between;padding:10px 15px;">
     <h2>${title} - screenshot diff</h2>
@@ -53,11 +58,10 @@ function generateOverlayTemplate(
       <div style="background:#fff;border:solid 15px #fff">
         <h3>Diff between new and old screenshot</h3>
         <img style="min-width:300px;width:100%" src="data:image/png;base64,${imgDiffBase64}" />
-        </div>
       </div>
     </div>
-  </div>`;
-}
+  </div>
+</div>`;
 
 function cachedReadFile(
   imageCache: Record<string, string>,
@@ -137,13 +141,13 @@ after(() => {
             queueClear();
 
             Cypress.$(
-              generateOverlayTemplate(
+              generateOverlayTemplate({
                 title,
                 imgNewBase64,
                 imgOldBase64,
                 imgDiffBase64,
-                wasImageNotUpdatedYet
-              )
+                wasImageNotUpdatedYet,
+              })
             ).appendTo(top.document.body);
 
             const wrapper = Cypress.$(`.${OVERLAY_CLASS}`, top.document.body);