oof

web/src/components/landing/background.test.tsx

@@ -2,12 +2,16 @@ import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
 import { render } from "solid-js/web";
 import type { JSX } from "solid-js";
 
-import ColorWaveBackground from "./ColorWaveBackground";
+import { ColorWaveBackground } from "./ColorWaveBackground";
 
-function mount(comp: () => JSX.Element): HTMLDivElement {
+async function mount(comp: () => JSX.Element): Promise<HTMLDivElement> {
   const container = document.createElement("div");
   document.body.appendChild(container);
   render(() => comp(), container);
+  // Wait for onMount + dynamic import to settle
+  await vi.waitFor(() => {
+    expect(document.querySelector("canvas")).toBeTruthy();
+  }, { timeout: 2000 });
   return container;
 }
 
@@ -35,52 +39,48 @@ afterEach(() => {
 });
 
 describe("ColorWaveBackground", () => {
-  it("renders a canvas element", () => {
-    mount(() => <ColorWaveBackground />);
+  it("renders a canvas element", async () => {
+    await mount(() => <ColorWaveBackground />);
     const canvas = document.querySelector("canvas");
     expect(canvas).toBeTruthy();
   });
 
-  it("has absolute positioning classes", () => {
-    mount(() => <ColorWaveBackground />);
+  it("has absolute positioning styles", async () => {
+    await mount(() => <ColorWaveBackground />);
     const canvas = document.querySelector("canvas")!;
-    expect(canvas.className).toContain("absolute");
-    expect(canvas.className).toContain("inset-0");
-    expect(canvas.className).toContain("w-full");
-    expect(canvas.className).toContain("h-full");
+    expect(canvas.style.position).toBe("absolute");
+    expect(canvas.style.top).toMatch(/^0/);
+    expect(canvas.style.left).toMatch(/^0/);
+    expect(canvas.style.width).toBe("100%");
+    expect(canvas.style.height).toBe("100%");
   });
 
-  it("has pointer-events none style", () => {
-    mount(() => <ColorWaveBackground />);
-    const canvas = document.querySelector("canvas")!;
-    expect(canvas.getAttribute("style")).toContain("pointer-events");
+  it("container has pointer-events-none class", async () => {
+    await mount(() => <ColorWaveBackground />);
+    const container = document.querySelector("div.fixed");
+    expect(container).toBeTruthy();
+    expect(container!.className).toContain("pointer-events-none");
   });
 
-  it("merges custom class prop", () => {
-    mount(() => <ColorWaveBackground class="custom-bg" />);
-    const canvas = document.querySelector("canvas")!;
-    expect(canvas.className).toContain("custom-bg");
-  });
-
-  it("accepts yOffset prop", () => {
-    mount(() => <ColorWaveBackground yOffset={100} />);
+  it("accepts yOffset prop", async () => {
+    await mount(() => <ColorWaveBackground yOffset={100} />);
     const canvas = document.querySelector("canvas");
     expect(canvas).toBeTruthy();
   });
 
-  it("accepts scale prop", () => {
-    mount(() => <ColorWaveBackground scale={1.5} />);
+  it("accepts scale prop", async () => {
+    await mount(() => <ColorWaveBackground scale={1.5} />);
     const canvas = document.querySelector("canvas");
     expect(canvas).toBeTruthy();
   });
 
-  it("accepts speed prop", () => {
-    mount(() => <ColorWaveBackground speed={2} />);
+  it("accepts speed prop", async () => {
+    await mount(() => <ColorWaveBackground speed={2} />);
     const canvas = document.querySelector("canvas");
     expect(canvas).toBeTruthy();
   });
 
-  it("respects prefers-reduced-motion", () => {
+  it("respects prefers-reduced-motion", async () => {
     Object.defineProperty(window, "matchMedia", {
       writable: true,
       value: vi.fn((query: string) => ({
@@ -95,7 +95,7 @@ describe("ColorWaveBackground", () => {
       })),
       configurable: true,
     });
-    mount(() => <ColorWaveBackground />);
+    await mount(() => <ColorWaveBackground />);
     const canvas = document.querySelector("canvas");
     expect(canvas).toBeTruthy();
   });