React'ta Bağlantıları Karıştırmadan E-posta Değiştirme Akışlarını Test Edin
Bir hesap e-postasını değiştirmek küçük bir işlem gibi görünür. Aslında, test hatalarının ana kaynaklarından biridir.
Test uzmanları genellikle onay bağlantılarını karıştırır. Bir kişi adresi güncellerken diğeri mesajı ilk açan kişi olabilir. Bu durum kafa karışıklığına yol açar. Ekip, React sayfasının mı bozuk olduğu yoksa bağlantının yanlış kullanıcıya mı ait olduğu konusunda tartışmaya başlar.
Bu sorun, ekiplerin gelen kutusunu paylaşılan bir araç olarak görmesinden kaynaklanır. Gelen kutusunu, özelliğin (feature) sözleşmesinin bir parçası olarak ele almalısınız.
E-posta değiştirme süreçleri hassastır. Aktif bir hesabı değiştirirler. Kullanıcı zaten oturum açmıştır. Bekleyen e-posta ile onaylanmış e-posta durumları arasında genellikle bir yarış (race condition) söz konusudur.
Yaygın sorunlar şunları içerir:
- Onay mesajları, takip edilebilecek bir yol olmayan paylaşılan bir gelen kutusuna gelir.
- Bağlantı yeni isteği onayladıktan sonra bile UI eski verileri gösterir.
- Backend güncellenir ancak frontend önbelleği (cache) eski adresi gösterir.
- Bir test uzmanı, başka birine ait olan bir bağlantıya tıklar.
Paylaşılan bir posta kutusu, bir hatanın nedenini bulmayı zorlaştırır. Tek bir staging takma adı (alias) yerine, her test çalışması için benzersiz bir geçici (burner) e-posta adresi kullanın.
Şu temiz sıralamayı izleyin:
- Bir test kullanıcısı oluşturun.
- React ayarlar ekranında bir e-posta değişikliği talep edin.
- E-postayı gerçek backend yolu üzerinden gönderin.
- Mesajı yalnızca bu teste ait olan bir gelen kutusuna yönlendirin.
- Bağlantıyı açın ve ayarlar ekranının yeni adresle yenilendiğini doğrulayın.
Bu, sahipliği net tutar. Hangi bağlantının hangi kullanıcıdan geldiğini bilirsiniz.
React uygulamaları için fazladan bir kural uygulayın. Ekranı ancak taze bir veri okumasından sonra doğrulayın (assert). İyimser istemci durumuna (optimistic client state) güvenmeyin. Bir mutasyon başarıyla dönebilir, ancak backend değişikliği kesinleştirmediyse sayfa yenilemesi eski değeri geri getirebilir.
İyi bir uçtan uca (end-to-end) test şu noktaları doğrulamalıdır:
- E-posta eski adrese değil, bekleyen adrese gitti.
- Bağlantı doğru ortam (environment) host'una işaret ediyor.
- Bağlantı hesap kaydını güncelliyor.
- Yeniden veri çekme (refetch) işleminden sonra eski adres kayboluyor.
- Aynı bağlantıyı tekrar kullanmak güvenli bir şekilde başarısız oluyor.
Eğer React query önbelleğiniz veya istemci mağazanız (client store) güncel değilse, özellik bozukmuş gibi hissettirir. Müşteri sadece ayarlar ekranının gerçeği yansıtıp yansıtmadığıyla ilgilenir.
Her isteğe bir ilişki kimliği (correlation ID) de eklemelisiniz. Bu, bir isteği kullanıcıdan mesaj teslimatına ve nihai onaya kadar izlemenize yardımcı olur.
İzole gelen kutuları birim testlerin (unit tests) yerini tutmaz. Form doğrulama ve API hataları için birim testleri kullanın. Gelen kutusu akışını ise gerçek müşteri yolunun tüm sistemlerde çalıştığını kanıtlamak için kullanın.
Hesap ayarlarına değişiklikleri göndermeden önce şu maddeleri kontrol edin:
- Değişikliği gerçek React UI üzerinden talep edin.
- Mesajın çalışmaya özel bir gelen kutusuna düştüğünü onaylayın.
- Yeniden veri çekme (refetch) işleminden sonra yeni adresin göründüğünü doğrulayın.
- Eski bağlantının tekrar kullanılamayacağından emin olun.
- Denetim günlüklerinin (audit logs) değişikliği kimin başlattığını gösterdiğini onaylayın.
Bu, her şeyin izole bir şekilde iyi göründüğü ancak gerçek dünyada başarısız olduğu hataları önler.