Les proves de cap a cap (E2E) són un tipus de prova que simula el comportament real de l'usuari per assegurar-se que totes les parts d'una aplicació funcionen correctament quan es combinen. Aquest tipus de proves són crucials per garantir que la teva aplicació Ionic funcioni com s'espera en un entorn real.

• Entendre què són les proves de cap a cap.
• Configurar l'entorn per a les proves E2E en una aplicació Ionic.
• Escriure i executar proves E2E utilitzant Cypress.
• Analitzar els resultats de les proves i solucionar problemes comuns.

Les proves de cap a cap verifiquen el funcionament de l'aplicació des del punt de vista de l'usuari final. Aquestes proves cobreixen tot el flux de treball de l'aplicació, des de la interfície d'usuari fins a la base de dades, assegurant-se que totes les parts interactuen correctament.

• Cobertura Completa: Verifiquen el funcionament de l'aplicació en conjunt.
• Detecció de Problemes d'Integració: Identifiquen problemes que poden no ser evidents en proves unitàries o de components.
• Simulació Realista: Simulen el comportament real de l'usuari, proporcionant una visió més precisa de com es comportarà l'aplicació en producció.

Per a aquest curs, utilitzarem Cypress, una eina popular per a proves E2E.

1. Instal·la Cypress com a dependència de desenvolupament:

   npm install cypress --save-dev
   

2. Afegeix un script per executar Cypress al teu package.json:

   "scripts": {
     "cypress:open": "cypress open"
   }
   

3. Executa Cypress per primera vegada:

   npm run cypress:open
   

   Això obrirà la interfície de Cypress i crearà una estructura de carpetes per a les proves.

Suposem que tenim una aplicació Ionic amb una pàgina de login. Escriurem una prova per verificar que un usuari pot iniciar sessió correctament.

1. Crea un fitxer de prova: Crea un fitxer anomenat login.spec.js dins de la carpeta cypress/integration.

2. Escriu la prova:

   describe('Login Page', () => {
     it('should log in successfully with valid credentials', () => {
       cy.visit('/login'); // Navega a la pàgina de login
   
       cy.get('input[name="email"]').type('[email protected]'); // Introdueix l'email
       cy.get('input[name="password"]').type('password123'); // Introdueix la contrasenya
       cy.get('button[type="submit"]').click(); // Fes clic al botó de login
   
       // Verifica que l'usuari ha iniciat sessió correctament
       cy.url().should('include', '/dashboard');
       cy.get('.welcome-message').should('contain', 'Welcome, User!');
     });
   });
   

Per executar les proves, simplement obre Cypress amb el següent comandament:

A la interfície de Cypress, selecciona el fitxer login.spec.js per executar la prova.

Després d'executar les proves, Cypress mostrarà els resultats a la seva interfície. Aquí podràs veure quines proves han passat i quines han fallat, juntament amb captures de pantalla i vídeos de les proves fallides.

• Elements No Trobats: Assegura't que els selectors utilitzats a les proves són correctes i que els elements estan presents al DOM.
• Temps d'Espera: Utilitza comandes com cy.wait() o cy.get().should('be.visible') per gestionar els temps d'espera en cas que els elements triguin a carregar.
• Errors de Xarxa: Verifica que el servidor backend està funcionant correctament i que les peticions HTTP no estan fallant.

En aquesta secció, hem après què són les proves de cap a cap i com configurar Cypress per escriure i executar aquestes proves en una aplicació Ionic. Les proves E2E són essencials per assegurar-se que la teva aplicació funciona correctament des del punt de vista de l'usuari final, cobrint tot el flux de treball de l'aplicació.

En el següent tema, explorarem com construir la teva aplicació per a producció, assegurant-nos que estigui optimitzada i llesta per ser desplegada a les botigues d'aplicacions.