Merge pull request #158 from ral-facilities/DSEGOG-33-cypress-v12

DSEGOG-33 Upgrading to Cypress v12

cypress.config.js

@@ -0,0 +1,18 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+const { defineConfig } = require('cypress');
+
+module.exports = defineConfig({
+  chromeWebSecurity: false,
+  video: false,
+  retries: {
+    runMode: 3,
+    openMode: 0,
+  },
+  e2e: {
+    setupNodeEvents(on) {
+      // https://github.com/bahmutov/cypress-failed-log
+      require('cypress-failed-log/on')(on);
+    },
+    baseUrl: 'http://127.0.0.1:3000',
+  },
+});

cypress/support/commands.js

@@ -47,27 +47,25 @@ Cypress.Commands.add('dragAndDrop', (subject, target) => {
         .first()
         .then((subject) => {
           const coordsDrag = subject[0].getBoundingClientRect();
-          cy.wrap(subject)
-            .trigger('mousedown', {
-              button: BUTTON_INDEX,
-              clientX: coordsDrag.x,
-              clientY: coordsDrag.y,
-              force: true,
-            })
-            .trigger('mousemove', {
-              button: BUTTON_INDEX,
-              clientX: coordsDrag.x + SLOPPY_CLICK_THRESHOLD,
-              clientY: coordsDrag.y,
-              force: true,
-            });
-          cy.get('body')
-            .trigger('mousemove', {
-              button: BUTTON_INDEX,
-              clientX: coordsDrop.x + SLOPPY_CLICK_THRESHOLD,
-              clientY: coordsDrop.y + SLOPPY_CLICK_THRESHOLD,
-              force: true,
-            })
-            .trigger('mouseup');
+          cy.wrap(subject).trigger('mousedown', {
+            button: BUTTON_INDEX,
+            clientX: coordsDrag.x,
+            clientY: coordsDrag.y,
+            force: true,
+          });
+          cy.wrap(subject).trigger('mousemove', {
+            button: BUTTON_INDEX,
+            clientX: coordsDrag.x + SLOPPY_CLICK_THRESHOLD,
+            clientY: coordsDrag.y,
+            force: true,
+          });
+          cy.get('body').trigger('mousemove', {
+            button: BUTTON_INDEX,
+            clientX: coordsDrop.x + SLOPPY_CLICK_THRESHOLD,
+            clientY: coordsDrop.y + SLOPPY_CLICK_THRESHOLD,
+            force: true,
+          });
+          cy.get('body').trigger('mouseup');
         });
     });
 });

cypress/support/index.js → cypress/support/e2e.js

@@ -14,7 +14,7 @@
 // ***********************************************************
 
 // Import commands.js using ES2015 syntax:
-import './commands'
+import './commands';
 
 import './util';
 

package.json

@@ -119,7 +119,7 @@
     "chart.js": "4.3.0",
     "chartjs-plugin-zoom": "2.0.0",
     "cross-env": "7.0.3",
-    "cypress": "9.7.0",
+    "cypress": "12.17.3",
     "cypress-failed-log": "2.10.0",
     "eslint": "8.44.0",
     "eslint-config-prettier": "8.8.0",

src/index.tsx

@@ -46,7 +46,7 @@ function domElementGetter(): HTMLElement {
 const reactLifecycles = singleSpaReact({
   React,
   ReactDOMClient,
-  rootComponent: () => document.getElementById(pluginName) ? <App /> : null,
+  rootComponent: () => (document.getElementById(pluginName) ? <App /> : null),
   domElementGetter,
   errorBoundary: (error) => {
     log.error(`${pluginName} failed with error: ${error}`);