dawarich/e2e/v2/map/layers/heatmap.spec.js
2025-12-06 19:53:20 +01:00

86 lines
3.2 KiB
JavaScript

import { test, expect } from '@playwright/test'
import { closeOnboardingModal } from '../../../helpers/navigation.js'
test.describe('Heatmap Layer', () => {
test.beforeEach(async ({ page }) => {
await page.goto('/map/v2?start_at=2025-10-15T00:00&end_at=2025-10-15T23:59')
await closeOnboardingModal(page)
await page.waitForTimeout(2000)
})
test.describe('Creation', () => {
test('heatmap layer can be enabled', async ({ page }) => {
await page.click('button[title="Open map settings"]')
await page.waitForTimeout(500)
await page.click('button[data-tab="layers"]')
await page.waitForTimeout(300)
const heatmapLabel = page.locator('label:has-text("Heatmap")').first()
const heatmapToggle = heatmapLabel.locator('input.toggle')
await heatmapToggle.check()
// Wait for heatmap layer to be created
await page.waitForFunction(() => {
const element = document.querySelector('[data-controller*="maps--maplibre"]')
if (!element) return false
const app = window.Stimulus || window.Application
const controller = app?.getControllerForElementAndIdentifier(element, 'maps--maplibre')
return controller?.map?.getLayer('heatmap') !== undefined
}, { timeout: 3000 }).catch(() => false)
const hasHeatmap = await page.evaluate(() => {
const element = document.querySelector('[data-controller*="maps--maplibre"]')
if (!element) return false
const app = window.Stimulus || window.Application
const controller = app?.getControllerForElementAndIdentifier(element, 'maps--maplibre')
return controller?.map?.getLayer('heatmap') !== undefined
})
expect(hasHeatmap).toBe(true)
})
test('heatmap can be toggled', async ({ page }) => {
await page.click('button[title="Open map settings"]')
await page.waitForTimeout(500)
await page.click('button[data-tab="layers"]')
await page.waitForTimeout(300)
const heatmapToggle = page.locator('label:has-text("Heatmap")').first().locator('input.toggle')
await heatmapToggle.check()
await page.waitForTimeout(500)
expect(await heatmapToggle.isChecked()).toBe(true)
await heatmapToggle.uncheck()
await page.waitForTimeout(500)
expect(await heatmapToggle.isChecked()).toBe(false)
})
})
test.describe('Persistence', () => {
test('heatmap setting persists', async ({ page }) => {
await page.click('button[title="Open map settings"]')
await page.waitForTimeout(500)
await page.click('button[data-tab="layers"]')
await page.waitForTimeout(300)
const heatmapToggle = page.locator('label:has-text("Heatmap")').first().locator('input.toggle')
await heatmapToggle.check()
await page.waitForTimeout(500)
const settings = await page.evaluate(() => {
return localStorage.getItem('dawarich-maps-maplibre-settings')
})
// Settings might be null if not saved yet or only saved to backend
if (settings) {
const parsed = JSON.parse(settings)
expect(parsed.heatmapEnabled).toBe(true)
} else {
// If no localStorage settings, verify the toggle is still checked
expect(await heatmapToggle.isChecked()).toBe(true)
}
})
})
})