fix: close final viewer integration gaps (#5)

tests/e2e/viewer2d.lifecycle.spec.ts

@@ -1,6 +1,82 @@
-import { expect, test } from '@playwright/test';
+import { expect, type Page, test } from '@playwright/test';
+
+async function installLifecycleProbe(page: Page) {
+  await page.addInitScript(() => {
+    const activeAnimationFrames = new Set<number>();
+    const contexts: WebGLRenderingContext[] = [];
+    const listeners: Array<{
+      listener: EventListenerOrEventListenerObject | null;
+      target: EventTarget;
+      type: string;
+    }> = [];
+
+    const requestAnimationFrameOriginal = window.requestAnimationFrame.bind(window);
+    const cancelAnimationFrameOriginal = window.cancelAnimationFrame.bind(window);
+    window.requestAnimationFrame = (callback) => {
+      let id = 0;
+      id = requestAnimationFrameOriginal((time) => {
+        activeAnimationFrames.delete(id);
+        callback(time);
+      });
+      activeAnimationFrames.add(id);
+      return id;
+    };
+    window.cancelAnimationFrame = (id) => {
+      activeAnimationFrames.delete(id);
+      cancelAnimationFrameOriginal(id);
+    };
+
+    const addEventListenerOriginal = EventTarget.prototype.addEventListener;
+    const removeEventListenerOriginal = EventTarget.prototype.removeEventListener;
+    EventTarget.prototype.addEventListener = function (type, listener, options) {
+      listeners.push({ listener, target: this, type });
+      return addEventListenerOriginal.call(this, type, listener, options);
+    };
+    EventTarget.prototype.removeEventListener = function (type, listener, options) {
+      const index = listeners.findIndex(
+        (entry) => entry.target === this && entry.type === type && entry.listener === listener,
+      );
+      if (index >= 0) listeners.splice(index, 1);
+      return removeEventListenerOriginal.call(this, type, listener, options);
+    };
+
+    const getContextOriginal = HTMLCanvasElement.prototype.getContext;
+    HTMLCanvasElement.prototype.getContext = function (...args) {
+      const context = getContextOriginal.apply(this, args as never);
+      if (
+        context &&
+        (args[0] === 'webgl' || args[0] === 'webgl2' || args[0] === 'experimental-webgl') &&
+        !contexts.includes(context as WebGLRenderingContext)
+      ) {
+        contexts.push(context as WebGLRenderingContext);
+      }
+      return context;
+    } as typeof HTMLCanvasElement.prototype.getContext;
+
+    Object.defineProperty(window, '__lifecycleProbe', {
+      value: {
+        snapshot: () => ({
+          activeAnimationFrames: activeAnimationFrames.size,
+          canvasListeners: listeners.filter(
+            (entry) => entry.target instanceof HTMLCanvasElement,
+          ).length,
+          contexts: contexts.length,
+          contextsLost:
+            contexts.length > 0 && contexts.every((context) => context.isContextLost()),
+          keydownListeners: listeners.filter(
+            (entry) => entry.target === window && entry.type === 'keydown',
+          ).length,
+          resizeListeners: listeners.filter(
+            (entry) => entry.target === window && entry.type === 'resize',
+          ).length,
+        }),
+      },
+    });
+  });
+}
 
 test('viewer2d releases its canvas when disposed', async ({ page }) => {
+  await installLifecycleProbe(page);
   await page.goto('/');
   await page.getByRole('button', { name: 'Sample DXF' }).click();
   await expect(page.locator('#status')).toContainText('✓ simple.dxf');
@@ -35,9 +111,25 @@ test('viewer2d releases its canvas when disposed', async ({ page }) => {
     ).__viewer2d?.dispose?.();
   });
   await expect(page.locator('canvas')).toHaveCount(0);
+  const resources = await page.evaluate(() =>
+    (
+      window as Window & {
+        __lifecycleProbe: { snapshot: () => Record<string, number | boolean> };
+      }
+    ).__lifecycleProbe.snapshot(),
+  );
+  expect(resources).toEqual({
+    activeAnimationFrames: 0,
+    canvasListeners: 0,
+    contexts: 1,
+    contextsLost: true,
+    keydownListeners: 0,
+    resizeListeners: 0,
+  });
 });
 
 test('viewer3d releases its canvas on pagehide and remains disposable', async ({ page }) => {
+  await installLifecycleProbe(page);
   await page.goto('http://127.0.0.1:3333/?model=/samples/Box.glb');
   await page.waitForFunction(
     () =>
@@ -54,13 +146,30 @@ test('viewer3d releases its canvas on pagehide and remains disposable', async ({
     window.dispatchEvent(new PageTransitionEvent('pagehide'));
     const exposed = (window as Window & { __viewer?: { dispose: () => void } }).__viewer;
     exposed?.dispose();
+    const resources = (
+      window as Window & {
+        __lifecycleProbe: { snapshot: () => Record<string, number | boolean> };
+      }
+    ).__lifecycleProbe.snapshot();
     return {
       canvases: document.querySelectorAll('canvas').length,
       exposed: Boolean(exposed),
+      resources,
     };
   });
 
-  expect(result).toEqual({ canvases: 0, exposed: false });
+  expect(result).toEqual({
+    canvases: 0,
+    exposed: false,
+    resources: {
+      activeAnimationFrames: 0,
+      canvasListeners: 0,
+      contexts: 1,
+      contextsLost: true,
+      keydownListeners: 0,
+      resizeListeners: 0,
+    },
+  });
 });
 
 test('viewer2d and viewer3d survive ten mount transitions without duplicate canvases', async ({

tests/e2e/viewer2d.subpath.spec.ts

@@ -0,0 +1,31 @@
+import { expect, test } from '@playwright/test';
+
+test('viewer2d resolves DWG WASM, font, and sample under a production subpath', async ({
+  page,
+}) => {
+  const failedRequests: string[] = [];
+  const responseUrls: string[] = [];
+  page.on('requestfailed', (request) => failedRequests.push(request.url()));
+  page.on('response', (response) => responseUrls.push(response.url()));
+
+  await page.goto(
+    'http://127.0.0.1:45173/viewer-2d/?model=/viewer-2d/samples/BasicSample.dwg',
+  );
+  await expect(page.locator('#status')).toContainText('7309 entities', { timeout: 20_000 });
+  await expect.poll(
+    () =>
+      ({
+        font: responseUrls.some((url) =>
+          url.endsWith('/viewer-2d/fonts/NanumGothic-Regular.ttf'),
+        ),
+        sample: responseUrls.some((url) =>
+          url.endsWith('/viewer-2d/samples/BasicSample.dwg'),
+        ),
+        wasm: responseUrls.some(
+          (url) => url.includes('/viewer-2d/assets/') && url.endsWith('.wasm'),
+        ),
+      }),
+    { timeout: 20_000 },
+  ).toEqual({ font: true, sample: true, wasm: true });
+  expect(failedRequests).toEqual([]);
+});

tests/viewer2d.contract.test.ts

@@ -1,28 +1,26 @@
 import { readFile } from 'node:fs/promises';
-import { describe, expect, it } from 'vitest';
-import { isCad2DFile, parseCad } from '@hmwebviewer/viewer2d';
+import { describe, expect, it, vi } from 'vitest';
+import { isCad2DFile, loadCad } from '@hmwebviewer/viewer2d';
 
 describe('viewer2d package interface', () => {
-  it('parses the sample DXF through the public package interface', async () => {
+  it('parses and loads the sample DXF without exposing the parser result', async () => {
     const file = await readFile(
       new URL('../apps/viewer-2d-sample/public/samples/simple.dxf', import.meta.url),
     );
-    const result = await parseCad({
+    const viewer = {
+      load: vi.fn(),
+      resize: vi.fn(),
+    };
+    const summary = await loadCad(viewer, {
       name: 'simple.dxf',
       data: file.buffer.slice(file.byteOffset, file.byteOffset + file.byteLength),
     });
-    const entities = result.entities as Array<{ layer?: string; type?: string }>;
 
     expect(isCad2DFile('drawing.DWG')).toBe(true);
     expect(isCad2DFile('drawing.dxf')).toBe(true);
     expect(isCad2DFile('drawing.pdf')).toBe(false);
-    expect(entities.map(({ type, layer }) => [type, layer])).toEqual([
-      ['LINE', 'OUTLINE'],
-      ['LINE', 'OUTLINE'],
-      ['LINE', 'OUTLINE'],
-      ['LINE', 'OUTLINE'],
-      ['CIRCLE', '0'],
-      ['TEXT', '0'],
-    ]);
+    expect(summary).toEqual({ entityCount: 6 });
+    expect(viewer.load).toHaveBeenCalledOnce();
+    expect(viewer.resize).toHaveBeenCalledOnce();
   });
 });