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

Author: paazmaya

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.json

@@ -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();