glam/apps/archief-assistent/e2e/map-panel.spec.ts

import { test, expect } from '@playwright/test'
import { loginAndNavigate, waitForChatReady } 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)
  })

  /**
   * Helper to submit a query and wait for response
   */
  async function askQuestion(page: any, question: string): Promise<void> {
    const chatInput = page.getByTestId('chat-input')
    const sendButton = page.getByTestId('send-button')
    
    await chatInput.fill(question)
    await sendButton.click()
    
    // Wait for assistant response
    const assistantMessage = page.getByTestId('assistant-message').last()
    await assistantMessage.waitFor({ timeout: 45000 })
  }

  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 = page.getByTestId('chat-input')
    await expect(chatInput).toBeVisible()
  })
})

test.describe('Map Interactions', () => {
  test.beforeEach(async ({ page }) => {
    await loginAndNavigate(page)
    await waitForChatReady(page)
  })

  async function askQuestion(page: any, question: string): Promise<void> {
    const chatInput = page.getByTestId('chat-input')
    const sendButton = page.getByTestId('send-button')
    
    await chatInput.fill(question)
    await sendButton.click()
    
    const assistantMessage = page.getByTestId('assistant-message').last()
    await assistantMessage.waitFor({ timeout: 45000 })
  }

  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.')
      }
    }
  })
})