OpenCloud
/
element-web
mirror of https://github.com/vector-im/element-web
1
0
Fork 0
Code Issues Releases Wiki Activity

Fix url preview display (#28765)

pull/28772/head
Florian Duros 2024-12-18 17:42:37 +01:00 committed by GitHub
parent 580213da5d
commit 117bee787f
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 59 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/components/views/messages/TextualBody.tsx
View File

@ -128,7 +128,8 @@ export default class TextualBody extends React.Component<IBodyProps, IState> {
if (!this.props.editState) { if (!this.props.editState) {
const stoppedEditing = prevProps.editState && !this.props.editState; const stoppedEditing = prevProps.editState && !this.props.editState;
const messageWasEdited = prevProps.replacingEventId !== this.props.replacingEventId; const messageWasEdited = prevProps.replacingEventId !== this.props.replacingEventId;
if (messageWasEdited || stoppedEditing) { const urlPreviewChanged = prevProps.showUrlPreview !== this.props.showUrlPreview;
if (messageWasEdited || stoppedEditing || urlPreviewChanged) {
this.applyFormatting(); this.applyFormatting();
} }
} }

96
test/unit-tests/components/views/messages/TextualBody-test.tsx
View File

@ -375,55 +375,73 @@ describe("<TextualBody />", () => {
}); });
}); });
it("renders url previews correctly", () => { describe("url preview", () => {
languageHandler.setMissingEntryGenerator((key) => key.split("|", 2)[1]); let matrixClient: MatrixClient;
const matrixClient = getMockClientWithEventEmitter({ beforeEach(() => {
getRoom: () => mkStubRoom("room_id", "room name", undefined), languageHandler.setMissingEntryGenerator((key) => key.split("|", 2)[1]);
getAccountData: (): MatrixClient | undefined => undefined, matrixClient = getMockClientWithEventEmitter({
getUrlPreview: (url: string) => new Promise(() => {}), getRoom: () => mkStubRoom("room_id", "room name", undefined),
isGuest: () => false, getAccountData: (): MatrixClient | undefined => undefined,
mxcUrlToHttp: (s: string) => s, getUrlPreview: (url: string) => new Promise(() => {}),
isGuest: () => false,
mxcUrlToHttp: (s: string) => s,
});
DMRoomMap.makeShared(defaultMatrixClient);
}); });
DMRoomMap.makeShared(defaultMatrixClient);
const ev = mkRoomTextMessage("Visit https://matrix.org/"); it("renders url previews correctly", () => {
const { container, rerender } = getComponent( const ev = mkRoomTextMessage("Visit https://matrix.org/");
{ mxEvent: ev, showUrlPreview: true, onHeightChanged: jest.fn() }, const { container, rerender } = getComponent(
matrixClient, { mxEvent: ev, showUrlPreview: true, onHeightChanged: jest.fn() },
); matrixClient,
);
expect(container).toHaveTextContent(ev.getContent().body); expect(container).toHaveTextContent(ev.getContent().body);
expect(container.querySelector("a")).toHaveAttribute("href", "https://matrix.org/"); 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 // simulate an event edit and check the transition from the old URL preview to the new one
const ev2 = mkEvent({ const ev2 = mkEvent({
type: "m.room.message", type: "m.room.message",
room: "room_id", room: "room_id",
user: "sender", user: "sender",
content: { content: {
"m.new_content": { "m.new_content": {
body: "Visit https://vector.im/ and https://riot.im/", body: "Visit https://vector.im/ and https://riot.im/",
msgtype: "m.text", 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( it("should listen to showUrlPreview change", () => {
{ mxEvent: ev, showUrlPreview: true, onHeightChanged: jest.fn(), replacingEventId: ev.getId() }, const ev = mkRoomTextMessage("Visit https://matrix.org/");
matrixClient,
rerender,
);
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/"]; getComponent({ mxEvent: ev, showUrlPreview: true, onHeightChanged: jest.fn() }, matrixClient, rerender);
const anchorNodes = container.querySelectorAll("a"); expect(container.querySelector(".mx_LinkPreviewGroup")).toBeTruthy();
Array.from(anchorNodes).forEach((node, index) => {
expect(node).toHaveAttribute("href", links[index]);
}); });
}); });
}); });