# Global Risk Map - Testing & Verification Guide

## 🚀 Quick Start Testing

### Prerequisites
- Application running locally or on test server
- User logged in (authenticated)
- Navigate to `/user/dashboard`

---

## ✅ Functional Testing

### 1. Marker Interactions
**Test**: Click on markers to open risk panel

```
Steps:
1. Look at map - should see colored markers
2. Click any marker (ideally a red/high-risk one)
3. Observe: Panel slides in from RIGHT (desktop) or UP (mobile)
4. Panel shows: Flag, country name, region, close button (✕)
5. Click close button (✕) → Panel slides back out
6. Map expands back to full width
```

**Expected Results**:
- ✅ Panel opens smoothly (300ms transition)
- ✅ All fields populated instantly (no loading spinner)
- ✅ Map shrinks without jank
- ✅ Close button responsive
- ✅ Map resumes full size after close

---

### 2. Search Functionality
**Test**: Search for countries

```
Steps:
1. Click search box at top: "Search country or port..."
2. Type "indo" (at least 2 chars)
3. Dropdown appears with results
4. Should see: Indonesia + other matches
5. Each result shows: Flag, name, region, risk score (color-coded)
6. Click on "Indonesia"
7. Observe: Map pans to Indonesia, panel opens
8. Search box clears automatically
```

**Expected Results**:
- ✅ Dropdown appears after 2+ chars
- ✅ Results filtered correctly (case-insensitive)
- ✅ Color-coded risk scores visible
- ✅ Click selects country and opens panel
- ✅ Search closes after selection
- ✅ Clear button visible when text entered

---

### 3. Risk Data Display
**Test**: Verify all panel sections populated correctly

```
After opening panel, check:

SECTION 1 - Risk Score Display
- [ ] Large number visible (e.g., "68")
- [ ] Color badge shows: "Low Risk", "Medium Risk", or "High Risk"
- [ ] Badge color matches score (green/yellow/red)

SECTION 2 - Weather
- [ ] Temperature (e.g., "28°C")
- [ ] Condition (e.g., "Partly Cloudy")
- [ ] Humidity (e.g., "65%")
- [ ] Wind Speed (e.g., "12 km/h")
- [ ] Rainfall (e.g., "2.5 mm")
- [ ] Pressure (e.g., "1013 hPa")

SECTION 3 - Disaster Status
- [ ] Shows "No Active Disaster" OR recent disaster name
- [ ] If earthquake: Shows magnitude (e.g., "5.2 📍")
- [ ] If tsunami: Shows 🌊 indicator

SECTION 4 - Port Information
- [ ] Port name populated
- [ ] Country shows correctly
- [ ] Status (Open/Limited/Closed)
- [ ] Congestion % with progress bar
- [ ] Coordinates display (e.g., "28.0000°, 113.9000°")

SECTION 5 - Risk Breakdown
- [ ] 5 items: Weather, Economy, Inflation, Currency, Port
- [ ] Each shows: Icon + label + score + progress bar
- [ ] Progress bars colored correctly
- [ ] Total Risk item highlighted (gradient background)
- [ ] All scores sum logically

SECTION 6 - Operational Impact
- [ ] Text description visible
- [ ] Matches risk level:
  - High (≥70): "High operational risk..."
  - Medium (40-69): "Moderate disruption..."
  - Low (<40): "Low disruption..."

SECTION 7 - Action Buttons
- [ ] "View Country Detail" button visible (orange)
- [ ] "View Port Detail" button visible (blue)
- [ ] Both clickable, lead to correct pages
```

---

### 4. Marker Color Coding
**Test**: Verify markers use correct colors

```
Expected Colors:
- Green (#10B981): Risk score 0-39 (Low)
- Yellow (#F59E0B): Risk score 40-69 (Medium)  
- Red (#EF4444): Risk score 70-100 (High)

Top 10 Markers:
- [ ] Larger (24px vs 16px)
- [ ] Pulsing animation (subtle glow effect)
- [ ] Small red "!" badge in corner
- [ ] Tooltip on hover showing name + score

Regular Markers:
- [ ] Smaller (16px)
- [ ] No pulse animation
- [ ] No tooltip on hover
- [ ] Hover scale effect (1.3x)
```

---

### 5. Legend
**Test**: Verify legend styling and position

```
Expected:
- [ ] Legend visible bottom-right of map
- [ ] White background with slight transparency
- [ ] Soft shadow around edges
- [ ] Title: "Tingkat Risiko" (Risk Level)
- [ ] 3 items with colored circles:
  - Green circle + "Rendah (0-39)"
  - Yellow circle + "Sedang (40-69)"
  - Red circle + "Tinggi (70-100)"
- [ ] No overlap with map controls (zoom buttons)
- [ ] Doesn't move when panel opens/closes
```

---

## 📱 Responsive Testing

### Desktop (>1024px)
```
Setup: Browser window >1024px wide

Expected:
- [ ] Side panel 380px wide
- [ ] Panel slides in from RIGHT
- [ ] Map shrinks on left (uses flex-basis transition)
- [ ] All text clearly visible
- [ ] Buttons easily clickable
- [ ] Search dropdown properly positioned
```

### Tablet (768-1024px)
```
Setup: Browser 768-1024px or iPad portrait

Expected:
- [ ] Side panel 320px wide (narrower than desktop)
- [ ] Panel slides in from RIGHT
- [ ] Map height ~600px
- [ ] Touch targets 40px+ (buttons, close)
- [ ] Scrolling works smoothly in panel
- [ ] No horizontal overflow
```

