refactor: Cypress testing library page jobs étudiants (#2265)

cypress/e2e/jobs-etudiants.cy.ts

@@ -1,9 +1,10 @@
 /// <reference types="cypress" />
+/// <reference types="@testing-library/cypress" />
 
 import { aBarmanOffre, aRésultatEchantillonOffre } from '../../src/server/offres/domain/offre.fixture';
 import { interceptGet } from '../interceptGet';
 
-describe('Parcours jobs étudiants', () => {
+context('Parcours jobs étudiants', () => {
 	beforeEach(() => {
 		cy.viewport('iphone-x');
 		interceptGet({
@@ -15,46 +16,49 @@ describe('Parcours jobs étudiants', () => {
 	});
 
 	it('affiche 15 résultats par défaut', () => {
-		cy.get('ul[aria-label="Offres de jobs étudiants"] > li').should('have.length', 15);
-		cy.get('ul[aria-label="Offres de jobs étudiants"] > li').first().should('contain.text', 'Barman / Barmaid (H/F)');
+		cy.findByRole('list', { name: /Offres de jobs étudiants/i }).children().should('have.length', 15);
 	});
 
-	it('place le focus sur le premier input du formulaire de recherche', () => {
-		cy.focused().should('have.attr', 'name', 'motCle');
+	it('place le focus sur le champ "Métier" du formulaire de recherche', () => {
+		cy.findByRole('textbox', { name: /Métier/i }).should('have.focus');
 	});
 
-	context('quand l\'utilisateur rentre un mot clé', () => {
+	context('quand l’utilisateur rentre un mot clé', () => {
 		it('filtre les résultats par mot clé', () => {
 			interceptGet({
 				actionBeforeWaitTheCall: () => {
-					cy.focused().type('barman');
-					cy.focused().type('{enter}');
+					cy.findByRole('textbox', { name: /Métier/i }).type('barman');
+					cy.findByRole('button', { name: /Rechercher/i }).click();
 				},
 				alias: 'recherche-mot-cle-jobs-etudiants' ,
 				path: ' /api/jobs-etudiants*',
 				response: JSON.stringify({ nombreRésultats: 1, résultats: [aBarmanOffre()] }),
 			});
 
-			cy.get('ul[aria-label="Offres de jobs étudiants"] > li').should('have.length', 1);
+			cy.findByRole('list', { name: /Offres de jobs étudiants/i }).children().should('have.length', 1);
 		});
 
-		context('quand l\'utilisateur veut sélectionner la première offre', () => {
-			it('navigue vers le détail de l\'offre', () => {
+		context('quand l’utilisateur sélectionne la première offre', () => {
+			it('navigue vers le détail de l’offre', () => {
 				const id = aBarmanOffre().id;
 
 				interceptGet({
-					actionBeforeWaitTheCall: () => cy.get('ul[aria-label="Offres de jobs étudiants"] > li a').first().click(),
+					actionBeforeWaitTheCall: () => (
+						cy.findByRole('list', { name: /Offres de jobs étudiants/i })
+							.children()
+							.first()
+							.within(() => cy.findByRole('link', { name: /En savoir plus/i }).click())),
 					alias: 'get-jobs-etudiants',
 					path: `/_next/data/*/jobs-etudiants/${id}.json?id=${id}`,
 					response: JSON.stringify({ pageProps: { jobÉtudiant: aBarmanOffre() } }),
 				});
-				cy.get('h1').should('contain.text', 'Barman / Barmaid (H/F)');
+				cy.findByRole('heading', { level: 1 }).should('have.text', 'Barman / Barmaid (H/F)');
 			});
 		});
 	});
 });
 
-context("quand les paramètres de l'url ne respectent pas le schema de validation du controller", () => {
+context('quand les paramètres de l’url ne respectent pas le schema de validation du controller', () => {
 	it('retourne une erreur de demande incorrecte', () => {
 		interceptGet({
 			actionBeforeWaitTheCall: () => cy.visit('/jobs-etudiants?page=67'),
@@ -64,6 +68,6 @@ context("quand les paramètres de l'url ne respectent pas le schema de validatio
 			statusCode: 400,
 		});
 
-		cy.contains('Erreur - Demande incorrecte').should('exist');
+		cy.findByText('Erreur - Demande incorrecte').should('be.visible');
 	});
 });