diff --git a/test/components/views/messages/TextualBody-test.tsx b/test/components/views/messages/TextualBody-test.tsx
index f5466c46cfe..194b32c4304 100644
--- a/test/components/views/messages/TextualBody-test.tsx
+++ b/test/components/views/messages/TextualBody-test.tsx
@@ -37,6 +37,17 @@ const mkRoomTextMessage = (body: string): MatrixEvent => {
});
};
+const mkFormattedMessage = (body: string, formattedBody: string): MatrixEvent => {
+ return mkMessage({
+ msg: body,
+ formattedMsg: formattedBody,
+ format: "org.matrix.custom.html",
+ room: "room_id",
+ user: "sender",
+ event: true,
+ });
+};
+
describe("", () => {
afterEach(() => {
jest.spyOn(MatrixClientPeg, "get").mockRestore();
@@ -156,6 +167,15 @@ describe("", () => {
);
});
+ it("should pillify an MXID permalink", () => {
+ const ev = mkRoomTextMessage("Chat with https://matrix.to/#/@user:example.com");
+ const { container } = getComponent({ mxEvent: ev });
+ const content = container.querySelector(".mx_EventTile_body");
+ expect(content.innerHTML).toMatchInlineSnapshot(
+ `"Chat with Member"`,
+ );
+ });
+
it("should not pillify room aliases", () => {
const ev = mkRoomTextMessage("Visit #room:example.com");
const { container } = getComponent({ mxEvent: ev });
@@ -164,6 +184,15 @@ describe("", () => {
`"Visit #room:example.com"`,
);
});
+
+ it("should pillify a room alias permalink", () => {
+ const ev = mkRoomTextMessage("Visit https://matrix.to/#/#room:example.com");
+ const { container } = getComponent({ mxEvent: ev });
+ const content = container.querySelector(".mx_EventTile_body");
+ expect(content.innerHTML).toMatchInlineSnapshot(
+ `"Visit #room:example.com"`,
+ );
+ });
});
describe("renders formatted m.text correctly", () => {
@@ -183,19 +212,10 @@ describe("", () => {
});
it("italics, bold, underline and strikethrough render as expected", () => {
- const ev = mkEvent({
- type: "m.room.message",
- room: "room_id",
- user: "sender",
- content: {
- body: "foo *baz* __bar__ del u",
- msgtype: "m.text",
- format: "org.matrix.custom.html",
- formatted_body: "foo baz bar del u",
- },
- event: true,
- });
-
+ const ev = mkFormattedMessage(
+ "foo *baz* __bar__ del u",
+ "foo baz bar del u",
+ );
const { container } = getComponent({ mxEvent: ev }, matrixClient);
expect(container).toHaveTextContent("foo baz bar del u");
const content = container.querySelector(".mx_EventTile_body");
@@ -207,19 +227,10 @@ describe("", () => {
});
it("spoilers get injected properly into the DOM", () => {
- const ev = mkEvent({
- type: "m.room.message",
- room: "room_id",
- user: "sender",
- content: {
- body: "Hey [Spoiler for movie](mxc://someserver/somefile)",
- msgtype: "m.text",
- format: "org.matrix.custom.html",
- formatted_body: 'Hey the movie was awesome',
- },
- event: true,
- });
-
+ const ev = mkFormattedMessage(
+ "Hey [Spoiler for movie](mxc://someserver/somefile)",
+ 'Hey the movie was awesome',
+ );
const { container } = getComponent({ mxEvent: ev }, matrixClient);
expect(container).toHaveTextContent("Hey (movie) the movie was awesome");
const content = container.querySelector(".mx_EventTile_body");
@@ -234,19 +245,10 @@ describe("", () => {
});
it("linkification is not applied to code blocks", () => {
- const ev = mkEvent({
- type: "m.room.message",
- room: "room_id",
- user: "sender",
- content: {
- body: "Visit `https://matrix.org/`\n```\nhttps://matrix.org/\n```",
- msgtype: "m.text",
- format: "org.matrix.custom.html",
- formatted_body: "
Visit https://matrix.org/
\nhttps://matrix.org/\n
\n",
- },
- event: true,
- });
-
+ const ev = mkFormattedMessage(
+ "Visit `https://matrix.org/`\n```\nhttps://matrix.org/\n```",
+ "Visit https://matrix.org/
\nhttps://matrix.org/\n
\n",
+ );
const { container } = getComponent({ mxEvent: ev }, matrixClient);
expect(container).toHaveTextContent("Visit https://matrix.org/ 1https://matrix.org/");
const content = container.querySelector(".mx_EventTile_body");
@@ -255,19 +257,7 @@ describe("", () => {
// If pills were rendered within a Portal/same shadow DOM then it'd be easier to test
it("pills get injected correctly into the DOM", () => {
- const ev = mkEvent({
- type: "m.room.message",
- room: "room_id",
- user: "sender",
- content: {
- body: "Hey User",
- msgtype: "m.text",
- format: "org.matrix.custom.html",
- formatted_body: 'Hey Member',
- },
- event: true,
- });
-
+ const ev = mkFormattedMessage("Hey User", 'Hey Member');
const { container } = getComponent({ mxEvent: ev }, matrixClient);
expect(container).toHaveTextContent("Hey Member");
const content = container.querySelector(".mx_EventTile_body");
@@ -275,19 +265,10 @@ describe("", () => {
});
it("pills do not appear in code blocks", () => {
- const ev = mkEvent({
- type: "m.room.message",
- room: "room_id",
- user: "sender",
- content: {
- body: "`@room`\n```\n@room\n```",
- msgtype: "m.text",
- format: "org.matrix.custom.html",
- formatted_body: "@room
\n@room\n
\n",
- },
- event: true,
- });
-
+ const ev = mkFormattedMessage(
+ "`@room`\n```\n@room\n```",
+ "@room
\n@room\n
\n",
+ );
const { container } = getComponent({ mxEvent: ev });
expect(container).toHaveTextContent("@room 1@room");
const content = container.querySelector(".mx_EventTile_body");
@@ -295,23 +276,13 @@ describe("", () => {
});
it("pills do not appear for event permalinks", () => {
- const ev = mkEvent({
- type: "m.room.message",
- room: "room_id",
- user: "sender",
- content: {
- body:
- "An [event link](https://matrix.to/#/!ZxbRYPQXDXKGmDnJNg:example.com/" +
- "$16085560162aNpaH:example.com?via=example.com) with text",
- msgtype: "m.text",
- format: "org.matrix.custom.html",
- formatted_body:
- 'An event link with text',
- },
- event: true,
- });
+ const ev = mkFormattedMessage(
+ "An [event link](https://matrix.to/#/!ZxbRYPQXDXKGmDnJNg:example.com/" +
+ "$16085560162aNpaH:example.com?via=example.com) with text",
+ 'An event link with text',
+ );
const { container } = getComponent({ mxEvent: ev }, matrixClient);
expect(container).toHaveTextContent("An event link with text");
const content = container.querySelector(".mx_EventTile_body");
@@ -324,23 +295,12 @@ describe("", () => {
});
it("pills appear for room links with vias", () => {
- const ev = mkEvent({
- type: "m.room.message",
- room: "room_id",
- user: "sender",
- content: {
- body:
- "A [room link](https://matrix.to/#/!ZxbRYPQXDXKGmDnJNg:example.com" +
- "?via=example.com&via=bob.com) with vias",
- msgtype: "m.text",
- format: "org.matrix.custom.html",
- formatted_body:
- 'A room link with vias',
- },
- event: true,
- });
-
+ const ev = mkFormattedMessage(
+ "A [room link](https://matrix.to/#/!ZxbRYPQXDXKGmDnJNg:example.com" +
+ "?via=example.com&via=bob.com) with vias",
+ 'A room link with vias',
+ );
const { container } = getComponent({ mxEvent: ev }, matrixClient);
expect(container).toHaveTextContent("A room name with vias");
const content = container.querySelector(".mx_EventTile_body");
@@ -356,6 +316,16 @@ describe("", () => {
);
});
+ it("pills appear for an MXID permalink", () => {
+ const ev = mkFormattedMessage(
+ "Chat with [@user:example.com](https://matrix.to/#/@user:example.com)",
+ 'Chat with @user:example.com',
+ );
+ const { container } = getComponent({ mxEvent: ev }, matrixClient);
+ const content = container.querySelector(".mx_EventTile_body");
+ expect(content).toMatchSnapshot();
+ });
+
it("renders formatted body without html corretly", () => {
const ev = mkEvent({
type: "m.room.message",
diff --git a/test/components/views/messages/__snapshots__/TextualBody-test.tsx.snap b/test/components/views/messages/__snapshots__/TextualBody-test.tsx.snap
index 36c53927371..166749bd3ba 100644
--- a/test/components/views/messages/__snapshots__/TextualBody-test.tsx.snap
+++ b/test/components/views/messages/__snapshots__/TextualBody-test.tsx.snap
@@ -41,6 +41,37 @@ exports[` renders formatted m.text correctly linkification is not
`;
+exports[` renders formatted m.text correctly pills appear for an MXID permalink 1`] = `
+
+ Chat with
+
+
+
+
+
+ Member
+
+
+
+
+
+`;
+
exports[` renders formatted m.text correctly pills do not appear in code blocks 1`] = `