test: fix most of the e2e tests errors

* back-to-top test is not working: for some reasons, the link only
appears when manually scrolling
* search test has failure test: it seems the page meta is too long to
load
Anyway, the pages will be refactored and the e2e should also be
refactored. But the back to top test remains problematic...

5 files changed, 57 insertions, 33 deletions

diff --git a/tests/cypress/e2e/back-to-top.cy.ts b/tests/cypress/e2e/back-to-top.cy.ts
index 06ac3e6..fcbd814 100644
--- a/tests/cypress/e2e/back-to-top.cy.ts
+++ b/tests/cypress/e2e/back-to-top.cy.ts
@@ -1,12 +1,10 @@
 describe('Back to top', () => {
-  it('show a back to top button when scrolling', async () => {
+  it('show a back to top button when scrolling', () => {
     cy.visit('/');
-    cy.findByRole('link', { name: /Retour en haut de page/i }).should(
-      'not.be.visible'
-    );
+    cy.get('body').should('not.contain', /Retour en haut de page/i);
 
-    // See @components/templates/layout/layout.tsx for scroll position.
-    cy.scrollTo(0, 300);
+    // eslint-disable-next-line @typescript-eslint/no-magic-numbers
+    cy.scrollTo(0, 400); // Scroll breakpoint is 300
     cy.findByRole('link', { name: /Retour en haut de page/i }).should(
       'be.visible'
     );
diff --git a/tests/cypress/e2e/nav.cy.ts b/tests/cypress/e2e/nav.cy.ts
index 14d4e8c..02d5818 100644
--- a/tests/cypress/e2e/nav.cy.ts
+++ b/tests/cypress/e2e/nav.cy.ts
@@ -20,14 +20,20 @@ describe(
       'should open and close main nav menu by clicking on hamburger button',
       { viewportWidth: 810, viewportHeight: 1080 },
       () => {
-        cy.findByLabelText(/Fermer le menu/i).should('not.exist');
+        // findByLabelText does not return the input but the label...
+        cy.findByLabelText(/Ouvrir le menu/i)
+          .prev()
+          .should('not.be.checked');
         cy.findByRole('link', { name: /Blog/i }).should('not.exist');
         cy.findByLabelText(/Ouvrir le menu/i).click();
-        cy.findByLabelText(/Ouvrir le menu/i).should('not.exist');
-        cy.findByLabelText(/Fermer le menu/i).should('exist');
+        cy.findByLabelText(/Ouvrir le menu/i)
+          .prev()
+          .should('be.checked');
         cy.findByRole('link', { name: /Blog/i }).should('exist');
-        cy.findByLabelText(/Fermer le menu/i).click();
-        cy.findByLabelText(/Fermer le menu/i).should('not.exist');
+        cy.findByLabelText(/Ouvrir le menu/i).click();
+        cy.findByLabelText(/Ouvrir le menu/i)
+          .prev()
+          .should('not.be.checked');
         cy.findByRole('link', { name: /Blog/i }).should('not.exist');
         cy.findByLabelText(/Ouvrir le menu/i).should('exist');
       }
@@ -38,25 +44,33 @@ describe(
     });
 
     it('should navigate to the blog page', () => {
-      cy.findByRole('link', { name: /Blog/i }).click();
+      cy.findByLabelText('Navigation principale').within(() => {
+        cy.findByRole('link', { name: /Blog/i }).click();
+      });
       cy.url().should('include', ROUTES.BLOG);
       cy.findByRole('heading', { level: 1 }).contains('Blog');
     });
 
     it('should navigate to the CV page', () => {
-      cy.findByRole('link', { name: /CV/i }).click();
+      cy.findByLabelText('Navigation principale').within(() => {
+        cy.findByRole('link', { name: /CV/i }).click();
+      });
       cy.url().should('include', ROUTES.CV);
       cy.findByRole('heading', { level: 1 }).contains('CV');
     });
 
     it('should navigate to the projects page', () => {
-      cy.findByRole('link', { name: /Projets/i }).click();
+      cy.findByLabelText('Navigation principale').within(() => {
+        cy.findByRole('link', { name: /Projets/i }).click();
+      });
       cy.url().should('include', ROUTES.PROJECTS);
       cy.findByRole('heading', { level: 1 }).contains('Projets');
     });
 
     it('should navigate to the contact page', () => {
-      cy.findByRole('link', { name: /Contact/i }).click();
+      cy.findByLabelText('Navigation principale').within(() => {
+        cy.findByRole('link', { name: /Contact/i }).click();
+      });
       cy.url().should('include', ROUTES.CONTACT);
       cy.findByRole('heading', { level: 1 }).contains('Contact');
     });
diff --git a/tests/cypress/e2e/pages/contact.cy.ts b/tests/cypress/e2e/pages/contact.cy.ts
index fa5a928..64f8bdb 100644
--- a/tests/cypress/e2e/pages/contact.cy.ts
+++ b/tests/cypress/e2e/pages/contact.cy.ts
@@ -1,3 +1,4 @@
+import { CONFIG } from '../../../../src/utils/config';
 import { ROUTES } from '../../../../src/utils/constants';
 
 const userName = 'Cypress Test';
@@ -17,6 +18,7 @@ describe('Contact Page', () => {
   });
 
   it('submits the form', () => {
+    cy.intercept('POST', CONFIG.api.url ?? '').as('sendMail');
     cy.findByRole('textbox', { name: /Nom/i })
       .type(userName)
       .should('have.value', userName);
@@ -30,7 +32,9 @@ describe('Contact Page', () => {
       .type(message)
       .should('have.value', message);
     cy.findByRole('button', { name: /Envoyer/i }).click();
-    cy.findByText(/E-mail en cours d'envoi/i).should('be.visible');
+    cy.findByText(/Mail en cours/i).should('be.visible');
+    cy.wait('@sendMail');
+    cy.get('body').should('not.contain.text', /Mail en cours/i);
   });
 
   it('prevents the form to submit if some fields are missing', () => {
@@ -38,6 +42,6 @@ describe('Contact Page', () => {
       .type(userEmail)
       .should('have.value', userEmail);
     cy.findByRole('button', { name: /Envoyer/i }).click();
-    cy.findByText(/E-mail en cours d'envoi/i).should('not.be.visible');
+    cy.get('body').should('not.contain.text', /Mail en cours/i);
   });
 });
diff --git a/tests/cypress/e2e/search.cy.ts b/tests/cypress/e2e/search.cy.ts
index 5f2081d..be9aa9f 100644
--- a/tests/cypress/e2e/search.cy.ts
+++ b/tests/cypress/e2e/search.cy.ts
@@ -4,21 +4,22 @@ const queryWithArticles = 'Coldark';
 const queryWithoutArticles = 'etEtRerum';
 
 describe('Search', () => {
-  /* eslint-disable max-statements */
   it('should open and close search form by clicking on search button', () => {
     cy.visit('/');
-    cy.findByLabelText(/Fermer la recherche/i).should('not.exist');
+    // findByLabelText does not return the input but the label...
+    cy.findByLabelText(/Ouvrir la recherche/i)
+      .prev()
+      .should('not.be.checked');
     cy.findByRole('searchbox', { name: /Rechercher/i }).should('not.exist');
     cy.findByLabelText(/Ouvrir la recherche/i).click();
-    cy.findByLabelText(/Ouvrir la recherche/i).should('not.exist');
-    cy.findByLabelText(/Fermer la recherche/i).should('exist');
+    cy.findByLabelText(/Ouvrir la recherche/i)
+      .prev()
+      .should('be.checked');
     cy.findByRole('searchbox', { name: /Rechercher/i }).should('exist');
-    cy.findByLabelText(/Fermer la recherche/i).click();
-    cy.findByLabelText(/Fermer la recherche/i).should('not.exist');
+    cy.findByLabelText(/Ouvrir la recherche/i).click();
+    cy.findByLabelText(/Ouvrir la recherche/i).should('not.be.checked');
     cy.findByRole('searchbox', { name: /Rechercher/i }).should('not.exist');
-    cy.findByLabelText(/Ouvrir la recherche/i).should('exist');
   });
-  /* eslint-enable max-statements */
 
   it('should navigate the search page', () => {
     cy.visit('/');
@@ -34,8 +35,9 @@ describe('Search', () => {
 
   it('should display the total of articles if successful', () => {
     cy.visit(`${ROUTES.SEARCH}?s=${encodeURIComponent(queryWithArticles)}`);
-    const dtSiblings = cy.findByRole('term', { name: /Total/i }).siblings();
-    dtSiblings.findByRole('definition').contains(/article/i);
+    const metaList = cy.findByRole('heading', { level: 1 }).next();
+    metaList.findByRole('term').contains(/Total/i);
+    metaList.findByRole('definition').contains(/article/i);
   });
 
   it('should display a search form if unsuccessful', () => {
diff --git a/tests/cypress/e2e/settings.cy.ts b/tests/cypress/e2e/settings.cy.ts
index abdbcdf..f58055b 100644
--- a/tests/cypress/e2e/settings.cy.ts
+++ b/tests/cypress/e2e/settings.cy.ts
@@ -4,12 +4,18 @@ describe('Settings', () => {
   });
 
   it('should open and close a settings menu by clicking on a button', () => {
-    cy.findByLabelText(/Fermer les réglages/i).should('not.exist');
+    // findByLabelText does not return the input but the label...
+    cy.findByLabelText(/Ouvrir les réglages/i)
+      .prev()
+      .should('not.be.checked');
+    cy.findByLabelText(/Ouvrir les réglages/i).click();
+    cy.findByLabelText(/Ouvrir les réglages/i)
+      .prev()
+      .should('be.checked');
     cy.findByLabelText(/Ouvrir les réglages/i).click();
-    cy.findByLabelText(/Ouvrir les réglages/i).should('not.exist');
-    cy.findByLabelText(/Fermer les réglages/i).click();
-    cy.findByLabelText(/Fermer les réglages/i).should('not.exist');
-    cy.findByLabelText(/Ouvrir les réglages/i).should('exist');
+    cy.findByLabelText(/Ouvrir les réglages/i)
+      .prev()
+      .should('not.be.checked');
   });
 
   it('should open and close a tooltip by clicking on a button', () => {
@@ -44,7 +50,7 @@ describe('Settings', () => {
             .parent()
             .should('have.attr', 'data-theme', 'dark')
             .then(() => {
-              expect(localStorage.getItem('theme')).to.eq('dark');
+              expect(localStorage.getItem('theme')).to.eq('"dark"');
             });
         } else {
           cy.findByRole('radiogroup', { name: /Thème/i })