@editframe/elements 0.42.5 → 0.42.8

package/test/setup.ts

@@ -1,71 +0,0 @@
-/**
- * Global test setup for all browser tests
- * This runs before every test to ensure clean state
- */
-
-import { beforeEach, afterAll } from "vitest";
-import {
-  globalRequestDeduplicator,
-  mediaCache,
-} from "../src/elements/EFMedia/CachedFetcher.js";
-import { globalURLTokenDeduplicator } from "../src/transcoding/cache/URLTokenDeduplicator.js";
-import { TEST_SERVER_PORT } from "./constants.js";
-
-// Type declarations for test environment
-declare global {
-  interface Window {
-    __CI_MODE__?: boolean;
-    __PROFILER_STOP_REQUESTED__?: boolean;
-  }
-}
-
-/**
- * Get the correct API host for the current environment.
- * In local dev with Traefik, returns the Traefik URL (e.g., http://main.localhost:4322).
- * In CI or direct access, returns the current location (e.g., http://localhost:63315).
- */
-export function getApiHost(): string {
-  const host = window.location.host;
-  const protocol = window.location.protocol;
-
-  // Check if CI mode was injected by server
-  const isCI = (window as any).__CI_MODE__ === true;
-
-  if (isCI) {
-    // CI mode: always use localhost directly
-    return `${protocol}//${host}`;
-  }
-
-  if (host === `localhost:${TEST_SERVER_PORT}`) {
-    // Check if we have a Traefik referrer (local dev)
-    const traefikReferrer = document.referrer.match(/\/\/([^:]+):4322/)?.[1];
-    if (traefikReferrer) {
-      // Local dev: use Traefik URL
-      return `${protocol}//${traefikReferrer}:4322`;
-    }
-    // No Traefik referrer but not explicitly CI: use localhost directly
-    return `${protocol}//${host}`;
-  }
-  // Already on Traefik URL or other configuration
-  return `${protocol}//${host}`;
-}
-
-// Clear global caches before each test to ensure isolation
-beforeEach(() => {
-  globalRequestDeduplicator.clear();
-  mediaCache.clear();
-  globalURLTokenDeduplicator.clear();
-});
-
-// Signal profiler to stop before tests finish
-afterAll(() => {
-  if (typeof window !== "undefined") {
-    // Always set the flag, creating it if it doesn't exist
-    // This handles both profiled and non-profiled test runs
-    (window as any).__PROFILER_STOP_REQUESTED__ = true;
-
-    // Give profiler time to detect the signal and retrieve profile data
-    // Poll interval is 50ms, so wait longer to ensure detection + retrieval
-    return new Promise((resolve) => setTimeout(resolve, 500));
-  }
-});

package/test/useAssetMSW.ts

@@ -1,53 +0,0 @@
-import { HttpResponse, http } from "msw";
-
-export const assetMSWHandlers = [
-  http.get("/api/v1/files/:id/index", async () => {
-    const mockIndex = {
-      0: {
-        duration: 10000,
-        timescale: 1000,
-        fragments: [
-          {
-            offset: 0,
-            size: 1024,
-            timestamp: 0,
-            duration: 10000,
-          },
-        ],
-      },
-    };
-
-    return HttpResponse.json(mockIndex, {
-      headers: {
-        "Content-Type": "application/json",
-      },
-    });
-  }),
-
-  http.get("/api/v1/files/:id/tracks/:trackId", async ({ request }) => {
-    const rangeHeader = request.headers.get("range");
-
-    if (rangeHeader) {
-      const mockData = new ArrayBuffer(1024);
-      return new HttpResponse(mockData, {
-        status: 206,
-        headers: {
-          "Content-Type": "video/mp4",
-          "Accept-Ranges": "bytes",
-          "Content-Range": rangeHeader,
-          "Content-Length": "1024",
-        },
-      });
-    }
-
-    const mockData = new ArrayBuffer(1024);
-    return new HttpResponse(mockData, {
-      status: 200,
-      headers: {
-        "Content-Type": "video/mp4",
-        "Accept-Ranges": "bytes",
-        "Content-Length": "1024",
-      },
-    });
-  }),
-];

