Ujian Hujung Ke Hujung untuk Aplikasi Java React

Ujian Hujung-ke-Hujung (E2E) untuk Aplikasi Java dan React: Panduan Lengkap

Ujian hujung ke hujung (E2E) memastikan aplikasi anda berfungsi secara keseluruhan dengan mensimulasikan aliran kerja pengguna sebenar merentas bahagian belakang (Java) dan hujung hadapan (React). Panduan ini merangkumi alatan, persediaan dan langkah untuk melaksanakan ujian E2E.

---

1. Memilih Alat yang Tepat

Untuk ujian E2E dalam timbunan Java-React, gunakan alatan yang boleh berinteraksi dengan bahagian belakang dan bahagian hadapan:

• Alat Pengujian Depan:

  • Cypress: Alat ujian E2E moden untuk ujian bahagian hadapan.
  • Penulis drama atau Dalang: Automasi penyemak imbas tanpa kepala.
  • Selenium: Automasi penyemak imbas yang berfungsi untuk bahagian depan dan belakang.

• Alat Pengujian Belakang:

  • REST Assured: Uji REST API dalam Java.
  • JUnit: Rangka kerja ujian Java untuk logik bahagian belakang.

• Alat Penyepaduan:

  • TestContainers: Untuk ujian dengan bekas Docker.
  • MockServer: Untuk mengejek API semasa ujian.
  • Pikat: Untuk melaporkan keputusan ujian.

---

2. Menyediakan Persekitaran

Backend (Jawa):

1. Pastikan API Diuji:
   • Gunakan JUnit untuk ujian unit dan penyepaduan.
   • Gunakan REST Assured untuk ujian API.

Contoh (Ujian REST Assured untuk 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. Ketergantungan Luar Olok-olok:

   • Gunakan MockServer atau WireMock untuk mengejek API luaran.

2. Bekas Bahagian Belakang:

   • Gunakan Docker untuk mencipta persekitaran yang konsisten untuk ujian bahagian belakang.
   • Contoh Fail Docker:

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

Frontend (React):

1. Pasang Cypress:

   npm install cypress --save-dev

1. Buat Ujian Cypress:

   • Contoh: Menguji fungsi log masuk:

    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 Olok-olok dalam Cypress:

   • Gunakan cy.intercept() untuk memintas panggilan API bahagian belakang.

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

---

3. Menulis Ujian E2E

Senario 1: Aliran Kerja Log Masuk Pengguna

1. Ujian Belakang:

   • Pastikan /login API mengembalikan token yang sah.
   • Contoh:

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

2. Ujian Depan:

   • Simulasikan input pengguna pada halaman log masuk dan sahkan pengalihan semula.

Senario 2: Cipta dan Paparkan Item

1. Ujian Belakang:
   • Sahkan /createItem API menyimpan data dan /items API mendapatkannya semula.

   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. Ujian Depan:
   • Sahkan UI menunjukkan item yang dibuat.

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

---

4. Mengintegrasikan Ujian E2E dengan CI/CD

1. Ujian Belakang dalam CI:

   • Gunakan JUnit dan pangkalan data ujian:

      npm install cypress --save-dev
   

2. Ujian Depan dalam CI:

   • Jalankan ujian 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. Integrasi Penuh:

   • Gunakan Docker Compose untuk menjalankan backend dan frontend bersama-sama:

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

4. Tindakan GitHub untuk CI:
   

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

---

5. Melaporkan

• Memikat untuk Jawa:

  • Sepadukan Daya tarikan untuk laporan ujian terperinci:

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

• Papan Pemuka Cypress:

  • Gunakan Papan Pemuka Cypress untuk menjejaki larian ujian:

     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. Amalan Terbaik

1. Olok-olok API luaran semasa ujian untuk mengelakkan kekeringan.
2. Gunakan pangkalan data ujian khusus untuk ujian bahagian belakang.
3. Selarikan ujian dalam CI untuk menjimatkan masa.
4. Bersihkan data ujian selepas setiap larian.

---

Panduan ini menyediakan rangka kerja ujian E2E yang mantap untuk aplikasi Java dan React. Beritahu saya jika anda memerlukan bantuan untuk melaksanakan mana-mana bahagian tertentu!

Atas ialah kandungan terperinci Ujian Hujung Ke Hujung untuk Aplikasi Java React. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!