| name | test-mosquelist-map-and-addresses |
| description | Test MosqueList map view (OpenStreetMap), country/region filters, and address-vs-coordinates display. Use when testing the map page, location display, or when the user asks to test map or address behavior. |
Testing MosqueList Map and Addresses
Before using this skill (Socratic prompts)
- Is the request about the map, filters, or location display? Use this skill for map page, region/country filters, and address-vs-coordinates—not for general performance or mosque data content.
- What would “working” look like? Run the automated tests and the manual checklist below so we know when we’re done.
- Did we touch mosque location data? If
address or coordinates changed in mosques.json, re-check address vs coordinates display per this skill.
See docs/socratic-prompts.md for more guiding questions.
When to Use
- After changing map page, region/country filters, or Leaflet/OSM integration.
- After changing mosque location display (address vs coordinates).
- When verifying map or address behavior before release.
Automated Tests (Vitest)
Run:
npm run test
Relevant test files:
- Map and filters:
src/test/map-and-addresses.test.ts — map data filtering (mosques with coords, region/country filter), route and nav presence, location display priority (address over coordinates).
- Integration: Optional component tests for MapPage (with Leaflet mocked) or ExplorePage containing Map link.
What is tested:
- Mosques with coordinates are countable; filtering by country/region reduces the list correctly.
- App has route
/map and Navigation has a "Map" link.
- Location display: when a mosque has
address, it is preferred over coordinates; when only coordinates, they are used; fallback is location, country.
Manual Testing (Browser)
-
Start dev server: npm run dev. Open the app (e.g. http://localhost:5173).
-
Map page
- Go to Map via nav or Explore → map icon (MapPin) → should land on
/map.
- Map loads with OpenStreetMap tiles; markers for mosques with coordinates are visible.
- Region dropdown: choose a region → map zooms to fit markers in that region; only those markers show.
- Country dropdown: choose a country → map zooms to that country; only that country’s markers show.
- Combined: set region then country (or vice versa) → map and markers match both filters.
- "All regions" / "All countries" → world view, all markers shown.
- Click a marker → popup with mosque name, location, and "View mosque" link → link goes to mosque detail page.
-
Address vs coordinates
- On Explore or a mosque detail page, for a mosque that has
address in data: displayed location should show the address (not lat/lng).
- For a mosque with only
coordinates: display should show coordinates (or "location, country" if no coords).
- Check at least one of each type in
src/data/mosques.json.
-
Explore → Map
- On Explore page, use the map icon (MapPin) in the toolbar → should navigate to
/map.
Quick Checklist