package/test/useMSW.ts

@@ -1,40 +0,0 @@
-/**
- * MSW integration for Vitest Browser Mode
- * Based on: https://mswjs.io/docs/recipes/vitest-browser-mode/
- */
-
-import { setupWorker } from "msw/browser";
-import { test as testBase } from "vitest";
-import { transcodeMSWHandlers } from "./useTranscodeMSW.js";
-
-// Create the worker instance that will be shared across tests
-const worker = setupWorker();
-
-// Start the worker once when this module is loaded
-let workerStarted = false;
-
-/**
- * Extended test with MSW worker integration for Vitest Browser Mode
- * This follows the official MSW recommendation for Vitest Browser Mode
- */
-export const test = testBase.extend<{
-  worker: typeof worker;
-}>({
-  worker: [
-    async ({ expect: _expect }, use) => {
-      // Only start the worker once
-      if (!workerStarted) {
-        await worker.start({
-          onUnhandledRequest: "bypass", // Allow unhandled requests to pass through
-        });
-        // Set up default handlers for transcode API endpoints
-        worker.use(...transcodeMSWHandlers);
-        workerStarted = true;
-      }
-
-      // Use the worker in the test
-      await use(worker);
-    },
-    { scope: "test" },
-  ],
-});

package/test/useTranscodeMSW.ts

