PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

Unit test typescriptification - TextualBody (#8433)

Browse source 
* test/components/views/messages/TextualBody-test.js -> tsx

Signed-off-by: Kerry Archibald <kerrya@element.io>

* fix ts issues in textualbody

Signed-off-by: Kerry Archibald <kerrya@element.io>

* remove type-removing context wrapper, fix more

Signed-off-by: Kerry Archibald <kerrya@element.io>
This commit is contained in:
Kerry 2022-04-28 11:32:50 +02:00 committed by GitHub
parent 482bb6f48b
commit 1127db0514
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 64 additions and 43 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

107
test/components/views/messages/TextualBody-test.js → test/components/views/messages/TextualBody-test.tsx
View file

@ -1,5 +1,5 @@
/* /*
Copyright 2019 The Matrix.org Foundation C.I.C. Copyright 2019, 2022 The Matrix.org Foundation C.I.C.
Licensed under the Apache License, Version 2.0 (the "License"); Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License. you may not use this file except in compliance with the License.
@ -16,28 +16,60 @@ limitations under the License.
import React from "react"; import React from "react";
import { mount } from "enzyme"; import { mount } from "enzyme";
import { MatrixClient } from "matrix-js-sdk/src/matrix";
import { MockedObject } from "jest-mock";
import { mkEvent, mkStubRoom } from "../../../test-utils"; import { getMockClientWithEventEmitter, mkEvent, mkStubRoom } from "../../../test-utils";
import { MatrixClientPeg } from "../../../../src/MatrixClientPeg"; import { MatrixClientPeg } from "../../../../src/MatrixClientPeg";
import * as languageHandler from "../../../../src/languageHandler"; import * as languageHandler from "../../../../src/languageHandler";
import * as TestUtils from "../../../test-utils";
import DMRoomMap from "../../../../src/utils/DMRoomMap"; import DMRoomMap from "../../../../src/utils/DMRoomMap";
import _TextualBody from "../../../../src/components/views/messages/TextualBody"; import TextualBody from "../../../../src/components/views/messages/TextualBody";
import MatrixClientContext from "../../../../src/contexts/MatrixClientContext";
const TextualBody = TestUtils.wrapInMatrixClientContext(_TextualBody); import { RoomPermalinkCreator } from "../../../../src/utils/permalinks/Permalinks";
import { MediaEventHelper } from "../../../../src/utils/MediaEventHelper";
describe("<TextualBody />", () => { describe("<TextualBody />", () => {
afterEach(() => { afterEach(() => {
MatrixClientPeg.matrixClient = null; jest.spyOn(MatrixClientPeg, 'get').mockRestore();
}); });
it("renders m.emote correctly", () => { const defaultRoom = mkStubRoom("room_id", "test room", undefined);
MatrixClientPeg.matrixClient = { let defaultMatrixClient: MockedObject<MatrixClient>;
getRoom: () => mkStubRoom("room_id"), beforeEach(() => {
defaultMatrixClient = getMockClientWithEventEmitter({
getRoom: () => defaultRoom,
getAccountData: () => undefined, getAccountData: () => undefined,
isGuest: () => false, isGuest: () => false,
mxcUrlToHttp: (s) => s, mxcUrlToHttp: (s) => s,
}; });
});
const defaultEvent = mkEvent({
type: "m.room.message",
room: "room_id",
user: "sender",
content: {
body: "winks",
msgtype: "m.emote",
},
event: true,
});
const defaultProps = {
mxEvent: defaultEvent,
highlights: [],
highlightLink: '',
onMessageAllowed: jest.fn(),
onHeightChanged: jest.fn(),
permalinkCreator: new RoomPermalinkCreator(defaultRoom),
mediaEventHelper: {} as MediaEventHelper,
};
const getComponent = (props = {}, matrixClient: MatrixClient = defaultMatrixClient) =>
mount(<TextualBody {...defaultProps} {...props} />, {
wrappingComponent: MatrixClientContext.Provider,
wrappingComponentProps: { value: matrixClient },
});
it("renders m.emote correctly", () => {
DMRoomMap.makeShared(); DMRoomMap.makeShared();
const ev = mkEvent({ const ev = mkEvent({
@ -51,19 +83,13 @@ describe("<TextualBody />", () => {
event: true, event: true,
}); });
const wrapper = mount(<TextualBody mxEvent={ev} />); const wrapper = getComponent({ mxEvent: ev });
expect(wrapper.text()).toBe("* sender winks"); expect(wrapper.text()).toBe("* sender winks");
const content = wrapper.find(".mx_EventTile_body"); const content = wrapper.find(".mx_EventTile_body");
expect(content.html()).toBe('<span class="mx_EventTile_body" dir="auto">winks</span>'); expect(content.html()).toBe('<span class="mx_EventTile_body" dir="auto">winks</span>');
}); });
it("renders m.notice correctly", () => { it("renders m.notice correctly", () => {
MatrixClientPeg.matrixClient = {
getRoom: () => mkStubRoom("room_id"),
getAccountData: () => undefined,
isGuest: () => false,
mxcUrlToHttp: (s) => s,
};
DMRoomMap.makeShared(); DMRoomMap.makeShared();
const ev = mkEvent({ const ev = mkEvent({
@ -77,7 +103,7 @@ describe("<TextualBody />", () => {
event: true, event: true,
}); });
const wrapper = mount(<TextualBody mxEvent={ev} />); const wrapper = getComponent({ mxEvent: ev });
expect(wrapper.text()).toBe(ev.getContent().body); expect(wrapper.text()).toBe(ev.getContent().body);
const content = wrapper.find(".mx_EventTile_body"); const content = wrapper.find(".mx_EventTile_body");
expect(content.html()).toBe(`<span class="mx_EventTile_body" dir="auto">${ ev.getContent().body }</span>`); expect(content.html()).toBe(`<span class="mx_EventTile_body" dir="auto">${ ev.getContent().body }</span>`);
@ -85,12 +111,6 @@ describe("<TextualBody />", () => {
describe("renders plain-text m.text correctly", () => { describe("renders plain-text m.text correctly", () => {
beforeEach(() => { beforeEach(() => {
MatrixClientPeg.matrixClient = {
getRoom: () => mkStubRoom("room_id"),
getAccountData: () => undefined,
isGuest: () => false,
mxcUrlToHttp: (s) => s,
};
DMRoomMap.makeShared(); DMRoomMap.makeShared();
}); });
@ -106,7 +126,7 @@ describe("<TextualBody />", () => {
event: true, event: true,
}); });
const wrapper = mount(<TextualBody mxEvent={ev} />); const wrapper = getComponent({ mxEvent: ev });
expect(wrapper.text()).toBe(ev.getContent().body); expect(wrapper.text()).toBe(ev.getContent().body);
const content = wrapper.find(".mx_EventTile_body"); const content = wrapper.find(".mx_EventTile_body");
expect(content.html()).toBe(`<span class="mx_EventTile_body" dir="auto">${ ev.getContent().body }</span>`); expect(content.html()).toBe(`<span class="mx_EventTile_body" dir="auto">${ ev.getContent().body }</span>`);
@ -125,7 +145,7 @@ describe("<TextualBody />", () => {
event: true, event: true,
}); });
const wrapper = mount(<TextualBody mxEvent={ev} />); const wrapper = getComponent({ mxEvent: ev });
expect(wrapper.text()).toBe(ev.getContent().body); expect(wrapper.text()).toBe(ev.getContent().body);
const content = wrapper.find(".mx_EventTile_body"); const content = wrapper.find(".mx_EventTile_body");
expect(content.html()).toBe('<span class="mx_EventTile_body" dir="auto">' + expect(content.html()).toBe('<span class="mx_EventTile_body" dir="auto">' +
@ -135,9 +155,10 @@ describe("<TextualBody />", () => {
}); });
describe("renders formatted m.text correctly", () => { describe("renders formatted m.text correctly", () => {
let matrixClient;
beforeEach(() => { beforeEach(() => {
MatrixClientPeg.matrixClient = { matrixClient = getMockClientWithEventEmitter({
getRoom: () => mkStubRoom("room_id"), getRoom: () => mkStubRoom("room_id", "room name", undefined),
getAccountData: () => undefined, getAccountData: () => undefined,
getUserId: () => "@me:my_server", getUserId: () => "@me:my_server",
getHomeserverUrl: () => "https://my_server/", getHomeserverUrl: () => "https://my_server/",
@ -145,7 +166,7 @@ describe("<TextualBody />", () => {
removeListener: () => undefined, removeListener: () => undefined,
isGuest: () => false, isGuest: () => false,
mxcUrlToHttp: (s) => s, mxcUrlToHttp: (s) => s,
}; });
DMRoomMap.makeShared(); DMRoomMap.makeShared();
}); });
@ -163,7 +184,7 @@ describe("<TextualBody />", () => {
event: true, event: true,
}); });
const wrapper = mount(<TextualBody mxEvent={ev} />); const wrapper = getComponent({ mxEvent: ev }, matrixClient);
expect(wrapper.text()).toBe("foo baz bar del u"); expect(wrapper.text()).toBe("foo baz bar del u");
const content = wrapper.find(".mx_EventTile_body"); const content = wrapper.find(".mx_EventTile_body");
expect(content.html()).toBe('<span class="mx_EventTile_body markdown-body" dir="auto">' + expect(content.html()).toBe('<span class="mx_EventTile_body markdown-body" dir="auto">' +
@ -184,7 +205,7 @@ describe("<TextualBody />", () => {
event: true, event: true,
}); });
const wrapper = mount(<TextualBody mxEvent={ev} />); const wrapper = getComponent({ mxEvent: ev }, matrixClient);
expect(wrapper.text()).toBe("Hey (movie) the movie was awesome"); expect(wrapper.text()).toBe("Hey (movie) the movie was awesome");
const content = wrapper.find(".mx_EventTile_body"); const content = wrapper.find(".mx_EventTile_body");
expect(content.html()).toBe('<span class="mx_EventTile_body markdown-body" dir="auto">' + expect(content.html()).toBe('<span class="mx_EventTile_body markdown-body" dir="auto">' +
@ -210,7 +231,7 @@ describe("<TextualBody />", () => {
event: true, event: true,
}); });
const wrapper = mount(<TextualBody mxEvent={ev} />); const wrapper = getComponent({ mxEvent: ev }, matrixClient);
expect(wrapper.text()).toBe("Hey Member"); expect(wrapper.text()).toBe("Hey Member");
const content = wrapper.find(".mx_EventTile_body"); const content = wrapper.find(".mx_EventTile_body");
expect(content.html()).toBe('<span class="mx_EventTile_body markdown-body" dir="auto">' + expect(content.html()).toBe('<span class="mx_EventTile_body markdown-body" dir="auto">' +
@ -235,7 +256,7 @@ describe("<TextualBody />", () => {
event: true, event: true,
}); });
const wrapper = mount(<TextualBody mxEvent={ev} />); const wrapper = getComponent({ mxEvent: ev });
expect(wrapper.text()).toBe("@room\n1@room\n\n"); expect(wrapper.text()).toBe("@room\n1@room\n\n");
const content = wrapper.find(".mx_EventTile_body"); const content = wrapper.find(".mx_EventTile_body");
expect(content.html()).toMatchSnapshot(); expect(content.html()).toMatchSnapshot();
@ -259,7 +280,7 @@ describe("<TextualBody />", () => {
event: true, event: true,
}); });
const wrapper = mount(<TextualBody mxEvent={ev} />); const wrapper = getComponent({ mxEvent: ev }, matrixClient);
expect(wrapper.text()).toBe("An event link with text"); expect(wrapper.text()).toBe("An event link with text");
const content = wrapper.find(".mx_EventTile_body"); const content = wrapper.find(".mx_EventTile_body");
expect(content.html()).toBe( expect(content.html()).toBe(
@ -288,8 +309,8 @@ describe("<TextualBody />", () => {
event: true, event: true,
}); });
const wrapper = mount(<TextualBody mxEvent={ev} />); const wrapper = getComponent({ mxEvent: ev }, matrixClient);
expect(wrapper.text()).toBe("A !ZxbRYPQXDXKGmDnJNg:example.com with vias"); expect(wrapper.text()).toBe("A room name with vias");
const content = wrapper.find(".mx_EventTile_body"); const content = wrapper.find(".mx_EventTile_body");
expect(content.html()).toBe( expect(content.html()).toBe(
'<span class="mx_EventTile_body markdown-body" dir="auto">' + '<span class="mx_EventTile_body markdown-body" dir="auto">' +
@ -299,7 +320,7 @@ describe("<TextualBody />", () => {
'><img class="mx_BaseAvatar mx_BaseAvatar_image" ' + '><img class="mx_BaseAvatar mx_BaseAvatar_image" ' +
'src="mxc://avatar.url/room.png" ' + 'src="mxc://avatar.url/room.png" ' +
'style="width: 16px; height: 16px;" alt="" aria-hidden="true">' + 'style="width: 16px; height: 16px;" alt="" aria-hidden="true">' +
'!ZxbRYPQXDXKGmDnJNg:example.com</a></span> with vias</span>', 'room name</a></span> with vias</span>',
); );
}); });
@ -317,7 +338,7 @@ describe("<TextualBody />", () => {
event: true, event: true,
}); });
const wrapper = mount(<TextualBody mxEvent={ev} />); const wrapper = getComponent({ mxEvent: ev }, matrixClient);
const content = wrapper.find(".mx_EventTile_body"); const content = wrapper.find(".mx_EventTile_body");
expect(content.html()).toBe( expect(content.html()).toBe(
@ -331,13 +352,13 @@ describe("<TextualBody />", () => {
it("renders url previews correctly", () => { it("renders url previews correctly", () => {
languageHandler.setMissingEntryGenerator(key => key.split('|', 2)[1]); languageHandler.setMissingEntryGenerator(key => key.split('|', 2)[1]);
MatrixClientPeg.matrixClient = { const matrixClient = getMockClientWithEventEmitter({
getRoom: () => mkStubRoom("room_id"), getRoom: () => mkStubRoom("room_id", "room name", undefined),
getAccountData: () => undefined, getAccountData: () => undefined,
getUrlPreview: (url) => new Promise(() => {}), getUrlPreview: (url) => new Promise(() => {}),
isGuest: () => false, isGuest: () => false,
mxcUrlToHttp: (s) => s, mxcUrlToHttp: (s) => s,
}; });
DMRoomMap.makeShared(); DMRoomMap.makeShared();
const ev = mkEvent({ const ev = mkEvent({
@ -351,7 +372,7 @@ describe("<TextualBody />", () => {
event: true, event: true,
}); });
const wrapper = mount(<TextualBody mxEvent={ev} showUrlPreview={true} onHeightChanged={() => {}} />); const wrapper = getComponent({ mxEvent: ev, showUrlPreview: true, onHeightChanged: jest.fn() }, matrixClient);
expect(wrapper.text()).toBe(ev.getContent().body); expect(wrapper.text()).toBe(ev.getContent().body);
let widgets = wrapper.find("LinkPreviewGroup"); let widgets = wrapper.find("LinkPreviewGroup");

0
test/components/views/messages/__snapshots__/TextualBody-test.js.snap → test/components/views/messages/__snapshots__/TextualBody-test.tsx.snap
View file