feat: Update dependencies like its mid july 2023 (#238)

* Start to migrate Cypress and update everything

* All ts now

* Use constants to avoid typos and reuse

* Single command to setup all commands and constants for keepig typos in bay

* Still figuring out how would Cypress API allow various calls

* Back and forth...

* Move the cy.task call in the same place where it was earlier for easier comparison

* Mention the minimum Cypress version

* Update usage documentation

README.md

@@ -6,13 +6,27 @@ Npm: https://www.npmjs.com/package/@visual-regression-tracker/agent-cypress
 
 ## Installation
 
+Please note that the minimum supported Cypress version is [`12.17.1`, released in 10th July 2023](https://docs.cypress.io/guides/references/changelog#12-17-1).
+
 ### Add package
 
 `npm install @visual-regression-tracker/agent-cypress`
 
-### Add command
+### Add commands
+
+`<rootDir>/cypress/support/e2e.js` or `<rootDir>/cypress/support/component.js`
+
+All available commands:
+
+```js
+import {
+  addVrtCommands,
+} from "@visual-regression-tracker/agent-cypress";
+
+addVrtCommands();
+```
 
-`<rootDir>/cypress/support/commands.js`
+or one by one:
 
 ```js
 import {
@@ -21,7 +35,7 @@ import {
   addVrtStopCommand,
   addVrtTrackBufferCommand,
   addVrtTrackBase64Command,
-} from "@visual-regression-tracker/agent-cypress/dist/commands";
+} from "@visual-regression-tracker/agent-cypress";
 
 addVrtStartCommand();
 addVrtStopCommand();
@@ -32,27 +46,32 @@ addVrtTrackBase64Command();
 
 ### Add plugin
 
-`<rootDir>/cypress/plugins/index.js`
+`<rootDir>/cypress.config.js`
 
 ```js
-const {
-  addVisualRegressionTrackerPlugin,
-} = require("@visual-regression-tracker/agent-cypress/dist/plugin");
-
-module.exports = (on, config) => {
-  addVisualRegressionTrackerPlugin(on, config);
-};
+import { defineConfig } from 'cypress';
+import { addVisualRegressionTrackerPlugin } from "@visual-regression-tracker/agent-cypress";
+
+export default defineConfig({
+  // e2e or component, depending of testing style
+  e2e: {
+    setupNodeEvents (on, config) => {
+      addVisualRegressionTrackerPlugin(on, config);
+    }
+  }
+});
 ```
 
 ### Configuration
 
-#### Update cypress config
+#### Update Cypress config
 
-`<rootDir>/cypress.json`
+`<rootDir>/cypress.config.js`
 
 ```js
-{
-  "env": {
+export default defineConfig({
+
+  env: {
     "visualRegressionTracker": {
       // URL where backend is running
       // Required
@@ -83,7 +102,7 @@ module.exports = (on, config) => {
       "ciBuildId": "SOME_UNIQUE_ID",
     }
   }
-}
+});
 ```
 
 #### Or, as JSON config file `vrt.json`

cypress.config.ts

@@ -0,0 +1,30 @@
+import { defineConfig } from 'cypress';
+import { addVisualRegressionTrackerPlugin } from "./lib/plugin";
+
+/**
+ * @see https://docs.cypress.io/guides/references/configuration
+ */
+export default defineConfig({
+    e2e: {
+        baseUrl: "https://example.cypress.io",
+        specPattern: 'cypress/integration/*.spec.ts',
+
+        setupNodeEvents(on, config) {
+            // `on` is used to hook into various events Cypress emits
+            // `config` is the resolved Cypress config
+            addVisualRegressionTrackerPlugin(on, config);
+        },
+    },
+    video: false,
+    screenshotOnRunFailure: false,
+    retries: 0,
+    env: {
+        "visualRegressionTracker": {
+          "apiUrl": "http://localhost:4200",
+          "apiKey": "5H90NFWM6BMWWDMWKG8T11DWW22Y",
+          "project": "fcf9ab05-4bed-40d6-a033-c178948c9897",
+          "branchName": "master",
+          "enableSoftAssert": false
+        }
+    }
+});

cypress/support/e2e.ts

@@ -0,0 +1,12 @@
+/**
+ * @see https://docs.cypress.io/guides/core-concepts/writing-and-organizing-tests#Support-file
+ */
+import {
+  addVrtTrackCommand,
+  addVrtStartCommand,
+  addVrtStopCommand,
+} from "../../lib/commands";
+
+addVrtStartCommand();
+addVrtStopCommand();
+addVrtTrackCommand();

lib/commands.ts

@@ -6,16 +6,24 @@ import {
   handleError,
   trackBase64,
   trackBuffer,
+  VRT_TASK_START,
+  VRT_TASK_STOP,
+  VRT_COMMAND_START,
+  VRT_COMMAND_STOP,
+  VRT_COMMAND_TRACK,
+  VRT_COMMAND_TRACK_BUFFER,
+  VRT_COMMAND_TRACK_BASE64,
 } from "./utils";
 
 export const addVrtStartCommand = () => {
   Cypress.Commands.add(
-    "vrtStart",
+    VRT_COMMAND_START,
     {
-      prevSubject: ["optional"],
+      // optional: may start a chain, or use an existing chain: (dual command)
+      prevSubject: "optional",
     },
     () => {
-      cy.task("VRT_START", {}, { log: false })
+      cy.task(VRT_TASK_START, {}, { log: false })
         .then(handleError)
         .then(() => log("Started"));
     }
@@ -24,12 +32,13 @@ export const addVrtStartCommand = () => {
 
 export const addVrtStopCommand = () => {
   Cypress.Commands.add(
-    "vrtStop",
+    VRT_COMMAND_STOP,
     {
-      prevSubject: ["optional"],
+      // optional: may start a chain, or use an existing chain: (dual command)
+      prevSubject: "optional",
     },
     () => {
-      cy.task("VRT_STOP", {}, { log: false })
+      cy.task(VRT_TASK_STOP, {}, { log: false })
         .then(handleError)
         .then(() => log("Stopped"));
     }
@@ -38,20 +47,21 @@ export const addVrtStopCommand = () => {
 
 export const addVrtTrackCommand = () =>
   Cypress.Commands.add(
-    "vrtTrack",
+    VRT_COMMAND_TRACK,
     {
+      // https://docs.cypress.io/api/cypress-api/custom-commands#Arguments
       prevSubject: ["optional", "element", "window", "document"],
-    },
+    }, // @ts-ignore
     (subject, name, options, errorCallback) => {
-      trackImage(subject, name, options).then((result) => 
+      trackImage(subject, name, options).then((result: any) =>
         checkResult(result, errorCallback)
       );
     }
   );
 
 export const addVrtTrackBufferCommand = () =>
   Cypress.Commands.add(
-    "vrtTrackBuffer",
+    VRT_COMMAND_TRACK_BUFFER,
     {
       prevSubject: false,
     },
@@ -64,7 +74,7 @@ export const addVrtTrackBufferCommand = () =>
 
 export const addVrtTrackBase64Command = () =>
   Cypress.Commands.add(
-    "vrtTrackBase64",
+    VRT_COMMAND_TRACK_BASE64,
     {
       prevSubject: false,
     },
@@ -74,3 +84,19 @@ export const addVrtTrackBase64Command = () =>
       );
     }
   );
+
+/**
+ * Add all Visual Tracker commands to Cypress namespace, so that these methods become available:
+ * * `cy.vrtStart();`
+ * * `cy.vrtStop();`
+ * * `cy.vrtTrack();`
+ * * `cy.vrtTrackBuffer();`
+ * * `cy.vrtTrackBase64();`
+ */
+export const addVrtCommands = () => {
+  addVrtStartCommand();
+  addVrtStopCommand();
+  addVrtTrackCommand();
+  addVrtTrackBufferCommand();
+  addVrtTrackBase64Command();
+};