FluentStack

Auth-Adjacent Test Cases

Mode tersedia: dark, light, paper
MasukDaftar
Advanced · Level 13: TestingAdvanced70 menitBahasa Indonesia

Auth-Adjacent Test Cases

Menguji UI yang berubah berdasarkan session atau akses tanpa membuat test bergantung pada provider auth nyata.

StatusMemuat progres
ProgresMemuat...

...

Memuat progres

Menyiapkan langkah berikutnya

Tujuan belajar

  • Membedakan session-aware UI dari test auth provider penuh
  • Menyediakan session mock kecil untuk scenario signed-in dan guest
  • Menguji action user-visible untuk tiap state akses
  • Menjelaskan batas confidence dari test auth-adjacent
AuthenticationSession-aware UIIntegration TestingAccess States

Isi lesson

6 blok
  1. 1.
    Uji keputusan UI dari session, bukan provider auth productionBelum selesaiWajib
  2. 2.
    Test UI guest tanpa login ke backendBelum selesaiWajib
  3. 3.
    Coding practiceBelum selesaiWajib
  4. 4.
    Cek pemahamanBelum selesaiWajib
  5. 5.
    Jangan memasukkan credential asli ke testBelum selesaiWajib
  6. 6.
    RingkasanBelum selesaiWajib

Uji keputusan UI dari session, bukan provider auth production

Wajib

Banyak feature berubah berdasarkan apakah learner sudah memiliki session: guest melihat button Masuk untuk menyimpan bookmark, sedangkan learner signed-in melihat bookmark tersimpan atau action lain. Integration test dapat memberi session object kecil sebagai data masuk dan memeriksa keputusan UI itu. Test ini tidak perlu login ke provider sebenarnya, membuat user database, atau memakai token real. Tujuannya adalah memastikan feature merespons state akses yang telah diterima dengan benar.

Bagian ini memengaruhi progres lesson.

Test UI guest tanpa login ke backend

Wajib
tsx
it("asks a guest to sign in before saving a course", () => {
  render(<CourseSaveAction session={null} />);

  expect(
    screen.getByRole("link", { name: "Masuk untuk menyimpan" }),
  ).toBeInTheDocument();
});

session null adalah input scenario, bukan hasil login sungguhan. Test mencari link yang dapat ditemukan guest dan tidak membaca token, cookie, atau implementation provider. Test auth provider, redirect middleware, dan database policy memerlukan scope serta environment yang berbeda.

Bagian ini memengaruhi progres lesson.

Coding practice

WajibDibuka di workspace khusus

Test session-aware course access

Uji action save course untuk guest dan learner signed-in memakai data session mock. Preview tidak menjalankan provider auth.

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.

5 cek otomatis5 checklist
Belum selesaiBuka practice

Cek pemahaman

WajibJawab dulu

Cek pemahaman singkat

Apa yang dibuktikan test session-aware UI dengan session mock?

Progres lesson naik setelah jawaban benar.

Peringatan

Wajib

Jangan memasukkan credential asli ke test

Jangan menaruh password, token, API key, atau akun production di source test. Gunakan session mock dengan field minimum yang dibutuhkan UI. Jika flow real login perlu diuji, gunakan environment khusus, akun test yang dikelola dengan aman, dan scope E2E yang jelas.

Bagian ini memengaruhi progres lesson.

Ringkasan

Wajib
  • Session mock membantu menguji keputusan UI untuk guest dan user signed-in.
  • Test mencari action yang user lihat, bukan token atau detail provider.
  • Mock session tidak membuktikan backend auth, middleware, atau RLS production.
  • Credential asli tidak boleh berada di practice atau source test.
  • Berikutnya, Uji Kompetensi menggabungkan scope flow, MSW, state API, dan batas confidence mock.

Bagian ini memengaruhi progres lesson.

Langkah berikutnya

Selesaikan bagian penting lesson ini

Lanjutkan blok wajib berikutnya: Uji keputusan UI dari session, bukan provider auth production.

Memuat progresReview module