Java ? React ??????? ?? E2E(End-to-End) ???: ?? ???

?? ? ??(E2E) ???? ???(Java)? ?????(React)?? ?? ??? ????? ??????? ??????? ????? ????? ?????. ? ?????? E2E ??? ??? ?? ??, ?? ? ??? ????.

---

1. ??? ?? ??

Java-React ???? E2E ???? ????? ???? ????? ??? ?? ??? ? ?? ??? ?????.

• ????? ??? ??:

  • Cypress: ????? ???? ?? ?? E2E ??? ?????.
  • ??? ?? Puppeteer: ???? ???? ???.
  • Selenium: ?????? ??? ???? ???? ???? ???.

• ??? ??? ??:

  • REST ??: Java?? REST API? ??????.
  • JUnit: ??? ??? ?? Java ??? ?????

• ?? ??:

  • TestContainers: Docker ????? ???? ??????.
  • MockServer: ??? ?? API? ?????.
  • ???: ??? ?? ???

---

2. ????

???(??):

1. API? ??????? ?????:
   • ?? ? ?? ????? JUnit? ?????.
   • API ????? REST Assured? ?????.

?(API? ?? REST ?? ???):

   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. ?? ?? ???:

   • MockServer ?? WireMock? ???? ?? API? ?????.

2. ??? ?????:

   • Docker? ???? ??? ???? ?? ??? ??? ?????.
   • ???? ?:

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

?????(??):

1. Cypress ??:

   npm install cypress --save-dev

1. 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');
      });
    });
   

2. Cypress? ?? API:

   • ??? API ??? ????? cy.intercept()? ?????.

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

---

3. E2E ??? ??

???? 1: ??? ??? ????

1. ??? ???:

   • /login API? ??? ??? ????? ?????.
   • ?:

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

2. ????? ???:

   • ??? ????? ??? ??? ??????? ????? ?????.

???? 2: ?? ?? ? ??

1. ??? ???:
   • /createItem API? ???? ???? /items 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. ????? ???:
   • UI? ??? ??? ????? ?????.

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

---

4. CI/CD? E2E ??? ??

1. CI? ??? ???:

   • JUnit ? ??? ??????? ?????.

      npm install cypress --save-dev
   

2. CI? ????? ???:

   • 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. ?? ??:

   • Docker Compose? ???? ???? ?????? ?? ?????.

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

4. CI? GitHub ??:
   

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

---

5. ??

• Java? ?? ??:

  • ??? ??? ???? ??? Allure? ?????.

     @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"));
     }
  

• Cypress ????:

  • Cypress ????? ???? ??? ??? ?????.

     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. ?? ??

1. ??? ???? ?? ??? ?? ?? API? ?????.
2. ??? ???? ?? ?? ??? ??????? ?????.
3. CI?? ???? ????? ??? ?????.
4. ? ?? ? ??? ???? ?????.

---

? ???? Java ? React ??????? ?? ??? E2E ??? ?????? ?????. ?? ??? ???? ? ??? ???? ?????!

? ??? Java React ??????? ?? ????? ???? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!