Uji Kompetensi Integration and API Mocking
Checkpoint untuk menilai kesiapan menguji flow feature dengan mocked API response, state async, dan UI session-aware.
Yang dicek
- Menentukan scope feature-level test yang masuk akal
- Menulis handler success dan failure pada network boundary
- Memeriksa state API async yang terlihat user
- Menjelaskan batas confidence dari API dan session mock
Isi lesson
6 blok- 1.Checkpoint: uji flow yang user alami saat data berubahBelum selesaiWajib
- 2.QuizBelum selesaiWajib
- 3.Coding practiceBelum selesaiWajib
- 4.Writing practiceBelum selesaiWajib
- 5.Gunakan docs untuk setup dan membaca failure test asyncBelum selesaiWajib
- 6.RingkasanBelum selesaiWajib
Checkpoint: uji flow yang user alami saat data berubah
WajibPilih satu feature seperti CourseCatalog, bukan seluruh aplikasi. Handler MSW memberi success dan failure response pada batas network supaya component tetap mengikuti alur request normal. Test kemudian memeriksa loading, course yang tampil, atau alert failure melalui query yang user-oriented. Session mock boleh dipakai untuk menguji keputusan UI guest dan signed-in, tetapi tidak menggantikan backend auth, database policy, atau health check API asli.
Bagian ini memengaruhi progres lesson.
Quiz
WajibUji Kompetensi Integration and API Mocking
Jawab pertanyaan satu per satu. Kamu bisa ulang quiz jika belum mencapai target lulus.
Target lulus
70/100
Skor terbaik
0/100
Status
Belum dikerjakan
Blok ini wajib untuk menyelesaikan lesson. Progres quiz naik setelah skor mencapai target lulus.
Pertanyaan 1 dari 5
Target lulus: 70
Manakah test yang paling sesuai untuk integration scope CourseCatalog?
Coding practice
WajibDibuka di workspace khususBuild course API integration checkpoint
Lengkapi checkpoint test CourseCatalog dengan handler MSW success dan failure serta assertion async pada UI. Preview tidak menjalankan API atau Vitest.
Tujuan awal: Fokus di tab TSX.
Practice ini dibuka di workspace khusus. Buka practice untuk memakai editor, preview, dan cek otomatis.
Tombol selesai aktif setelah semua validasi wajib lolos.
Writing practice
WajibLatihan menulis
Tulis implementation note untuk satu integration test feature data. Sebutkan user goal, network request yang dimock, mock success dan failure response, loading/success/error UI yang diassert, query async yang dipilih dan alasannya, serta satu hal yang test ini tidak buktikan tentang backend atau auth. Jelaskan command yang akan kamu jalankan di local project tanpa mengklaim practice workspace menjalankan test.
Tulis draft dulu sebelum menandai writing practice selesai.
0/550 karakter
Checklist panduan
Checklist ini hanya panduan. Kamu tidak harus mencentang semuanya.
Documentation Bridge
WajibGunakan docs untuk setup dan membaca failure test async
Baca satu bagian yang sesuai dengan setup project-mu, lalu jalankan satu scenario success dan satu scenario failure secara lokal. Jangan menambah lifecycle, cache, atau mocking kompleks sebelum handler kecilmu dapat dipahami.
MSW
Getting started and network mocking
Fokus baca
- Konsep request interception pada network boundary.
- Handler HTTP dan response JSON untuk scenario test.
- Cara memakai MSW pada environment yang sesuai project.
Abaikan dulu
- GraphQL, mock generation, dan handler lifecycle kompleks.
- Mock API pihak ketiga atau setup production observability.
Testing Library
Async Methods
Fokus baca
- Kapan memakai findBy untuk output yang muncul async.
- Mengapa async query perlu await.
- Kapan waitFor berguna dan mengapa tidak dipakai sembarangan.
Abaikan dulu
- Timeout custom sebagai cara menutupi test yang salah.
- Polling atau helper async di luar scenario feature-mu.
Testing Library
Appearance and Disappearance
Fokus baca
- Membedakan getBy, findBy, dan queryBy pada element yang berubah.
- Menguji loading atau error UI yang tampil dan hilang.
- Menggunakan query untuk assertion element tidak ada.
Abaikan dulu
- Menulis assertion absence pada setiap node UI.
- Optimasi test suite sebelum scenario dasar stabil.
Aksi setelah membaca
Di Local React App atau Local Next.js App, pilih satu feature data. Buat handler success dan failure, jalankan dua test yang memeriksa loading lalu output akhir, dan tulis satu kalimat tentang hal yang belum dibuktikan mock tersebut. Jangan tandai selesai hanya karena cek struktur practice sudah lolos.
Bagian ini memengaruhi progres lesson.
Ringkasan
Wajib- Integration test memilih satu flow feature yang berharga, bukan seluruh aplikasi.
- MSW memock response di network boundary sehingga UI tetap mengikuti alur request biasa.
- Loading, success, dan error adalah contract UI yang perlu diuji dengan query yang tepat.
- Session mock memberi confidence pada keputusan UI, bukan pada provider auth atau backend production.
- Berikutnya, End-to-End Testing Strategy memilih critical journey yang perlu berjalan di browser sungguhan.
Bagian ini memengaruhi progres lesson.
Langkah berikutnya
Selesaikan bagian wajib checkpoint ini
Lanjutkan blok wajib berikutnya: Checkpoint: uji flow yang user alami saat data berubah.