test: add integration tests & coverage

use vitest
send coverage to codeclimate on CI
extract afterScreenshot hook to separate file
refactor commands a bit

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

Author: FRSgit

.github/workflows/ci.yml

@@ -102,10 +102,41 @@ jobs:
       - name: Test component-testing
         run: yarn test:ct:ci
 
+  test-integration-coverage:
+    name: test-integration-coverage
+    runs-on: ubuntu-latest
+    needs: cache
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: '16.x'
+      - name: remove git auth
+        run: git config --unset http.https://github.com/.extraheader
+      - name: Configure Yarn cache
+        uses: actions/cache@v3
+        with:
+          key: ${{ needs.cache.outputs.yarn-cache-key }}
+          path: |
+            ~/.cache/Cypress
+            .yarn
+            node_modules
+            example/node_modules
+      - name: Install dependencies
+        run: yarn --immutable
+      - name: Test integration (with coverage)
+        uses: paambaati/codeclimate-action@84cea27117a473d605400ca3a97fcef7e433e2d6
+        env:
+          CC_TEST_REPORTER_ID: ${{ secrets.CC_TEST_REPORTER_ID }}
+        with:
+          coverageCommand: yarn test:integration:ci
+          coverageLocations: |
+            ${{github.workspace}}/coverage/lcov.info:lcov
+
   build-and-release:
     name: build and release
     runs-on: ubuntu-latest
-    needs: [cache, lint, test]
+    needs: [cache, lint, test, test-integration-coverage]
     if: ${{ github.actor != 'dependabot[bot]' && github.ref == 'refs/heads/main' && github.event_name == 'push' }}
     steps:
       - uses: actions/checkout@v3

example/yarn.lock

@@ -133,18 +133,18 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@frsource/base64@npm:^1.0.1":
-  version: 1.0.1
-  resolution: "@frsource/base64@npm:1.0.1"
-  checksum: ea1b772d0cf384c861bdbaa2be49f3bab172906434255669632fdfbf36c67d2a4ed83b0adb6ca670c6664ee2a163551dde784820951aff55fa0020ece171c7ed
+"@frsource/base64@npm:1.0.2":
+  version: 1.0.2
+  resolution: "@frsource/base64@npm:1.0.2"
+  checksum: b979a6af4b0e9e205690a991c34c6d34afcdfa2f3de82ce5943b44987d51f2493b6ea47848dae3ad29679ef40f1065a226161b4fd8832c9cb4c8cd6046af361e
   languageName: node
   linkType: hard
 
 "@frsource/cypress-plugin-visual-regression-diff@portal:..::locator=example%40workspace%3A.":
   version: 0.0.0-use.local
   resolution: "@frsource/cypress-plugin-visual-regression-diff@portal:..::locator=example%40workspace%3A."
   dependencies:
-    "@frsource/base64": ^1.0.1
+    "@frsource/base64": 1.0.2
     move-file: 2.1.0
     pixelmatch: 5.3.0
     pngjs: 6.0.0

package.json

@@ -46,7 +46,10 @@
     "release:test": "yarn release --no-git-tag-version --no-push --skip-npm",
     "cypress:ct": "cypress open-ct",
     "cypress:ct:headless": "cypress run-ct --browser chrome --headless",
-    "test": "cd example && yarn test:ct:ci && yarn test:e2e:ci",
+    "test": "cd example && yarn test:ct:ci && yarn test:e2e:ci && yarn test:integration:ci",
+    "test:integration": "vitest",
+    "test:integration:coverage": "vitest --coverage",
+    "test:integration:ci": "CI=true vitest run --coverage",
     "test:ct": "cd example && yarn test:ct",
     "test:ct:ci": "cd example && yarn test:ct:ci",
     "test:e2e": "cd example && yarn test:e2e",
@@ -68,8 +71,10 @@
     "@types/pixelmatch": "5.2.4",
     "@types/pngjs": "6.0.1",
     "@types/sharp": "0.31.0",
