mirror of
https://github.com/Freika/dawarich.git
synced 2026-01-11 09:41:40 -05:00
8934c29fce
* fix: move foreman to global gems to fix startup crash (#1971) * Update exporting code to stream points data to file in batches to red… (#1980) * Update exporting code to stream points data to file in batches to reduce memory usage * Update changelog * Update changelog * Feature/maplibre frontend (#1953) * Add a plan to use MapLibre GL JS for the frontend map rendering, replacing Leaflet * Implement phase 1 * Phases 1-3 + part of 4 * Fix e2e tests * Phase 6 * Implement fog of war * Phase 7 * Next step: fix specs, phase 7 done * Use our own map tiles * Extract v2 map logic to separate manager classes * Update settings panel on v2 map * Update v2 e2e tests structure * Reimplement location search in maps v2 * Update speed routes * Implement visits and places creation in v2 * Fix last failing test * Implement visits merging * Fix a routes e2e test and simplify the routes layer styling. * Extract js to modules from maps_v2_controller.js * Implement area creation * Fix spec problem * Fix some e2e tests * Implement live mode in v2 map * Update icons and panel * Extract some styles * Remove unused file * Start adding dark theme to popups on MapLibre maps * Make popups respect dark theme * Move v2 maps to maplibre namespace * Update v2 references to maplibre * Put place, area and visit info into side panel * Update API to use safe settings config method * Fix specs * Fix method name to config in SafeSettings and update usages accordingly * Add missing public files * Add handling for real time points * Fix remembering enabled/disabled layers of the v2 map * Fix lots of e2e tests * Add settings to select map version * Use maps/v2 as main path for MapLibre maps * Update routing * Update live mode * Update maplibre controller * Update changelog * Remove some console.log statements --------- Co-authored-by: Robin Tuszik <mail@robin.gg>
334 lines
13 KiB
JavaScript
334 lines
13 KiB
JavaScript
import { test, expect } from '@playwright/test'
|
|
import { closeOnboardingModal } from '../../../helpers/navigation.js'
|
|
import { navigateToMapsV2, waitForMapLibre, waitForLoadingComplete } from '../../helpers/setup.js'
|
|
|
|
// Helper function to get the place creation modal
|
|
function getPlaceCreationModal(page) {
|
|
return page.locator('[data-controller="place-creation"] .modal-box')
|
|
}
|
|
|
|
test.describe('Places Layer in Maps V2', () => {
|
|
test.beforeEach(async ({ page }) => {
|
|
await navigateToMapsV2(page)
|
|
await closeOnboardingModal(page)
|
|
await waitForMapLibre(page)
|
|
await waitForLoadingComplete(page)
|
|
await page.waitForTimeout(1500)
|
|
})
|
|
|
|
test('should have Tools tab with Create a Place button', async ({ page }) => {
|
|
// Click settings button
|
|
await page.locator('[data-action="click->maps--maplibre#toggleSettings"]').first().click()
|
|
await page.waitForTimeout(200)
|
|
|
|
// Click Tools tab
|
|
await page.locator('button[data-tab="tools"]').click()
|
|
await page.waitForTimeout(200)
|
|
|
|
// Verify Create a Place button exists
|
|
const createPlaceBtn = page.locator('button:has-text("Create a Place")')
|
|
await expect(createPlaceBtn).toBeVisible()
|
|
})
|
|
|
|
test('should enable place creation mode when Create a Place is clicked', async ({ page }) => {
|
|
// Open Tools tab
|
|
await page.locator('[data-action="click->maps--maplibre#toggleSettings"]').first().click()
|
|
await page.waitForTimeout(200)
|
|
await page.locator('button[data-tab="tools"]').click()
|
|
await page.waitForTimeout(200)
|
|
|
|
// Click Create a Place
|
|
await page.locator('button:has-text("Create a Place")').click()
|
|
await page.waitForTimeout(500)
|
|
|
|
// Verify cursor changed to crosshair
|
|
const cursorStyle = await page.evaluate(() => {
|
|
const canvas = document.querySelector('.maplibregl-canvas')
|
|
return canvas ? window.getComputedStyle(canvas).cursor : null
|
|
})
|
|
expect(cursorStyle).toBe('crosshair')
|
|
})
|
|
|
|
test('should open modal when map is clicked in creation mode', async ({ page }) => {
|
|
// Enable creation mode
|
|
await page.locator('[data-action="click->maps--maplibre#toggleSettings"]').first().click()
|
|
await page.waitForTimeout(200)
|
|
await page.locator('button[data-tab="tools"]').click()
|
|
await page.waitForTimeout(200)
|
|
await page.locator('button:has-text("Create a Place")').click()
|
|
await page.waitForTimeout(500)
|
|
|
|
// Click on map
|
|
const mapCanvas = page.locator('.maplibregl-canvas')
|
|
await mapCanvas.click({ position: { x: 400, y: 300 } })
|
|
|
|
// Wait for place creation modal box to appear
|
|
const placeModalBox = page.locator('[data-controller="place-creation"] .modal-box')
|
|
await placeModalBox.waitFor({ state: 'visible', timeout: 10000 })
|
|
|
|
// Verify all form fields exist within the place creation modal
|
|
await expect(page.locator('[data-place-creation-target="nameInput"]')).toBeVisible()
|
|
await expect(page.locator('[data-place-creation-target="latitudeInput"]')).toBeAttached()
|
|
await expect(page.locator('[data-place-creation-target="longitudeInput"]')).toBeAttached()
|
|
})
|
|
|
|
test('should have Places toggle in settings', async ({ page }) => {
|
|
// Open settings
|
|
await page.locator('[data-action="click->maps--maplibre#toggleSettings"]').first().click()
|
|
await page.waitForTimeout(200)
|
|
|
|
// Click Layers tab
|
|
await page.locator('button[data-tab="layers"]').click()
|
|
await page.waitForTimeout(200)
|
|
|
|
// Look for Places toggle
|
|
const placesToggle = page.locator('label:has-text("Places")').first().locator('input.toggle')
|
|
await expect(placesToggle).toBeVisible()
|
|
|
|
// Verify label exists (the first one is the toggle label)
|
|
const label = page.locator('label:has-text("Places")').first()
|
|
await expect(label).toBeVisible()
|
|
})
|
|
|
|
test('should show tag filters when Places toggle is enabled with all tags enabled by default', async ({ page }) => {
|
|
// Open settings
|
|
await page.locator('[data-action="click->maps--maplibre#toggleSettings"]').first().click()
|
|
await page.waitForTimeout(200)
|
|
|
|
// Click Layers tab
|
|
await page.locator('button[data-tab="layers"]').click()
|
|
await page.waitForTimeout(200)
|
|
|
|
// Enable Places toggle
|
|
const placesToggle = page.locator('label:has-text("Places")').first().locator('input.toggle')
|
|
await placesToggle.check()
|
|
await page.waitForTimeout(1000)
|
|
|
|
// Verify filters are visible
|
|
const placesFilters = page.locator('[data-maps--maplibre-target="placesFilters"]')
|
|
await expect(placesFilters).toBeVisible()
|
|
|
|
// Verify "Enable All Tags" toggle is enabled by default
|
|
const enableAllToggle = page.locator('input[data-maps--maplibre-target="enableAllPlaceTagsToggle"]')
|
|
await expect(enableAllToggle).toBeChecked()
|
|
|
|
// Verify all tag checkboxes are checked by default
|
|
const tagCheckboxes = page.locator('input[name="place_tag_ids[]"]')
|
|
const count = await tagCheckboxes.count()
|
|
for (let i = 0; i < count; i++) {
|
|
await expect(tagCheckboxes.nth(i)).toBeChecked()
|
|
}
|
|
|
|
// Verify Untagged option exists and is checked (checkbox is hidden, but should exist)
|
|
const untaggedOption = page.locator('input[name="place_tag_ids[]"][value="untagged"]')
|
|
await expect(untaggedOption).toBeAttached()
|
|
await expect(untaggedOption).toBeChecked()
|
|
})
|
|
|
|
test('should toggle tag filter styling when clicked', async ({ page }) => {
|
|
// Open settings and enable Places
|
|
await page.locator('[data-action="click->maps--maplibre#toggleSettings"]').first().click()
|
|
await page.waitForTimeout(200)
|
|
|
|
// Click Layers tab
|
|
await page.locator('button[data-tab="layers"]').click()
|
|
await page.waitForTimeout(200)
|
|
|
|
const placesToggle = page.locator('label:has-text("Places")').first().locator('input.toggle')
|
|
await placesToggle.check()
|
|
await page.waitForTimeout(1000)
|
|
|
|
// Get first tag badge (in Places filters section) - click badge since checkbox is hidden
|
|
const firstBadge = page.locator('[data-maps--maplibre-target="placesFilters"] .badge').first()
|
|
const firstCheckbox = page.locator('[data-maps--maplibre-target="placesFilters"] input[name="place_tag_ids[]"]').first()
|
|
|
|
// Check initial state (should be checked by default)
|
|
await expect(firstCheckbox).toBeChecked()
|
|
const initialClass = await firstBadge.getAttribute('class')
|
|
expect(initialClass).not.toContain('badge-outline')
|
|
|
|
// Click badge to toggle it off (checkbox is hidden, must click label/badge)
|
|
await firstBadge.click()
|
|
await page.waitForTimeout(300)
|
|
|
|
// Verify checkbox is now unchecked
|
|
await expect(firstCheckbox).not.toBeChecked()
|
|
// Verify badge styling changed (outline class added)
|
|
const updatedClass = await firstBadge.getAttribute('class')
|
|
expect(updatedClass).toContain('badge-outline')
|
|
})
|
|
|
|
test('should hide tag filters when Places toggle is disabled', async ({ page }) => {
|
|
// Open settings
|
|
await page.locator('[data-action="click->maps--maplibre#toggleSettings"]').first().click()
|
|
await page.waitForTimeout(200)
|
|
|
|
// Click Layers tab
|
|
await page.locator('button[data-tab="layers"]').click()
|
|
await page.waitForTimeout(200)
|
|
|
|
// Enable then disable Places toggle
|
|
const placesToggle = page.locator('label:has-text("Places")').first().locator('input.toggle')
|
|
await placesToggle.check()
|
|
await page.waitForTimeout(300)
|
|
await placesToggle.uncheck()
|
|
await page.waitForTimeout(300)
|
|
|
|
// Verify filters are hidden
|
|
const placesFilters = page.locator('[data-maps--maplibre-target="placesFilters"]')
|
|
const isVisible = await placesFilters.isVisible()
|
|
expect(isVisible).toBe(false)
|
|
})
|
|
|
|
test('can toggle places layer', async ({ page }) => {
|
|
// Open settings
|
|
await page.locator('[data-action="click->maps--maplibre#toggleSettings"]').first().click()
|
|
await page.waitForTimeout(200)
|
|
|
|
// Click Layers tab
|
|
await page.locator('button[data-tab="layers"]').click()
|
|
await page.waitForTimeout(200)
|
|
|
|
// Enable Places toggle
|
|
const placesToggle = page.locator('label:has-text("Places")').first().locator('input.toggle')
|
|
await placesToggle.check()
|
|
await page.waitForTimeout(500)
|
|
|
|
// Verify toggle is checked
|
|
const isChecked = await placesToggle.isChecked()
|
|
expect(isChecked).toBe(true)
|
|
})
|
|
|
|
test('should show popup when clicking on a place marker', async ({ page }) => {
|
|
// Enable Places layer
|
|
await page.locator('[data-action="click->maps--maplibre#toggleSettings"]').first().click()
|
|
await page.waitForTimeout(200)
|
|
|
|
// Click Layers tab
|
|
await page.locator('button[data-tab="layers"]').click()
|
|
await page.waitForTimeout(200)
|
|
|
|
const placesToggle = page.locator('label:has-text("Places")').first().locator('input.toggle')
|
|
await placesToggle.check()
|
|
await page.waitForTimeout(1000)
|
|
|
|
// Close settings to make map clickable
|
|
await page.locator('[data-action="click->maps--maplibre#toggleSettings"]').first().click()
|
|
await page.waitForTimeout(200)
|
|
|
|
// Try to click on a place marker (if any exist)
|
|
// This test will pass if either a popup appears or no places exist
|
|
const mapCanvas = page.locator('.maplibregl-canvas')
|
|
await mapCanvas.click({ position: { x: 500, y: 400 } })
|
|
await page.waitForTimeout(500)
|
|
|
|
// Check if popup exists (it's ok if it doesn't - means no place at that location)
|
|
const popup = page.locator('.maplibregl-popup')
|
|
const popupExists = await popup.count()
|
|
|
|
// This test validates the popup mechanism works
|
|
// If there's a place at the clicked location, popup should appear
|
|
expect(typeof popupExists).toBe('number')
|
|
})
|
|
|
|
test('should sync Enable All Tags toggle with individual tag checkboxes', async ({ page }) => {
|
|
// Open settings and enable Places
|
|
await page.locator('[data-action="click->maps--maplibre#toggleSettings"]').first().click()
|
|
await page.waitForTimeout(200)
|
|
|
|
// Click Layers tab
|
|
await page.locator('button[data-tab="layers"]').click()
|
|
await page.waitForTimeout(200)
|
|
|
|
const placesToggle = page.locator('label:has-text("Places")').first().locator('input.toggle')
|
|
await placesToggle.check()
|
|
await page.waitForTimeout(1000)
|
|
|
|
const enableAllToggle = page.locator('input[data-maps--maplibre-target="enableAllPlaceTagsToggle"]')
|
|
|
|
// Initially all tags should be enabled
|
|
await expect(enableAllToggle).toBeChecked()
|
|
|
|
// Click first badge to uncheck it (checkbox is hidden, must click badge)
|
|
const firstBadge = page.locator('[data-maps--maplibre-target="placesFilters"] .badge').first()
|
|
const firstCheckbox = page.locator('[data-maps--maplibre-target="placesFilters"] input[name="place_tag_ids[]"]').first()
|
|
|
|
await firstBadge.click()
|
|
await page.waitForTimeout(300)
|
|
|
|
// Enable All toggle should now be unchecked
|
|
await expect(enableAllToggle).not.toBeChecked()
|
|
|
|
// Click badge again to check it
|
|
await firstBadge.click()
|
|
await page.waitForTimeout(300)
|
|
|
|
// Enable All toggle should be checked again (all tags checked)
|
|
await expect(enableAllToggle).toBeChecked()
|
|
})
|
|
|
|
test('should enable/disable all tags when Enable All Tags toggle is clicked', async ({ page }) => {
|
|
// Open settings and enable Places
|
|
await page.locator('[data-action="click->maps--maplibre#toggleSettings"]').first().click()
|
|
await page.waitForTimeout(200)
|
|
|
|
// Click Layers tab
|
|
await page.locator('button[data-tab="layers"]').click()
|
|
await page.waitForTimeout(200)
|
|
|
|
const placesToggle = page.locator('label:has-text("Places")').first().locator('input.toggle')
|
|
await placesToggle.check()
|
|
await page.waitForTimeout(1000)
|
|
|
|
const enableAllToggle = page.locator('input[data-maps--maplibre-target="enableAllPlaceTagsToggle"]')
|
|
|
|
// Disable all tags
|
|
await enableAllToggle.uncheck()
|
|
await page.waitForTimeout(500)
|
|
|
|
// Verify all tag checkboxes are unchecked
|
|
const tagCheckboxes = page.locator('input[name="place_tag_ids[]"]')
|
|
const count = await tagCheckboxes.count()
|
|
for (let i = 0; i < count; i++) {
|
|
await expect(tagCheckboxes.nth(i)).not.toBeChecked()
|
|
}
|
|
|
|
// Enable all tags
|
|
await enableAllToggle.check()
|
|
await page.waitForTimeout(500)
|
|
|
|
// Verify all tag checkboxes are checked
|
|
for (let i = 0; i < count; i++) {
|
|
await expect(tagCheckboxes.nth(i)).toBeChecked()
|
|
}
|
|
})
|
|
|
|
test('should show no places when all tags are unchecked', async ({ page }) => {
|
|
// Open settings and enable Places
|
|
await page.locator('[data-action="click->maps--maplibre#toggleSettings"]').first().click()
|
|
await page.waitForTimeout(200)
|
|
|
|
// Click Layers tab
|
|
await page.locator('button[data-tab="layers"]').click()
|
|
await page.waitForTimeout(200)
|
|
|
|
const placesToggle = page.locator('label:has-text("Places")').first().locator('input.toggle')
|
|
await placesToggle.check()
|
|
await page.waitForTimeout(1000)
|
|
|
|
// Disable all tags
|
|
const enableAllToggle = page.locator('input[data-maps--maplibre-target="enableAllPlaceTagsToggle"]')
|
|
await enableAllToggle.uncheck()
|
|
await page.waitForTimeout(1000)
|
|
|
|
// Check that places layer has no features
|
|
const placesFeatureCount = await page.evaluate(() => {
|
|
const map = window.mapInstance
|
|
if (!map) return 0
|
|
const source = map.getSource('places')
|
|
return source?._data?.features?.length || 0
|
|
})
|
|
|
|
expect(placesFeatureCount).toBe(0)
|
|
})
|
|
})
|