Work on Cypress tests

.github/workflows/run-cypress.yml

@@ -55,11 +55,11 @@ jobs:
                     EB_THEME=skeune ./theme/scripts/prepare-test.js
                   ' && \
                   docker compose exec -T cypress bash -c '
-                    cd e2e && yarn install && cypress run --spec cypress/integration/skeune/**/*.spec.js,cypress/integration/shared/*.spec.js --browser=electron --headless
+                    cd e2e && yarn install && cypress run --spec cypress/integration/skeune/**/*.spec.js,cypress/integration/shared/*.spec.js --browser=chrome --headless
                   ' && \
                   docker compose exec -T --user www-data php-fpm.vm.openconext.org bash -c '
                     EB_THEME=openconext ./theme/scripts/prepare-test.js
                   ' && \
                   docker compose exec -T cypress bash -c '
-                    cd e2e && cypress run --spec cypress/integration/openconext/**/*.spec.js --browser=electron --headless
+                    cd e2e && cypress run --spec cypress/integration/openconext/**/*.spec.js --browser=chrome --headless
                   '

docker/docker-compose.yml

@@ -53,7 +53,7 @@ services:
             db-test.vm.openconext.org:
                 condition: service_healthy
         extra_hosts:
-          engine.vm.openconext.org: 127.0.0.1
+          - 'engine.vm.openconext.org: 127.0.0.1'
         environment:
           APP_ENV: ci
           SYMFONY_ENV: ci

tests/e2e/cypress/integration/skeune/consent/consent.general.spec.js

@@ -24,11 +24,11 @@ context('Consent on Skeune theme', () => {
     it('Hides the tooltip on load', () => {
       cy.get(tooltip3Selector)
         .next()
-        .should('not.be.visible');
+        .should('not.exist');
     });
 
     it('Should not show the nok-modal on load', () => {
-      cy.notBeVisible(nokSectionTitleSelector);
+      cy.notExistOrVisible(nokSectionTitleSelector);
     });
   });
 

tests/e2e/cypress/integration/skeune/testSelectors.js