+    "@types/tmp": "^0.2.3",
     "@typescript-eslint/eslint-plugin": "5.38.0",
     "@typescript-eslint/parser": "5.38.0",
+    "@vitest/coverage-c8": "^0.23.4",
     "cypress": "10.8.0",
     "del-cli": "5.0.0",
     "eslint": "8.24.0",
@@ -80,7 +85,10 @@
     "prettier": "2.7.1",
     "sanitize-filename": "1.6.3",
     "semantic-release": "19.0.5",
-    "typescript": "4.8.3"
+    "tmp-promise": "^3.0.3",
+    "typescript": "4.8.3",
+    "vite-tsconfig-paths": "^3.5.0",
+    "vitest": "^0.23.4"
   },
   "keywords": [
     "Cypress",
@@ -97,7 +105,7 @@
     "Cypress image snapshot"
   ],
   "dependencies": {
-    "@frsource/base64": "^1.0.1",
+    "@frsource/base64": "1.0.2",
     "move-file": "2.1.0",
     "pixelmatch": "5.3.0",
     "pngjs": "6.0.0",

src/__snapshots__/support.test.ts.snap

@@ -0,0 +1,69 @@
+// Vitest Snapshot v1
+
+exports[`generateOverlayTemplate > generates proper template 1`] = `
+"<div class=\\"cp-visual-regression-diff-overlay 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>some title - screenshot diff</h2>
+    <form>
+      <button type=\\"submit\\"><i class=\\"fa fa-check\\"></i> Update screenshot</button>
+      <button type=\\"button\\" data-type=\\"close\\"><i class=\\"fa fa-times\\"></i> Close</button>
+    <form>
+  </nav>
+  </header>
+  <div style=\\"padding:15px;overflow:auto\\">
+    <div style=\\"display:flex;justify-content:space-evenly;align-items:flex-start;gap:15px\\">
+      <div
+        style=\\"position:relative;background:#fff;border:solid 15px #fff\\"
+        onmouseover=\\"this.querySelector('div').style.opacity=0,this.querySelector('img').style.opacity=1\\"
+        onmouseleave=\\"this.querySelector('div').style.opacity=1,this.querySelector('img').style.opacity=0\\"
+      >
+        <h3>New screenshot (hover mouse away too see the old one):</h3>
+        <img style=\\"min-width:300px;width:100%;opacity:0\\" src=\\"data:image/png;base64,img-new-base64\\" />
+        <div style=\\"position:absolute;top:0;left:0;background:#fff\\">
+          <h3>Old screenshot (hover over to see the new one):</h3>
+          <img style=\\"min-width:300px;width:100%\\" src=\\"data:image/png;base64,img-old-base64\\" />
+        </div>
+      </div>
+      <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,img-diff-base64\\" />
+      </div>
+    </div>
+  </div>
+</div>"
+`;
+
+exports[`generateOverlayTemplate > generates proper template 2`] = `
+"<div class=\\"cp-visual-regression-diff-overlay 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>some title - screenshot diff</h2>
+    <form>
+      Image was already updated, rerun test to see new comparison
+      <button type=\\"button\\" data-type=\\"close\\"><i class=\\"fa fa-times\\"></i> Close</button>
+    <form>
+  </nav>
+  </header>
+  <div style=\\"padding:15px;overflow:auto\\">
+    <div style=\\"display:flex;justify-content:space-evenly;align-items:flex-start;gap:15px\\">
+      <div
+        style=\\"position:relative;background:#fff;border:solid 15px #fff\\"
+        onmouseover=\\"this.querySelector('div').style.opacity=0,this.querySelector('img').style.opacity=1\\"
+        onmouseleave=\\"this.querySelector('div').style.opacity=1,this.querySelector('img').style.opacity=0\\"
+      >
+        <h3>New screenshot (hover mouse away too see the old one):</h3>
+        <img style=\\"min-width:300px;width:100%;opacity:0\\" src=\\"data:image/png;base64,img-new-base64\\" />
+        <div style=\\"position:absolute;top:0;left:0;background:#fff\\">
+          <h3>Old screenshot (hover over to see the new one):</h3>
+          <img style=\\"min-width:300px;width:100%\\" src=\\"data:image/png;base64,img-old-base64\\" />
+        </div>
+      </div>
+      <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,img-diff-base64\\" />
+      </div>
+    </div>
+  </div>
+</div>"
+`;

src/__tests__/fixtures/screenshot.actual.png

@@ -0,0 +1,18 @@
+import { vi } from "vitest";
+import { promises as fs } from "fs";
+
+export const Cypress = {
+  Promise,
+};
+vi.stubGlobal("Cypress", Cypress);
+
+export const cy = {
+  readFile: vi.fn(fs.readFile),
+};
+vi.stubGlobal("cy", cy);
+
+export const before = vi.fn();
+vi.stubGlobal("before", before);
+
+export const after = vi.fn();
+vi.stubGlobal("after", after);

src/__tests__/fixtures/screenshot.diff.png

@@ -0,0 +1,33 @@
+import { it, expect, describe } from "vitest";
+import path from "path";
+import { promises as fs, existsSync } from "fs";
+import { initAfterScreenshotHook } from "@/afterScreenshot.hook";
+import { dir, file, setGracefulCleanup } from "tmp-promise";
+import { IMAGE_SNAPSHOT_PREFIX } from "@/constants";
+
+setGracefulCleanup();
+
+describe("initAfterScreenshotHook", () => {
+  it("move file and remove old directories", async () => {
+    const { path: screenshotsFolder } = await dir();
+    const imagesFolder = path.join(screenshotsFolder, IMAGE_SNAPSHOT_PREFIX);
+    await fs.mkdir(imagesFolder);
+    const { path: imgPath } = await file();
+    const projectRoot = path.dirname(imgPath);
+
+    await initAfterScreenshotHook({
+      screenshotsFolder,
+      projectRoot,
+    } as Cypress.PluginConfigOptions)({
+      name: IMAGE_SNAPSHOT_PREFIX + path.sep + "some_name",
+      path: imgPath,
+    } as Cypress.ScreenshotDetails);
+
+    const expectedNewPath = path.join(projectRoot, "some_name");
+    expect(existsSync(imagesFolder)).toBe(false);
+    expect(existsSync(imgPath)).toBe(false);
+    expect(existsSync(expectedNewPath)).toBe(true);
+
+    await fs.unlink(expectedNewPath);
+  });
+});

src/__tests__/fixtures/screenshot.png

@@ -0,0 +1,72 @@
+import path from "path";
+import fs from "fs";
+import moveFile from "move-file";
+import { IMAGE_SNAPSHOT_PREFIX } from "@/constants";
+
+type NotFalsy<T> = T extends false | null | undefined ? never : T;
+
+const getConfigVariableOrThrow = <K extends keyof Cypress.PluginConfigOptions>(
+  config: Cypress.PluginConfigOptions,
+  name: K
+) => {
+  if (config[name]) {
+    return config[name] as NotFalsy<Cypress.PluginConfigOptions[K]>;
+  }
+
+  /* c8 ignore start */
+  throw `[Image snapshot] CypressConfig.${name} cannot be missing or \`false\`!`;
+};
+/* c8 ignore stop */
+
+const removeScreenshotsDirectory = (
+  screenshotsFolder: string,
+  onSuccess: () => void,
+  onError: (e: Error) => void
+) => {
+  fs.rm(
+    path.join(screenshotsFolder, IMAGE_SNAPSHOT_PREFIX),
+    { recursive: true, force: true },
+    (err) => {
+      /* c8 ignore start */
+      if (err) return onError(err);
+      /* c8 ignore stop */
+      onSuccess();
+    }
+  );
+};
+
+export const initAfterScreenshotHook =
+  (config: Cypress.PluginConfigOptions) =>
+  (
+    details: Cypress.ScreenshotDetails
+  ):
+    | void
+    | Cypress.AfterScreenshotReturnObject
+    | Promise<Cypress.AfterScreenshotReturnObject> => {
+    /* c8 ignore start */
+    if (details.name?.indexOf(IMAGE_SNAPSHOT_PREFIX) !== 0) return;
+    /* c8 ignore stop */
+    return new Promise((resolve, reject) => {
+      const screenshotsFolder = getConfigVariableOrThrow(
+        config,
+        "screenshotsFolder"
+      );
+
+      const newRelativePath = details.name.substring(
+        IMAGE_SNAPSHOT_PREFIX.length + path.sep.length
+      );
+      const newAbsolutePath = path.normalize(
+        path.join(config.projectRoot, newRelativePath)
+      );
+
+      void moveFile(details.path, newAbsolutePath)
+        .then(() =>
+          removeScreenshotsDirectory(
+            screenshotsFolder,
+            () => resolve({ path: newAbsolutePath }),
+            reject
+          )
+        )
+        .catch(reject);
+    });
+  };

src/__tests__/mocks/cypress.mock.ts

@@ -35,6 +35,41 @@ const constructCypressError = (log: Cypress.Log, err: Error) => {
   return err;
 };
 
+export const getConfig = (options: Cypress.MatchImageOptions) => ({
+  scaleFactor:
+    Cypress.env("pluginVisualRegressionForceDeviceScaleFactor") === false
+      ? 1
+      : 1 / window.devicePixelRatio,
+  updateImages:
+    options.updateImages ||
+    (Cypress.env("pluginVisualRegressionUpdateImages") as
+      | boolean
+      | undefined) ||
+    false,
+  imagesDir:
+    options.imagesDir ||
+    (Cypress.env("pluginVisualRegressionImagesDir") as string | undefined) ||
+    "__image_snapshots__",
+  maxDiffThreshold:
+    options.maxDiffThreshold ||
+    (Cypress.env("pluginVisualRegressionMaxDiffThreshold") as
+      | number
+      | undefined) ||
+    0.01,
+  diffConfig:
+    options.diffConfig ||
+    (Cypress.env("pluginVisualRegressionDiffConfig") as
+      | Parameters<typeof pixelmatch>[5]
+      | undefined) ||
+    {},
+  screenshotConfig:
+    options.screenshotConfig ||
+    (Cypress.env("pluginVisualRegressionScreenshotConfig") as
+      | Partial<Cypress.ScreenshotDefaultsOptions>
+      | undefined) ||
+    {},
+});
+
 Cypress.Commands.add(
   "matchImage",
   { prevSubject: "optional" },
@@ -45,38 +80,14 @@ Cypress.Commands.add(
       nameCacheCounter[title] = -1;
     title += ` #${++nameCacheCounter[title]}`;
 
-    const scaleFactor =
-      Cypress.env("pluginVisualRegressionForceDeviceScaleFactor") === false
-        ? 1
-        : 1 / window.devicePixelRatio;
-    const updateImages =
-      options.updateImages ||
-      (Cypress.env("pluginVisualRegressionUpdateImages") as
-        | boolean
-        | undefined) ||
-      false;
-    const imagesDir =
-      options.imagesDir ||
-      (Cypress.env("pluginVisualRegressionImagesDir") as string | undefined) ||
-      "__image_snapshots__";
-    const maxDiffThreshold =
-      options.maxDiffThreshold ||
-      (Cypress.env("pluginVisualRegressionMaxDiffThreshold") as
-        | number
-        | undefined) ||
-      0.01;
-    const diffConfig =
-      options.diffConfig ||
-      (Cypress.env("pluginVisualRegressionDiffConfig") as
-        | Parameters<typeof pixelmatch>[5]
-        | undefined) ||
-      {};
-    const screenshotConfig =
-      options.screenshotConfig ||
-      (Cypress.env("pluginVisualRegressionScreenshotConfig") as
-        | Partial<Cypress.ScreenshotDefaultsOptions>
-        | undefined) ||
-      {};
+    const {
+      scaleFactor,
+      updateImages,
+      imagesDir,
+      maxDiffThreshold,
+      diffConfig,
+      screenshotConfig,
+    } = getConfig(options);
 
     return cy
       .then(() =>