From 36846cc96cb0c63281f6e2c29d4f362a163bdbac Mon Sep 17 00:00:00 2001 From: Eugene Burmakin Date: Sun, 30 Nov 2025 18:19:00 +0100 Subject: [PATCH] Fix some e2e tests --- e2e/v2/map/area-selection.spec.js | 4 +- e2e/v2/map/layers/areas.spec.js | 95 +++++++++++++++++++++++-------- e2e/v2/map/settings.spec.js | 21 ++++--- 3 files changed, 87 insertions(+), 33 deletions(-) diff --git a/e2e/v2/map/area-selection.spec.js b/e2e/v2/map/area-selection.spec.js index b35c48f0..c17bd788 100644 --- a/e2e/v2/map/area-selection.spec.js +++ b/e2e/v2/map/area-selection.spec.js @@ -53,7 +53,7 @@ test.describe('Area Selection in Maps V2', () => { const element = document.querySelector('[data-controller*="maps-v2"]') const app = window.Stimulus || window.Application const controller = app.getControllerForElementAndIdentifier(element, 'maps-v2') - return controller.selectionLayer !== undefined + return controller.areaSelectionManager?.selectionLayer !== undefined }) expect(hasSelectionLayer).toBeTruthy() @@ -298,7 +298,7 @@ test.describe('Area Selection in Maps V2', () => { const element = document.querySelector('[data-controller*="maps-v2"]') const app = window.Stimulus || window.Application const controller = app.getControllerForElementAndIdentifier(element, 'maps-v2') - return controller?.selectedPointsLayer !== undefined + return controller?.areaSelectionManager?.selectedPointsLayer !== undefined }) // If points were selected, layer should exist diff --git a/e2e/v2/map/layers/areas.spec.js b/e2e/v2/map/layers/areas.spec.js index 558cbe40..9684e807 100644 --- a/e2e/v2/map/layers/areas.spec.js +++ b/e2e/v2/map/layers/areas.spec.js @@ -97,7 +97,10 @@ test.describe('Areas Layer', () => { // Verify draw layers exist const hasDrawLayers = await page.evaluate(() => { - const map = window.maplibreMap + const element = document.querySelector('[data-controller*="maps-v2"]') + const app = window.Stimulus || window.Application + const controller = app?.getControllerForElementAndIdentifier(element, 'maps-v2') + const map = controller?.map return map && map.getSource('draw-source') !== undefined }) expect(hasDrawLayers).toBe(true) @@ -118,9 +121,9 @@ test.describe('Areas Layer', () => { await page.waitForTimeout(300) await mapCanvas.click({ position: { x: 450, y: 350 } }) - // Wait for area creation modal to appear - const areaModalBox = page.locator('[data-controller="area-creation-v2"] .modal-box') - await areaModalBox.waitFor({ state: 'visible', timeout: 5000 }) + // Wait for area creation modal to open + const areaModal = page.locator('[data-area-creation-v2-target="modal"]') + await expect(areaModal).toHaveClass(/modal-open/, { timeout: 5000 }) // Verify form fields exist await expect(page.locator('[data-area-creation-v2-target="nameInput"]')).toBeVisible() @@ -142,17 +145,24 @@ test.describe('Areas Layer', () => { await page.waitForTimeout(300) await mapCanvas.click({ position: { x: 450, y: 350 } }) - // Wait for modal - const areaModalBox = page.locator('[data-controller="area-creation-v2"] .modal-box') - await areaModalBox.waitFor({ state: 'visible', timeout: 5000 }) + // Wait for modal to open + const areaModal = page.locator('[data-area-creation-v2-target="modal"]') + await expect(areaModal).toHaveClass(/modal-open/, { timeout: 5000 }) + + // Wait for fields to be populated + const radiusDisplay = page.locator('[data-area-creation-v2-target="radiusDisplay"]') + const locationDisplay = page.locator('[data-area-creation-v2-target="locationDisplay"]') + + // Wait for radius to have a non-empty value + await expect(radiusDisplay).not.toHaveValue('', { timeout: 3000 }) // Verify radius has a value - const radiusValue = await page.locator('[data-area-creation-v2-target="radiusDisplay"]').inputValue() + const radiusValue = await radiusDisplay.inputValue() expect(parseInt(radiusValue)).toBeGreaterThan(0) // Verify location has a value (should be coordinates) - const locationValue = await page.locator('[data-area-creation-v2-target="locationDisplay"]').inputValue() - expect(locationValue).toMatch(/\d+\.\d+,\s*\d+\.\d+/) + const locationValue = await locationDisplay.inputValue() + expect(locationValue).toMatch(/-?\d+\.\d+,\s*-?\d+\.\d+/) }) test('should create area and enable layer when submitted', async ({ page }) => { @@ -169,24 +179,63 @@ test.describe('Areas Layer', () => { await page.waitForTimeout(300) await mapCanvas.click({ position: { x: 450, y: 350 } }) - // Wait for modal and fill form - const areaModalBox = page.locator('[data-controller="area-creation-v2"] .modal-box') - await areaModalBox.waitFor({ state: 'visible', timeout: 5000 }) + // Wait for modal to be open + const areaModal = page.locator('[data-area-creation-v2-target="modal"]') + await expect(areaModal).toHaveClass(/modal-open/, { timeout: 5000 }) + + // Wait for fields to be populated before filling the form + const radiusDisplay = page.locator('[data-area-creation-v2-target="radiusDisplay"]') + await expect(radiusDisplay).not.toHaveValue('', { timeout: 3000 }) await page.locator('[data-area-creation-v2-target="nameInput"]').fill('Test Area E2E') - await page.locator('button[type="submit"]:has-text("Create Area")').click() - // Wait for modal to close - await areaModalBox.waitFor({ state: 'hidden', timeout: 5000 }) + // Listen for console errors + page.on('console', msg => { + if (msg.type() === 'error') { + console.log('Browser console error:', msg.text()) + } + }) - // Verify areas layer is now enabled - await page.locator('[data-action="click->maps-v2#toggleSettings"]').first().click() - await page.waitForTimeout(200) - await page.locator('button[data-tab="layers"]').click() - await page.waitForTimeout(200) + // Handle potential alert dialog + let dialogMessage = null + page.once('dialog', async dialog => { + dialogMessage = dialog.message() + console.log('Dialog appeared:', dialogMessage) + await dialog.accept() + }) - const areasToggle = page.locator('label:has-text("Areas")').first().locator('input.toggle') - await expect(areasToggle).toBeChecked() + // Wait for API response + const [response] = await Promise.all([ + page.waitForResponse( + response => response.url().includes('/api/v1/areas') && response.request().method() === 'POST', + { timeout: 10000 } + ), + page.locator('button[type="submit"]:has-text("Create Area")').click() + ]) + + const status = response.status() + console.log('API response status:', status) + + if (status >= 200 && status < 300) { + // Success - verify modal closes (modal-open class is removed) + await expect(areaModal).not.toHaveClass(/modal-open/, { timeout: 5000 }) + + // Wait for area:created event to be processed + await page.waitForTimeout(1000) + + // Verify areas layer is now enabled + await page.locator('[data-action="click->maps-v2#toggleSettings"]').first().click() + await page.waitForTimeout(200) + await page.locator('button[data-tab="layers"]').click() + await page.waitForTimeout(200) + + const areasToggle = page.locator('label:has-text("Areas")').first().locator('input.toggle') + await expect(areasToggle).toBeChecked({ timeout: 3000 }) + } else { + // API failed - log the error and fail the test with helpful info + const responseBody = await response.text() + throw new Error(`API call failed with status ${status}: ${responseBody}`) + } }) }) }) diff --git a/e2e/v2/map/settings.spec.js b/e2e/v2/map/settings.spec.js index ba4922f1..adac4848 100644 --- a/e2e/v2/map/settings.spec.js +++ b/e2e/v2/map/settings.spec.js @@ -11,18 +11,23 @@ test.describe('Map Settings', () => { test.describe('Settings Panel', () => { test('opens and closes settings panel', async ({ page }) => { - const settingsButton = page.locator('button[title="Open map settings"]') - await settingsButton.waitFor({ state: 'visible', timeout: 5000 }) - await settingsButton.click() - await page.waitForTimeout(500) - const panel = page.locator('[data-maps-v2-target="settingsPanel"]') - await expect(panel).toHaveClass(/open/) + // Verify panel exists but is not open initially + await expect(panel).toBeVisible() + await expect(panel).not.toHaveClass(/open/) + + // Open the panel + const settingsButton = page.locator('button[title="Open map settings"]') + await settingsButton.click() + + // Wait for the panel to have the open class + await expect(panel).toHaveClass(/open/, { timeout: 3000 }) + + // Close the panel const closeButton = page.locator('button[title="Close panel"]') await closeButton.click() - await page.waitForTimeout(500) - await expect(panel).not.toHaveClass(/open/) + await expect(panel).not.toHaveClass(/open/, { timeout: 3000 }) }) test('displays layer controls in settings', async ({ page }) => {