@@ -3,7 +3,7 @@ import {attributesSelector, idpDeleteDisabledSelector, idpSelector, nokSectionSe
 /***
  * INDEX SELECTORS
  * ***/
-export const indexPageHeader = 'main div.main:first-of-type h1';
+export const indexPageHeader = 'main div.main:first-of-type h2';
 
 /***
  * CONSENT SELECTORS
@@ -12,7 +12,7 @@ export const attribute6 = `${attributesSelector}:nth-of-type(6)`;
 export const labelSelector = 'label';
 export const tooltip3Selector = `${tooltipLabelSelector}[for="tooltip3consent_attribute_source_idp"]`;
 export const primaryTooltip3Selector = `${primaryTooltipLabelSelector}[for="tooltip3consent_attribute_source_idp"]`;
-export const nokSectionTitleSelector = `${nokSectionSelector} h3`;
+export const nokSectionTitleSelector = `${nokSectionSelector} h2`;
 
 
 /***

tests/e2e/cypress/integration/skeune/wayf/wayf.keyboard.spec.js

@@ -1,4 +1,26 @@
-import {addAccountButtonSelector, cancelButtonSelector, defaultIdpClass, defaultIdpItemSelector, defaultIdpSelector, emailErrorSelector, emailFieldSelector, idpClass, nameErrorSelector, nameFieldSelector, noAccessTitle, noAccessFieldsetsSelector, previousSelectionTitleSelector, remainingIdpSelector, searchFieldClass, searchFieldSelector, selectedIdpsSelector, selectedIdpsSectionSelector, showFormSelector, submitRequestSelector, succesMessageSelector} from '../../../../../../theme/base/javascripts/selectors';
+import {
+  addAccountButtonSelector,
+  cancelButtonSelector,
+  defaultIdpClass,
+  defaultIdpItemSelector,
+  defaultIdpSelector,
+  emailErrorSelector,
+  emailFieldSelector,
+  idpClass,
+  nameErrorSelector,
+  nameFieldSelector,
+  noAccessTitle,
+  noAccessFieldsetsSelector,
+  previousSelectionTitleSelector,
+  remainingIdpSelector,
+  searchFieldClass,
+  searchFieldSelector,
+  selectedIdpsSelector,
+  selectedIdpsSectionSelector,
+  showFormSelector,
+  submitRequestSelector,
+  succesMessageSelector
+} from '../../../../../../theme/base/javascripts/selectors';
 import {firstRemainingIdp, firstSelectedIdpDeleteDisable, selectedIdpDataIndex1} from '../testSelectors';
 
 /**
@@ -87,7 +109,7 @@ context('WAYF when using the keyboard', () => {
 
     it('Should show the form fields after hitting request access', () => {
       cy.openUnconnectedIdp();
-      cy.getAndEnter(showFormSelector);
+      cy.focusAndEnter(showFormSelector);
       cy.beVisible(noAccessFieldsetsSelector);
     });
 
@@ -105,19 +127,26 @@ context('WAYF when using the keyboard', () => {
     });
 
     it('Should be able to partially fill the request access form and get validation message', () => {
+      cy.clearCookies();
+
       cy.openUnconnectedIdp();
+      cy.focusAndEnter(showFormSelector);
+
+      cy.screenshot("1");
       cy.fillNoAccessForm();
-      cy.get(nameFieldSelector).clear();
-      cy.getAndEnter(submitRequestSelector);
-      cy.get(nameErrorSelector)
-        .should('not.have.class', 'hidden');
+      cy.get(nameFieldSelector).clear({force:true});
+      cy.screenshot("2");
+      cy.focusAndEnter(submitRequestSelector);
+      cy.doesNotHaveClass(nameErrorSelector, 'hidden');
       cy.notBeVisible('This is an invalid email address');
     });
 
     it('Email validation should be triggered', () => {
+      cy.clearCookies();
       cy.openUnconnectedIdp();
+      cy.focusAndEnter(showFormSelector);
       cy.fillNoAccessForm();
-      cy.get(emailFieldSelector).clear();
+      cy.get(emailFieldSelector).clear({force:true});
       cy.getAndEnter(submitRequestSelector);
       cy.notBeVisible('Your name needs to be at least 2 characters long');
       cy.doesNotHaveClass(emailErrorSelector, 'hidden');

tests/e2e/cypress/integration/skeune/wayf/wayf.mouse.spec.js

@@ -146,7 +146,7 @@ context('WAYF when using the mouse', () => {
       cy.selectAccountButton(false);
       cy.selectFirstIdpAndReturn(false);
       cy.toggleEditButton(false);
-      cy.hitDeleteButton(false);
+      cy.hitDeleteButton();
       // The previous selection is now closed and empty
       cy.get('.wayf__previousSelection .wayf__idp h3')
         .should('have.length', 0);

tests/e2e/cypress/support/commands.js

@@ -12,13 +12,17 @@ Cypress.Commands.add('doesNotHaveClass', (selector, klasse) => {
 });
 
 Cypress.Commands.add('beVisible', (selector) => {
-  cy.get(selector).should('be.visible');
+  cy.get(selector).should('not.have.css', 'display', 'none');
 });
 
 Cypress.Commands.add('notBeVisible', (selector) => {
   cy.get(selector).should('not.be.visible');
 });
 
+Cypress.Commands.add('notExistOrVisible', (selector, isNotExist) => {
+  cy.get(selector).should(isNotExist ? 'not.exist' : 'not.be.visible');
+});
+
 Cypress.Commands.add('onPage', (expectedText) => {
   cy.get('body').contains(expectedText);
 });

tests/e2e/yarn.lock

@@ -430,10 +430,10 @@ cypress-axe@^1.4:
   resolved "https://registry.yarnpkg.com/cypress-axe/-/cypress-axe-1.4.0.tgz#e67482bfe9e740796bf77c7823f19781a8a2faff"
   integrity sha512-Ut7NKfzjyKm0BEbt2WxuKtLkIXmx6FD2j0RwdvO/Ykl7GmB/qRQkwbKLk3VP35+83hiIr8GKD04PDdrTK5BnyA==
 
-cypress-html-validate@^6.0:
-  version "6.0.2"
-  resolved "https://registry.yarnpkg.com/cypress-html-validate/-/cypress-html-validate-6.0.2.tgz#d22e8a39fb2ff9aaffa32e878a39a6c547c73434"
-  integrity sha512-Y9hm0cGx8rlta2aJif7cnLZfUZ2zY+t0L5acFuWOH6ySkV05vwyNhqE+lyx14leNcMSgkfUBJ3J0+K/qONhj0g==
+cypress-html-validate@^6.1:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/cypress-html-validate/-/cypress-html-validate-6.1.0.tgz#4e6d311a380b3fc9c503c489b261973dc424c757"
+  integrity sha512-IXVB1ZzdSHMzPM/QYZCXlG3yW2CdvSVY7bJtlijmk4kCRepfdHe0JLQ939h2Dj9ZsjyBockPQpun4omq1uRW6Q==
 
 cypress-terminal-report@^5.3:
   version "5.3.3"

theme/base/javascripts/wayf/deleteDisable/deleteIdp.js

@@ -17,13 +17,15 @@ import {getData} from '../../utility/getData';
  */
 export const deleteIdp = (element) => {
   const cookieName = JSON.parse(document.getElementById(configurationId).innerHTML).previousSelectionCookieName;
+  const cookieValue = Cookies.get(cookieName);
+  const cookie = JSON.parse(cookieValue);
+
   const idp = element.closest(idpSelector);
   const id = getData(idp, 'entityid');
   const parent = idp.parentElement;
   const title = getData(parent, 'title');
   const parentIndex = parseInt(getData(parent, 'index'));
-  console.log(Cookies.get(cookieName));
-  const cookie = JSON.parse(Cookies.get(cookieName));
+
 
 
   cookie.forEach((idp, index) => {

theme/openconext/javascripts/wayf/PreviousSelectionStorage.js

@@ -1,4 +1,4 @@
-import * as Cookies from 'js-cookie';
+import Cookies from 'js-cookie';
 
 export class PreviousSelectionStorage {
     constructor(cookieName) {
@@ -13,6 +13,6 @@ export class PreviousSelectionStorage {
             };
         });
 
-        Cookies.set(this.cookieName, simplifiedPreviousSelection, { expires: 365, path: '/' });
+        Cookies.set(this.cookieName, JSON.stringify(simplifiedPreviousSelection), { expires: 365, path: '/' }, );
     }
 }

theme/openconext/javascripts/wayf/RememberChoiceStorage.js

@@ -1,11 +1,11 @@
-import * as Cookies from 'js-cookie';
+import Cookies from 'js-cookie';
 
 export class RememberChoiceStorage {
     constructor(cookieName) {
         this.cookieName = cookieName;
     }
 
     save(entityId) {
-        Cookies.set(this.cookieName, entityId, { expires: 365, path: '/' });
+        Cookies.set(this.cookieName, JSON.stringify(entityId), { expires: 365, path: '/' });
     }
 }