suaveplan/packages/ui/react/react-audio/src/components/audio-visualizer/audio-visualizer.test.tsx

import type { SidechainPublisher } from "@suaveplan/audio-fx-plugin-base";
import {
    afterEach,
    beforeAll,
    describe,
    expect,
    it,
} from "@suaveplan/testing/runner";
import { cleanup, waitFor } from "@testing-library/react";
import { useEffect } from "react";
import { useProviderStateOrThrow } from "../../hooks/use-provider-state.js";
import { renderWithProvider } from "../../test-utils.js";
import {
    AudioVisualizer,
    drawLevel,
    drawSpectrum,
    drawWaveform,
} from "./audio-visualizer.js";

afterEach(() => cleanup());

interface FakeCtxCalls {
    fillRectCalls: number;
    strokeCalls: number;
    beginPathCalls: number;
    moveToCalls: number;
    lineToCalls: number;
}

function makeFakeCtx(): {
    ctx: CanvasRenderingContext2D;
    calls: FakeCtxCalls;
} {
    const calls: FakeCtxCalls = {
        fillRectCalls: 0,
        strokeCalls: 0,
        beginPathCalls: 0,
        moveToCalls: 0,
        lineToCalls: 0,
    };
    const ctx = {
        fillStyle: "",
        strokeStyle: "",
        fillRect: () => {
            calls.fillRectCalls++;
        },
        stroke: () => {
            calls.strokeCalls++;
        },
        beginPath: () => {
            calls.beginPathCalls++;
        },
        moveTo: () => {
            calls.moveToCalls++;
        },
        lineTo: () => {
            calls.lineToCalls++;
        },
    } as unknown as CanvasRenderingContext2D;
    return { ctx, calls };
}

beforeAll(() => {
    // happy-dom returns null from canvas.getContext by default; we
    // install a minimal 2D fake on the prototype so the drawing-effect
    // path runs end-to-end. Stash the original so other tests aren't
    // affected after the file ends.
    const proto = HTMLCanvasElement.prototype as unknown as {
        getContext: (id: string) => unknown;
    };
    proto.getContext = (_id: string) => makeFakeCtx().ctx;
});

function Publisher({
    busName,
    channels,
    amplitude,
}: {
    busName: string;
    channels: number;
    amplitude: number;
}) {
    const { buses } = useProviderStateOrThrow();
    useEffect(() => {
        const p: SidechainPublisher = buses.publish(busName, channels);
        const id = setInterval(() => {
            const samples: Float32Array[] = [];
            for (let c = 0; c < channels; c++) {
                const arr = new Float32Array(256);
                for (let i = 0; i < arr.length; i++) {
                    arr[i] =
                        amplitude * Math.sin((i / arr.length) * Math.PI * 2);
                }
                samples.push(arr);
            }
            p.write(samples);
        }, 10);
        return () => {
            clearInterval(id);
            p.close();
        };
    }, [buses, busName, channels, amplitude]);
    return null;
}

