135 lines
5 KiB
TypeScript
135 lines
5 KiB
TypeScript
import { test, expect } from '@playwright/test'
|
|
import { loginAndNavigate, waitForChatReady, getChatInput, askQuestion } from './auth.setup'
|
|
|
|
/**
|
|
* Map panel tests for ArchiefAssistent
|
|
*
|
|
* Tests verify that the map visualization panel:
|
|
* - Shows institutions on the map when query returns results with coordinates
|
|
* - Updates when new queries are made
|
|
* - Handles queries with no geographic results gracefully
|
|
*/
|
|
|
|
test.describe('Map Panel', () => {
|
|
test.beforeEach(async ({ page }) => {
|
|
await loginAndNavigate(page)
|
|
await waitForChatReady(page)
|
|
})
|
|
|
|
test('should display map panel in the UI', async ({ page }) => {
|
|
// The map panel should be visible (either always or after a query)
|
|
// First make a query to ensure the map has content
|
|
await askQuestion(page, 'Hoeveel musea zijn er in Amsterdam?')
|
|
|
|
// Look for maplibre-gl canvas or map container
|
|
// The exact selector depends on implementation
|
|
const mapContainer = page.locator('.maplibregl-map, [class*="map"], canvas')
|
|
|
|
// At least one map-related element should exist
|
|
const mapElements = await mapContainer.count()
|
|
expect(mapElements).toBeGreaterThan(0)
|
|
})
|
|
|
|
test('should show markers for institutions with coordinates', async ({ page }) => {
|
|
// Query that should return institutions with known coordinates
|
|
await askQuestion(page, 'Toon musea in Amsterdam')
|
|
|
|
// Wait a bit for map markers to render
|
|
await page.waitForTimeout(2000)
|
|
|
|
// Look for map markers (implementation dependent)
|
|
// Common patterns: .maplibregl-marker, svg circles, or custom marker divs
|
|
const markers = page.locator('.maplibregl-marker, [class*="marker"], circle')
|
|
|
|
// Should have some markers (or at least the map rendered)
|
|
// This is a soft check - if no markers, the test still passes but logs a warning
|
|
const markerCount = await markers.count()
|
|
if (markerCount === 0) {
|
|
console.log('Warning: No map markers found. Map may use different marker implementation.')
|
|
}
|
|
})
|
|
|
|
test('should update map when new query is made', async ({ page }) => {
|
|
// First query
|
|
await askQuestion(page, 'Hoeveel archieven zijn er in Utrecht?')
|
|
await page.waitForTimeout(1000)
|
|
|
|
// Get initial map state (screenshot for visual comparison could be added)
|
|
const mapBefore = await page.locator('.maplibregl-map, [class*="map"]').first().boundingBox()
|
|
|
|
// Second query with different location
|
|
await askQuestion(page, 'Hoeveel musea zijn er in Maastricht?')
|
|
await page.waitForTimeout(1000)
|
|
|
|
// Map should still be visible after second query
|
|
const mapAfter = await page.locator('.maplibregl-map, [class*="map"]').first().boundingBox()
|
|
expect(mapAfter).not.toBeNull()
|
|
})
|
|
|
|
test('should handle queries without geographic results', async ({ page }) => {
|
|
// Abstract query that may not have specific coordinates
|
|
await askQuestion(page, 'Wat voor soorten erfgoedinstellingen zijn er?')
|
|
|
|
// Map should not crash - it should either:
|
|
// 1. Show an empty/default view
|
|
// 2. Show previous results
|
|
// 3. Be hidden
|
|
|
|
// Just verify no JavaScript errors crashed the page
|
|
const chatInput = getChatInput(page)
|
|
await expect(chatInput).toBeVisible()
|
|
})
|
|
})
|
|
|
|
test.describe('Map Interactions', () => {
|
|
test.beforeEach(async ({ page }) => {
|
|
await loginAndNavigate(page)
|
|
await waitForChatReady(page)
|
|
})
|
|
|
|
test('map should be interactive (pan/zoom)', async ({ page }) => {
|
|
await askQuestion(page, 'Hoeveel musea zijn er in Nederland?')
|
|
await page.waitForTimeout(2000)
|
|
|
|
const map = page.locator('.maplibregl-map, [class*="map"]').first()
|
|
|
|
if (await map.isVisible()) {
|
|
// Try to interact with the map
|
|
const box = await map.boundingBox()
|
|
if (box) {
|
|
// Simulate a drag gesture
|
|
await page.mouse.move(box.x + box.width / 2, box.y + box.height / 2)
|
|
await page.mouse.down()
|
|
await page.mouse.move(box.x + box.width / 2 + 50, box.y + box.height / 2 + 50)
|
|
await page.mouse.up()
|
|
|
|
// Map should still be functional
|
|
await expect(map).toBeVisible()
|
|
}
|
|
}
|
|
})
|
|
|
|
test('clicking marker should show institution details', async ({ page }) => {
|
|
await askQuestion(page, 'Toon archieven in Amsterdam')
|
|
await page.waitForTimeout(2000)
|
|
|
|
// Try to find and click a marker
|
|
const marker = page.locator('.maplibregl-marker, [class*="marker"]').first()
|
|
|
|
if (await marker.isVisible()) {
|
|
await marker.click()
|
|
|
|
// After clicking, some popup or detail panel should appear
|
|
// This depends on implementation
|
|
await page.waitForTimeout(500)
|
|
|
|
// Look for popup content
|
|
const popup = page.locator('.maplibregl-popup, [class*="popup"], [class*="tooltip"]')
|
|
// Soft check - popup may or may not appear depending on implementation
|
|
const popupVisible = await popup.isVisible().catch(() => false)
|
|
if (!popupVisible) {
|
|
console.log('Note: No popup appeared after clicking marker. Implementation may differ.')
|
|
}
|
|
}
|
|
})
|
|
})
|