Maison >Java >javaDidacticiel >Tests de bout en bout pour les applications Java React
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.
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 :
Outils de test backend :
Outils d'intégration :
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")); } }
Dépendances externes simulées :
Conteneuriser le backend :
FROM openjdk:11 COPY target/myapp.jar /app/myapp.jar ENTRYPOINT ["java", "-jar", "/app/myapp.jar"]
npm install cypress --save-dev
Créer des 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'); }); });
API simulées dans Cypress :
cy.intercept('POST', '/api/login', { statusCode: 200, body: { token: 'fake-token' } });
Test back-end :
given() .contentType("application/json") .body("{ \"username\": \"admin\", \"password\": \"password123\" }") .when() .post("/login") .then() .statusCode(200) .body("token", notNullValue());
Test frontal :
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")); } }
FROM openjdk:11 COPY target/myapp.jar /app/myapp.jar ENTRYPOINT ["java", "-jar", "/app/myapp.jar"]
Tests backend en CI :
npm install cypress --save-dev
Tests frontend en CI :
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'); }); });
Intégration complète :
cy.intercept('POST', '/api/login', { statusCode: 200, body: { token: 'fake-token' } });
Actions GitHub pour CI :
given() .contentType("application/json") .body("{ \"username\": \"admin\", \"password\": \"password123\" }") .when() .post("/login") .then() .statusCode(200) .body("token", notNullValue());
Allure pour Java :
@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 :
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'); }); });
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!