describe("<AudioVisualizer>", () => {
    it("renders a canvas bound to useAnalyser", {
        timeout: 30000,
    }, async () => {
        const { container } = renderWithProvider(
            <>
                <Publisher busName="master" channels={1} amplitude={0.5} />
                <AudioVisualizer mode="waveform" sampleRateHz={120} />
            </>
        );
        await waitFor(() =>
            expect(container.querySelector("canvas")).not.toBeNull()
        );
        const canvas = container.querySelector("canvas") as HTMLCanvasElement;
        expect(canvas.getAttribute("data-mode")).toBe("waveform");
        expect(canvas.getAttribute("data-bus")).toBe("master");
        expect(canvas.width).toBe(320);
        expect(canvas.height).toBe(80);
        // Wait for several ticks so the drawWaveform call site fires
        await new Promise((r) => setTimeout(r, 80));
    });

    it("renders spectrum mode", { timeout: 30000 }, async () => {
        const { container } = renderWithProvider(
            <>
                <Publisher busName="master" channels={1} amplitude={0.3} />
                <AudioVisualizer mode="spectrum" sampleRateHz={120} />
            </>
        );
        await waitFor(() =>
            expect(
                container.querySelector("canvas[data-mode='spectrum']")
            ).not.toBeNull()
        );
    });

    it("renders level mode", { timeout: 30000 }, async () => {
        const { container } = renderWithProvider(
            <>
                <Publisher busName="master" channels={1} amplitude={0.8} />
                <AudioVisualizer mode="level" sampleRateHz={120} />
            </>
        );
        await waitFor(() =>
            expect(
                container.querySelector("canvas[data-mode='level']")
            ).not.toBeNull()
        );
    });

    it("falls back to background draw when no publisher", {
        timeout: 30000,
    }, async () => {
        const { container } = renderWithProvider(
            <AudioVisualizer sampleRateHz={120} />
        );
        await waitFor(() =>
            expect(container.querySelector("canvas")).not.toBeNull()
        );
    });

    it("custom dimensions, color, and bus name", {
        timeout: 30000,
    }, async () => {
        const { container } = renderWithProvider(
            <AudioVisualizer
                width={120}
                height={40}
                color="#fff"
                backgroundColor="#000"
                busName="aux"
                sampleRateHz={120}
            />
        );
        await waitFor(() =>
            expect(
                container.querySelector("canvas[data-bus='aux']")
            ).not.toBeNull()
        );
        const canvas = container.querySelector("canvas") as HTMLCanvasElement;
        expect(canvas.width).toBe(120);
        expect(canvas.height).toBe(40);
    });

    it("clamps sampleRateHz<=0", { timeout: 30000 }, async () => {
        const { container } = renderWithProvider(
            <AudioVisualizer sampleRateHz={0} />
        );
        await waitFor(() =>
            expect(container.querySelector("canvas")).not.toBeNull()
        );
    });

    it("forwards className", { timeout: 30000 }, async () => {
        const { container } = renderWithProvider(
            <AudioVisualizer className="custom-vis" />
        );
        await waitFor(() =>
            expect(
                container.querySelector(".rax-audio-visualizer.custom-vis")
            ).not.toBeNull()
        );
    });

    it("getContext returning null is handled gracefully", {
        timeout: 30000,
    }, async () => {
        const proto = HTMLCanvasElement.prototype as unknown as {
            getContext: (id: string) => unknown;
        };
        const prev = proto.getContext;
        proto.getContext = () => null;
        try {
            const { container } = renderWithProvider(<AudioVisualizer />);
            await waitFor(() =>
                expect(container.querySelector("canvas")).not.toBeNull()
            );
        } finally {
            proto.getContext = prev;
        }
    });
});

describe("drawing primitives", () => {
    it("drawWaveform draws one line per sample", { timeout: 5000 }, () => {
        const { ctx, calls } = makeFakeCtx();
        const data = new Float32Array(8);
        for (let i = 0; i < 8; i++) data[i] = i / 8;
        drawWaveform(ctx, data, 100, 50);
        expect(calls.beginPathCalls).toBe(1);
        expect(calls.moveToCalls).toBe(1);
        expect(calls.lineToCalls).toBe(7);
        expect(calls.strokeCalls).toBe(1);
    });

    it("drawSpectrum draws one bar per bin", { timeout: 5000 }, () => {
        const { ctx, calls } = makeFakeCtx();
        const data = new Float32Array(64);
        for (let i = 0; i < 64; i++) data[i] = 0.5;
        drawSpectrum(ctx, data, 100, 50);
        expect(calls.fillRectCalls).toBe(32);
    });

    it("drawSpectrum handles bin overflow", { timeout: 5000 }, () => {
        const { ctx, calls } = makeFakeCtx();
        // 30 samples for 32 bins => last 2 bins exercise the inner break.
        const data = new Float32Array(30);
        for (let i = 0; i < 30; i++) data[i] = 1;
        drawSpectrum(ctx, data, 100, 50);
        expect(calls.fillRectCalls).toBe(32);
    });

    it("drawLevel draws one bar sized to peak", { timeout: 5000 }, () => {
        const { ctx, calls } = makeFakeCtx();
        const data = new Float32Array([0.1, -0.5, 0.3]);
        drawLevel(ctx, data, 100, 10);
        expect(calls.fillRectCalls).toBe(1);
    });

    it("drawWaveform on an empty array degrades gracefully", {
        timeout: 5000,
    }, () => {
        const { ctx, calls } = makeFakeCtx();
        drawWaveform(ctx, new Float32Array(0), 100, 50);
        expect(calls.beginPathCalls).toBe(1);
        expect(calls.moveToCalls).toBe(0);
        expect(calls.lineToCalls).toBe(0);
        expect(calls.strokeCalls).toBe(1);
    });
});