@@ -1,191 +0,0 @@
-/**
- * Transcode API MSW handlers for testing
- * Provides handlers for transcode API endpoints including URL signing
- */
-
-import { HttpResponse, http } from "msw";
-
-/**
- * MSW handlers for transcode API endpoints
- * These handlers mock the API responses needed for tests
- */
-export const transcodeMSWHandlers = [
-  // URL signing endpoint handler
-  // This mocks the /@ef-sign-url endpoint used by the Vite plugin
-  http.post("/@ef-sign-url", async () => {
-    // Return a mock JWT token
-    // The token format is: header.payload.signature
-    // We create a simple mock token that will pass basic validation
-    const mockToken =
-      "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1cmwiOiJodHRwOi8vd2ViOjMwMDAvaGVhZC1tb292LTQ4MHAubXA0IiwiZXhwIjo5OTk5OTk5OTk5fQ.mock-signature";
-
-    return HttpResponse.json(
-      { token: mockToken },
-      {
-        status: 200,
-        headers: {
-          "Content-Type": "application/json",
-        },
-      },
-    );
-  }),
-
-  // URL token endpoint handler (for proxied requests from vite plugin)
-  // The vite plugin proxies /@ef-sign-url to /api/v1/url-token
-  http.post("/api/v1/url-token", async () => {
-    // Return the same mock JWT token as /@ef-sign-url
-    const mockToken =
-      "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1cmwiOiJodHRwOi8vd2ViOjMwMDAvaGVhZC1tb292LTQ4MHAubXA0IiwiZXhwIjo5OTk5OTk5OTk5fQ.mock-signature";
-
-    return HttpResponse.json(
-      { token: mockToken },
-      {
-        status: 200,
-        headers: {
-          "Content-Type": "application/json",
-        },
-      },
-    );
-  }),
-
-  // Transcode manifest endpoint handler
-  // This mocks the manifest.json endpoint used by JitMediaEngine
-  http.get("/api/v1/transcode/manifest.json", async ({ request }) => {
-    const url = new URL(request.url);
-    const sourceUrl = url.searchParams.get("url");
-
-    if (!sourceUrl) {
-      return HttpResponse.json(
-        { error: "url parameter is required" },
-        { status: 400 },
-      );
-    }
-
-    // Return a mock manifest response
-    const manifest = {
-      version: "1.0",
-      type: "cmaf",
-      duration: 10,
-      durationMs: 10000,
-      segmentDuration: 2000,
-      baseUrl: `${url.origin}/api/v1/transcode`,
-      sourceUrl: sourceUrl,
-      audioRenditions: [
-        {
-          id: "audio",
-          src: sourceUrl,
-          segmentDurationMs: 2000,
-        },
-      ],
-      videoRenditions: [
-        {
-          id: "high",
-          src: sourceUrl,
-          segmentDurationMs: 2000,
-        },
-      ],
-      endpoints: {
-        initSegment: `${url.origin}/api/v1/transcode/{rendition}/init.m4s?url=${encodeURIComponent(sourceUrl)}`,
-        mediaSegment: `${url.origin}/api/v1/transcode/{rendition}/{segmentId}.m4s?url=${encodeURIComponent(sourceUrl)}`,
-      },
-      jitInfo: {
-        parallelTranscodingSupported: true,
-        expectedTranscodeLatency: 1000,
-        segmentCount: 5,
-      },
-    };
-
-    return HttpResponse.json(manifest, {
-      status: 200,
-      headers: {
-        "Content-Type": "application/json",
-      },
-    });
-  }),
-
-  // Transcode init segment endpoint handler
-  http.get("/api/v1/transcode/:rendition/init.m4s", async () => {
-    // Return a minimal valid MP4 init segment
-    // This is a very basic ftyp + moov box structure
-    const initSegment = new Uint8Array([
-      // ftyp box
-      0x00,
-      0x00,
-      0x00,
-      0x20, // box size
-      0x66,
-      0x74,
-      0x79,
-      0x70, // 'ftyp'
-      0x69,
-      0x73,
-      0x6f,
-      0x6d, // major brand 'isom'
-      0x00,
-      0x00,
-      0x02,
-      0x00, // minor version
-      0x69,
-      0x73,
-      0x6f,
-      0x6d, // compatible brand 'isom'
-      0x69,
-      0x73,
-      0x6f,
-      0x32, // compatible brand 'iso2'
-      0x6d,
-      0x70,
-      0x34,
-      0x31, // compatible brand 'mp41'
-      // moov box (minimal)
-      0x00,
-      0x00,
-      0x00,
-      0x08, // box size
-      0x6d,
-      0x6f,
-      0x6f,
-      0x76, // 'moov'
-    ]);
-
-    return HttpResponse.arrayBuffer(initSegment.buffer, {
-      status: 200,
-      headers: {
-        "Content-Type": "video/mp4",
-      },
-    });
-  }),
-
-  // Transcode media segment endpoint handler
-  http.get("/api/v1/transcode/:rendition/:segmentId.m4s", async () => {
-    // Return a minimal valid MP4 media segment
-    // This is a very basic moof + mdat box structure
-    const mediaSegment = new Uint8Array([
-      // moof box (minimal)
-      0x00,
-      0x00,
-      0x00,
-      0x08, // box size
-      0x6d,
-      0x6f,
-      0x6f,
-      0x66, // 'moof'
-      // mdat box (minimal)
-      0x00,
-      0x00,
-      0x00,
-      0x08, // box size
-      0x6d,
-      0x64,
-      0x61,
-      0x74, // 'mdat'
-    ]);
-
-    return HttpResponse.arrayBuffer(mediaSegment.buffer, {
-      status: 200,
-      headers: {
-        "Content-Type": "video/mp4",
-      },
-    });
-  }),
-];

package/test/visualRegressionUtils.ts

