Fix: Perbaikan pilihan provinsi tidak dapat dipilih pada form edit Suku

[habibie11]

issue #696

🎯 Deskripsi

Pull request ini memperbaiki bug pada antarmuka pengguna (UI) di halaman edit data Suku (/suku/{id}/edit), di mana daftar provinsi berhasil tampil di dropdown pencarian namun opsi provinsi tersebut tidak dapat dipilih (diklik) oleh pengguna.

Penyebab utamanya adalah kesalahan pemetaan (mapping) properti pada respons JSON dari API WilayahController::listWilayah. Frontend mencoba membaca nilai dari item.region_code yang bernilai undefined, padahal API mengembalikan atribut dengan nama kode_prov.

Dengan memperbaiki kunci pemetaan pada Javascript dari id: item.region_code menjadi id: item.kode_prov, opsi dropdown sekarang mendapatkan ID yang valid sehingga bisa diklik dan disimpan dengan sempurna.

Selain itu, PR ini menyertakan pembuatan Test E2E (End-to-End) menggunakan Playwright untuk memvalidasi alur interaksi Select2 di halaman edit Suku guna mencegah regresi di masa mendatang.

---

🛠️ Perubahan yang Dilakukan

1. resources/views/admin/suku/edit.blade.php

Fix — Koreksi pemetaan atribut ID Select2 provinsi:

• Mengubah referensi pemetaan dari item.region_code (yang tidak ada pada respon list_wilayah) menjadi item.kode_prov.

  processResults: function(response) {
      return {
          results: $.map(response.results, function(item) {
              return {
-                 id: item.region_code,
+                 id: item.kode_prov,
                  text: item.nama_prov,
              }
          }),

---

2. tests/e2e/suku.spec.js

Test — Penambahan dan perbaikan Test E2E untuk Edit Suku:

• Membuat dan memastikan ketersediaan dummy data Suku dengan menggunakan firstOrCreate melalui artisan tinker (mencakup data relasi Region dan WilayahAdat).
• Mencegat (mock) panggilan API api/wilayah/list_wilayah dan api/wilayah/adat/{id} untuk menjamin isolasi tes, kecepatan eksekusi, serta mencegah kegagalan akibat error 404 Not Found atau token yang tidak cocok di lingkungan testing.
• Mengotomatiskan navigasi langsung ke form edit, mengetik pencarian pada elemen Select2 provinsi, memverifikasi kemunculan hasil, hingga melakukan interaksi klik.

---

✅ Test Cases yang Diimplementasikan

• Saat membuka dropdown provinsi pada form edit Suku, opsi-opsi provinsi muncul.
• Saat mengetik nama provinsi (misal: "aceh"), dropdown berhasil menampilkan hasil pencarian.
• Saat mengklik hasil pencarian provinsi, provinsi berhasil terpilih dan teks dropdown berubah sesuai.
• Test E2E Playwright (suku.spec.js) dieksekusi dengan sukses dan seluruh pengujian (assertions) lolos tanpa adanya timeout atau elemen yang gagal dipilih.

---

📸 Cara Menjalankan Uji Coba Manual

1. Jalankan aplikasi web seperti biasa.
2. Buka menu Daftar Suku (/suku).
3. Klik tombol Edit (warna kuning/orange) pada salah satu data Suku yang tersedia (jika belum ada, silakan buat data baru).
4. Di form edit, klik kolom input Provinsi.
5. Ketik nama provinsi (contoh: "Aceh").
6. Klik hasil yang muncul di bawahnya.
   • ✅ Seharusnya: Dropdown tertutup, pilihan terpilih, dan nilai input internal (hidden) menyesuaikan dengan kode provinsi.

📸 Screenshot atau Video

sebelum
a43212a2-c6be-4b93-98ca-4f5217bd8463.webm

sesudah
b8f06f2d-d0a0-4196-a66e-a867ecfc25a6.webm

hasil test E2E

---

⚠️ Catatan Penting

Pengetesan E2E untuk komponen Select2 harus terus memalsukan (mock) HTTP request dari API adat/{id} yang ditrigger otomatis oleh Javascript saat halaman edit termuat untuk menghindari kemacetan (hang/timeout) akibat 404 Not Found. Test suku.spec.js sudah menyertakan mekanisme mocking tersebut.

[github-actions]

🔄 AI PR Review sedang antri di server...

Proses review akan segera dimulai di background — hasil akan muncul sebagai komentar setelah selesai.
Powered by CrewAI · PR #694