chore: write tests

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

Author: FRSgit

example/package.json

@@ -5,7 +5,7 @@
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
-    "test:open": "vue-cli-service test:e2e --env \"pluginVisualRegressionImagesPath={spec_path}/__image_snapshots_locals__\"",
+    "test:open": "vue-cli-service test:e2e --env \"pluginVisualRegressionImagesPath={spec_path}/__image_snapshots_local__\"",
     "test:run": "vue-cli-service test:e2e",
     "test:ct": "yarn test:open --component",
     "test:ct:ci": "yarn test:run --component --headless",

src/afterScreenshot.hook.test.ts

@@ -1,9 +1,9 @@
 import { it, expect, describe } from "vitest";
 import path from "path";
 import { promises as fs, existsSync } from "fs";
-import { initAfterScreenshotHook } from "./afterScreenshot.hook";
+import { initAfterScreenshotHook, parseAbsolutePath } from "./afterScreenshot.hook";
 import { dir, file, setGracefulCleanup } from "tmp-promise";
-import { IMAGE_SNAPSHOT_PREFIX } from "./constants";
+import { IMAGE_SNAPSHOT_PREFIX, PATH_VARIABLES } from "./constants";
 
 setGracefulCleanup();
 
@@ -31,3 +31,23 @@ describe("initAfterScreenshotHook", () => {
     await fs.unlink(expectedNewPath);
   });
 });
+
+describe('parseAbsolutePath', () => {
+  const projectRoot = '/its/project/root';
+
+  it('resolves relative paths against project root', () => {
+    expect(parseAbsolutePath({ screenshotPath: 'some/path.png', projectRoot }))
+      .toBe('/its/project/root/some/path.png');
+  });
+
+  it('builds proper win paths when found', () => {
+    expect(parseAbsolutePath({ screenshotPath: `${PATH_VARIABLES.winSystemRootPath}/D/some/path.png`, projectRoot }))
+    // that's expected output accorind to https://stackoverflow.com/a/64135721/8805801
+    .toBe('D:\\/some/path.png');
+  });
+
+  it('resolves relative paths against project root', () => {
+    expect(parseAbsolutePath({ screenshotPath: `${PATH_VARIABLES.unixSystemRootPath}/some/path.png`, projectRoot }))
+      .toBe('/some/path.png');
+  });
+});

src/afterScreenshot.hook.ts

@@ -25,7 +25,7 @@ const getConfigVariableOrThrow = <K extends keyof Cypress.PluginConfigOptions>(
 };
 /* c8 ignore stop */
 
