From 653bd0bed4c9bcd63cd9a358815f678918115362 Mon Sep 17 00:00:00 2001
From: Axel Bocciarelli <axelboc@gmail.com>
Date: Thu, 20 Jul 2023 15:25:27 +0200
Subject: [PATCH] Fix E2E test

---
 .gitignore                     |  3 +++
 ui/.eslintrc.js                |  7 +++++++
 ui/cypress.config.js           | 10 ++++++----
 ui/cypress/e2e/app.cy.js       |  7 +++----
 ui/cypress/support.js          |  1 +
 ui/cypress/support/commands.js | 27 ---------------------------
 ui/cypress/support/e2e.js      | 20 --------------------
 7 files changed, 20 insertions(+), 55 deletions(-)
 create mode 100644 ui/cypress/support.js
 delete mode 100644 ui/cypress/support/commands.js
 delete mode 100644 ui/cypress/support/e2e.js

diff --git a/.gitignore b/.gitignore
index 494efa96d..6027a3ba4 100644
--- a/.gitignore
+++ b/.gitignore
@@ -64,3 +64,6 @@ npm-debug.log*
 /supervisord.pid
 log
 mxcube3/static
+
+# Cypress debug screenshots
+/cypress/debug/
\ No newline at end of file
diff --git a/ui/.eslintrc.js b/ui/.eslintrc.js
index a578bdacf..ef8c4f5ca 100644
--- a/ui/.eslintrc.js
+++ b/ui/.eslintrc.js
@@ -50,5 +50,12 @@ module.exports = createConfig({
         'jest/require-top-level-describe': 'off', // filename should already be meaningful, extra nesting is unnecessary
       },
     }),
+    {
+      ...dependencies,
+      files: ['**/*.cy.ts'],
+      rules: {
+        'sonarjs/no-duplicate-string': 'off', // incompatible with Cypress testing syntax
+      },
+    },
   ],
 });
diff --git a/ui/cypress.config.js b/ui/cypress.config.js
index 5b7f54671..b3f0957ac 100644
--- a/ui/cypress.config.js
+++ b/ui/cypress.config.js
@@ -1,9 +1,11 @@
-const { defineConfig } = require('cypress');
+import { defineConfig } from 'cypress';
 
 module.exports = defineConfig({
   e2e: {
-    setupNodeEvents(on, config) {
-      // implement node event listeners here
-    },
+    baseUrl: 'http://localhost:8081',
+    supportFile: 'cypress/support.js',
   },
+  screenshotsFolder: 'cypress/debug',
+  fixturesFolder: false,
+  video: false,
 });
diff --git a/ui/cypress/e2e/app.cy.js b/ui/cypress/e2e/app.cy.js
index b771aff0f..d2622a292 100644
--- a/ui/cypress/e2e/app.cy.js
+++ b/ui/cypress/e2e/app.cy.js
@@ -1,8 +1,7 @@
 describe('app', () => {
   it('loads the login page', () => {
-    cy.visit('http://localhost:8081');
-    cy.get('input[placeholder*="LoginID"]').should('be.visible');
-    cy.get('input[placeholder*="Password"]').should('be.visible');
-    cy.get('button[type=submit]').should('be.visible');
+    cy.getByRole('textbox', { label: 'Login ID' }).should('be.visible');
+    cy.getByRole('textbox', { label: 'Password' }).should('be.visible');
+    cy.getByRole('button', { label: 'Sign in' }).should('be.visible');
   });
 });
diff --git a/ui/cypress/support.js b/ui/cypress/support.js
new file mode 100644
index 000000000..b634ea9b3
--- /dev/null
+++ b/ui/cypress/support.js
@@ -0,0 +1 @@
+import '@testing-library/cypress/add-commands';
diff --git a/ui/cypress/support/commands.js b/ui/cypress/support/commands.js
deleted file mode 100644
index e89f2b392..000000000
--- a/ui/cypress/support/commands.js
+++ /dev/null
@@ -1,27 +0,0 @@
-// ***********************************************
-// This example commands.js shows you how to
-// create various custom commands and overwrite
-// existing commands.
-//
-// For more comprehensive examples of custom
-// commands please read more here:
-// https://on.cypress.io/custom-commands
-// ***********************************************
-//
-//
-// -- This is a parent command --
-// Cypress.Commands.add('login', (email, password) => { ... })
-//
-//
-// -- This is a child command --
-// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
-//
-//
-// -- This is a dual command --
-// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
-//
-//
-// -- This will overwrite an existing command --
-// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
-
-import '@testing-library/cypress/add-commands';
diff --git a/ui/cypress/support/e2e.js b/ui/cypress/support/e2e.js
deleted file mode 100644
index 5df9c0186..000000000
--- a/ui/cypress/support/e2e.js
+++ /dev/null
@@ -1,20 +0,0 @@
-// ***********************************************************
-// This example support/e2e.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 commands.js using ES2015 syntax:
-import './commands';
-
-// Alternatively you can use CommonJS syntax:
-// require('./commands')