geoproject-app/TESTING_CHECKLIST.md

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:

     {
       "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