From 38de3000c0286bfe1c76b2ed16a278d827927792 Mon Sep 17 00:00:00 2001
From: Axel Bocciarelli <axelboc@gmail.com>
Date: Mon, 4 Sep 2023 11:07:45 +0200
Subject: [PATCH] Use Cypress Testing Library syntax

---
 ui/.eslintrc.js                | 10 ++++++++++
 ui/.gitignore                  |  1 +
 ui/cypress.config.js           |  6 +++---
 ui/cypress/e2e/app.cy.js       | 28 +++++++---------------------
 ui/cypress/support.js          |  9 +++++++++
 ui/cypress/support/commands.js | 27 ---------------------------
 ui/cypress/support/e2e.js      | 29 -----------------------------
 7 files changed, 30 insertions(+), 80 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/ui/.eslintrc.js b/ui/.eslintrc.js
index a578bdacf..cc3a24467 100644
--- a/ui/.eslintrc.js
+++ b/ui/.eslintrc.js
@@ -50,5 +50,15 @@ module.exports = createConfig({
         'jest/require-top-level-describe': 'off', // filename should already be meaningful, extra nesting is unnecessary
       },
     }),
+    {
+      files: ['cypress/**/*.js'],
+      rules: {
+        'testing-library/await-async-query': 'off', // Cypress has its own way of dealing with asynchronicity
+        'testing-library/await-async-utils': 'off', // Cypress has its own way of dealing with asynchronicity
+        'testing-library/prefer-screen-queries': 'off', // Cypress provides `cy` object instead of `screen`
+        'sonarjs/no-duplicate-string': 'off', // incompatible with Cypress testing syntax
+        'unicorn/numeric-separators-style': 'off', // not supported
+      },
+    },
   ],
 });
diff --git a/ui/.gitignore b/ui/.gitignore
index 4d29575de..c9ccdbc8f 100644
--- a/ui/.gitignore
+++ b/ui/.gitignore
@@ -7,6 +7,7 @@
 
 # testing
 /coverage
+/cypress/debug
 
 # production
 /build
diff --git a/ui/cypress.config.js b/ui/cypress.config.js
index 5b7f54671..94fea279a 100644
--- a/ui/cypress.config.js
+++ b/ui/cypress.config.js
@@ -2,8 +2,8 @@ const { defineConfig } = require('cypress');
 
 module.exports = defineConfig({
   e2e: {
-    setupNodeEvents(on, config) {
-      // implement node event listeners here
-    },
+    baseUrl: 'http://localhost:8081',
+    supportFile: 'cypress/support.js',
+    screenshotsFolder: 'cypress/debug',
   },
 });
diff --git a/ui/cypress/e2e/app.cy.js b/ui/cypress/e2e/app.cy.js
index b15b57f7a..9053f11bd 100644
--- a/ui/cypress/e2e/app.cy.js
+++ b/ui/cypress/e2e/app.cy.js
@@ -1,36 +1,22 @@
-Cypress.Commands.add('login', (username, password) => {
-  cy.visit('http://localhost:8081');
-  cy.get('input[placeholder*="Login ID"]').type('idtest0');
-  cy.get('input[placeholder*="Password"]').type('0000');
-  cy.get('button[type=submit]').click();
-  cy.get('[class=navbar-brand]').contains('MXCuBE');
-});
-
 describe('login', () => {
-  it('cant login with invalid credentials', () => {
-    cy.visit('http://localhost:8081');
-    cy.get('input[placeholder*="Login ID"]').type('idte0');
-    cy.get('input[placeholder*="Password"]').type('0000');
-    cy.get('button[type=submit]').click();
-    cy.get('pre*[class^="Login_error"]').should('be.visible');
+  it("can't login with invalid credentials", () => {
+    cy.login('idte0', '0000');
+    cy.findByText('Could not authenticate').should('be.visible');
   });
 
   it('can login with valid credentials', () => {
-    cy.visit('http://localhost:8081');
-    cy.get('input[placeholder*="Login ID"]').type('idtest0');
-    cy.get('input[placeholder*="Password"]').type('0000');
-    cy.get('button[type=submit]').click();
-    cy.get('[class=navbar-brand]').contains('MXCuBE');
+    cy.login();
+    cy.findByRole('link', { name: 'MXCuBE-Web (OSC)' });
   });
 });
 
 describe('app', () => {
   beforeEach(() => {
     cy.login();
+    cy.findByRole('link', { name: 'MXCuBE-Web (OSC)' }).should('be.visible');
   });
 
   it('displays collection page', () => {
-    cy.visit('http://localhost:8081');
-    cy.get('[class=navbar-brand]').contains('MXCuBE');
+    cy.findByRole('button', { name: /Beamline Actions/u }).should('be.visible');
   });
 });
diff --git a/ui/cypress/support.js b/ui/cypress/support.js
new file mode 100644
index 000000000..50f1b0f48
--- /dev/null
+++ b/ui/cypress/support.js
@@ -0,0 +1,9 @@
+import '@testing-library/cypress/add-commands';
+
+Cypress.Commands.add('login', (username = 'idtest0', password = '0000') => {
+  cy.visit('/');
+  cy.findByRole('heading', { name: 'MXCuBE' }).should('be.visible');
+  cy.findByLabelText('Login ID').type(username);
+  cy.findByLabelText('Password').type(password);
+  cy.findByRole('button', { name: 'Sign in' }).click();
+});
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 da06f6088..000000000
--- a/ui/cypress/support/e2e.js
+++ /dev/null
@@ -1,29 +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')
-beforeEach(() => {
-  it('can login', () => {
-    cy.visit('http://localhost:8081');
-    cy.get('input[placeholder*="Login ID"]').type('idtest0');
-    cy.get('input[placeholder*="Password"]').type('0000');
-    cy.get('button[type=submit]').click();
-    cy.get('[class=navbar-brand]').contains('MXCuBE');
-  });
-});