From be296702c832b66aadc3cd367e43faad73bf034e Mon Sep 17 00:00:00 2001 From: Florian Duros Date: Wed, 18 Dec 2024 17:42:37 +0100 Subject: [PATCH] Fix url preview display (#28765) (cherry picked from commit 117bee787f624cf67c014a92138f23faef8a8548) --- src/components/views/messages/TextualBody.tsx | 3 +- .../views/messages/TextualBody-test.tsx | 96 +++++++++++-------- 2 files changed, 59 insertions(+), 40 deletions(-) diff --git a/src/components/views/messages/TextualBody.tsx b/src/components/views/messages/TextualBody.tsx index ae99754cbad..242feff6d4b 100644 --- a/src/components/views/messages/TextualBody.tsx +++ b/src/components/views/messages/TextualBody.tsx @@ -128,7 +128,8 @@ export default class TextualBody extends React.Component { if (!this.props.editState) { const stoppedEditing = prevProps.editState && !this.props.editState; const messageWasEdited = prevProps.replacingEventId !== this.props.replacingEventId; - if (messageWasEdited || stoppedEditing) { + const urlPreviewChanged = prevProps.showUrlPreview !== this.props.showUrlPreview; + if (messageWasEdited || stoppedEditing || urlPreviewChanged) { this.applyFormatting(); } } diff --git a/test/unit-tests/components/views/messages/TextualBody-test.tsx b/test/unit-tests/components/views/messages/TextualBody-test.tsx index c7ffc4ed933..14b94535759 100644 --- a/test/unit-tests/components/views/messages/TextualBody-test.tsx +++ b/test/unit-tests/components/views/messages/TextualBody-test.tsx @@ -375,55 +375,73 @@ describe("", () => { }); }); - it("renders url previews correctly", () => { - languageHandler.setMissingEntryGenerator((key) => key.split("|", 2)[1]); + describe("url preview", () => { + let matrixClient: MatrixClient; - const matrixClient = getMockClientWithEventEmitter({ - getRoom: () => mkStubRoom("room_id", "room name", undefined), - getAccountData: (): MatrixClient | undefined => undefined, - getUrlPreview: (url: string) => new Promise(() => {}), - isGuest: () => false, - mxcUrlToHttp: (s: string) => s, + beforeEach(() => { + languageHandler.setMissingEntryGenerator((key) => key.split("|", 2)[1]); + matrixClient = getMockClientWithEventEmitter({ + getRoom: () => mkStubRoom("room_id", "room name", undefined), + getAccountData: (): MatrixClient | undefined => undefined, + getUrlPreview: (url: string) => new Promise(() => {}), + isGuest: () => false, + mxcUrlToHttp: (s: string) => s, + }); + DMRoomMap.makeShared(defaultMatrixClient); }); - DMRoomMap.makeShared(defaultMatrixClient); - const ev = mkRoomTextMessage("Visit https://matrix.org/"); - const { container, rerender } = getComponent( - { mxEvent: ev, showUrlPreview: true, onHeightChanged: jest.fn() }, - matrixClient, - ); + it("renders url previews correctly", () => { + const ev = mkRoomTextMessage("Visit https://matrix.org/"); + const { container, rerender } = getComponent( + { mxEvent: ev, showUrlPreview: true, onHeightChanged: jest.fn() }, + matrixClient, + ); - expect(container).toHaveTextContent(ev.getContent().body); - expect(container.querySelector("a")).toHaveAttribute("href", "https://matrix.org/"); + expect(container).toHaveTextContent(ev.getContent().body); + expect(container.querySelector("a")).toHaveAttribute("href", "https://matrix.org/"); - // simulate an event edit and check the transition from the old URL preview to the new one - const ev2 = mkEvent({ - type: "m.room.message", - room: "room_id", - user: "sender", - content: { - "m.new_content": { - body: "Visit https://vector.im/ and https://riot.im/", - msgtype: "m.text", + // simulate an event edit and check the transition from the old URL preview to the new one + const ev2 = mkEvent({ + type: "m.room.message", + room: "room_id", + user: "sender", + content: { + "m.new_content": { + body: "Visit https://vector.im/ and https://riot.im/", + msgtype: "m.text", + }, }, - }, - event: true, + event: true, + }); + jest.spyOn(ev, "replacingEventDate").mockReturnValue(new Date(1993, 7, 3)); + ev.makeReplaced(ev2); + + getComponent( + { mxEvent: ev, showUrlPreview: true, onHeightChanged: jest.fn(), replacingEventId: ev.getId() }, + matrixClient, + rerender, + ); + + expect(container).toHaveTextContent(ev2.getContent()["m.new_content"].body + "(edited)"); + + const links = ["https://vector.im/", "https://riot.im/"]; + const anchorNodes = container.querySelectorAll("a"); + Array.from(anchorNodes).forEach((node, index) => { + expect(node).toHaveAttribute("href", links[index]); + }); }); - jest.spyOn(ev, "replacingEventDate").mockReturnValue(new Date(1993, 7, 3)); - ev.makeReplaced(ev2); - getComponent( - { mxEvent: ev, showUrlPreview: true, onHeightChanged: jest.fn(), replacingEventId: ev.getId() }, - matrixClient, - rerender, - ); + it("should listen to showUrlPreview change", () => { + const ev = mkRoomTextMessage("Visit https://matrix.org/"); - expect(container).toHaveTextContent(ev2.getContent()["m.new_content"].body + "(edited)"); + const { container, rerender } = getComponent( + { mxEvent: ev, showUrlPreview: false, onHeightChanged: jest.fn() }, + matrixClient, + ); + expect(container.querySelector(".mx_LinkPreviewGroup")).toBeNull(); - const links = ["https://vector.im/", "https://riot.im/"]; - const anchorNodes = container.querySelectorAll("a"); - Array.from(anchorNodes).forEach((node, index) => { - expect(node).toHaveAttribute("href", links[index]); + getComponent({ mxEvent: ev, showUrlPreview: true, onHeightChanged: jest.fn() }, matrixClient, rerender); + expect(container.querySelector(".mx_LinkPreviewGroup")).toBeTruthy(); }); }); });