meshcore-analyzer/test-pr-1490-live-map-gpu-animations-e2e.js

const { test, expect } = require('@playwright/test');

test.describe('Live Map Canvas Animation Engine', () => {
  test('canvas initializes and animations drain correctly', async ({ page }) => {
    // 1. Load the map route
    await page.goto('/#/live');

    // Ensure the map container has loaded
    const mapContainer = page.locator('#liveMap');
    await expect(mapContainer).toBeVisible();

    // 2. Assert the <canvas> element exists
    // The animation canvas is appended to the dedicated `animationsPane`
    // (#1514 S6 — disambiguate from Leaflet's own preferCanvas:true renderer
    // that lives on overlayPane and would otherwise be matched by `canvas`.first()).
    const animCanvas = mapContainer.locator('.leaflet-pane.leaflet-animations-pane canvas');
    await expect(animCanvas).toBeAttached();

    // 3. Fire synthetic packets
    // #1514 S5 — bumped from 5 to 20 so the `recentPaths.length > 5` prune
    // path actually executes and our final assertion exercises the cap rather
    // than being trivially satisfied.
    const packetCount = 20;
    await page.evaluate((count) => {
      // Ensure the VCR speed is at standard 1x for predictable timing
      if (window._liveVcrSetMode) window._liveVcrSetMode('LIVE');

      for (let i = 0; i < count; i++) {
        window._liveDrawAnimatedLine(
          [37.4, -122.0],
          [37.5, -122.1],
          '#00ff00',
          null,
          null,
          '00AA',
          'test-hash-' + i
        );
      }
    }, packetCount);

    // Verify the packets successfully pushed to the active array
    let initialAnimCount = await page.evaluate(() => window._liveTestSeams.getAnimCount());
    expect(initialAnimCount).toBe(packetCount);

    // Verify the engine woke up
    let isAwake = await page.evaluate(() => window._liveTestSeams.isAnimating());
    expect(isAwake).toBe(true);

    // 4. Assert activeAnimations drains within 2x duration
    // Base duration is 660ms at 1x speed. 2x duration = 1320ms.
    // We add a tiny buffer (1500ms total) for Playwright/Browser overhead.
    await expect.poll(async () => {
      return await page.evaluate(() => window._liveTestSeams.getAnimCount());
    }, {
      message: 'activeAnimations did not drain to 0 within 2x duration',
      timeout: 1500,
    }).toBe(0);

    // 5. Assert the engine gracefully went back to sleep.
    // (#1514 — there is one rAF tick between activeAnimations going to 0 and
    // the next renderAnimations frame flipping isAnimating=false. Poll for a
    // small jitter window instead of a one-shot read so the test isn't racy
    // against that single-frame settling delay.)
    await expect.poll(async () => {
      return await page.evaluate(() => window._liveTestSeams.isAnimating());
    }, { timeout: 200 }).toBe(false);

    // 6. Assert recent paths didn't blow past the limit
    let recentPathsCount = await page.evaluate(() => window._liveTestSeams.getPathCount());
    expect(recentPathsCount).toBeLessThanOrEqual(5);

    // 7. #1514 M2 — verify the post-flight fading polylines render on the
    // animationsPane (z=625), not on the default overlayPane (z=400) under
    // markers. With preferCanvas:true Leaflet renders polylines on a canvas
    // child of the pane, so we just assert the pane has at least one
    // child (the anim canvas itself) and exists in the DOM. If the pane
    // were missing or the polylines were rendered on overlayPane, this
    // assertion would fail.
    const fadePaneChildren = await page.evaluate(() => {
      const pane = document.querySelector('.leaflet-pane.leaflet-animations-pane');
      if (!pane) return -1;
      return pane.querySelectorAll('svg path, canvas').length;
    });
    expect(fadePaneChildren).toBeGreaterThanOrEqual(1);
  });
});