-const parseAbsolutePath = ({
+export const parseAbsolutePath = ({
   screenshotPath,
   projectRoot,
 }: {

src/commands.ts

@@ -30,8 +30,6 @@ 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
@@ -100,10 +98,7 @@ Cypress.Commands.add(
   { prevSubject: "optional" },
   (subject, options = {}) => {
     const $el = subject as JQuery<HTMLElement> | undefined;
-    let title = options.title || Cypress.currentTest.titlePath.join(" ");
-    if (typeof nameCacheCounter[title] === "undefined")
-      nameCacheCounter[title] = -1;
-    title += ` #${++nameCacheCounter[title]}`;
+    let title: string;
 
     const {
       scaleFactor,
@@ -116,17 +111,19 @@ Cypress.Commands.add(
 
     return cy
       .then(() =>
-        cy.task<string>(
-          TASK.getScreenshotPath,
+        cy.task<{ screenshotPath: string; title: string }>(
+          TASK.getScreenshotPathInfo,
           {
-            title,
+            titleFromOptions:
+              options.title || Cypress.currentTest.titlePath.join(" "),
             imagesPath,
             specPath: Cypress.spec.relative,
           },
           { log: false }
         )
       )
-      .then((screenshotPath) => {
+      .then(({ screenshotPath, title: titleFromTask }) => {
+        title = titleFromTask;
         let imgPath: string;
         return ($el ? cy.wrap($el) : cy)
           .screenshot(screenshotPath, {

src/constants.ts

@@ -9,9 +9,10 @@ export enum FILE_SUFFIX {
 }
 
 export const TASK = {
-  getScreenshotPath: `${PLUGIN_NAME}-getScreenshotPath`,
+  getScreenshotPathInfo: `${PLUGIN_NAME}-getScreenshotPathInfo`,
   compareImages: `${PLUGIN_NAME}-compareImages`,
   approveImage: `${PLUGIN_NAME}-approveImage`,
+  cleanupImages: `${PLUGIN_NAME}-cleanupImages`,
   doesFileExist: `${PLUGIN_NAME}-doesFileExist`,
   /* c8 ignore next */
 };
@@ -20,6 +21,8 @@ export const PATH_VARIABLES = {
   specPath: "{spec_path}",
   unixSystemRootPath: "{unix_system_root_path}",
   winSystemRootPath: "{win_system_root_path}",
-};
+} as const;
 
 export const WINDOWS_LIKE_DRIVE_REGEX = /^[A-Z]:$/;
+
+export const METADATA_KEY = "FRSOURCE_CPVRD_V";

src/screenshotPath.utils.ts

@@ -1,21 +1,34 @@
 import path from "path";
-import { FILE_SUFFIX, IMAGE_SNAPSHOT_PREFIX } from "./constants";
+import { FILE_SUFFIX, IMAGE_SNAPSHOT_PREFIX, PATH_VARIABLES, WINDOWS_LIKE_DRIVE_REGEX } from "./constants";
 import sanitize from "sanitize-filename";
 
 const nameCacheCounter: Record<string, number> = {};
 
 export const generateScreenshotPath = ({
   titleFromOptions,
-  imagesDir,
+  imagesPath,
   specPath,
 }: {
   titleFromOptions: string;
-  imagesDir: string;
+  imagesPath: string;
   specPath: string;
 }) => {
+    const parsePathPartVariables = (pathPart: string, i: number) => {
+      if (pathPart === PATH_VARIABLES.specPath) {
+        return path.dirname(specPath);
+      } else if (i === 0 && !pathPart) {
+        // when unix-like absolute path
+        return PATH_VARIABLES.unixSystemRootPath;
+      } else if (i === 0 && WINDOWS_LIKE_DRIVE_REGEX.test(pathPart)) {
+        // when win-like absolute path
+        return path.join(PATH_VARIABLES.winSystemRootPath, pathPart[0]);
+      }
+  
+      return pathPart;
+    };
+
   const screenshotPath = path.join(
-    path.dirname(specPath),
-    ...imagesDir.split("/"),
+    ...imagesPath.split("/").map(parsePathPartVariables),
     sanitize(titleFromOptions)
   );
 

src/task.hook.test.ts

@@ -40,27 +40,69 @@ const writeTmpFixture = async (pathToWriteTo: string, fixtureName: string) => {
 };
 
 describe("getScreenshotPathInfoTask", () => {
+  const specPath = "some/nested/spec-path/spec.ts";
+
   it("returns sanitized path and title", () => {
     expect(
       getScreenshotPathInfoTask({
         titleFromOptions: "some-title-withśpęćiał人物",
-        imagesDir: "nested/images/dir",
-        specPath: "some/nested/spec-path/spec.ts",
+        imagesPath: "nested/images/dir",
+        specPath,
       })
     ).toEqual({
       screenshotPath:
-        "__cp-visual-regression-diff_snapshots__/some/nested/spec-path/nested/images/dir/some-title-withśpęćiał人物 #0.actual.png",
+        "__cp-visual-regression-diff_snapshots__/nested/images/dir/some-title-withśpęćiał人物 #0.actual.png",
       title: "some-title-withśpęćiał人物 #0.actual",
     });
   });
+
+  it("supports {spec_path} variable", () => {
+    expect(
+      getScreenshotPathInfoTask({
+        titleFromOptions: "some-title",
+        imagesPath: "{spec_path}/images/dir",
+        specPath,
+      })
+    ).toEqual({
+      screenshotPath:
+        "__cp-visual-regression-diff_snapshots__/some/nested/spec-path/images/dir/some-title #0.actual.png",
+      title: 'some-title #0.actual',
+    });
+  });
+
+  it("supports OS-specific absolute paths", () => {
+    expect(
+      getScreenshotPathInfoTask({
+        titleFromOptions: "some-title",
+        imagesPath: "/images/dir",
+        specPath,
+      })
+    ).toEqual({
+      screenshotPath:
+        "__cp-visual-regression-diff_snapshots__/{unix_system_root_path}/images/dir/some-title #0.actual.png",
+      title: 'some-title #0.actual',
+    });
+
+    expect(
+      getScreenshotPathInfoTask({
+        titleFromOptions: "some-title",
+        imagesPath: "C:/images/dir",
+        specPath,
+      })
+    ).toEqual({
+      screenshotPath:
+        "__cp-visual-regression-diff_snapshots__/{win_system_root_path}/C/images/dir/some-title #0.actual.png",
+      title: 'some-title #0.actual',
+    });
+  });
 });
 
 describe("cleanupImagesTask", () => {
   describe("when env is set", () => {
     const generateUsedScreenshotPath = async (projectRoot: string) => {
       const screenshotPathWithPrefix = generateScreenshotPath({
         titleFromOptions: "some-file",
-        imagesDir: "images",
+        imagesPath: "images",
         specPath: "some/spec/path",
       });
       return path.join(

src/task.hook.ts

@@ -1,17 +1,17 @@
 import fs from "fs";
-import path from "path";
 import { PNG } from "pngjs";
 import pixelmatch, { PixelmatchOptions } from "pixelmatch";
 import moveFile from "move-file";
-import sanitize from "sanitize-filename";
+import path from "path";
+import { FILE_SUFFIX, IMAGE_SNAPSHOT_PREFIX, TASK } from "./constants";
 import {
-  FILE_SUFFIX,
-  IMAGE_SNAPSHOT_PREFIX,
-  TASK,
-  PATH_VARIABLES,
-  WINDOWS_LIKE_DRIVE_REGEX,
-} from "./constants";
-import { alignImagesToSameSize, importAndScaleImage } from "./image.utils";
+  cleanupUnused,
+  alignImagesToSameSize,
+  scaleImageAndWrite,
+  isImageCurrentVersion,
+  writePNG,
+} from "./image.utils";
+import { generateScreenshotPath } from "./screenshotPath.utils";
 import type { CompareImagesTaskReturn } from "./types";
 
 export type CompareImagesCfg = {
@@ -31,34 +31,22 @@ const unlinkSyncSafe = (path: string) =>
 const moveSyncSafe = (pathFrom: string, pathTo: string) =>
   fs.existsSync(pathFrom) && moveFile.sync(pathFrom, pathTo);
 
-export const getScreenshotPathTask = ({
-  title,
-  imagesPath,
-  specPath,
-}: {
-  title: string;
+export const getScreenshotPathInfoTask = (cfg: {
+  titleFromOptions: string;
   imagesPath: string;
   specPath: string;
 }) => {
-  const parsePathPartVariables = (pathPart: string, i: number) => {
-    if (pathPart === PATH_VARIABLES.specPath) {
-      return path.dirname(specPath);
-    } else if (i === 0 && !pathPart) {
-      // when unix-like absolute path
-      return PATH_VARIABLES.unixSystemRootPath;
-    } else if (i === 0 && WINDOWS_LIKE_DRIVE_REGEX.test(pathPart)) {
-      // when win-like absolute path
-      return path.join(PATH_VARIABLES.winSystemRootPath, pathPart[0]);
-    }
+  const screenshotPath = generateScreenshotPath(cfg);
 
-    return pathPart;
-  };
+  return { screenshotPath, title: path.basename(screenshotPath, ".png") };
+};
+
+export const cleanupImagesTask = (config: Cypress.PluginConfigOptions) => {
+  if (config.env["pluginVisualRegressionCleanupUnusedImages"]) {
+    cleanupUnused(config.projectRoot);
+  }
 
-  return path.join(
-    IMAGE_SNAPSHOT_PREFIX,
-    ...imagesPath.split("/").map(parsePathPartVariables),
-    `${sanitize(title)}${FILE_SUFFIX.actual}.png`
-  );
+  return null;
 };
 
 export const approveImageTask = ({ img }: { img: string }) => {
@@ -77,16 +65,18 @@ export const compareImagesTask = async (
   cfg: CompareImagesCfg
 ): Promise<CompareImagesTaskReturn> => {
   const messages = [] as string[];
+  const rawImgNewBuffer = await scaleImageAndWrite({
+    scaleFactor: cfg.scaleFactor,
+    path: cfg.imgNew,
+  });
   let imgDiff: number | undefined;
   let imgNewBase64: string, imgOldBase64: string, imgDiffBase64: string;
   let error = false;
 
   if (fs.existsSync(cfg.imgOld) && !cfg.updateImages) {
-    const rawImgNew = await importAndScaleImage({
-      scaleFactor: cfg.scaleFactor,
-      path: cfg.imgNew,
-    });
-    const rawImgOld = PNG.sync.read(fs.readFileSync(cfg.imgOld));
+    const rawImgNew = PNG.sync.read(rawImgNewBuffer);
+    const rawImgOldBuffer = fs.readFileSync(cfg.imgOld);
+    const rawImgOld = PNG.sync.read(rawImgOldBuffer);
     const isImgSizeDifferent =
       rawImgNew.height !== rawImgOld.height ||
       rawImgNew.width !== rawImgOld.width;
@@ -130,7 +120,7 @@ export const compareImagesTask = async (
     imgOldBase64 = PNG.sync.write(imgOld).toString("base64");
 
     if (error) {
-      fs.writeFileSync(
+      writePNG(
         cfg.imgNew.replace(FILE_SUFFIX.actual, FILE_SUFFIX.diff),
         diffBuffer
       );
@@ -144,15 +134,21 @@ export const compareImagesTask = async (
         maxDiffThreshold: cfg.maxDiffThreshold,
       };
     } else {
-      // don't overwrite file if it's the same (imgDiff < cfg.maxDiffThreshold && !isImgSizeDifferent)
-      fs.unlinkSync(cfg.imgNew);
+      if (rawImgOld && !isImageCurrentVersion(rawImgOldBuffer)) {
+        writePNG(cfg.imgNew, rawImgNewBuffer);
+        moveFile.sync(cfg.imgNew, cfg.imgOld);
+      } else {
+        // don't overwrite file if it's the same (imgDiff < cfg.maxDiffThreshold && !isImgSizeDifferent)
+        fs.unlinkSync(cfg.imgNew);
+      }
     }
   } else {
     // there is no "old screenshot" or screenshots should be immediately updated
     imgDiff = 0;
     imgNewBase64 = "";
     imgDiffBase64 = "";
     imgOldBase64 = "";
+    writePNG(cfg.imgNew, rawImgNewBuffer);
     moveFile.sync(cfg.imgNew, cfg.imgOld);
   }
 
@@ -182,8 +178,9 @@ export const doesFileExistTask = ({ path }: { path: string }) =>
   fs.existsSync(path);
 
 /* c8 ignore start */
-export const initTaskHook = () => ({
-  [TASK.getScreenshotPath]: getScreenshotPathTask,
+export const initTaskHook = (config: Cypress.PluginConfigOptions) => ({
+  [TASK.getScreenshotPathInfo]: getScreenshotPathInfoTask,
+  [TASK.cleanupImages]: cleanupImagesTask.bind(undefined, config),
   [TASK.doesFileExist]: doesFileExistTask,
   [TASK.approveImage]: approveImageTask,
   [TASK.compareImages]: compareImagesTask,