# Map Editor Plugin - Testing Checklist

## Pre-Testing Setup

1. [ ] Build the frontend: `npm run build`
2. [ ] Ensure Kirby is running (PHP server)
3. [ ] Log into Kirby Panel
4. [ ] Navigate to the map page (e.g., `/panel/pages/map+carte`)

## Phase 1: Multi-Mode Testing (Map Page)

### Basic Marker Operations

1. [ ] **View existing markers**
   - Open map page in Panel
   - Verify markers are loaded and displayed on map
   - Verify markers appear in sidebar list

2. [ ] **Create marker via button**
   - Click "Add Marker" button in sidebar
   - Verify marker appears at map center
   - Verify marker appears in sidebar
   - Check browser console for errors

3. [ ] **Create marker via map click**
   - Click anywhere on the map
   - Verify marker appears at clicked location
   - Verify marker appears in sidebar

4. [ ] **Select marker**
   - Click marker in sidebar
   - Verify map centers on marker
   - Verify marker is highlighted

5. [ ] **Drag marker**
   - Drag a marker to new position
   - Verify position updates in real-time
   - Reload page and verify position persisted

6. [ ] **Edit marker**
   - Click "Edit" button for a marker in sidebar
   - Verify redirect to marker page in Panel
   - Verify marker page loads correctly

7. [ ] **Delete marker**
   - Click "Delete" button for a marker
   - Verify confirmation dialog appears
   - Confirm deletion
   - Verify marker removed from map and sidebar
   - Reload page and verify deletion persisted

### Map Data Persistence

8. [ ] **Map view changes**
   - Pan and zoom the map
   - Reload the page
   - Verify map returns to same view

9. [ ] **Check YAML data**
   - View the mapdata field source
   - Verify it contains: background, center, zoom
   - Verify it does NOT contain markers array

### Edge Cases

10. [ ] **Max markers limit**
    - Create markers up to the limit (default 50)
    - Verify "Add Marker" button becomes disabled
    - Verify map clicks don't create new markers

11. [ ] **Geocode search**
    - Use the address search in sidebar
    - Search for an address
    - Verify map centers on result

12. [ ] **Error handling**
    - Open browser DevTools Network tab
    - Try operations with network offline (simulate)
    - Verify errors are logged to console

## Phase 2: Single-Mode Testing (Marker Page)

### Marker Page Structure

1. [ ] **Create test marker**
   - In map page sidebar, click "Add Marker"
   - Click "Edit" to open the marker page

2. [ ] **Content tab**
   - Verify "Contenu" tab exists
   - Edit title field
   - Add blocks (heading, text, image, etc.)
   - Save and verify content persists

3. [ ] **Position tab**
   - Switch to "Position" tab
   - Verify latitude/longitude fields on left
   - Verify map preview on right

### Single-Mode Map Functionality

4. [ ] **View marker position**
   - Verify single marker appears on map
   - Verify marker is at coordinates shown in fields

5. [ ] **Drag marker in single mode**
   - Drag the marker to a new position
   - Check browser console for API call
   - Reload page
   - Verify new position persisted

6. [ ] **Update coordinates via fields**
   - Edit latitude field (e.g., 43.8)
   - Edit longitude field (e.g., 4.3)
   - Save the page
   - Verify marker moved on map preview

7. [ ] **Geocode search in single mode**
   - Use address search (if available)
   - Verify map centers on result
   - Drag marker to searched location

### Single-Mode Restrictions

8. [ ] **No CRUD buttons**
   - Verify no "Add Marker" button
   - Verify no "Delete" button
   - Verify no marker list sidebar

9. [ ] **Map size**
   - Verify map height is smaller (400px) than multi-mode

## Phase 3: Integration Testing

### Subpage Management

1. [ ] **View markers as subpages**
   - In map page, check sidebar "Marqueurs" section
   - Verify all markers listed as subpages
   - Verify ordering by num

2. [ ] **Reorder markers**
   - Drag markers in Panel pages section
   - Verify order updates
   - View map editor
   - Verify sidebar reflects new order

3. [ ] **Delete marker via Panel**
   - Delete a marker subpage via Panel (not map editor)
   - View map page
   - Verify marker removed from map

4. [ ] **Create marker manually**
   - Create a new marker subpage via Panel
   - Set template to "marker"
   - Add title, latitude, longitude
   - View map page
   - Verify marker appears on map

### Multi-Marker Performance

5. [ ] **Create 10 markers**
   - Create 10 markers via map
   - Verify performance is acceptable
   - Check load time

6. [ ] **Create 50 markers** (optional stress test)
   - Create markers up to limit
   - Verify UI remains responsive
   - Check browser memory usage

## Phase 4: Security & API Testing

### Authentication

1. [ ] **Logged out access**
   - Log out of Panel
   - Try accessing API directly (e.g., via curl)
   - Verify 401 Unauthorized response

### CSRF Protection

2. [ ] **Invalid CSRF token**
   - Use browser DevTools to modify X-CSRF header
   - Try creating/updating/deleting marker
   - Verify 403 Forbidden response

### Permissions

3. [ ] **Create restricted user** (optional)
   - Create user with limited permissions
   - Log in as that user
   - Try marker operations
   - Verify permission checks work

### API Responses

4. [ ] **Check API responses**
   - Open DevTools Network tab
   - Perform marker operations
   - Verify responses match expected format:
     ```json
     {
       "status": "success",
       "data": { ... }
     }
     ```

5. [ ] **Test error responses**
   - Try invalid coordinates (e.g., lat: 200)
   - Verify 400 Bad Request response
   - Verify error message is descriptive

## Phase 5: Build & Deployment

### Build Verification

1. [ ] **Clean build**
   - Run `npm run build`
   - Verify no errors or warnings (except font warnings)
   - Check dist folder created

2. [ ] **Production test**
   - Test on production server (if available)
   - Verify all functionality works

### Browser Compatibility

3. [ ] **Test in Chrome**
4. [ ] **Test in Firefox**
5. [ ] **Test in Safari**
6. [ ] **Test in Edge** (optional)

## Common Issues & Solutions

### Issue: Markers not loading
- **Check**: Browser console for API errors
- **Check**: Network tab for 401/403 errors
- **Solution**: Verify user is logged in, CSRF token is valid

### Issue: Drag doesn't update position
- **Check**: Console for API errors
- **Check**: Network tab for PATCH request
- **Solution**: Verify page permissions, CSRF token

### Issue: Redirect to Panel doesn't work
- **Check**: Console for errors
- **Check**: panelUrl in API response
- **Solution**: Verify page ID format is correct

### Issue: Single mode shows multiple markers
- **Check**: MapEditor component mode prop
- **Check**: Blueprint field configuration
- **Solution**: Verify `mode: single` in blueprint

## Test Results Summary

Date: __________
Tester: __________

| Phase | Tests Passed | Tests Failed | Notes |
|-------|-------------|--------------|-------|
| Phase 1: Multi-Mode | __ / 12 | __ | |
| Phase 2: Single-Mode | __ / 9 | __ | |
| Phase 3: Integration | __ / 6 | __ | |
| Phase 4: Security | __ / 5 | __ | |
| Phase 5: Build | __ / 6 | __ | |
| **Total** | __ / 38 | __ | |

## Next Steps After Testing

- [ ] Document any bugs found
- [ ] Create GitHub issues for bugs
- [ ] Update README with usage instructions
- [ ] Add user documentation
- [ ] Consider implementing suggested improvements