@@ -1,300 +0,0 @@
-/**
- * Visual regression utilities for browser tests.
- *
- * These utilities enable capturing canvas/element snapshots in browser tests
- * and comparing them against baseline images using odiff for pixel-perfect
- * visual regression testing.
- */
-
-export interface SnapshotComparisonResult {
-  match: boolean;
-  diffCount?: number;
-  diffPercentage?: number;
-  baselineCreated?: boolean;
-  error?: string;
-}
-
-/**
- * Capture a canvas or image as a data URL.
- * Uses JPEG format with configurable quality for smaller file sizes.
- */
-export function captureCanvasAsDataUrl(
-  source: CanvasImageSource | HTMLCanvasElement,
-  format: "image/png" | "image/jpeg" = "image/jpeg",
-  quality: number = 0.85,
-): string {
-  // If it's already a canvas, use toDataURL directly
-  if (source instanceof HTMLCanvasElement) {
-    return source.toDataURL(format, quality);
-  }
-
-  // Otherwise, draw to temp canvas first
-  const canvas = document.createElement("canvas");
-  canvas.width = (source as any).width as number;
-  canvas.height = (source as any).height as number;
-  const ctx = canvas.getContext("2d");
-  if (!ctx) {
-    throw new Error("Failed to get canvas 2d context");
-  }
-  ctx.drawImage(source, 0, 0);
-  return canvas.toDataURL(format, quality);
-}
-
-/**
- * Capture an element to canvas, then return as data URL.
- * Uses the same technique as renderToImage but returns raw data.
- */
-export async function captureElementAsDataUrl(
-  element: HTMLElement,
-  width: number,
-  height: number,
-): Promise<string> {
-  const canvas = document.createElement("canvas");
-  canvas.width = width;
-  canvas.height = height;
-
-  const ctx = canvas.getContext("2d");
-  if (!ctx) {
-    throw new Error("Failed to get canvas 2d context");
-  }
-
-  // Use html2canvas-style rendering through SVG foreignObject
-  const clone = element.cloneNode(true) as HTMLElement;
-
-  // Create wrapper with XHTML namespace
-  const wrapper = document.createElement("div");
-  wrapper.setAttribute("xmlns", "http://www.w3.org/1999/xhtml");
-  wrapper.setAttribute(
-    "style",
-    `width:${width}px;height:${height}px;overflow:hidden;position:relative;`,
-  );
-  wrapper.appendChild(clone);
-
-  // Serialize to XHTML
-  const xmlSerializer = new XMLSerializer();
-  const serialized = xmlSerializer.serializeToString(wrapper);
-
-  // Wrap in SVG foreignObject
-  const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}">
-    <foreignObject width="100%" height="100%">
-      ${serialized}
-    </foreignObject>
-  </svg>`;
-
-  // Convert to data URL
-  const base64 = btoa(unescape(encodeURIComponent(svg)));
-  const svgDataUri = `data:image/svg+xml;base64,${base64}`;
-
-  // Draw to canvas
-  const img = await new Promise<HTMLImageElement>((resolve, reject) => {
-    const image = new Image();
-    image.onload = () => resolve(image);
-    image.onerror = reject;
-    image.src = svgDataUri;
-  });
-
-  ctx.drawImage(img, 0, 0);
-  return canvas.toDataURL("image/png");
-}
-
-/**
- * Write a snapshot image to the file system via the test server.
- * This sends the PNG data to the server which writes it to disk.
- */
-export async function writeSnapshot(
-  testName: string,
-  snapshotName: string,
-  dataUrl: string,
-  isBaseline: boolean = false,
-): Promise<void> {
-  const response = await fetch("/@ef-write-snapshot", {
-    method: "POST",
-    headers: {
-      "Content-Type": "application/json",
-    },
-    body: JSON.stringify({
-      testName,
-      snapshotName,
-      dataUrl,
-      isBaseline,
-    }),
-  });
-
-  if (!response.ok) {
-    const error = await response.text();
-    throw new Error(`Failed to write snapshot: ${error}`);
-  }
-}
-
-/**
- * Compare a snapshot against its baseline using odiff.
- * Returns comparison results including diff percentage.
- */
-export async function compareSnapshot(
-  testName: string,
-  snapshotName: string,
-  dataUrl: string,
-  options: {
-    threshold?: number;
-    antialiasing?: boolean;
-    acceptableDiffPercentage?: number;
-  } = {},
-): Promise<SnapshotComparisonResult> {
-  const {
-    threshold = 0.1,
-    antialiasing = true,
-    acceptableDiffPercentage = 1.0,
-  } = options;
-
-  const response = await fetch("/@ef-compare-snapshot", {
-    method: "POST",
-    headers: {
-      "Content-Type": "application/json",
-    },
-    body: JSON.stringify({
-      testName,
-      snapshotName,
-      dataUrl,
-      threshold,
-      antialiasing,
-      acceptableDiffPercentage,
-    }),
-  });
-
-  if (!response.ok) {
-    const error = await response.text();
-    throw new Error(`Failed to compare snapshot: ${error}`);
-  }
-
-  return response.json();
-}
-
-/**
- * High-level function to capture and compare a canvas snapshot.
- * Creates baseline if it doesn't exist, otherwise compares.
- */
-export async function assertCanvasSnapshot(
-  canvas: HTMLCanvasElement,
-  testName: string,
-  snapshotName: string,
-  options: {
-    threshold?: number;
-    acceptableDiffPercentage?: number;
-  } = {},
-): Promise<SnapshotComparisonResult> {
-  // Use PNG format for consistent snapshot comparison (odiff works best with PNG)
-  const dataUrl = captureCanvasAsDataUrl(canvas, "image/png");
-  return compareSnapshot(testName, snapshotName, dataUrl, options);
-}
-
-/**
- * Assert that a snapshot matches its baseline.
- * Throws an assertion error if the diff exceeds the acceptable threshold.
- */
-export async function expectCanvasToMatchSnapshot(
-  source: CanvasImageSource | HTMLCanvasElement,
-  testName: string,
-  snapshotName: string,
-  options: {
-    threshold?: number;
-    acceptableDiffPercentage?: number;
-  } = {},
-): Promise<void> {
-  const result = await assertCanvasSnapshot(
-    source as unknown as HTMLCanvasElement,
-    testName,
-    snapshotName,
-    options,
-  );
-
-  if (result.baselineCreated) {
-    console.log(`✅ Created baseline: ${testName}/${snapshotName}`);
-    return;
-  }
-
-  if (!result.match) {
-    const diffInfo =
-      result.diffPercentage !== undefined
-        ? `${result.diffPercentage.toFixed(2)}% different`
-        : result.error || "comparison failed";
-    throw new Error(
-      `Visual regression detected for ${testName}/${snapshotName}: ${diffInfo}`,
-    );
-  }
-}
-
-/**
- * Compare two canvases or images directly against each other.
- * Returns comparison results including diff percentage.
- */
-export async function compareTwoCanvases(
-  source1: CanvasImageSource | HTMLCanvasElement,
-  source2: CanvasImageSource | HTMLCanvasElement,
-  testName: string,
-  comparisonName: string,
-  options: {
-    threshold?: number;
-    acceptableDiffPercentage?: number;
-  } = {},
-): Promise<SnapshotComparisonResult> {
-  const { threshold = 0.1, acceptableDiffPercentage = 1.0 } = options;
-
-  // Use PNG format for consistent comparison (odiff works best with PNG)
-  const dataUrl1 = captureCanvasAsDataUrl(source1, "image/png");
-  const dataUrl2 = captureCanvasAsDataUrl(source2, "image/png");
-
-  const response = await fetch("/@ef-compare-two-images", {
-    method: "POST",
-    headers: {
-      "Content-Type": "application/json",
-    },
-    body: JSON.stringify({
-      testName,
-      comparisonName,
-      dataUrl1,
-      dataUrl2,
-      threshold,
-      acceptableDiffPercentage,
-    }),
-  });
-
-  if (!response.ok) {
-    const error = await response.text();
-    throw new Error(`Failed to compare canvases: ${error}`);
-  }
-
-  return response.json();
-}
-
-/**
- * Assert that two canvases match within acceptable threshold.
- * Throws an assertion error if the diff exceeds the acceptable threshold.
- */
-export async function expectCanvasesToMatch(
-  canvas1: HTMLCanvasElement,
-  canvas2: HTMLCanvasElement,
-  testName: string,
-  comparisonName: string,
-  options: {
-    threshold?: number;
-    acceptableDiffPercentage?: number;
-  } = {},
-): Promise<void> {
-  const result = await compareTwoCanvases(
-    canvas1,
-    canvas2,
-    testName,
-    comparisonName,
-    options,
-  );
-
-  if (!result.match) {
-    const diffInfo =
-      result.diffPercentage !== undefined
-        ? `${result.diffPercentage.toFixed(2)}% different`
-        : result.error || "comparison failed";
-    throw new Error(
-      `Canvas comparison failed for ${testName}/${comparisonName}: ${diffInfo}`,
-    );
-  }
-}