Implement new renderNotificationDecoration from module API (#31389)

* Upgrade module api package

* Add a wrapper component

So that we can render the decoration component with just the room.

* Implement module API method

* Add more tests

test/unit-tests/modules/BuiltinsApi-test.tsx

@@ -44,10 +44,26 @@ describe("ElementWebBuiltinsApi", () => {
         expect(container).toHaveTextContent("50");
     });
 
+    it("returns rendered NotificationDecoration component", () => {
+        stubClient();
+        const builtinsApi = new ElementWebBuiltinsApi();
+        const NotificationDecoration = () => <div>notification decoration</div>;
+        builtinsApi.setComponents({
+            roomView: {},
+            roomAvatar: Avatar,
+            notificationDecoration: NotificationDecoration,
+        } as any);
+        const { container } = render(<> {builtinsApi.renderNotificationDecoration("!foo:m.org")}</>);
+        expect(container).toHaveTextContent("notification decoration");
+    });
+
     it("should throw error if called before components are set", () => {
         stubClient();
         const builtinsApi = new ElementWebBuiltinsApi();
         expect(() => builtinsApi.renderRoomAvatar("!foo:m.org")).toThrow("No RoomAvatar component has been set");
         expect(() => builtinsApi.renderRoomView("!foo:m.org")).toThrow("No RoomView component has been set");
+        expect(() => builtinsApi.renderNotificationDecoration("!foo:m.org")).toThrow(
+            "No NotificationDecoration component has been set",
+        );
     });
 });

test/unit-tests/modules/components/ModuleNotificationDecoration-test.tsx

@@ -0,0 +1,33 @@
+/*
+Copyright 2025 Element Creations 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 { render, screen } from "jest-matrix-react";
+
+import type { Room } from "matrix-js-sdk/src/matrix";
+import { ModuleNotificationDecoration } from "../../../../src/modules/components/ModuleNotificationDecoration";
+import { mkStubRoom, stubClient } from "../../../test-utils";
+import { NotificationLevel } from "../../../../src/stores/notifications/NotificationLevel";
+import { RoomNotificationStateStore } from "../../../../src/stores/notifications/RoomNotificationStateStore";
+import { RoomNotificationState } from "../../../../src/stores/notifications/RoomNotificationState";
+
+class MockedNotificationState extends RoomNotificationState {
+    public constructor(room: Room, level: NotificationLevel, count: number) {
+        super(room, false);
+        this._level = level;
+        this._count = count;
+    }
+}
+
+it("Should be able to render component just with room as prop", () => {
+    const cli = stubClient();
+    const room = mkStubRoom("!foo:matrix.org", "Foo Room", cli);
+    jest.spyOn(RoomNotificationStateStore.instance, "getRoomState").mockReturnValue(
+        new MockedNotificationState(room, NotificationLevel.Notification, 5),
+    );
+    render(<ModuleNotificationDecoration room={room} />);
+    expect(screen.getByTestId("notification-decoration")).toBeInTheDocument();
+});