From ea4f050dd186713c9aaafe476453229e180d907b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rapha=C3=ABl=20Dubigny?= <rdubigny@gmail.com>
Date: Tue, 21 May 2024 15:21:46 +0200
Subject: [PATCH] chore: add option to record tests with cypress to generate
 demo videos

---
 cypress.config.ts      |  2 ++
 cypress/support/e2e.ts | 41 ++++++++++++++++++++++++++---------------
 2 files changed, 28 insertions(+), 15 deletions(-)

diff --git a/cypress.config.ts b/cypress.config.ts
index 3dc548d84..0379e0892 100644
--- a/cypress.config.ts
+++ b/cypress.config.ts
@@ -3,6 +3,7 @@
 import { defineConfig } from "cypress";
 
 //
+const RECORD = process.env["CYPRESS_RECORD"] === "true";
 
 export default defineConfig({
   chromeWebSecurity: false,
@@ -29,4 +30,5 @@ export default defineConfig({
     MAILDEV_SMTP_PORT: "1025",
     MAILDEV_API_PORT: "1080",
   },
+  video: RECORD,
 });
diff --git a/cypress/support/e2e.ts b/cypress/support/e2e.ts
index 5b955dfc9..61005a446 100644
--- a/cypress/support/e2e.ts
+++ b/cypress/support/e2e.ts
@@ -1,19 +1,30 @@
-// ***********************************************************
-// This example support/index.js is processed and
-// loaded automatically before your test files.
-//
-// This is a great place to put global configuration and
-// behavior that modifies Cypress.
-//
-// You can change the location of this file or turn off
-// automatically serving support files with the
-// 'supportFile' configuration option.
-//
-// You can read more here:
-// https://on.cypress.io/configuration
-// ***********************************************************
-
 import "cypress-axe";
 import "cypress-maildev";
 
 import "./commands";
+
+const RECORD = Cypress.env("RECORD") === true;
+
+if (RECORD) {
+  ["visit", "click", "trigger", "type", "clear", "reload", "select"].forEach(
+    (command) => {
+      Cypress.Commands.overwrite(
+        command as unknown as keyof Cypress.Chainable<any>,
+        (originalFn, ...args) => {
+          const origVal = originalFn(...args);
+
+          return new Promise((resolve) => {
+            setTimeout(
+              () => {
+                resolve(origVal);
+              },
+              RECORD ? 2000 : 0,
+            );
+          });
+        },
+      );
+    },
+  );
+  Cypress.config("viewportWidth", 1920);
+  Cypress.config("viewportHeight", 1080);
+}