Allow Chrome page translator to translate messages in rooms (#11113)

* support message translation in chat

* Update src/HtmlUtils.tsx

* update snapshots

* Convert TextualBody-test to use snapshots

---------

Co-authored-by: Richard van der Hoff <1389908+richvdh@users.noreply.github.com>
Co-authored-by: Richard van der Hoff <richard@matrix.org>
This commit is contained in:
Łukasz Polowczyk 2024-07-25 18:58:33 +02:00 committed by GitHub
parent 3c370c6cbc
commit c1420ba126
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
9 changed files with 136 additions and 46 deletions

View file

@ -135,7 +135,7 @@ describe("<TextualBody />", () => {
const { container } = getComponent({ mxEvent: ev });
expect(container).toHaveTextContent("* sender winks");
const content = container.querySelector(".mx_EventTile_body");
expect(content).toContainHTML('<span class="mx_EventTile_body" dir="auto">winks</span>');
expect(content).toMatchSnapshot();
});
it("renders m.notice correctly", () => {
@ -155,7 +155,7 @@ describe("<TextualBody />", () => {
const { container } = getComponent({ mxEvent: ev });
expect(container).toHaveTextContent(ev.getContent().body);
const content = container.querySelector(".mx_EventTile_body");
expect(content).toContainHTML(`<span class="mx_EventTile_body" dir="auto">${ev.getContent().body}</span>`);
expect(content).toMatchSnapshot();
});
describe("renders plain-text m.text correctly", () => {
@ -168,7 +168,7 @@ describe("<TextualBody />", () => {
const { container } = getComponent({ mxEvent: ev });
expect(container).toHaveTextContent(ev.getContent().body);
const content = container.querySelector(".mx_EventTile_body");
expect(content).toContainHTML(`<span class="mx_EventTile_body" dir="auto">${ev.getContent().body}</span>`);
expect(content).toMatchSnapshot();
});
// If pills were rendered within a Portal/same shadow DOM then it'd be easier to test
@ -177,11 +177,7 @@ describe("<TextualBody />", () => {
const { container } = getComponent({ mxEvent: ev });
expect(container).toHaveTextContent(ev.getContent().body);
const content = container.querySelector(".mx_EventTile_body");
expect(content).toContainHTML(
'<span class="mx_EventTile_body" dir="auto">' +
'Visit <a href="https://matrix.org/" class="linkified" target="_blank" rel="noreferrer noopener">' +
"https://matrix.org/</a></span>",
);
expect(content).toMatchSnapshot();
});
it("should not pillify MXIDs", () => {
@ -266,11 +262,7 @@ describe("<TextualBody />", () => {
const { container } = getComponent({ mxEvent: ev }, matrixClient);
expect(container).toHaveTextContent("foo baz bar del u");
const content = container.querySelector(".mx_EventTile_body");
expect(content).toContainHTML(
'<span class="mx_EventTile_body markdown-body" dir="auto">' +
ev.getContent().formatted_body +
"</span>",
);
expect(content).toMatchSnapshot();
});
it("spoilers get injected properly into the DOM", () => {
@ -281,14 +273,7 @@ describe("<TextualBody />", () => {
const { container } = getComponent({ mxEvent: ev }, matrixClient);
expect(container).toHaveTextContent("Hey (movie) the movie was awesome");
const content = container.querySelector(".mx_EventTile_body");
expect(content).toContainHTML(
'<span class="mx_EventTile_body markdown-body" dir="auto">' +
"Hey <span>" +
'<button class="mx_EventTile_spoiler">' +
'<span class="mx_EventTile_spoiler_reason">(movie)</span>&nbsp;' +
'<span class="mx_EventTile_spoiler_content"><span>the movie was awesome</span></span>' +
"</span></button></span>",
);
expect(content).toMatchSnapshot();
});
it("linkification is not applied to code blocks", () => {
@ -366,7 +351,7 @@ describe("<TextualBody />", () => {
expect(content).toMatchSnapshot();
});
it("renders formatted body without html corretly", () => {
it("renders formatted body without html correctly", () => {
const ev = mkEvent({
type: "m.room.message",
room: "room_id",
@ -383,9 +368,7 @@ describe("<TextualBody />", () => {
const { container } = getComponent({ mxEvent: ev }, matrixClient);
const content = container.querySelector(".mx_EventTile_body");
expect(content).toContainHTML(
'<span class="mx_EventTile_body" dir="auto">' + "escaped *markdown*" + "</span>",
);
expect(content).toMatchSnapshot();
});
});