Prevent voice message from displaying spurious errors (#30736)

* fix: avoid to render `AudioPlayerViewModel` when `MAudioBody` is inherited

* fix: avoid `Playback.prepare` to fail when called twice

* fix: add `decoding` to playback type

* refactor: fix circular deps

* refactor: extract `MockedPlayback` from `AudioPlayerViewModel`

* test: add `MAudioBody` basic test

* test: add tests for `MVoiceMessageBody`

* fix: lint

test/unit-tests/components/views/messages/MAudioBody-test.tsx

@@ -0,0 +1,48 @@
+/*
+ * Copyright 2025 New Vector Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+import React from "react";
+import { EventType, MatrixEvent } from "matrix-js-sdk/src/matrix";
+import { render, screen, act } from "jest-matrix-react";
+
+import { MockedPlayback } from "../../../audio/MockedPlayback";
+import { type Playback, PlaybackState } from "../../../../../src/audio/Playback";
+import MAudioBody from "../../../../../src/components/views/messages/MAudioBody";
+import { PlaybackManager } from "../../../../../src/audio/PlaybackManager";
+import { type MediaEventHelper } from "../../../../../src/utils/MediaEventHelper";
+
+describe("<MAudioBody />", () => {
+    let event: MatrixEvent;
+    beforeEach(() => {
+        const playback = new MockedPlayback(PlaybackState.Decoding, 50, 10) as unknown as Playback;
+        jest.spyOn(PlaybackManager.instance, "createPlaybackInstance").mockReturnValue(playback);
+
+        event = new MatrixEvent({
+            room_id: "!room:server",
+            sender: "@alice.example.org",
+            type: EventType.RoomMessage,
+            content: {
+                body: "audio name ",
+                msgtype: "m.audio",
+                url: "mxc://server/audio",
+            },
+        });
+    });
+
+    it("should render", async () => {
+        const mediaEventHelper = {
+            sourceBlob: {
+                value: {
+                    arrayBuffer: () => new ArrayBuffer(8),
+                },
+            },
+        } as unknown as MediaEventHelper;
+
+        await act(() => render(<MAudioBody mxEvent={event} mediaEventHelper={mediaEventHelper} />));
+        expect(await screen.findByRole("region", { name: "Audio player" })).toBeInTheDocument();
+    });
+});

test/unit-tests/components/views/messages/MVoiceMessageBody-test.tsx

@@ -0,0 +1,58 @@
+/*
+ * Copyright 2025 New Vector Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+import { EventType, MatrixEvent, Room } from "matrix-js-sdk/src/matrix";
+import { act, render, screen } from "jest-matrix-react";
+import React from "react";
+
+import { MockedPlayback } from "../../../audio/MockedPlayback";
+import { type Playback, PlaybackState } from "../../../../../src/audio/Playback";
+import { PlaybackManager } from "../../../../../src/audio/PlaybackManager";
+import type { MediaEventHelper } from "../../../../../src/utils/MediaEventHelper";
+import MVoiceMessageBody from "../../../../../src/components/views/messages/MVoiceMessageBody";
+import { PlaybackQueue } from "../../../../../src/audio/PlaybackQueue";
+import { createTestClient } from "../../../../test-utils";
+
+describe("<MVvoiceMessageBody />", () => {
+    let event: MatrixEvent;
+    beforeEach(() => {
+        const playback = new MockedPlayback(PlaybackState.Decoding, 50, 10) as unknown as Playback;
+        jest.spyOn(PlaybackManager.instance, "createPlaybackInstance").mockReturnValue(playback);
+
+        const matrixClient = createTestClient();
+        const room = new Room("!TESTROOM", matrixClient, "@alice:example.org");
+        const playbackQueue = new PlaybackQueue(room);
+
+        jest.spyOn(PlaybackQueue, "forRoom").mockReturnValue(playbackQueue);
+        jest.spyOn(playbackQueue, "unsortedEnqueue").mockReturnValue(undefined);
+
+        event = new MatrixEvent({
+            room_id: "!room:server",
+            sender: "@alice.example.org",
+            type: EventType.RoomMessage,
+            content: {
+                "body": "audio name ",
+                "msgtype": "m.audio",
+                "url": "mxc://server/audio",
+                "org.matrix.msc3946.voice": true,
+            },
+        });
+    });
+
+    it("should render", async () => {
+        const mediaEventHelper = {
+            sourceBlob: {
+                value: {
+                    arrayBuffer: () => new ArrayBuffer(8),
+                },
+            },
+        } as unknown as MediaEventHelper;
+
+        await act(() => render(<MVoiceMessageBody mxEvent={event} mediaEventHelper={mediaEventHelper} />));
+        expect(await screen.findByTestId("recording-playback")).toBeInTheDocument();
+    });
+});