Tests de bout en bout pour les applications Java React

Tests de bout en bout (E2E) pour une application Java et React : guide complet

Les tests de bout en bout (E2E) garantissent que votre application fonctionne dans son ensemble en simulant les flux de travail des utilisateurs réels sur le backend (Java) et le frontend (React). Ce guide couvre les outils, la configuration et les étapes de mise en œuvre des tests E2E.

---

1. Choisir les bons outils

Pour les tests E2E dans une pile Java-React, utilisez des outils capables d'interagir à la fois avec le backend et le frontend :

• Outils de test frontend :

  • Cypress : outil de test E2E moderne pour les tests frontend.
  • Dramaturge ou Marionnette : Automatisation du navigateur sans tête.
  • Selenium : automatisation du navigateur qui fonctionne à la fois pour le frontend et le backend.

• Outils de test backend :

  • REST Assured : testez les API REST en Java.
  • JUnit : framework de test Java pour la logique backend.

• Outils d'intégration :

  • TestContainers : pour tester avec des conteneurs Docker.
  • MockServer : Pour se moquer des API lors des tests.
  • Allure : pour rapporter les résultats des tests.

---

2. Mise en place de l'environnement

Backend (Java) :

1. Assurez-vous que l'API est testée :
   • Utilisez JUnit pour les tests unitaires et d'intégration.
   • Utilisez REST Assured pour les tests API.

Exemple (test REST Assured pour une API) :

   import io.restassured.RestAssured;
   import org.junit.jupiter.api.Test;

   import static io.restassured.RestAssured.given;
   import static org.hamcrest.Matchers.equalTo;

   public class ApiTest {
       @Test
       public void testGetUser() {
           RestAssured.baseURI = "http://localhost:8080";
           given()
               .when()
               .get("/users/1")
               .then()
               .statusCode(200)
               .body("name", equalTo("John Doe"));
       }
   }

1. Dépendances externes simulées :

   • Utilisez MockServer ou WireMock pour simuler des API externes.

2. Conteneuriser le backend :

   • Utilisez Docker pour créer un environnement cohérent pour les tests backend.
   • Exemple de fichier Docker :

    FROM openjdk:11
    COPY target/myapp.jar /app/myapp.jar
    ENTRYPOINT ["java", "-jar", "/app/myapp.jar"]
   

Frontend (Réagir) :

1. Installer Cypress :

   npm install cypress --save-dev

1. Créer des tests Cypress :

   • Exemple : Test de la fonctionnalité de connexion :

    describe('Login Page', () => {
      it('should log in successfully', () => {
        cy.visit('http://localhost:3000/login');
        cy.get('input[name="username"]').type('admin');
        cy.get('input[name="password"]').type('password123');
        cy.get('button[type="submit"]').click();
        cy.url().should('include', '/dashboard');
      });
    });
   

2. API simulées dans Cypress :

   • Utilisez cy.intercept() pour intercepter les appels d'API backend.

   cy.intercept('POST', '/api/login', { statusCode: 200, body: { token: 'fake-token' } });

---

3. Rédaction de tests E2E

Scénario 1 : Workflow de connexion utilisateur

1. Test back-end :

   • Assurez-vous que l'API /login renvoie un jeton valide.
   • Exemple :

    given()
        .contentType("application/json")
        .body("{ \"username\": \"admin\", \"password\": \"password123\" }")
        .when()
        .post("/login")
        .then()
        .statusCode(200)
        .body("token", notNullValue());
   

2. Test frontal :

   • Simulez la saisie de l'utilisateur sur la page de connexion et validez la redirection.

Scénario 2 : Créer et afficher un élément

1. Test back-end :
   • Validez l'API /createItem qui stocke les données et l'API /items les récupère.

   import io.restassured.RestAssured;
   import org.junit.jupiter.api.Test;

   import static io.restassured.RestAssured.given;
   import static org.hamcrest.Matchers.equalTo;

   public class ApiTest {
       @Test
       public void testGetUser() {
           RestAssured.baseURI = "http://localhost:8080";
           given()
               .when()
               .get("/users/1")
               .then()
               .statusCode(200)
               .body("name", equalTo("John Doe"));
       }
   }

1. Test frontal :
   • Vérifiez que l'interface utilisateur affiche l'élément créé.

 FROM openjdk:11
 COPY target/myapp.jar /app/myapp.jar
 ENTRYPOINT ["java", "-jar", "/app/myapp.jar"]

---

4. Intégration des tests E2E avec CI/CD

1. Tests backend en CI :

   • Utilisez JUnit et une base de données de test :

      npm install cypress --save-dev
   

2. Tests frontend en CI :

   • Exécutez les tests Cypress :

    describe('Login Page', () => {
      it('should log in successfully', () => {
        cy.visit('http://localhost:3000/login');
        cy.get('input[name="username"]').type('admin');
        cy.get('input[name="password"]').type('password123');
        cy.get('button[type="submit"]').click();
        cy.url().should('include', '/dashboard');
      });
    });
   

3. Intégration complète :

   • Utilisez Docker Compose pour exécuter le backend et le frontend ensemble :

      cy.intercept('POST', '/api/login', { statusCode: 200, body: { token: 'fake-token' } });
   

4. Actions GitHub pour CI :
   

 given()
     .contentType("application/json")
     .body("{ \"username\": \"admin\", \"password\": \"password123\" }")
     .when()
     .post("/login")
     .then()
     .statusCode(200)
     .body("token", notNullValue());

---

5. Rapports

• Allure pour Java :

  • Intégrez Allure pour des rapports de tests détaillés :

     @Test
     public void testCreateAndRetrieveItem() {
         String itemJson = "{ \"name\": \"Test Item\" }";
  
         // Create Item
         given()
             .contentType("application/json")
             .body(itemJson)
             .post("/createItem")
             .then()
             .statusCode(201);
  
         // Retrieve Items
         given()
             .get("/items")
             .then()
             .statusCode(200)
             .body("[0].name", equalTo("Test Item"));
     }
  

• Tableau de bord Cyprès :

  • Utilisez le tableau de bord Cypress pour suivre les exécutions de tests :

     describe('Item Management', () => {
       it('should display the newly created item', () => {
         cy.visit('http://localhost:3000/items');
         cy.get('button#create-item').click();
         cy.get('input[name="itemName"]').type('Test Item');
         cy.get('button#save-item').click();
         cy.contains('Test Item').should('exist');
       });
     });
  

---

6. Meilleures pratiques

1. Miquez les API externes pendant les tests pour éviter les défauts.
2. Utilisez une base de données de tests dédiée pour les tests backend.
3. Parallélisez les tests en CI pour gagner du temps.
4. Nettoyez les données de test après chaque exécution.

---

Ce guide met en place un cadre de test E2E robuste pour une application Java et React. Faites-moi savoir si vous avez besoin d'aide pour mettre en œuvre une partie spécifique !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!