### Mobile (<768px)
```
Setup: Browser <768px or iPhone/Android portrait

Expected:
- [ ] Panel appears as BOTTOM SHEET (not side panel!)
- [ ] Panel slides UP from bottom
- [ ] Map height ~400px above panel
- [ ] Panel height ~70% of screen
- [ ] Close button (✕) prominent
- [ ] Search input accessible at top
- [ ] No horizontal scrolling
- [ ] All elements properly stacked
```

### Small Mobile (<480px)
```
Setup: Browser <480px or small phone

Expected:
- [ ] Panel height ~75% of screen
- [ ] Compact typography (smaller fonts)
- [ ] Close button large (28px+)
- [ ] No text truncation issues
- [ ] Breakdown items stack properly
- [ ] Buttons full-width or responsive
```

---

## ⚡ Performance Testing

### Animation Smoothness
```
Test: Open/close panel multiple times

Expected:
- [ ] No jank, stuttering, or frame drops
- [ ] Smooth 300ms transition
- [ ] All elements move in sync
- [ ] No CSS repaints visible
- [ ] Map resize smooth (ResizeObserver working)
```

### Load Time
```
Test: Dashboard first load

Expected:
- [ ] Page loads in <2s
- [ ] All markers appear immediately
- [ ] No loading spinners (data from Blade)
- [ ] Clicking marker opens panel instantly
- [ ] No network requests needed for panel data
```

### Browser Compatibility
```
Test: Open in multiple browsers

- [ ] Chrome/Edge (latest)
- [ ] Firefox (latest)
- [ ] Safari (iOS/Mac)
- [ ] Mobile browsers

Expected: All features work identically
```

---

## 🐛 Bug Checks

### Common Issues to Verify Don't Exist

```
Search:
- [ ] Search doesn't crash with special chars
- [ ] Clear button properly resets
- [ ] Dropdown closes on outside click
- [ ] No duplicate results shown
- [ ] Results sort correctly by relevance

Panel:
- [ ] Panel doesn't get stuck (partially hidden)
- [ ] Close button always responsive
- [ ] Scrolling in panel body works smoothly
- [ ] No text overflow or cutoff
- [ ] Weather data shows "--" if unavailable (not blank)

Map:
- [ ] Markers respond to clicks consistently
- [ ] Zoom/pan doesn't break panel state
- [ ] Map tiles load correctly after resize
- [ ] No missing tiles or visual glitches
- [ ] Legend doesn't interfere with map controls

Data:
- [ ] All risk scores display correctly
- [ ] Color coding matches thresholds exactly
- [ ] Progress bars don't overflow containers
- [ ] Coordinates display with precision
- [ ] Disaster info shows when available
```

---

## ✨ Visual Polish Checks

### UI Consistency
```
Compare with Weather page:
- [ ] Panel styling matches (colors, spacing, shadows)
- [ ] Legend styling matches exactly
- [ ] Card styling consistent
- [ ] Fonts and sizes appropriate
- [ ] Button styling matches primary/secondary pattern
```

### Accessibility
```
- [ ] Close button has clear visual indicator
- [ ] Touch targets ≥40px on mobile
- [ ] Color contrast sufficient (A11y)
- [ ] Text readable at all zoom levels
- [ ] No important info hidden behind panels
```

### Mobile-Specific
```
- [ ] No scroll jank when panel scrolls
- [ ] Bottom sheet doesn't overlap status bar
- [ ] Keyboard doesn't hide search box
- [ ] Double-tap zoom doesn't break layout
- [ ] Portrait orientation works correctly
```

---

## 📊 Data Accuracy Testing

### Risk Score Validation
```
Click on top 10 risk countries:
- [ ] Scores match /user/countries/:iso2 page
- [ ] Risk level classifications correct
- [ ] Breakdown components add up to total (approximately)
```

### Weather Data
```
- [ ] Weather matches current conditions
- [ ] Temperature in correct range
- [ ] Wind speed realistic
- [ ] Humidity percentage valid (0-100%)
```

### Disaster Data
```
- [ ] Recent earthquakes display with magnitude
- [ ] Tsunami indicators show when applicable
- [ ] "No Active Disaster" shows when accurate
- [ ] Timestamps show "X minutes ago" format
```

---

## 🎯 Acceptance Criteria Checklist

- [ ] All 15 tasks completed and tested
- [ ] No syntax errors in modified files
- [ ] Panel opens/closes smoothly (300ms)
- [ ] All 7 panel sections display correctly
- [ ] Search filters and selects countries
- [ ] Marker colors: Green/Yellow/Red per risk level
- [ ] Legend shows all 3 levels
- [ ] Responsive on desktop/tablet/mobile
- [ ] No API calls needed (Blade data only)
- [ ] No breaking changes to existing functionality
- [ ] User Dashboard still accessible at `/user/dashboard`
- [ ] All routes work: Countries, Ports, Detail pages

---

## 🚀 Go-Live Checklist

Before deploying to production:

```
Code Review:
- [ ] PHP syntax valid
- [ ] Blade syntax valid
- [ ] JavaScript syntax valid
- [ ] No console errors

Testing:
- [ ] All functional tests pass
- [ ] All responsive tests pass
- [ ] All performance tests pass
- [ ] No visual regressions

Documentation:
- [ ] This testing guide reviewed
- [ ] RISK_MAP_REFACTOR_SUMMARY.md complete
- [ ] Code comments clear
- [ ] Deployment notes documented

Database:
- [ ] No migrations needed
- [ ] No data changes
- [ ] Backups not required
```

---

## 📞 Support

If issues found during testing:

1. Check browser console (F12) for JavaScript errors
2. Check network tab for failed requests
3. Verify test browser is up-to-date
4. Try incognito/private mode (cache issues)
5. Clear browser cache and reload

---

**Last Updated**: 2026-07-21  
**Status**: Ready for Testing