Add support for HTML renderings of room topics (#2272)

* Add support for HTML renderings of room topics

Based on extensible events as defined in [MSC1767]

Relates to: vector-im/element-web#5180
Signed-off-by: Johannes Marbach <johannesm@element.io>

[MSC1767]: https://github.com/matrix-org/matrix-spec-proposals/pull/1767

* Use correct MSC

* Add overloads for setRoomTopic

* Fix indentation

* Add more tests to pass the quality gate

Co-authored-by: Johannes Marbach <jm@Johanness-Mini.fritz.box>
Co-authored-by: Michael Telatynski <7t3chguy@gmail.com>

spec/unit/content-helpers.spec.ts

@@ -17,7 +17,13 @@ limitations under the License.
 import { REFERENCE_RELATION } from "matrix-events-sdk";
 
 import { LocationAssetType, M_ASSET, M_LOCATION, M_TIMESTAMP } from "../../src/@types/location";
-import { makeBeaconContent, makeBeaconInfoContent } from "../../src/content-helpers";
+import { M_TOPIC } from "../../src/@types/topic";
+import {
+    makeBeaconContent,
+    makeBeaconInfoContent,
+    makeTopicContent,
+    parseTopicContent,
+} from "../../src/content-helpers";
 
 describe('Beacon content helpers', () => {
     describe('makeBeaconInfoContent()', () => {
@@ -122,3 +128,68 @@ describe('Beacon content helpers', () => {
         });
     });
 });
+
+describe('Topic content helpers', () => {
+    describe('makeTopicContent()', () => {
+        it('creates fully defined event content without html', () => {
+            expect(makeTopicContent("pizza")).toEqual({
+                topic: "pizza",
+                [M_TOPIC.name]: [{
+                    body: "pizza",
+                    mimetype: "text/plain",
+                }],
+            });
+        });
+
+        it('creates fully defined event content with html', () => {
+            expect(makeTopicContent("pizza", "<b>pizza</b>")).toEqual({
+                topic: "pizza",
+                [M_TOPIC.name]: [{
+                    body: "pizza",
+                    mimetype: "text/plain",
+                }, {
+                    body: "<b>pizza</b>",
+                    mimetype: "text/html",
+                }],
+            });
+        });
+    });
+
+    describe('parseTopicContent()', () => {
+        it('parses event content with plain text topic without mimetype', () => {
+            expect(parseTopicContent({
+                topic: "pizza",
+                [M_TOPIC.name]: [{
+                    body: "pizza",
+                }],
+            })).toEqual({
+                text: "pizza",
+            });
+        });
+
+        it('parses event content with plain text topic', () => {
+            expect(parseTopicContent({
+                topic: "pizza",
+                [M_TOPIC.name]: [{
+                    body: "pizza",
+                    mimetype: "text/plain",
+                }],
+            })).toEqual({
+                text: "pizza",
+            });
+        });
+
+        it('parses event content with html topic', () => {
+            expect(parseTopicContent({
+                topic: "pizza",
+                [M_TOPIC.name]: [{
+                    body: "<b>pizza</b>",
+                    mimetype: "text/html",
+                }],
+            })).toEqual({
+                text: "pizza",
+                html: "<b>pizza</b>",
+            });
+        });
+    });
+});

spec/unit/matrix-client.spec.ts

@@ -33,7 +33,7 @@ import { ReceiptType } from "../../src/@types/read_receipts";
 import * as testUtils from "../test-utils/test-utils";
 import { makeBeaconInfoContent } from "../../src/content-helpers";
 import { M_BEACON_INFO } from "../../src/@types/beacon";
-import { Room } from "../../src";
+import { ContentHelpers, Room } from "../../src";
 import { makeBeaconEvent } from "../test-utils/beacon";
 
 jest.useFakeTimers();
@@ -1104,6 +1104,41 @@ describe("MatrixClient", function() {
         });
     });
 
+    describe("setRoomTopic", () => {
+        const roomId = "!foofoofoofoofoofoo:matrix.org";
+        const createSendStateEventMock = (topic: string, htmlTopic?: string) => {
+            return jest.fn()
+                .mockImplementation((roomId: string, eventType: string, content: any, stateKey: string) => {
+                    expect(roomId).toEqual(roomId);
+                    expect(eventType).toEqual(EventType.RoomTopic);
+                    expect(content).toMatchObject(ContentHelpers.makeTopicContent(topic, htmlTopic));
+                    expect(stateKey).toBeUndefined();
+                    return Promise.resolve();
+                });
+        };
+
+        it("is called with plain text topic and sends state event", async () => {
+            const sendStateEvent = createSendStateEventMock("pizza");
+            client.sendStateEvent = sendStateEvent;
+            await client.setRoomTopic(roomId, "pizza");
+            expect(sendStateEvent).toHaveBeenCalledTimes(1);
+        });
+
+        it("is called with plain text topic and callback and sends state event", async () => {
+            const sendStateEvent = createSendStateEventMock("pizza");
+            client.sendStateEvent = sendStateEvent;
+            await client.setRoomTopic(roomId, "pizza", () => {});
+            expect(sendStateEvent).toHaveBeenCalledTimes(1);
+        });
+
+        it("is called with plain text and HTML topic and sends state event", async () => {
+            const sendStateEvent = createSendStateEventMock("pizza", "<b>pizza</b>");
+            client.sendStateEvent = sendStateEvent;
+            await client.setRoomTopic(roomId, "pizza", "<b>pizza</b>");
+            expect(sendStateEvent).toHaveBeenCalledTimes(1);
+        });
+    });
+
     describe("setPassword", () => {
         const auth = { session: 'abcdef', type: 'foo' };
         const newPassword = 'newpassword';