Skip to content

Commit 66dc519

Browse files
dbkrdbkr
committed
Fix message panel test
1 parent b983b98 commit 66dc519

1 file changed

Lines changed: 64 additions & 48 deletions

File tree

‎apps/web/test/unit-tests/components/structures/MessagePanel-test.tsx‎

Lines changed: 64 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,14 @@ Please see LICENSE files in the repository root for full details.
99

1010
import React from "react";
1111
import { EventEmitter } from "events";
12-
import { type MatrixEvent, Room, RoomMember, type Thread, ReceiptType } from "matrix-js-sdk/src/matrix";
12+
import {
13+
type MatrixEvent,
14+
Room,
15+
RoomMember,
16+
type Thread,
17+
ReceiptType,
18+
type MatrixClient,
19+
} from "matrix-js-sdk/src/matrix";
1320
import { KnownMembership } from "matrix-js-sdk/src/types";
1421
import { render, within } from "jest-matrix-react";
1522

@@ -42,22 +49,9 @@ const roomId = "!roomId:server_name";
4249
describe("MessagePanel", function () {
4350
const events = mkEvents();
4451
const userId = "@me:here";
45-
const client = getMockClientWithEventEmitter({
46-
...mockClientMethodsUser(userId),
47-
...mockClientMethodsEvents(),
48-
...mockClientMethodsCrypto(),
49-
...mockClientPushProcessor(),
50-
getAccountData: jest.fn(),
51-
isUserIgnored: jest.fn().mockReturnValue(false),
52-
isRoomEncrypted: jest.fn().mockReturnValue(false),
53-
getRoom: jest.fn(),
54-
getClientWellKnown: jest.fn().mockReturnValue({}),
55-
supportsThreads: jest.fn().mockReturnValue(true),
56-
});
52+
let client: MatrixClient;
5753
let sdkContext: SdkContextClass;
58-
jest.spyOn(MatrixClientPeg, "get").mockReturnValue(client);
59-
60-
const room = new Room(roomId, client, userId);
54+
let room: Room;
6155

6256
const bobMember = new RoomMember(roomId, "@bob:id");
6357
bobMember.name = "Bob";
@@ -73,16 +67,13 @@ describe("MessagePanel", function () {
7367
const defaultProps = {
7468
resizeNotifier: new EventEmitter() as unknown as ResizeNotifier,
7569
callEventGroupers: new Map(),
76-
room,
7770
className: "cls",
7871
events: [] as MatrixEvent[],
7972
};
8073

8174
const defaultRoomContext = {
8275
...RoomContext,
8376
timelineRenderingType: TimelineRenderingType.Room,
84-
room,
85-
roomId: room.roomId,
8677
canReact: true,
8778
canSendMessages: true,
8879
showReadReceipts: true,
@@ -93,14 +84,30 @@ describe("MessagePanel", function () {
9384
showHiddenEvents: false,
9485
} as unknown as RoomContextType;
9586

96-
const getComponent = (props = {}, roomContext: Partial<RoomContextType> = {}) => (
97-
<ScopedRoomContextProvider {...defaultRoomContext} {...roomContext}>
98-
<MessagePanel {...defaultProps} {...props} />
87+
const getComponent = (room: Room, props = {}, roomContext: Partial<RoomContextType> = {}) => (
88+
<ScopedRoomContextProvider room={room} roomId={room.roomId} {...defaultRoomContext} {...roomContext}>
89+
<MessagePanel room={room} {...defaultProps} {...props} />
9990
</ScopedRoomContextProvider>
10091
);
10192

10293
beforeEach(function () {
103-
jest.clearAllMocks();
94+
client = getMockClientWithEventEmitter({
95+
...mockClientMethodsUser(userId),
96+
...mockClientMethodsEvents(),
97+
...mockClientMethodsCrypto(),
98+
...mockClientPushProcessor(),
99+
getAccountData: jest.fn(),
100+
isUserIgnored: jest.fn().mockReturnValue(false),
101+
isRoomEncrypted: jest.fn().mockReturnValue(false),
102+
getRoom: jest.fn(),
103+
getClientWellKnown: jest.fn().mockReturnValue({}),
104+
supportsThreads: jest.fn().mockReturnValue(true),
105+
});
106+
107+
jest.spyOn(MatrixClientPeg, "get").mockReturnValue(client);
108+
109+
room = new Room(roomId, client, userId);
110+
104111
// HACK: We assume all settings want to be disabled
105112
jest.spyOn(SettingsStore, "getValue").mockImplementation((arg) => {
106113
return arg === "showDisplaynameChanges";
@@ -315,7 +322,10 @@ describe("MessagePanel", function () {
315322
}
316323

317324
it("should show the events", function () {
318-
const { container } = render(getComponent({ events }), clientAndSDKContextRenderOptions(client, sdkContext));
325+
const { container } = render(
326+
getComponent(room, { events }),
327+
clientAndSDKContextRenderOptions(client, sdkContext),
328+
);
319329

320330
// just check we have the right number of tiles for now
321331
const tiles = container.getElementsByClassName("mx_EventTile");
@@ -324,7 +334,7 @@ describe("MessagePanel", function () {
324334

325335
it("should collapse adjacent member events", function () {
326336
const { container } = render(
327-
getComponent({ events: mkMelsEvents() }),
337+
getComponent(room, { events: mkMelsEvents() }),
328338
clientAndSDKContextRenderOptions(client, sdkContext),
329339
);
330340

@@ -338,7 +348,7 @@ describe("MessagePanel", function () {
338348

339349
it("should insert the read-marker in the right place", function () {
340350
const { container } = render(
341-
getComponent({
351+
getComponent(room, {
342352
events,
343353
readMarkerEventId: events[4].getId(),
344354
readMarkerVisible: true,
@@ -359,7 +369,7 @@ describe("MessagePanel", function () {
359369
it("should show the read-marker that fall in summarised events after the summary", function () {
360370
const melsEvents = mkMelsEvents();
361371
const { container } = render(
362-
getComponent({
372+
getComponent(room, {
363373
events: melsEvents,
364374
readMarkerEventId: melsEvents[4].getId(),
365375
readMarkerVisible: true,
@@ -382,7 +392,7 @@ describe("MessagePanel", function () {
382392
const melsEvents = mkMelsEventsOnly();
383393

384394
const { container } = render(
385-
getComponent({
395+
getComponent(room, {
386396
events: melsEvents,
387397
readMarkerEventId: melsEvents[9].getId(),
388398
readMarkerVisible: true,
@@ -407,7 +417,7 @@ describe("MessagePanel", function () {
407417

408418
const { container, rerender } = render(
409419
<div>
410-
{getComponent({
420+
{getComponent(room, {
411421
events,
412422
readMarkerEventId: events[4].getId(),
413423
readMarkerVisible: true,
@@ -424,7 +434,7 @@ describe("MessagePanel", function () {
424434

425435
rerender(
426436
<div>
427-
{getComponent({
437+
{getComponent(room, {
428438
events,
429439
readMarkerEventId: events[6].getId(),
430440
readMarkerVisible: true,
@@ -456,7 +466,10 @@ describe("MessagePanel", function () {
456466
client.getRoom.mockImplementation((id) => (id === createEvent!.getRoomId() ? room : null));
457467
TestUtilsMatrix.upsertRoomStateEvents(room, events);
458468

459-
const { container } = render(getComponent({ events }), clientAndSDKContextRenderOptions(client, sdkContext));
469+
const { container } = render(
470+
getComponent(room, { events }),
471+
clientAndSDKContextRenderOptions(client, sdkContext),
472+
);
460473

461474
// we expect that
462475
// - the room creation event, the room encryption event, and Alice inviting Bob,
@@ -485,7 +498,7 @@ describe("MessagePanel", function () {
485498
const combinedEvents = [...events, beaconInfoEvent];
486499
TestUtilsMatrix.upsertRoomStateEvents(room, combinedEvents);
487500
const { container } = render(
488-
getComponent({ events: combinedEvents }),
501+
getComponent(room, { events: combinedEvents }),
489502
clientAndSDKContextRenderOptions(client, sdkContext),
490503
);
491504

@@ -504,7 +517,7 @@ describe("MessagePanel", function () {
504517
TestUtilsMatrix.upsertRoomStateEvents(room, events);
505518

506519
const { container } = render(
507-
getComponent({
520+
getComponent(room, {
508521
events,
509522
readMarkerEventId: events[5].getId(),
510523
readMarkerVisible: true,
@@ -527,7 +540,7 @@ describe("MessagePanel", function () {
527540
it("should render Date separators for the events", function () {
528541
const events = mkOneDayEvents();
529542
const { queryAllByRole } = render(
530-
getComponent({ events }),
543+
getComponent(room, { events }),
531544
clientAndSDKContextRenderOptions(client, sdkContext),
532545
);
533546
const dates = queryAllByRole("separator");
@@ -539,7 +552,7 @@ describe("MessagePanel", function () {
539552
const events = mkMelsEvents().slice(1, 11);
540553

541554
const { container, rerender } = render(
542-
getComponent({ events }),
555+
getComponent(room, { events }),
543556
clientAndSDKContextRenderOptions(client, sdkContext),
544557
);
545558
let els = container.getElementsByClassName("mx_GenericEventListSummary");
@@ -560,7 +573,7 @@ describe("MessagePanel", function () {
560573
name: "A user",
561574
}),
562575
];
563-
rerender(getComponent({ events: updatedEvents }));
576+
rerender(getComponent(room, { events: updatedEvents }));
564577

565578
els = container.getElementsByClassName("mx_GenericEventListSummary");
566579
expect(els.length).toEqual(1);
@@ -572,7 +585,7 @@ describe("MessagePanel", function () {
572585
const events = mkMelsEvents().slice(1, 11);
573586

574587
const { container, rerender } = render(
575-
getComponent({ events }),
588+
getComponent(room, { events }),
576589
clientAndSDKContextRenderOptions(client, sdkContext),
577590
);
578591
let els = container.getElementsByClassName("mx_GenericEventListSummary");
@@ -593,7 +606,7 @@ describe("MessagePanel", function () {
593606
}),
594607
...events,
595608
];
596-
rerender(getComponent({ events: updatedEvents }));
609+
rerender(getComponent(room, { events: updatedEvents }));
597610

598611
els = container.getElementsByClassName("mx_GenericEventListSummary");
599612
expect(els.length).toEqual(1);
@@ -605,7 +618,7 @@ describe("MessagePanel", function () {
605618
const events = mkMelsEvents().slice(1, 11);
606619

607620
const { container, rerender } = render(
608-
getComponent({ events }),
621+
getComponent(room, { events }),
609622
clientAndSDKContextRenderOptions(client, sdkContext),
610623
);
611624
let els = container.getElementsByClassName("mx_GenericEventListSummary");
@@ -623,7 +636,7 @@ describe("MessagePanel", function () {
623636
}),
624637
...events.slice(5, 10),
625638
];
626-
rerender(getComponent({ events: updatedEvents }));
639+
rerender(getComponent(room, { events: updatedEvents }));
627640

628641
// summaries split becuase room messages are not summarised
629642
els = container.getElementsByClassName("mx_GenericEventListSummary");
@@ -640,12 +653,15 @@ describe("MessagePanel", function () {
640653
it("doesn't lookup showHiddenEventsInTimeline while rendering", () => {
641654
// We're only interested in the setting lookups that happen on every render,
642655
// rather than those happening on first mount, so let's get those out of the way
643-
const { rerender } = render(getComponent({ events: [] }), clientAndSDKContextRenderOptions(client, sdkContext));
656+
const { rerender } = render(
657+
getComponent(room, { events: [] }),
658+
clientAndSDKContextRenderOptions(client, sdkContext),
659+
);
644660

645661
// Set up our spy and re-render with new events
646662
const settingsSpy = jest.spyOn(SettingsStore, "getValue").mockClear();
647663

648-
rerender(getComponent({ events: mkMixedHiddenAndShownEvents() }));
664+
rerender(getComponent(room, { events: mkMixedHiddenAndShownEvents() }));
649665

650666
expect(settingsSpy).not.toHaveBeenCalledWith("showHiddenEventsInTimeline");
651667
settingsSpy.mockRestore();
@@ -679,7 +695,7 @@ describe("MessagePanel", function () {
679695
}),
680696
];
681697
const { container } = render(
682-
getComponent({ events }, { showHiddenEvents: true }),
698+
getComponent(room, { events }, { showHiddenEvents: true }),
683699
clientAndSDKContextRenderOptions(client, sdkContext),
684700
);
685701

@@ -706,7 +722,7 @@ describe("MessagePanel", function () {
706722
);
707723
}
708724
const { asFragment } = render(
709-
getComponent({ events }, { showHiddenEvents: false }),
725+
getComponent(room, { events }, { showHiddenEvents: false }),
710726
clientAndSDKContextRenderOptions(client, sdkContext),
711727
);
712728
expect(asFragment()).toMatchSnapshot();
@@ -730,7 +746,7 @@ describe("MessagePanel", function () {
730746
);
731747
}
732748
const { asFragment } = render(
733-
getComponent({ events }, { showHiddenEvents: false }),
749+
getComponent(room, { events }, { showHiddenEvents: false }),
734750
clientAndSDKContextRenderOptions(client, sdkContext),
735751
);
736752
expect(asFragment()).toMatchSnapshot();
@@ -754,7 +770,7 @@ describe("MessagePanel", function () {
754770
);
755771
}
756772
const { asFragment } = render(
757-
getComponent({ events }, { showHiddenEvents: true }),
773+
getComponent(room, { events }, { showHiddenEvents: true }),
758774
clientAndSDKContextRenderOptions(client, sdkContext),
759775
);
760776
const cpt = asFragment();
@@ -788,7 +804,7 @@ describe("MessagePanel", function () {
788804
}),
789805
];
790806
const { container } = render(
791-
getComponent({ events, showReadReceipts: true }),
807+
getComponent(room, { events, showReadReceipts: true }),
792808
clientAndSDKContextRenderOptions(client, sdkContext),
793809
);
794810

@@ -824,7 +840,7 @@ describe("MessagePanel", function () {
824840
true,
825841
);
826842
const { container } = render(
827-
getComponent({ events, showReadReceipts: true }),
843+
getComponent(room, { events, showReadReceipts: true }),
828844
clientAndSDKContextRenderOptions(client, sdkContext),
829845
);
830846

0 commit comments

Comments
 (0)
⚡