@editframe/elements 0.26.3-beta.0 → 0.26.4-beta.0

package/src/elements/EFAudio.browsertest.ts

@@ -1,706 +0,0 @@
-import { html, render } from "lit";
-import { HttpResponse, http } from "msw";
-import { afterEach, beforeEach, describe } from "vitest";
-import { assetMSWHandlers } from "../../test/useAssetMSW.js";
-import { test as baseTest } from "../../test/useMSW.js";
-import type { EFAudio } from "./EFAudio.js";
-import "./EFAudio.js";
-import "../gui/EFWorkbench.js";
-import "../gui/EFPreview.js";
-import "./EFTimegroup.js";
-
-const test = baseTest.extend({
-  setupAssetHandlers: [
-    async ({ worker }, use) => {
-      // Set up centralized MSW handlers to proxy requests to test assets
-      worker.use(...assetMSWHandlers);
-      await use(undefined);
-    },
-    { auto: true },
-  ],
-});
-
-describe("EFAudio", () => {
-  beforeEach(() => {
-    // Clean up DOM and localStorage
-    while (document.body.children.length) {
-      document.body.children[0]?.remove();
-    }
-    localStorage.clear();
-  });
-
-  afterEach(() => {
-    // Clean up any remaining elements
-    const audios = document.querySelectorAll("ef-audio");
-    for (const audio of audios) {
-      audio.remove();
-    }
-  });
-
-  describe("basic rendering", () => {
-    test("should be defined and render audio element", async ({ expect }) => {
-      const container = document.createElement("div");
-      render(
-        html`
-        <ef-workbench>
-          <ef-preview>
-            <ef-audio></ef-audio>
-          </ef-preview>
-        </ef-workbench>
-      `,
-        container,
-      );
-      document.body.appendChild(container);
-
-      const element = container.querySelector("ef-audio") as EFAudio;
-      // Wait for element to render
-      await element.updateComplete;
-
-      expect(element.tagName).toBe("EF-AUDIO");
-
-      // Check for rendered audio element
-      const renderedAudio = element.shadowRoot?.querySelector("audio");
-      expect(renderedAudio).toBeDefined();
-      expect(renderedAudio?.tagName).toBe("AUDIO");
-    });
-
-    test("audio element has correct default properties", async ({ expect }) => {
-      const container = document.createElement("div");
-      render(
-        html`
-        <ef-workbench>
-          <ef-preview>
-            <ef-audio></ef-audio>
-          </ef-preview>
-        </ef-workbench>
-      `,
-        container,
-      );
-      document.body.appendChild(container);
-
-      const audio = container.querySelector("ef-audio") as EFAudio;
-
-      // Wait for element to render
-      await audio.updateComplete;
-
-      const audioElement = audio.shadowRoot?.querySelector(
-        "audio",
-      ) as HTMLAudioElement;
-
-      expect(audioElement).toBeDefined();
-      expect(audioElement?.controls).toBe(false); // Should not have controls by default
-      expect(audioElement?.preload).toBe("metadata");
-    });
-
-    test("inherits media properties from EFMedia", async ({ expect }) => {
-      const container = document.createElement("div");
-      render(
-        html`
-        <ef-workbench>
-          <ef-preview>
-            <ef-audio src="/test-audio.mp3"></ef-audio>
-          </ef-preview>
-        </ef-workbench>
-      `,
-        container,
-      );
-      document.body.appendChild(container);
-
-      const audio = container.querySelector("ef-audio") as EFAudio;
-
-      // Wait for element to render
-      await audio.updateComplete;
-
-      // Should inherit properties from EFMedia base class
-      expect(audio.src).toBe("/test-audio.mp3");
-      expect(audio.currentTimeMs).toBeDefined();
-      expect(audio.durationMs).toBeDefined();
-    });
-  });
-
-  describe("audio asset integration", () => {
-    test("integrates with audio asset loading", async ({ expect }) => {
-      const container = document.createElement("div");
-      render(
-        html`
-        <ef-preview>
-          <ef-audio src="media/bars-n-tone2.mp4" mode="asset"></ef-audio>
-        </ef-preview>
-      `,
-        container,
-      );
-      document.body.appendChild(container);
-
-      const audio = container.querySelector("ef-audio") as EFAudio;
-      await audio.updateComplete;
-
-      // Add timeout to prevent hanging on fragment index loading
-      try {
-        await Promise.race([
-          audio.fragmentIndexTask.taskComplete,
-          new Promise((_, reject) =>
-            setTimeout(
-              () => reject(new Error("Fragment index loading timed out")),
-              3000,
-            ),
-          ),
-        ]);
-      } catch (error) {
-        // If fragment index fails to load, skip intrinsic duration test
-        console.warn(
-          "Fragment index loading failed, skipping duration test:",
-          error,
-        );
-        expect(audio.src).toBe("media/bars-n-tone2.mp4");
-        return;
-      }
-
-      expect(audio.src).toBe("media/bars-n-tone2.mp4");
-
-      // The audio should have loaded successfully and have a duration > 0
-      // We don't test for specific duration since real assets may vary
-      expect(audio.intrinsicDurationMs).toBeGreaterThan(0);
-    });
-
-    test("handles missing audio asset gracefully", async ({ expect }) => {
-      const container = document.createElement("div");
-      render(
-        html`
-        <ef-preview>
-          <ef-audio src="/nonexistent.mp3"></ef-audio>
-        </ef-preview>
-      `,
-        container,
-      );
-      document.body.appendChild(container);
-
-      const audio = container.querySelector("ef-audio") as EFAudio;
-
-      // Should not throw when audio asset is missing
-      expect(() => {
-        audio.frameTask.run();
-      }).not.toThrow();
-    });
-
-    test("handles audio loading errors gracefully", async ({
-      worker,
-      expect,
-    }) => {
-      // Mock 404 response for audio asset
-      worker.use(
-        http.get("/@ef-track-fragment-index//error-audio.mp3", () => {
-          return new HttpResponse(null, { status: 404 });
-        }),
-      );
-
-      const container = document.createElement("div");
-      render(
-        html`
-        <ef-preview>
-          <ef-audio src="/error-audio.mp3"></ef-audio>
-        </ef-preview>
-      `,
-        container,
-      );
-      document.body.appendChild(container);
-
-      const audio = container.querySelector("ef-audio") as EFAudio;
-
-      // Should handle loading errors gracefully
-      expect(() => {
-        audio.frameTask.run();
-      }).not.toThrow();
-    });
-  });
-
-  describe("frame task integration", () => {
-    test("frameTask coordinates all required media tasks", async ({
-      expect,
-    }) => {
-      const container = document.createElement("div");
-      render(
-        html`
-        <ef-preview>
-          <ef-audio src="/test-audio.mp3"></ef-audio>
-        </ef-preview>
-      `,
-        container,
-      );
-      document.body.appendChild(container);
-
-      const audio = container.querySelector("ef-audio") as EFAudio;
-
-      // frameTask should complete without errors
-      expect(() => {
-        audio.frameTask.run();
-      }).not.toThrow();
-
-      // Should coordinate the expected tasks
-      expect(audio.fragmentIndexTask).toBeDefined();
-    });
-
-    test("frameTask handles missing dependencies", ({ expect }) => {
-      const container = document.createElement("div");
-      render(
-        html`
-        <ef-workbench>
-          <ef-preview>
-            <ef-audio></ef-audio>
-          </ef-preview>
-        </ef-workbench>
-      `,
-        container,
-      );
-      document.body.appendChild(container);
-
-      const audio = container.querySelector("ef-audio") as EFAudio;
-
-      // Should handle missing dependencies gracefully
-      expect(() => {
-        audio.frameTask.run();
-      }).not.toThrow();
-    });
-
-    test("frameTask completion triggers timegroup updates", async ({
-      expect,
-    }) => {
-      const container = document.createElement("div");
-      render(
-        html`
-        <ef-preview>
-          <ef-timegroup mode="sequence">
-            <ef-audio src="media/bars-n-tone2.mp4" mode="asset"></ef-audio>
-          </ef-timegroup>
-        </ef-preview>
-      `,
-        container,
-      );
-      document.body.appendChild(container);
-
-      const audio = container.querySelector("ef-audio") as EFAudio;
-      const timegroup = container.querySelector("ef-timegroup");
-      await audio.updateComplete;
-
-      // Wait for fragment index to load
-      await new Promise((resolve) => setTimeout(resolve, 100));
-
-      // frameTask should trigger timegroup updates
-      await audio.frameTask.run();
-
-      expect(timegroup).toBeDefined();
-      // The frameTask should request updates on the root timegroup
-    });
-  });
-
-  describe("audio element behavior", () => {
-    test("audio element can be controlled programmatically", async ({
-      expect,
-    }) => {
-      const container = document.createElement("div");
-      render(
-        html`
-        <ef-workbench>
-          <ef-preview>
-            <ef-audio></ef-audio>
-          </ef-preview>
-        </ef-workbench>
-      `,
-        container,
-      );
-      document.body.appendChild(container);
-
-      const audio = container.querySelector("ef-audio") as EFAudio;
-      await audio.updateComplete;
-
-      const audioElement = audio.shadowRoot?.querySelector(
-        "audio",
-      ) as HTMLAudioElement;
-
-      // Should be able to control audio element properties
-      expect(() => {
-        audioElement.volume = 0.5;
-        audioElement.muted = true;
-        audioElement.loop = false;
-      }).not.toThrow();
-
-      expect(audioElement.volume).toBe(0.5);
-      expect(audioElement.muted).toBe(true);
-      expect(audioElement.loop).toBe(false);
-    });
-
-    test("audio element handles invalid src gracefully", async ({ expect }) => {
-      const container = document.createElement("div");
-      render(
-        html`
-        <ef-workbench>
-          <ef-preview>
-            <ef-audio></ef-audio>
-          </ef-preview>
-        </ef-workbench>
-      `,
-        container,
-      );
-      document.body.appendChild(container);
-
-      const audio = container.querySelector("ef-audio") as EFAudio;
-      await audio.updateComplete;
-
-      const audioElement = audio.shadowRoot?.querySelector(
-        "audio",
-      ) as HTMLAudioElement;
-
-      // Should handle invalid src without throwing
-      expect(() => {
-        audioElement.src = "invalid://url";
-      }).not.toThrow();
-
-      expect(() => {
-        audioElement.src = "";
-      }).not.toThrow();
-    });
-
-    test("audio element events can be handled", async ({ expect }) => {
-      const container = document.createElement("div");
-      render(
-        html`
-        <ef-workbench>
-          <ef-preview>
-            <ef-audio></ef-audio>
-          </ef-preview>
-        </ef-workbench>
-      `,
-        container,
-      );
-      document.body.appendChild(container);
-
-      const audio = container.querySelector("ef-audio") as EFAudio;
-      await audio.updateComplete;
-
-      const audioElement = audio.shadowRoot?.querySelector(
-        "audio",
-      ) as HTMLAudioElement;
-
-      let eventFired = false;
-
-      // Should be able to add event listeners
-      expect(() => {
-        audioElement.addEventListener("loadstart", () => {
-          eventFired = true;
-        });
-      }).not.toThrow();
-
-      // Trigger a loadstart event
-      audioElement.dispatchEvent(new Event("loadstart"));
-      expect(eventFired).toBe(true);
-    });
-  });
-
-  describe("error handling and edge cases", () => {
-    test("handles audio element removal during playback", ({ expect }) => {
-      const container = document.createElement("div");
-      render(
-        html`
-        <ef-workbench>
-          <ef-preview>
-            <ef-audio></ef-audio>
-          </ef-preview>
-        </ef-workbench>
-      `,
-        container,
-      );
-      document.body.appendChild(container);
-
-      const audio = container.querySelector("ef-audio") as EFAudio;
-
-      // Start some operations
-      audio.frameTask.run();
-
-      // Remove element
-      audio.remove();
-
-      // Should not cause errors
-      expect(() => {
-        audio.frameTask.run();
-      }).not.toThrow();
-    });
-
-    test("handles seek operations on audio", ({ expect }) => {
-      const container = document.createElement("div");
-      render(
-        html`
-        <ef-workbench>
-          <ef-preview>
-            <ef-audio></ef-audio>
-          </ef-preview>
-        </ef-workbench>
-      `,
-        container,
-      );
-      document.body.appendChild(container);
-
-      const audio = container.querySelector("ef-audio") as EFAudio;
-
-      // Should handle seek operations gracefully
-      expect(() => {
-        audio.desiredSeekTimeMs = 1000; // Seek to 1 second
-        audio.frameTask.run();
-      }).not.toThrow();
-
-      expect(() => {
-        audio.desiredSeekTimeMs = -500; // Invalid negative time
-        audio.frameTask.run();
-      }).not.toThrow();
-    });
-
-    test("handles audio without src gracefully", async ({ expect }) => {
-      const container = document.createElement("div");
-      render(
-        html`
-        <ef-workbench>
-          <ef-preview>
-            <ef-audio></ef-audio>
-          </ef-preview>
-        </ef-workbench>
-      `,
-        container,
-      );
-      document.body.appendChild(container);
-
-      const audio = container.querySelector("ef-audio") as EFAudio;
-      await audio.updateComplete;
-
-      // Should handle missing src gracefully - src defaults to empty string, not null
-      expect(audio.src).toBe("");
-
-      expect(() => {
-        audio.frameTask.run();
-      }).not.toThrow();
-    });
-
-    test("handles simultaneous frame task executions", async ({ expect }) => {
-      const container = document.createElement("div");
-      render(
-        html`
-        <ef-workbench>
-          <ef-preview>
-            <ef-audio></ef-audio>
-          </ef-preview>
-        </ef-workbench>
-      `,
-        container,
-      );
-      document.body.appendChild(container);
-
-      const audio = container.querySelector("ef-audio") as EFAudio;
-
-      // Should handle multiple simultaneous executions
-      const task1 = audio.frameTask.run();
-      const task2 = audio.frameTask.run();
-      const task3 = audio.frameTask.run();
-
-      // All should complete without throwing
-      await expect(
-        Promise.allSettled([task1, task2, task3]),
-      ).resolves.toBeDefined();
-    });
-  });
-
-  describe("assetId property", () => {
-    test("reads from dom attribute", async ({ expect }) => {
-      const container = document.createElement("div");
-      const audio = document.createElement("ef-audio") as EFAudio;
-      container.appendChild(audio);
-      document.body.appendChild(container);
-
-      await audio.updateComplete;
-
-      // Set attribute after element is fully initialized
-      audio.setAttribute("asset-id", "test-audio-asset-456");
-      await audio.updateComplete;
-
-      expect(audio).toBeDefined();
-      expect(audio.getAttribute("asset-id")).toBe("test-audio-asset-456");
-      expect(audio.assetId).toBe("test-audio-asset-456"); // This is the critical test!
-
-      container.remove();
-    });
-
-    test("reads assetId from dynamically generated HTML", async ({
-      expect,
-    }) => {
-      // Simulate the exact production scenario
-      const cardJoker = { id: "test-card-789" };
-
-      const container = document.createElement("div");
-      container.innerHTML = `
-        <ef-timegroup class="w-[480px] h-[270px] relative" mode="fixed" duration="2s">
-          <ef-audio asset-id="${cardJoker.id}" id="test-audio"></ef-audio>
-        </ef-timegroup>
-      `;
-      document.body.appendChild(container);
-
-      const audio = container.querySelector("#test-audio") as EFAudio;
-      await audio.updateComplete;
-
-      expect(audio).toBeDefined();
-      expect(audio.getAttribute("asset-id")).toBe("test-card-789");
-      expect(audio.assetId).toBe("test-card-789");
-
-      container.remove();
-    });
-
-    test("works with apiHost and complex DOM structure", async ({ expect }) => {
-      // Test complex DOM structure with apiHost to prevent regression
-      const testAsset = { id: "production-card-123" };
-
-      const container = document.createElement("div");
-      container.innerHTML = `
-        <ef-timegroup class="w-[480px] h-[270px] relative" mode="fixed" duration="2s">
-          <ef-audio asset-id="${testAsset.id}" id="test-audio"></ef-audio>
-        </ef-timegroup>
-      `;
-      document.body.appendChild(container);
-
-      const audio = container.querySelector("#test-audio") as EFAudio;
-      await audio.updateComplete;
-
-      // Critical: assetId must be immediately available - this was the original failing issue
-      expect(audio.assetId).toBe("production-card-123");
-      expect(audio.getAttribute("asset-id")).toBe("production-card-123");
-
-      container.remove();
-    });
-
-    test("reads from js property", ({ expect }) => {
-      const container = document.createElement("div");
-      render(html`<ef-audio></ef-audio>`, container);
-      const audio = container.querySelector("ef-audio") as EFAudio;
-
-      audio.assetId = "test-audio-789";
-      expect(audio.assetId).toBe("test-audio-789");
-    });
-
-    test("reflects property changes to attribute", async ({ expect }) => {
-      const container = document.createElement("div");
-      render(html`<ef-audio></ef-audio>`, container);
-      document.body.appendChild(container);
-
-      const audio = container.querySelector("ef-audio") as EFAudio;
-      await audio.updateComplete;
-
-      audio.assetId = "test-audio-012";
-      await audio.updateComplete;
-      expect(audio.getAttribute("asset-id")).toBe("test-audio-012");
-
-      audio.assetId = null;
-      await audio.updateComplete;
-      expect(audio.hasAttribute("asset-id")).toBe(false);
-
-      container.remove();
-    });
-  });
-
-  describe.skip("integration with timegroups", () => {
-    test("integrates correctly within timegroup structure", async ({
-      expect,
-    }) => {
-      const container = document.createElement("div");
-      render(
-        html`
-        <ef-preview>
-          <ef-timegroup mode="sequence">
-            <ef-audio src="media/bars-n-tone2.mp4" mode="asset"></ef-audio>
-          </ef-timegroup>
-        </ef-preview>
-      `,
-        container,
-      );
-      document.body.appendChild(container);
-
-      const audio = container.querySelector("ef-audio") as EFAudio;
-      const timegroup = container.querySelector("ef-timegroup");
-      await audio.updateComplete;
-
-      expect(timegroup).toBeDefined();
-
-      // The audio should have loaded successfully within the timegroup
-      // We test that it has a valid duration instead of a specific value
-      expect(audio.intrinsicDurationMs).toBeGreaterThan(0);
-    });
-
-    test("respects timegroup timing properties", async ({ expect }) => {
-      const container = document.createElement("div");
-      render(
-        html`
-        <ef-preview>
-          <ef-timegroup mode="contain">
-            <ef-audio src="media/bars-n-tone2.mp4" mode="asset" sourcein="1s" sourceout="4s"></ef-audio>
-          </ef-timegroup>
-        </ef-preview>
-      `,
-        container,
-      );
-      document.body.appendChild(container);
-
-      const audio = container.querySelector("ef-audio") as EFAudio;
-      await audio.updateComplete;
-
-      // Wait for fragment index to load
-      await new Promise((resolve) => setTimeout(resolve, 100));
-
-      // Should respect sourcein/sourceout timing
-      expect(audio.sourceInMs).toBe(1000);
-      expect(audio.sourceOutMs).toBe(4000);
-      expect(audio.durationMs).toBe(3000); // 4s - 1s
-    });
-  });
-
-  describe.skip("audio-specific functionality", () => {
-    test("inherits audio analysis capabilities from EFMedia", ({ expect }) => {
-      const container = document.createElement("div");
-      render(
-        html`
-        <ef-workbench>
-          <ef-preview>
-            <ef-audio></ef-audio>
-          </ef-preview>
-        </ef-workbench>
-      `,
-        container,
-      );
-      document.body.appendChild(container);
-
-      const audio = container.querySelector("ef-audio") as EFAudio;
-
-      // Should inherit audio analysis from EFMedia
-      expect(audio.audioBufferTask).toBeDefined();
-      expect(audio.frequencyDataTask).toBeDefined();
-      expect(audio.byteTimeDomainTask).toBeDefined();
-      expect(audio.fftSize).toBeDefined();
-      expect(audio.fftGain).toBeDefined();
-    });
-
-    test("can access audio track information", async ({ expect }) => {
-      const container = document.createElement("div");
-      render(
-        html`
-        <ef-preview>
-          <ef-audio src="media/bars-n-tone2.mp4" mode="asset"></ef-audio>
-        </ef-preview>
-      `,
-        container,
-      );
-      document.body.appendChild(container);
-
-      const audio = container.querySelector("ef-audio") as EFAudio;
-      await audio.updateComplete;
-
-      // Wait for fragment index to load
-      await new Promise((resolve) => setTimeout(resolve, 100));
-
-      // Should be able to access default audio track
-      // We test that the audio loads successfully instead of checking specific track ID
-      expect(audio.intrinsicDurationMs).toBeGreaterThan(0);
-    });
-  });
-});