Menguji Alur Perubahan Email di React Tanpa Tertukar Link
Mengubah email akun tampak sepele. Padahal, ini sebenarnya merupakan sumber utama kesalahan pengujian.
Penguji sering kali tertukar link konfirmasi. Seseorang memperbarui alamat sementara orang lain membuka pesan tersebut lebih dulu. Hal ini menimbulkan kebingungan. Tim mulai berdebat apakah halaman React tersebut rusak atau apakah link tersebut milik pengguna yang salah.
Masalah ini terjadi karena tim memperlakukan kotak masuk (inbox) sebagai alat bersama. Anda harus memperlakukan kotak masuk sebagai bagian dari kontrak fitur.
Perjalanan perubahan email sangatlah rapuh. Proses ini mengubah akun yang sedang aktif. Pengguna sudah dalam keadaan login. Sering kali terjadi persaingan (race condition) antara status email yang tertunda (pending) dan email yang telah dikonfirmasi.
Masalah umum meliputi:
- Pesan konfirmasi masuk ke kotak masuk bersama tanpa cara untuk melacaknya.
- UI menampilkan data lama bahkan setelah link mengonfirmasi permintaan baru.
- Backend diperbarui, tetapi cache frontend masih menampilkan alamat lama.
- Seorang penguji mengklik link yang ditujukan untuk orang lain.
Kotak surat bersama menyulitkan pencarian penyebab bug. Gunakan alamat email burner yang unik untuk setiap sesi pengujian, alih-alih hanya menggunakan satu alias staging.
Ikuti urutan bersih berikut:
- Buat pengguna uji.
- Ajukan perubahan email di layar pengaturan React.
- Kirim email melalui jalur backend yang sebenarnya.
- Arahkan pesan ke kotak masuk yang hanya dimiliki oleh pengujian ini.
- Buka link tersebut dan verifikasi bahwa layar pengaturan diperbarui dengan alamat baru.
Ini menjaga kepemilikan tetap jelas. Anda akan tahu link mana yang berasal dari pengguna mana.
Untuk aplikasi React, ikuti satu aturan tambahan. Lakukan asersi (assert) pada layar hanya setelah pembacaan data yang segar. Jangan percaya pada optimistic client state. Sebuah mutasi mungkin mengembalikan status sukses, tetapi memuat ulang halaman dapat memunculkan kembali nilai lama jika backend belum menyelesaikan perubahan tersebut.
Pengujian end-to-end yang baik harus memverifikasi poin-poin ini:
- Email dikirim ke alamat yang sedang diproses, bukan ke alamat lama.
- Link mengarah ke environment host yang benar.
- Link memperbarui catatan akun.
- Alamat lama menghilang setelah melakukan refetch.
- Menggunakan kembali link yang sama gagal dengan aman.
Jika cache React query atau client store Anda usang (stale), fitur tersebut akan terasa rusak. Pelanggan hanya peduli apakah layar pengaturan menampilkan realitas yang sebenarnya.
Anda juga harus menambahkan ID korelasi (correlation ID) ke setiap permintaan. Ini membantu Anda melacak permintaan dari pengguna hingga pengiriman pesan dan konfirmasi akhir.
Kotak masuk yang terisolasi tidak menggantikan unit test. Gunakan unit test untuk validasi formulir dan error API. Gunakan alur kotak masuk untuk membuktikan bahwa jalur pelanggan yang sebenarnya berfungsi di seluruh sistem.
Sebelum Anda merilis perubahan pada pengaturan akun, periksa item-item berikut:
- Ajukan perubahan dari UI React yang sebenarnya.
- Pastikan pesan masuk ke kotak masuk khusus untuk sesi pengujian tersebut.
- Verifikasi bahwa alamat baru muncul setelah melakukan refetch.
- Pastikan link lama tidak dapat digunakan kembali.
- Pastikan log audit menunjukkan siapa yang memulai perubahan.
Ini mencegah bug di mana semuanya tampak baik-baik saja secara terisolasi tetapi gagal di dunia nyata.