2022-10-24 08:50:21 +02:00
|
|
|
/*
|
2023-02-20 15:46:07 +01:00
|
|
|
Copyright 2022 - 2023 The Matrix.org Foundation C.I.C.
|
2022-10-24 08:50:21 +02:00
|
|
|
|
|
|
|
Licensed under the Apache License, Version 2.0 (the "License");
|
|
|
|
you may not use this file except in compliance with the License.
|
|
|
|
You may obtain a copy of the License at
|
|
|
|
|
|
|
|
http://www.apache.org/licenses/LICENSE-2.0
|
|
|
|
|
|
|
|
Unless required by applicable law or agreed to in writing, software
|
|
|
|
distributed under the License is distributed on an "AS IS" BASIS,
|
|
|
|
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
|
|
See the License for the specific language governing permissions and
|
|
|
|
limitations under the License.
|
|
|
|
*/
|
|
|
|
|
|
|
|
import { render } from "@testing-library/react";
|
2023-08-09 09:18:41 +02:00
|
|
|
import {
|
|
|
|
MatrixEvent,
|
|
|
|
MsgType,
|
|
|
|
RelationType,
|
|
|
|
NotificationCountType,
|
|
|
|
Room,
|
|
|
|
MatrixClient,
|
|
|
|
PendingEventOrdering,
|
|
|
|
} from "matrix-js-sdk/src/matrix";
|
2023-01-11 12:49:03 +01:00
|
|
|
import { ReceiptType } from "matrix-js-sdk/src/@types/read_receipts";
|
2022-10-24 08:50:21 +02:00
|
|
|
import React from "react";
|
|
|
|
|
2023-08-01 09:32:53 +02:00
|
|
|
import LegacyRoomHeaderButtons from "../../../../src/components/views/right_panel/LegacyRoomHeaderButtons";
|
2022-10-24 08:50:21 +02:00
|
|
|
import { MatrixClientPeg } from "../../../../src/MatrixClientPeg";
|
2023-01-11 12:49:03 +01:00
|
|
|
import { mkEvent, stubClient } from "../../../test-utils";
|
|
|
|
import { mkThread } from "../../../test-utils/threads";
|
2022-10-24 08:50:21 +02:00
|
|
|
|
2023-08-01 09:32:53 +02:00
|
|
|
describe("LegacyRoomHeaderButtons-test.tsx", function () {
|
2022-10-24 08:50:21 +02:00
|
|
|
const ROOM_ID = "!roomId:example.org";
|
|
|
|
let room: Room;
|
|
|
|
let client: MatrixClient;
|
|
|
|
|
|
|
|
beforeEach(() => {
|
|
|
|
jest.clearAllMocks();
|
|
|
|
|
|
|
|
stubClient();
|
2023-06-05 19:12:23 +02:00
|
|
|
client = MatrixClientPeg.safeGet();
|
2023-01-30 13:20:11 +01:00
|
|
|
client.supportsThreads = () => true;
|
2022-11-10 19:01:19 +01:00
|
|
|
room = new Room(ROOM_ID, client, client.getUserId() ?? "", {
|
2022-10-24 08:50:21 +02:00
|
|
|
pendingEventOrdering: PendingEventOrdering.Detached,
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
2022-11-10 19:01:19 +01:00
|
|
|
function getComponent(room?: Room) {
|
2023-08-01 09:32:53 +02:00
|
|
|
return render(<LegacyRoomHeaderButtons room={room} excludedRightPanelPhaseButtons={[]} />);
|
2022-10-24 08:50:21 +02:00
|
|
|
}
|
|
|
|
|
2023-01-11 12:49:03 +01:00
|
|
|
function getThreadButton(container: HTMLElement) {
|
2022-10-24 08:50:21 +02:00
|
|
|
return container.querySelector(".mx_RightPanel_threadsButton");
|
|
|
|
}
|
|
|
|
|
2023-01-11 12:49:03 +01:00
|
|
|
function isIndicatorOfType(container: HTMLElement, type: "red" | "gray" | "bold") {
|
|
|
|
return container.querySelector(".mx_RightPanel_threadsButton .mx_Indicator")!.className.includes(type);
|
2022-10-24 08:50:21 +02:00
|
|
|
}
|
|
|
|
|
2023-05-12 21:49:07 +02:00
|
|
|
it("should render", () => {
|
|
|
|
const { asFragment } = getComponent(room);
|
|
|
|
expect(asFragment()).toMatchSnapshot();
|
|
|
|
});
|
|
|
|
|
2022-10-24 08:50:21 +02:00
|
|
|
it("shows the thread button", () => {
|
|
|
|
const { container } = getComponent(room);
|
|
|
|
expect(getThreadButton(container)).not.toBeNull();
|
|
|
|
});
|
|
|
|
|
|
|
|
it("room wide notification does not change the thread button", () => {
|
|
|
|
room.setUnreadNotificationCount(NotificationCountType.Highlight, 1);
|
|
|
|
room.setUnreadNotificationCount(NotificationCountType.Total, 1);
|
|
|
|
|
|
|
|
const { container } = getComponent(room);
|
|
|
|
|
|
|
|
expect(container.querySelector(".mx_RightPanel_threadsButton .mx_Indicator")).toBeNull();
|
|
|
|
});
|
|
|
|
|
2023-01-11 12:49:03 +01:00
|
|
|
it("thread notification does change the thread button", () => {
|
2022-10-24 08:50:21 +02:00
|
|
|
const { container } = getComponent(room);
|
2023-08-01 09:32:53 +02:00
|
|
|
expect(getThreadButton(container)!.className.includes("mx_LegacyRoomHeader_button--unread")).toBeFalsy();
|
2022-10-24 08:50:21 +02:00
|
|
|
|
|
|
|
room.setThreadUnreadNotificationCount("$123", NotificationCountType.Total, 1);
|
2023-08-01 09:32:53 +02:00
|
|
|
expect(getThreadButton(container)!.className.includes("mx_LegacyRoomHeader_button--unread")).toBeTruthy();
|
2022-10-24 08:50:21 +02:00
|
|
|
expect(isIndicatorOfType(container, "gray")).toBe(true);
|
|
|
|
|
|
|
|
room.setThreadUnreadNotificationCount("$123", NotificationCountType.Highlight, 1);
|
|
|
|
expect(isIndicatorOfType(container, "red")).toBe(true);
|
|
|
|
|
|
|
|
room.setThreadUnreadNotificationCount("$123", NotificationCountType.Total, 0);
|
|
|
|
room.setThreadUnreadNotificationCount("$123", NotificationCountType.Highlight, 0);
|
|
|
|
|
|
|
|
expect(container.querySelector(".mx_RightPanel_threadsButton .mx_Indicator")).toBeNull();
|
|
|
|
});
|
2022-11-10 19:01:19 +01:00
|
|
|
|
2023-01-11 12:49:03 +01:00
|
|
|
it("thread activity does change the thread button", async () => {
|
|
|
|
const { container } = getComponent(room);
|
|
|
|
|
|
|
|
// Thread activity should appear on the icon.
|
|
|
|
const { rootEvent, events } = mkThread({
|
|
|
|
room,
|
|
|
|
client,
|
|
|
|
authorId: client.getUserId()!,
|
|
|
|
participantUserIds: ["@alice:example.org"],
|
|
|
|
});
|
|
|
|
expect(isIndicatorOfType(container, "bold")).toBe(true);
|
|
|
|
|
|
|
|
// Sending the last event should clear the notification.
|
|
|
|
let event = mkEvent({
|
|
|
|
event: true,
|
|
|
|
type: "m.room.message",
|
|
|
|
user: client.getUserId()!,
|
|
|
|
room: room.roomId,
|
|
|
|
content: {
|
|
|
|
"msgtype": MsgType.Text,
|
|
|
|
"body": "Test",
|
|
|
|
"m.relates_to": {
|
|
|
|
event_id: rootEvent.getId(),
|
|
|
|
rel_type: RelationType.Thread,
|
|
|
|
},
|
|
|
|
},
|
|
|
|
});
|
|
|
|
room.addLiveEvents([event]);
|
|
|
|
await expect(container.querySelector(".mx_RightPanel_threadsButton .mx_Indicator")).toBeNull();
|
|
|
|
|
|
|
|
// Mark it as unread again.
|
|
|
|
event = mkEvent({
|
|
|
|
event: true,
|
|
|
|
type: "m.room.message",
|
|
|
|
user: "@alice:example.org",
|
|
|
|
room: room.roomId,
|
|
|
|
content: {
|
|
|
|
"msgtype": MsgType.Text,
|
|
|
|
"body": "Test",
|
|
|
|
"m.relates_to": {
|
|
|
|
event_id: rootEvent.getId(),
|
|
|
|
rel_type: RelationType.Thread,
|
|
|
|
},
|
|
|
|
},
|
|
|
|
});
|
|
|
|
room.addLiveEvents([event]);
|
|
|
|
expect(isIndicatorOfType(container, "bold")).toBe(true);
|
|
|
|
|
|
|
|
// Sending a read receipt on an earlier event shouldn't do anything.
|
|
|
|
let receipt = new MatrixEvent({
|
|
|
|
type: "m.receipt",
|
|
|
|
room_id: room.roomId,
|
|
|
|
content: {
|
|
|
|
[events.at(-1)!.getId()!]: {
|
|
|
|
[ReceiptType.Read]: {
|
|
|
|
[client.getUserId()!]: { ts: 1, thread_id: rootEvent.getId() },
|
|
|
|
},
|
|
|
|
},
|
|
|
|
},
|
|
|
|
});
|
|
|
|
room.addReceipt(receipt);
|
|
|
|
expect(isIndicatorOfType(container, "bold")).toBe(true);
|
|
|
|
|
|
|
|
// Sending a receipt on the latest event should clear the notification.
|
|
|
|
receipt = new MatrixEvent({
|
|
|
|
type: "m.receipt",
|
|
|
|
room_id: room.roomId,
|
|
|
|
content: {
|
|
|
|
[event.getId()!]: {
|
|
|
|
[ReceiptType.Read]: {
|
|
|
|
[client.getUserId()!]: { ts: 1, thread_id: rootEvent.getId() },
|
|
|
|
},
|
|
|
|
},
|
|
|
|
},
|
|
|
|
});
|
|
|
|
room.addReceipt(receipt);
|
|
|
|
expect(container.querySelector(".mx_RightPanel_threadsButton .mx_Indicator")).toBeNull();
|
|
|
|
});
|
2022-10-24 08:50:21 +02:00
|
|
|
});
|