Buat perlengkapan dinamis untuk meniru respons API menggunakan Objek atau Fungsi JavaScript
1. Perkenalan
Seiring berkembangnya aplikasi, perubahan kecil pun dapat menyebabkan konsekuensi yang tidak terduga. Sebagai seorang pengembang, sulit untuk mengingat setiap kondisi dan setiap efek yang dapat ditimbulkan oleh suatu perubahan. Itulah sebabnya pengujian otomatis adalah cara terbaik untuk memastikan aplikasi Anda berfungsi dengan baik.
"Cypress"adalah alat pengujian yang luar biasa untuk aplikasi web berbasis javascript, dan dalam artikel ini saya akan berbagi pembelajaran, yang mungkin dapat membantu Anda meningkatkan efisiensi.
Jika Anda bekerja melawan API, Anda tidak dapat melakukan setiap panggilan saat Anda menguji. Terkadang Anda harus menggunakan "mocks", yang memungkinkan Anda meniru respons yang datang dari API dan menguji skenario tertentu tanpa benar-benar melakukan panggilan. Cypress memiliki solusi bawaan untuk melakukan hal itu: Anda dapat menyimpan perlengkapan ini di folder perlengkapan, atau menambahkan respons langsung ke fungsi cy.route(), biasanya sebagai JSON .
Memperbarui perlengkapan Anda terkadang bisa menyakitkan, dan terkadang Anda harus memeriksa sesuatu secara dinamis.
2. Menggunakan objek JavaScript sebagai tiruan dinamis
Contohnya adalah Anda membatasi sesuatu berdasarkan tanggal. Jika Anda tidak dapat menggunakan tiruan statis, Anda harus membuat sesuatu secara dinamis. Untungnya cypress memungkinkan Anda melakukan hal itu, menggunakan objek javascript sebagai respons. Contohnya mungkin terlihat seperti itu:
Variabel sessionpage yang kita deklarasikan pada baris 5 dan diakhiri pada baris 85adalah objek javascript yang akan kita tambahkan ke fungsicy.route() di baris 90 sebagai tanggapan. Di sana kami membuat 2 sesi, yang pertama dengan tanggal mulai/berakhir (baris 12 - baris 13) yang dinamis menggunakan (baris 4) hari ini sebagai referensi untuk mengujinya beberapa persyaratan dalam basis kode kami, dan yang kedua dengan tanggal tetap yang tidak menjadi masalah. Ini berhasil tetapi sangat mengacaukan pengujian kami.
Karena kita menggunakan JavaScript, kita dapat dengan mudah mengekstrak objek ini dan mengimpornya dalam pengujian kita, seperti yang kita lakukan dengan metode pembantu di komponen React kita:
Daripada menggunakan variabel lokal sessionpage, kami mengimpornya dari file baru yang kami buat (di baris 3) dan mengekspor objek yang sama sebagai default, dan menggunakannya di cy.route() fungsi (pada baris 10).
Ini menghapus pengujian kami (37 baris, bukan 117), membuatnya mudah dibaca, dan membuka lebih banyak kemungkinan pada objek tiruan kami.
3. Menggunakan fungsi JavaScript sebagai tiruan dinamis
Saya punya kasus ketika saya harus membuat 2 file tiruan berbeda hanya karena 1 atau 2 atribut berbeda. Untuk menghindari hal ini, Anda dapat membuat fungsi javascript sebagai tiruan dinamis. Anda dapat mengganti atribut statis dengan referensi dinamis, menambahkan status default, dan meneruskan nilai yang ingin Anda ubah. Struktur yang saya pilih mirip dengan reduksi/tindakan redux.
Dalam contoh terakhir ini saya membuat tiruannya menjadi lebih responsif, jadi jika Anda memerlukan status berbeda di blok it yang berbeda, Anda dapat meneruskan muatan berbeda sebagai respons jika Anda mengubah tiruan dinamis Anda menjadi sebuah fungsi.
Dalam file sessionpage.js saya menambahkan objek defaults sebagai default dan menggunakannya sebagai referensi dalam fungsi sessionpage() pada baris 22 dan baris 61. Jika saya tidak mewariskan apa pun, objek default akan digunakan. Namun jika saya memberikan argumen dalam fungsi yang akan menggantikan default yang saya tambahkan. Itulah yang saya lakukan di baris 10 di users_can_access_videocall_spec.js.
Karena Anda sekarang memiliki fungsi sebagai tiruan, Anda dapat melakukan lebih banyak lagi. Anda dapat menambahkan jumlah objek yang ingin Anda kembalikan ke payload, melakukan penghitungan, dan menambahkan efek acak. Kemungkinannya tidak terbatas!
