feat: Migrate to multipart upload instead of base64 (#113)

* feat: Migrate to multipart upload instead of base64

closes #112

BREAKING CHANGE: min service api version required `4.14.0`

Author: pashidlos

cypress.json

@@ -7,10 +7,9 @@
     "visualRegressionTracker": {
       "apiUrl": "http://localhost:4200",
       "apiKey": "5H90NFWM6BMWWDMWKG8T11DWW22Y",
-      "project": "e999e73d-d683-4311-928c-d6f8fe82e4f8",
+      "project": "fcf9ab05-4bed-40d6-a033-c178948c9897",
       "branchName": "master",
-      "enableSoftAssert": true,
-      "ciBuildId": null
+      "enableSoftAssert": false
     }
   }
 }

cypress/integration/example.spec.js

@@ -1,5 +1,13 @@
 /* global cy */
 
+before(() => {
+  cy.vrtStart();
+});
+
+after(() => {
+  cy.vrtStop();
+});
+
 context("Visual Regression Tracker", () => {
   beforeEach(() => {
     cy.visit("/commands/viewport");

lib/commands.ts

@@ -5,6 +5,7 @@ import {
   checkResult,
   trackImage,
   trackWithRetry,
+  handleError,
 } from "./utils";
 
 export const addVrtStartCommand = () => {
@@ -15,11 +16,7 @@ export const addVrtStartCommand = () => {
     },
     () => {
       cy.task("VRT_START", {}, { log: false })
-        .then((err) => {
-          if (err) {
-            throw new Error(err as string);
-          }
-        })
+        .then(handleError)
         .then(() => log("Started"));
     }
   );
@@ -33,11 +30,7 @@ export const addVrtStopCommand = () => {
     },
     () => {
       cy.task("VRT_STOP", {}, { log: false })
-        .then((err) => {
-          if (err) {
-            throw new Error(err as string);
-          }
-        })
+        .then(handleError)
         .then(() => log("Stopped"));
     }
   );

lib/plugin.js

@@ -1,25 +1,18 @@
-import { readFileSync, unlinkSync } from "fs";
+import { unlinkSync } from "fs";
 import { VisualRegressionTracker } from "@visual-regression-tracker/sdk-js";
 
 export function addVisualRegressionTrackerPlugin(on, config) {
   const vrtConfig = config?.env?.visualRegressionTracker;
   let vrt = new VisualRegressionTracker(vrtConfig);
 
   on("task", {
-    ["ENCODE_IMAGE"]: (props) => {
-      const { imagePath } = props;
-      const buffer = readFileSync(imagePath);
-      const imageBase64 = buffer.toString("base64");
-      unlinkSync(imagePath);
-      return imageBase64;
-    },
     ["VRT_START"]: async (props) => {
       try {
         if (!vrt["isStarted"]()) {
           await vrt.start();
         }
       } catch (err) {
-        return err.message ? err.message : err;
+        return err.message ?? err;
       }
       return null;
     },
@@ -29,40 +22,42 @@ export function addVisualRegressionTrackerPlugin(on, config) {
           await vrt.stop();
         }
       } catch (err) {
-        return err.message ? err.message : err;
+        return err.message ?? err;
       }
       return null;
     },
-    ["VRT_TRACK_IMAGE"]: async (props) => {
+    ["VRT_TRACK_IMAGE_MULTIPART"]: async (props) => {
       const {
         name,
-        imageBase64,
+        imagePath,
         browser,
         viewport,
-        pixelRatio,
         os,
         device,
         diffTollerancePercent,
         ignoreAreas,
       } = props;
 
-      if (!imageBase64) {
-        throw new Error("Image is missing or not encoded");
-      }
-
-      return vrt["submitTestResult"]({
+      const result = await vrt["submitTestRunMultipart"]({
         name,
-        imageBase64,
+        imagePath,
         browser,
         viewport,
         os,
         device,
         diffTollerancePercent,
         ignoreAreas,
       });
+
+      unlinkSync(imagePath);
+      return result;
     },
     ["VRT_PROCESS_ERROR_RESULT"]: async (testRunResult) => {
-      vrt["processTestRun"](testRunResult);
+      try {
+        vrt["processTestRun"](testRunResult);
+      } catch (err) {
+        return err.message ?? err;
+      }
       return null;
     },
   });

lib/utils.ts

@@ -9,6 +9,34 @@ export const log = (message: string) =>
     message,
   });
 
+export const handleError = (err: unknown) => {
+  if (err) {
+    throw new Error(err as string);
+  }
+};
+
+export const toTestRunDto = ({
+  name,
+  pixelRatio,
+  options,
+}: {
+  name: string;
+  pixelRatio: number;
+  options: any;
+}) => ({
+  name,
+  browser: Cypress.browser.name,
+  viewport:
+    options?.viewport ??
+    `${Cypress.config("viewportWidth") * pixelRatio}x${
+      Cypress.config("viewportHeight") * pixelRatio
+    }`,
+  os: options?.os,
+  device: options?.device,
+  diffTollerancePercent: options?.diffTollerancePercent,
+  ignoreAreas: options?.ignoreAreas,
+});
+
 export const trackWithRetry = (
   trackFn: () => Cypress.Chainable<TestRunResponse>,
   shouldStopFn: (result: TestRunResponse) => boolean,
@@ -27,7 +55,7 @@ export const trackWithRetry = (
 };
 
 export const checkResult = (result: TestRunResponse) =>
-  cy.task("VRT_PROCESS_ERROR_RESULT", result, { log: false });
+  cy.task("VRT_PROCESS_ERROR_RESULT", result, { log: false }).then(handleError);
 
 export const shouldStopRetry = (result: TestRunResponse) =>
   result?.status !== TestStatus.unresolved;
@@ -51,24 +79,12 @@ export const trackImage = (
       },
     })
     .then(() => log(`tracking ${name}`))
-    .then(() => cy.task("ENCODE_IMAGE", { imagePath }, { log: false }))
-    .then((imageBase64) =>
+    .then(() =>
       cy.task(
-        "VRT_TRACK_IMAGE",
+        "VRT_TRACK_IMAGE_MULTIPART",
         {
-          name,
-          imageBase64,
-          browser: Cypress.browser.name,
-          viewport:
-            options?.viewport ??
-            `${Cypress.config("viewportWidth") * pixelRatio}x${
-              Cypress.config("viewportHeight") * pixelRatio
-            }`,
-          pixelRatio,
-          os: options?.os,
-          device: options?.device,
-          diffTollerancePercent: options?.diffTollerancePercent,
-          ignoreAreas: options?.ignoreAreas,
+          ...toTestRunDto({ name, pixelRatio, options }),
+          imagePath,
         },
         { log: false }
       )