dawarich/e2e/v2/map/core.spec.js

import { test, expect } from '@playwright/test'
import { closeOnboardingModal } from '../../helpers/navigation.js'
import {
  navigateToMapsV2,
  navigateToMapsV2WithDate,
  waitForMapLibre,
  waitForLoadingComplete,
  hasMapInstance,
  getMapZoom,
  getMapCenter
} from '../helpers/setup.js'

test.describe('Map Core', () => {
  test.beforeEach(async ({ page }) => {
    await navigateToMapsV2(page)
    await closeOnboardingModal(page)
  })

  test.describe('Initialization', () => {
    test('loads map container', async ({ page }) => {
      const mapContainer = page.locator('[data-maps--maplibre-target="container"]')
      await expect(mapContainer).toBeVisible()
    })

    test('initializes MapLibre instance', async ({ page }) => {
      await waitForMapLibre(page)

      const canvas = page.locator('.maplibregl-canvas')
      await expect(canvas).toBeVisible()

      const hasMap = await hasMapInstance(page)
      expect(hasMap).toBe(true)
    })

    test('has valid initial center and zoom', async ({ page }) => {
      await page.goto('/map/v2?start_at=2025-10-15T00:00&end_at=2025-10-15T23:59')
      await closeOnboardingModal(page)
      await waitForMapLibre(page)
      await waitForLoadingComplete(page)
      await page.waitForTimeout(1000)

      const center = await getMapCenter(page)
      const zoom = await getMapZoom(page)

      expect(center).not.toBeNull()
      expect(center.lng).toBeGreaterThan(-180)
      expect(center.lng).toBeLessThan(180)
      expect(center.lat).toBeGreaterThan(-90)
      expect(center.lat).toBeLessThan(90)

      expect(zoom).toBeGreaterThan(0)
      expect(zoom).toBeLessThan(20)
    })
  })

  test.describe('Loading States', () => {
    test('shows loading indicator during data fetch', async ({ page }) => {
      const loading = page.locator('[data-maps--maplibre-target="loading"]')

      const navigationPromise = page.reload({ waitUntil: 'domcontentloaded' })

      const loadingVisible = await loading.evaluate((el) => !el.classList.contains('hidden'))
        .catch(() => false)

      await navigationPromise
      await closeOnboardingModal(page)

      await waitForLoadingComplete(page)
      await expect(loading).toHaveClass(/hidden/)
    })

    test('handles empty data gracefully', async ({ page }) => {
      await navigateToMapsV2WithDate(page, '2020-01-01T00:00', '2020-01-01T23:59')
      await closeOnboardingModal(page)

      await waitForLoadingComplete(page)
      await page.waitForTimeout(500)

      const hasMap = await hasMapInstance(page)
      expect(hasMap).toBe(true)
    })
  })

  test.describe('Data Bounds', () => {
    test('fits map bounds to loaded data', async ({ page }) => {
      await page.goto('/map/v2?start_at=2025-10-15T00:00&end_at=2025-10-15T23:59')
      await closeOnboardingModal(page)
      await waitForMapLibre(page)
      await waitForLoadingComplete(page)
      await page.waitForTimeout(1000)

      const zoom = await getMapZoom(page)
      expect(zoom).toBeGreaterThan(2)
    })
  })

  test.describe('Lifecycle', () => {
    test('cleans up and reinitializes on navigation', async ({ page }) => {
      await page.goto('/map/v2?start_at=2025-10-15T00:00&end_at=2025-10-15T23:59')
      await closeOnboardingModal(page)
      await waitForLoadingComplete(page)

      // Navigate away
      await page.goto('/')
      await page.waitForTimeout(500)

      // Navigate back
      await navigateToMapsV2(page)
      await closeOnboardingModal(page)

      await waitForMapLibre(page)
      const hasMap = await hasMapInstance(page)
      expect(hasMap).toBe(true)
    })

    test('reloads data when changing date range', async ({ page }) => {
      await page.goto('/map/v2?start_at=2025-10-15T00:00&end_at=2025-10-15T23:59')
      await closeOnboardingModal(page)
      await waitForLoadingComplete(page)

      const startInput = page.locator('input[type="datetime-local"][name="start_at"]')
      const initialStartDate = await startInput.inputValue()

      await navigateToMapsV2WithDate(page, '2024-10-14T00:00', '2024-10-14T23:59')
      await closeOnboardingModal(page)

      await waitForMapLibre(page)
      await waitForLoadingComplete(page)

      const newStartDate = await startInput.inputValue()
      expect(newStartDate).not.toBe(initialStartDate)

      const hasMap = await hasMapInstance(page)
      expect(hasMap).toBe(true)
    })
  })
})