Belajar Cypress - API Testing & Network Stubbing

#Pendahuluan

Jaringan adalah sumber flakiness terbesar kedua setelah timing. Episode 12 fokus pada cy.intercept(): men-stub API, menguji respons error, retry, dan fallback, memvalidasi UI dengan data tiruan, serta full-stack testing dengan backend sungguhan.

Menguasai stubbing berarti kalian bisa menguji seluruh sisi UI tanpa bergantung pada ketersediaan backend — dan memaksa aplikasi menghadapi skenario yang jarang terjadi di produksi.

#Menggunakan cy.intercept untuk Stub API

#Menangkap dan Mengganti Respons

cy.intercept() bekerja di level jaringan: ia menangkap request yang cocok dengan pola URL dan bisa mengganti responsnya:

Stub respons GET

cy.intercept("GET", "/api/produk", {
  statusCode: 200,
  body: [
    { id: 1, nama: "Kopi", harga: 45000 },
    { id: 2, nama: "Teh", harga: 20000 },
  ],
}).as("produk");

cy.intercept("GET", "/api/produk", ...) mencegat request GET ke pola tersebut dan mengembalikan data tiruan. .as("produk") memberi alias agar test bisa menunggu event-nya.

#Menunggu Request yang Tertangkap

Setelah alias dibuat, test menunggu request dan bisa memeriksa detailnya:

Menunggu dan memeriksa request

cy.visit("/katalog");
cy.wait("@produk").its("response.statusCode").should("eq", 200);
cy.get("[data-cy=daftar-produk]").children().should("have.length", 2);

cy.wait("@produk") menunggu sampai request yang cocok terjadi. cy.get("[data-cy=daftar-produk]") lalu memverifikasi UI merender data yang dikirim stub.

#Testing Error Responses, Retries, dan Fallback

#Memaksa Error dan Retry

Respons error sering tidak bisa direproduksi tanpa menurunkan server. Dengan stub, kalian bisa memaksanya kapan saja:

Stub error lalu sukses

let gagal = true;
 
cy.intercept("GET", "/api/produk", (req) => {
  if (gagal) {
    req.reply({ statusCode: 500, body: { error: "internal" } });
    gagal = false;
  } else {
    req.continue();
  }
}).as("produkRetry");

req.reply({ statusCode: 500, ... }) mengirim error pada percobaan pertama. req.continue() meneruskan request ke server asli pada percobaan kedua — sempurna untuk menguji mekanisme retry aplikasi tanpa skenario yang rumit.

#Fallback Flow

Fallback juga bisa diuji: simulasikan API yang mati dan pastikan UI menampilkan pesan yang benar:

Menguji fallback offline

cy.intercept("GET", "/api/produk", (req) => {
  req.reply({ statusCode: 503, body: {} });
}).as("produkDown");
 
cy.visit("/katalog");
cy.wait("@produkDown");
cy.contains("Sedang tidak tersedia").should("be.visible");

cy.wait("@produkDown") menunggu respons 503 yang di-stub. Assertion cy.contains("Sedang tidak tersedia") memastikan UI menampilkan pesan fallback, bukan halaman kosong.

#Validating UI dengan Mocked Backend Data

#Skenario dengan Beragam Data

Stubbing membebaskan test dari data nyata yang bisa berubah. Kalian bisa menguji state edge dengan dataset terkontrol:

Validasi UI dengan data tiruan

it("menampilkan harga diskon", () => {
  cy.intercept("GET", "/api/produk/1", {
    body: { id: 1, nama: "Kopi", harga: 45000, diskon: 0.2 },
  });
 
  cy.visit("/produk/1");
  cy.get("[data-cy=harga-final]").should("have.text", "Rp36.000");
});

cy.intercept("GET", "/api/produk/1", { body: ... }) menentukan data per produk. Test memvalidasi perhitungan harga yang tampil di UI, tanpa perlu backend yang benar-benar menyimpan produk tersebut.

#Kombinasi dengan Fixtures

Untuk dataset yang besar, kombinasikan dengan fixtures dari episode 6:

Stub memakai fixture

cy.intercept("GET", "/api/produk", { fixture: "api/produk.json" }).as("katalog");

cy.intercept("GET", "/api/produk", { fixture: "api/produk.json" }) memuat respons dari file fixture. Pola ini membuat data mudah dikelola dan dipakai ulang lintas test.

#Full-Stack Testing dengan Backend Integration

#Kapan Tidak Men-Stub

Stubbing bukan segalanya. Ketika tujuan test adalah memverifikasi kerja sama frontend dan backend, kalian perlu menjalankan keduanya. Pakai cy.request() untuk menyiapkan data nyata:

Menyiapkan data via request

beforeEach(() => {
  cy.request("POST", "/api/seed", { jumlah: 5 });
  cy.visit("/katalog");
});

cy.request("POST", "/api/seed", ...) memanggil API backend secara langsung untuk menyiapkan state. Ini menghindari interaksi UI yang lambat untuk hal yang hanya setup, sementara test inti tetap memakai backend asli.

#Memilih Strategi yang Tepat

Aturannya: stub untuk menguji UI dalam isolasi dan skenario edge; gunakan backend asli untuk menguji integrasi. Campuran keduanya dalam satu suite adalah praktik umum — kuncinya adalah mendokumentasikan mana yang mana agar tim tidak bingung saat test gagal.

#Penutup

Episode 12 menjadikan jaringan sebagai area yang terkendali: cy.intercept() untuk men-stub API, menguji error, retry, dan fallback, memvalidasi UI dengan data tiruan atau fixtures, serta full-stack testing dengan backend sungguhan lewat cy.request().

Inti yang harus dibawa pulang:

• cy.intercept(pola, respons) men-stub request; .as() memberi alias.
• req.reply() dan req.continue() mengontrol respons per percobaan.
• Error, retry, dan fallback bisa diuji tanpa menurunkan server.
• Stub paling cocok untuk isolasi UI; backend asli untuk integrasi.
• Gunakan cy.request() untuk setup data tanpa interaksi UI yang lambat.

Di episode 13 selanjutnya kita akan membahas security dan test stability — isolasi test data dan environment, menjalankan test dengan kredensial aman, menghindari flakiness dengan selector stabil, serta monitoring dan menjaga reliabilitas.