Rumah > Java > javaTutorial > Ujian Hujung Ke Hujung untuk Aplikasi Java React

Ujian Hujung Ke Hujung untuk Aplikasi Java React

Barbara Streisand
Lepaskan: 2024-11-25 08:28:10
asal
742 orang telah melayarinya

End-To-End Testing for Java React Applications

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"));
       }
   }
Salin selepas log masuk
Salin selepas log masuk
  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"]
    
    Salin selepas log masuk
    Salin selepas log masuk

Frontend (React):

  1. Pasang Cypress:
   npm install cypress --save-dev
Salin selepas log masuk
Salin selepas log masuk
  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');
       });
     });
    
    Salin selepas log masuk
    Salin selepas log masuk
  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' } });
Salin selepas log masuk
Salin selepas log masuk

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());
    
    Salin selepas log masuk
    Salin selepas log masuk
  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"));
       }
   }
Salin selepas log masuk
Salin selepas log masuk
  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"]
Salin selepas log masuk
Salin selepas log masuk

4. Mengintegrasikan Ujian E2E dengan CI/CD

  1. Ujian Belakang dalam CI:

    • Gunakan JUnit dan pangkalan data ujian:
       npm install cypress --save-dev
    
    Salin selepas log masuk
    Salin selepas log masuk
  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');
       });
     });
    
    Salin selepas log masuk
    Salin selepas log masuk
  3. Integrasi Penuh:

    • Gunakan Docker Compose untuk menjalankan backend dan frontend bersama-sama:
       cy.intercept('POST', '/api/login', { statusCode: 200, body: { token: 'fake-token' } });
    
    Salin selepas log masuk
    Salin selepas log masuk
  4. Tindakan GitHub untuk CI:

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

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"));
       }
    
    Salin selepas log masuk
  • 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');
         });
       });
    
    Salin selepas log masuk

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!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan