# 🧪 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**: _____________________________