EAS-202310715274-DimasHendriPamungkas/TESTING_GUIDE.md

🧪 TESTING GUIDE - Panduan Uji Coba UI Baru

🎯 Objective

Memverifikasi bahwa semua UI screens berfungsi dengan benar sesuai mockup yang diberikan.

---

📱 Test Case 1: Login Screen

Pre-requisite

• App terbuka dan menampilkan LoginScreen
• Tidak ada user yang login sebelumnya

Steps

1. Lihat email field dengan icon envelope (✉️)
2. Lihat password field dengan icon lock (🔒)
3. Lihat button LOGIN berwarna putih dengan teks hijau

Expected Result

✅ UI sesuai mockup (green theme #2E7D32) ✅ Email field active dan bisa diinput ✅ Password field active, input tersembunyi ✅ Login button muncul

Test Case 1.1: Invalid Input

Steps:

1. Kosongkan email field
2. Kosongkan password field
3. Klik LOGIN

Expected Result: ❌ Error message "Email dan Password harus diisi"

Test Case 1.2: Valid Input

Steps:

1. Input email: budi@student.com
2. Input password: password123
3. Klik LOGIN

Expected Result: ✅ Navigate ke MenuScreen

---

📱 Test Case 2: Menu Screen

Pre-requisite

• Sudah login (dari Test Case 1.2)

Steps

1. Lihat greeting "Selamat Datang, Budi!"
2. Lihat 2 menu cards:
   • 📅 Jadwal Kuliah
   • 📋 Riwayat Absensi
3. Lihat button "MULAI ABSENSI" berwarna putih
4. Lihat icon X di top-right (logout)

Expected Result

✅ Menu Screen muncul dengan layout benar ✅ Greeting text visible ✅ 2 menu cards dengan icon dan deskripsi ✅ Button "MULAI ABSENSI" berwarna putih dengan teks hijau ✅ Tombol logout (X) di corner

Test Case 2.1: Click Jadwal Kuliah

Steps:

1. Klik card "Jadwal Kuliah"

Expected Result: ✅ Navigate ke Schedule screen (jika ada)

Test Case 2.2: Click Riwayat Absensi

Steps:

1. Klik card "Riwayat Absensi"

Expected Result: ✅ Navigate ke HistoryScreen

Test Case 2.3: Click MULAI ABSENSI

Steps:

1. Klik button "MULAI ABSENSI"

Expected Result: ✅ Navigate ke AttendanceScreen

Test Case 2.4: Click Logout (X)

Steps:

1. Klik icon X di top-right
2. Confirm logout

Expected Result: ✅ Navigate ke LoginScreen (user logged out)

---

📱 Test Case 3: Attendance Screen

Pre-requisite

• Dari Menu screen, klik "MULAI ABSENSI"
• AttendanceScreen visible

Steps

1. Lihat top bar hijau dengan title "Absen Kehadiran"
2. Lihat back arrow (←) di top-left
3. Lihat 4 sections:
   • User Info (nama, NPM)
   • Lokasi (dengan status ✓/✗)
   • Mata Kuliah (input field) ← NEW
   • Foto Selfie (dengan button)
4. Lihat button "KIRIM ABSENSI" hijau di bawah

Expected Result

✅ Attendance screen layout sesuai mockup ✅ Top bar berwarna hijau (#2E7D32) ✅ Semua sections visible ✅ Mata kuliah field tersedia (NEW)

Test Case 3.1: Update Location

Steps:

1. Di section Lokasi, klik "Perbarui Lokasi"
2. Berikan permission akses lokasi
3. Tunggu GPS initialize

Expected Result: ✅ Lokasi coordinates ditampilkan (Lat, Lon, Jarak) ✅ Status: ✓ "Dalam Area Absensi" atau ✗ "Luar Area" ✅ Icon location berubah warna (hijau/merah)

Test Case 3.2: Take Photo

Steps:

1. Di section Foto Selfie, klik "AMBIL FOTO"
2. Berikan permission akses kamera
3. Ambil foto selfie

Expected Result: ✅ Kamera app terbuka ✅ Foto berhasil diambil ✅ Section Foto Selfie status berubah ke "✓ Foto berhasil diambil"

Test Case 3.3: Input Mata Kuliah ← NEW

Steps:

1. Di section Mata Kuliah, klik input field
2. Type: "Pemrograman Mobile"
3. Confirm input

Expected Result: ✅ Text "Pemrograman Mobile" tersimpan di field ✅ Field tidak kosong ✅ Input bisa diedit

Test Case 3.4: Submit Attendance

Steps:

1. Pastikan lokasi valid (✓)
2. Pastikan foto sudah diambil (✓)
3. Pastikan mata kuliah sudah diisi (✓)
4. Klik "KIRIM ABSENSI"
5. Tunggu loading selesai

Expected Result: ✅ Loading spinner muncul ✅ Status message: "⏳ Mengirim absensi..." ✅ Request terkirim ke N8N ✅ Navigate ke SuccessScreen

Test Case 3.5: Submit Without Mata Kuliah

Steps:

1. Kosongkan mata kuliah field
2. Klik "KIRIM ABSENSI"

Expected Result: ❌ Error message: "⚠️ Harap masukkan nama mata kuliah terlebih dahulu" ❌ Submit button disabled/tidak berfungsi

Test Case 3.6: Back Button

Steps:

1. Klik arrow (←) di top-left

Expected Result: ✅ Navigate kembali ke MenuScreen

---

📱 Test Case 4: Success Screen

Pre-requisite

• Dari Test Case 3.4, submit attendance berhasil

Steps

1. Lihat background hijau (#2E7D32)
2. Lihat icon checkmark besar dalam lingkaran putih (✅)
3. Lihat title "Absensi Berhasil!"
4. Lihat 2 status indicators:
   • ✓ Lokasi Tervalidasi
   • ✓ Foto Terekam
5. Lihat card dengan waktu dan status
6. Lihat button "LIHAT RIWAYAT" putih

Expected Result

✅ Success screen muncul dengan layout sesuai mockup ✅ Large checkmark icon visible (✅) ✅ Green background (#2E7D32) ✅ White button "LIHAT RIWAYAT" ✅ All text visible dan readable

Test Case 4.1: View History

Steps:

1. Klik button "LIHAT RIWAYAT"

Expected Result: ✅ Navigate ke HistoryScreen ✅ List absensi visible ✅ Data mata kuliah yang baru disubmit terlihat

Test Case 4.2: Back to Menu (Alternative)

Steps:

1. Dari HistoryScreen, klik back button
2. Kembali ke MenuScreen

Expected Result: ✅ Navigate ke MenuScreen ✅ Bisa klik "MULAI ABSENSI" lagi untuk absensi berikutnya

---

🎨 UI/UX Test Cases

Test Case 5.1: Color Consistency

Steps:

1. Lihat semua screen
2. Check warna yang digunakan

Expected Result: ✅ Green (#2E7D32) konsisten di semua top bars ✅ Buttons putih dengan teks hijau ✅ Cards dengan background hijau muda ✅ Status indicators: hijau untuk valid, merah untuk invalid

Test Case 5.2: Text Readability

Steps:

1. Lihat semua text di setiap screen
2. Check apakah text mudah dibaca

Expected Result: ✅ All text visible dan readable ✅ No text cutoff ✅ Font size sesuai (headlines, body, labels) ✅ Color contrast sufficient

Test Case 5.3: Button Usability

Steps:

1. Klik semua buttons yang tersedia
2. Check responsiveness

Expected Result: ✅ Semua button responsive ✅ Visual feedback saat ditekan ✅ Disabled state jelas ✅ Touch target size adequate (min 48dp)

Test Case 5.4: Responsive Layout

Steps:

1. Test di berbagai ukuran layar:
   • Small phone (4.7")
   • Medium phone (5.5")
   • Large phone (6.5")
2. Rotate landscape

Expected Result: ✅ Layout tetap rapi di semua ukuran ✅ Text tidak cut off ✅ Buttons mudah diklik ✅ Landscape mode works correctly

---

🔧 Technical Test Cases

Test Case 6.1: Navigation State

Steps:

1. Navigate: Login → Menu → Attendance → Success
2. Klik back button
3. Navigate forward lagi
4. Check app state

Expected Result: ✅ State preserved correctly ✅ Data tidak hilang ✅ Navigation smooth tanpa glitch ✅ Back stack correct

Test Case 6.2: Mata Kuliah Data Persistence

Steps:

1. Submit absensi dengan mata kuliah: "Database"
2. Go to HistoryScreen
3. Check apakah "Database" tersimpan

Expected Result: ✅ Mata kuliah "Database" visible di history ✅ Data persisted ke database ✅ Data dikirim ke N8N webhook

Test Case 6.3: Field Reset After Submit

Steps:

1. Submit absensi dengan all fields filled
2. Kembali ke Menu
3. Klik "MULAI ABSENSI" lagi
4. Check semua fields kosong

Expected Result: ✅ Mata kuliah field kosong ✅ Foto field reset ✅ Lokasi field kosong (need to update again) ✅ Ready untuk absensi berikutnya

Test Case 6.4: Error Handling

Steps:

1. Test dengan no location (disable GPS)
2. Test dengan no photo
3. Test dengan empty mata kuliah
4. Test dengan network error

Expected Result: ✅ Proper error messages displayed ✅ Submit button disabled appropriately ✅ User guided ke fix error ✅ No app crash

---

📊 Test Results Summary

Color Theme

• Green #2E7D32 applied correctly
• White buttons visible
• Success green #4CAF50 shows
• Error red #f44336 shows

Screens

• LoginScreen displays correctly
• MenuScreen displays correctly
• AttendanceScreen displays correctly
• SuccessScreen displays correctly
• All screens responsive

Features

• Mata kuliah field works
• Location validation works
• Photo capture works
• Submit functionality works
• Navigation flows correctly

Data

• Mata kuliah saved
• Data sent to N8N
• Data visible in history
• No data loss

---

🎯 Pass/Fail Criteria

PASS if:

✅ All color scheme correct ✅ All screens display as mockup ✅ All buttons functional ✅ Mata kuliah feature works ✅ Navigation smooth ✅ No crashes ✅ Data persisted correctly ✅ Responsive layout

FAIL if:

❌ Colors don't match ❌ Screen layout wrong ❌ Buttons don't work ❌ Mata kuliah not saved ❌ Navigation broken ❌ App crashes ❌ Data lost ❌ Layout broken

---

🚀 Go-Live Checklist

Before deploying:

• All test cases PASS
• No crashes found
• UI matches mockup
• Mata kuliah feature verified
• Database integration confirmed
• N8N webhook tested
• Performance acceptable
• Documentation reviewed

---

Test Date: _______________ Tester Name: _______________ Status: ☐ PASS ☐ FAIL ☐ PARTIAL Notes: _____________________________