Testing Permintaan Jaringan Menggunakan Cypres
Kami telah membahas alasan umum mengapa kami memilih untuk menggunakan Cypress di posting blog kami sebelumnya tentang pengujian. Pada artikel berikutnya, kita akan membahas detail tentang bagaimana Cypress dapat digunakan untuk menjalankan pengujian permintaan jaringan.
Langkah paling penting untuk memperbaiki bug adalah menemukan tes yang dapat direproduksi untuk digunakan. Untuk Java, kami dapat menggunakan Symflower tetapi dalam TypeScript/Angular menggunakan Jasmine, akan sulit untuk menulis tes yang dapat direproduksi, yang merupakan salah satu alasan mengapa kami memilih Cypress untuk pekerjaan tersebut.
Kami akan mulai dengan skenario dasar. Katakanlah kami melihat bahwa kami memiliki bug, yang disebabkan oleh kebocoran langganan yang menyebabkan beberapa permintaan backend. Ini dapat disebabkan oleh tidak berhenti berlangganan dari yang dapat diamati.
Sebagai contoh:
this.applicationStore.rootFile$.subscribe((rootFile: File) => {
...
});Langganan ini terikat dengan konteks itu sendiri, dan jika tidak ada acara berhenti berlangganan, di mana komponen dihancurkan, misalnya, seperti di atas, semuanya dapat menyebabkan beberapa permintaan dibuat.
ngOnDestroy() {
if (this.rootFileSubscription) {
this.rootFileSubscription.unsubscribe();
}
}Kami ingin menghindari "perbaikan cepat" untuk masalah kami, dan sebagai gantinya, ingin membuat pengujian di mana kami menjamin bahwa permintaan ini tidak akan dipanggil berkali-kali. Di sinilah Cypress muncul.
it.only('No duplicate network calls', () => {
cy.intercept('GET', '**/projects/*/files/**').as('fileRequest');
cy.wait('@fileRequest', { timeout: 10000 });
cy.get('@fileRequest.all').should('have.length', 1);
});Di baris pertama, kami mencegat permintaan GET dengan pola pencocokan yang diberikan, dan mereferensikannya untuk digunakan nanti dengan nama fileRequest".
Baris berikutnya menunggu permintaan selesai, lalu kita cukup memeriksa bahwa semua fileRequest yang cocok tidak cocok lebih dari satu kali.
Saat menulis tes itu sendiri, pertama, kami mendapatkan yang merah dengan gaya TDD. Setelah perbaikan selesai, kita dapat melihat bahwa itu berfungsi sebagaimana mestinya, dan dijamin tidak akan terjadi lagi di masa mendatang.
Demikian pembahasan kali ini semoga artikel ini dapat bermanfaat dan jangan ragu jika ada kurang paham maka tinggalkan pertanyaan Anda di kolom komentar ya!
Terimakasih