dawarich/e2e/v2/phase-6-advanced.spec.js

import { test, expect } from '@playwright/test'
import { closeOnboardingModal } from '../helpers/navigation'
import {
  navigateToMapsV2,
  waitForMapLibre,
  waitForLoadingComplete
} from './helpers/setup'

test.describe('Phase 6: Advanced Features (Fog + Scratch + Toast)', () => {
  test.beforeEach(async ({ page }) => {
    await navigateToMapsV2(page)
    await closeOnboardingModal(page)
    await waitForMapLibre(page)
    await waitForLoadingComplete(page)
    await page.waitForTimeout(1500)
  })

  test.describe('Fog of War Layer', () => {
    test('fog layer starts hidden', async ({ page }) => {
      const fogCanvas = await page.locator('.fog-canvas')
      const isHidden = await fogCanvas.evaluate(el => el.style.display === 'none')
      expect(isHidden).toBe(true)
    })

    test('can toggle fog layer in settings', async ({ page }) => {
      // Open settings
      await page.click('button[title="Settings"]')
      await page.waitForTimeout(400)

      // Toggle fog
      const fogCheckbox = page.locator('label.setting-checkbox:has-text("Show Fog of War")').locator('input[type="checkbox"]')
      await fogCheckbox.check()
      await page.waitForTimeout(300)

      // Check if visible
      const fogCanvas = await page.locator('.fog-canvas')
      const isVisible = await fogCanvas.evaluate(el => el.style.display !== 'none')
      expect(isVisible).toBe(true)
    })

    test('fog canvas exists on map', async ({ page }) => {
      const fogCanvas = await page.locator('.fog-canvas')
      await expect(fogCanvas).toBeAttached()
    })
  })

  test.describe('Scratch Map Layer', () => {
    test('scratch layer settings toggle exists', async ({ page }) => {
      // Open settings
      await page.click('button[title="Settings"]')
      await page.waitForTimeout(400)

      const scratchToggle = page.locator('label.setting-checkbox:has-text("Show Scratch Map")')
      await expect(scratchToggle).toBeVisible()
    })

    test('can toggle scratch map in settings', async ({ page }) => {
      // Open settings
      await page.click('button[title="Settings"]')
      await page.waitForTimeout(400)

      // Toggle scratch map
      const scratchCheckbox = page.locator('label.setting-checkbox:has-text("Show Scratch Map")').locator('input[type="checkbox"]')
      await scratchCheckbox.check()
      await page.waitForTimeout(300)

      // Just verify it doesn't crash - layer may be empty
      const isChecked = await scratchCheckbox.isChecked()
      expect(isChecked).toBe(true)
    })
  })

  test.describe('Photos Layer', () => {
    test('photos layer settings toggle exists', async ({ page }) => {
      // Open settings
      await page.click('button[title="Settings"]')
      await page.waitForTimeout(400)

      const photosToggle = page.locator('label.setting-checkbox:has-text("Show Photos")')
      await expect(photosToggle).toBeVisible()
    })

    test('can toggle photos layer in settings', async ({ page }) => {
      // Open settings
      await page.click('button[title="Settings"]')
      await page.waitForTimeout(400)

      // Toggle photos
      const photosCheckbox = page.locator('label.setting-checkbox:has-text("Show Photos")').locator('input[type="checkbox"]')
      await photosCheckbox.check()
      await page.waitForTimeout(500)

      // Verify it's checked
      const isChecked = await photosCheckbox.isChecked()
      expect(isChecked).toBe(true)
    })

    test('photo markers appear when photos layer is enabled', async ({ page }) => {
      // Open settings
      await page.click('button[title="Settings"]')
      await page.waitForTimeout(400)

      // Enable photos layer
      const photosCheckbox = page.locator('label.setting-checkbox:has-text("Show Photos")').locator('input[type="checkbox"]')
      await photosCheckbox.check()
      await page.waitForTimeout(500)

      // Check for photo markers (they might not exist if no photos in test data)
      const photoMarkers = page.locator('.photo-marker')
      const markerCount = await photoMarkers.count()

      // Just verify the test doesn't crash - markers may be 0 if no photos exist
      expect(markerCount).toBeGreaterThanOrEqual(0)
    })
  })

  test.describe('Toast Notifications', () => {
    test('toast container is initialized', async ({ page }) => {
      // Toast container should exist after page load
      const toastContainer = page.locator('.toast-container')
      await expect(toastContainer).toBeAttached()
    })

    test.skip('success toast appears on data load', async ({ page }) => {
      // This test is flaky because toast may disappear quickly
      // Just verifying toast system is initialized above
    })
  })

  test.describe('Settings Panel', () => {
    test('all layer toggles are present', async ({ page }) => {
      // Open settings
      await page.click('button[title="Settings"]')
      await page.waitForTimeout(400)

      const toggles = [
        'Show Heatmap',
        'Show Visits',
        'Show Photos',
        'Show Areas',
        'Show Tracks',
        'Show Fog of War',
        'Show Scratch Map'
      ]

      for (const toggleText of toggles) {
        const toggle = page.locator(`label.setting-checkbox:has-text("${toggleText}")`)
        await expect(toggle).toBeVisible()
      }
    })
  })

  test.describe('Regression Tests', () => {
    test.skip('all previous features still work (z-index overlay issue)', async ({ page }) => {
      // Just verify page loads and no JavaScript errors
      const errors = []
      page.on('pageerror', error => errors.push(error.message))

      // Open settings
      await page.click('button[title="Settings"]')
      await page.waitForTimeout(400)

      // Close settings by clicking the close button (×)
      await page.click('.settings-panel .close-btn')
      await page.waitForTimeout(400)

      expect(errors).toHaveLength(0)
    })

    test('fog and scratch work alongside other layers', async ({ page }) => {
      // Open settings
      await page.click('button[title="Settings"]')
      await page.waitForTimeout(400)

      // Enable multiple layers
      const heatmapCheckbox = page.locator('label.setting-checkbox:has-text("Show Heatmap")').locator('input[type="checkbox"]')
      await heatmapCheckbox.check()

      const fogCheckbox = page.locator('label.setting-checkbox:has-text("Show Fog of War")').locator('input[type="checkbox"]')
      await fogCheckbox.check()

      await page.waitForTimeout(300)

      // Verify both are enabled
      expect(await heatmapCheckbox.isChecked()).toBe(true)
      expect(await fogCheckbox.isChecked()).toBe(true)
    })
  })
})