mirror of https://github.com/vector-im/riot-web
275 lines
10 KiB
TypeScript
275 lines
10 KiB
TypeScript
/*
|
|
* Copyright 2024 New Vector Ltd.
|
|
* Copyright 2024 The Matrix.org Foundation C.I.C.
|
|
*
|
|
* SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
|
|
* Please see LICENSE files in the repository root for full details.
|
|
*/
|
|
|
|
import React, { ComponentProps } from "react";
|
|
import { getByText, render, screen } from "jest-matrix-react";
|
|
import userEvent from "@testing-library/user-event";
|
|
import { NotificationCountType, PendingEventOrdering, Room } from "matrix-js-sdk/src/matrix";
|
|
|
|
import { ThreadsActivityCentre } from "../../../../../src/components/views/spaces/threads-activity-centre";
|
|
import { MatrixClientPeg } from "../../../../../src/MatrixClientPeg";
|
|
import MatrixClientContext from "../../../../../src/contexts/MatrixClientContext";
|
|
import { stubClient } from "../../../../test-utils";
|
|
import { populateThread } from "../../../../test-utils/threads";
|
|
import DMRoomMap from "../../../../../src/utils/DMRoomMap";
|
|
import SettingsStore from "../../../../../src/settings/SettingsStore";
|
|
import { SettingLevel } from "../../../../../src/settings/SettingLevel";
|
|
|
|
describe("ThreadsActivityCentre", () => {
|
|
const getTACButton = () => {
|
|
return screen.getByRole("button", { name: "Threads" });
|
|
};
|
|
|
|
const getTACMenu = () => {
|
|
return screen.getByRole("menu");
|
|
};
|
|
|
|
const getTACDescription = (container: ReturnType<typeof render>["container"]) => {
|
|
return container.querySelector(".mx_ThreadsActivityCentreButton_Text");
|
|
};
|
|
|
|
const renderTAC = (props?: ComponentProps<typeof ThreadsActivityCentre>) => {
|
|
return render(
|
|
<MatrixClientContext.Provider value={cli}>
|
|
<ThreadsActivityCentre {...props} />
|
|
</MatrixClientContext.Provider>,
|
|
);
|
|
};
|
|
|
|
const cli = stubClient();
|
|
cli.supportsThreads = () => true;
|
|
|
|
const roomWithActivity = new Room("!room:server", cli, cli.getSafeUserId(), {
|
|
pendingEventOrdering: PendingEventOrdering.Detached,
|
|
});
|
|
roomWithActivity.name = "Just activity";
|
|
|
|
const roomWithNotif = new Room("!room2:server", cli, cli.getSafeUserId(), {
|
|
pendingEventOrdering: PendingEventOrdering.Detached,
|
|
});
|
|
roomWithNotif.name = "A notification";
|
|
|
|
const roomWithHighlight = new Room("!room3:server", cli, cli.getSafeUserId(), {
|
|
pendingEventOrdering: PendingEventOrdering.Detached,
|
|
});
|
|
roomWithHighlight.name = "This is a real highlight";
|
|
|
|
const getDefaultThreadArgs = (room: Room) => ({
|
|
room: room,
|
|
client: cli,
|
|
authorId: "@foo:bar",
|
|
participantUserIds: ["@fee:bar"],
|
|
});
|
|
|
|
beforeAll(async () => {
|
|
jest.spyOn(MatrixClientPeg, "get").mockReturnValue(cli);
|
|
jest.spyOn(MatrixClientPeg, "safeGet").mockReturnValue(cli);
|
|
|
|
const dmRoomMap = new DMRoomMap(cli);
|
|
jest.spyOn(dmRoomMap, "getUserIdForRoomId");
|
|
jest.spyOn(DMRoomMap, "shared").mockReturnValue(dmRoomMap);
|
|
|
|
await populateThread(getDefaultThreadArgs(roomWithActivity));
|
|
|
|
const notifThreadInfo = await populateThread(getDefaultThreadArgs(roomWithNotif));
|
|
roomWithNotif.setThreadUnreadNotificationCount(notifThreadInfo.thread.id, NotificationCountType.Total, 1);
|
|
|
|
const highlightThreadInfo = await populateThread({
|
|
...getDefaultThreadArgs(roomWithHighlight),
|
|
// timestamp
|
|
ts: 5,
|
|
});
|
|
roomWithHighlight.setThreadUnreadNotificationCount(
|
|
highlightThreadInfo.thread.id,
|
|
NotificationCountType.Highlight,
|
|
1,
|
|
);
|
|
});
|
|
|
|
beforeEach(async () => {
|
|
await SettingsStore.setValue("feature_release_announcement", null, SettingLevel.DEVICE, false);
|
|
});
|
|
|
|
it("should render the threads activity centre button", async () => {
|
|
renderTAC();
|
|
expect(getTACButton()).toBeInTheDocument();
|
|
});
|
|
|
|
it("should render the release announcement", async () => {
|
|
// Enable release announcement
|
|
await SettingsStore.setValue("feature_release_announcement", null, SettingLevel.DEVICE, true);
|
|
|
|
renderTAC();
|
|
expect(document.body).toMatchSnapshot();
|
|
});
|
|
|
|
it("should render not display the tooltip when the release announcement is displayed", async () => {
|
|
// Enable release announcement
|
|
await SettingsStore.setValue("feature_release_announcement", null, SettingLevel.DEVICE, true);
|
|
|
|
renderTAC();
|
|
|
|
// The tooltip should not be displayed
|
|
await userEvent.hover(getTACButton());
|
|
expect(screen.queryByRole("tooltip")).toBeNull();
|
|
});
|
|
|
|
it("should close the release announcement when the TAC button is clicked", async () => {
|
|
// Enable release announcement
|
|
await SettingsStore.setValue("feature_release_announcement", null, SettingLevel.DEVICE, true);
|
|
|
|
renderTAC();
|
|
await userEvent.click(getTACButton());
|
|
expect(getTACMenu()).toBeInTheDocument();
|
|
expect(document.body).toMatchSnapshot();
|
|
});
|
|
|
|
it("should render the threads activity centre button and the display label", async () => {
|
|
const { container } = renderTAC({ displayButtonLabel: true });
|
|
expect(getTACButton()).toBeInTheDocument();
|
|
expect(getTACDescription(container)).toBeInTheDocument();
|
|
});
|
|
|
|
it("should render the threads activity centre menu when the button is clicked", async () => {
|
|
renderTAC();
|
|
await userEvent.click(getTACButton());
|
|
expect(getTACMenu()).toBeInTheDocument();
|
|
});
|
|
|
|
it("should not render a room with a activity in the TAC", async () => {
|
|
cli.getVisibleRooms = jest.fn().mockReturnValue([roomWithActivity]);
|
|
renderTAC();
|
|
await userEvent.click(getTACButton());
|
|
|
|
// We should not render the room with activity
|
|
expect(() => screen.getAllByRole("menuitem")).toThrow();
|
|
});
|
|
|
|
it("should render a room with a regular notification in the TAC", async () => {
|
|
cli.getVisibleRooms = jest.fn().mockReturnValue([roomWithNotif]);
|
|
renderTAC();
|
|
await userEvent.click(getTACButton());
|
|
|
|
const tacRows = screen.getAllByRole("menuitem");
|
|
expect(tacRows.length).toEqual(1);
|
|
|
|
getByText(tacRows[0], "A notification");
|
|
expect(tacRows[0].getElementsByClassName("mx_NotificationBadge_level_notification").length).toEqual(1);
|
|
});
|
|
|
|
it("should render a room with a highlight notification in the TAC", async () => {
|
|
cli.getVisibleRooms = jest.fn().mockReturnValue([roomWithHighlight]);
|
|
renderTAC();
|
|
await userEvent.click(getTACButton());
|
|
|
|
const tacRows = screen.getAllByRole("menuitem");
|
|
expect(tacRows.length).toEqual(1);
|
|
|
|
getByText(tacRows[0], "This is a real highlight");
|
|
expect(tacRows[0].getElementsByClassName("mx_NotificationBadge_level_highlight").length).toEqual(1);
|
|
});
|
|
|
|
it("renders notifications matching the snapshot", async () => {
|
|
cli.getVisibleRooms = jest.fn().mockReturnValue([roomWithHighlight, roomWithNotif, roomWithActivity]);
|
|
renderTAC();
|
|
await userEvent.click(getTACButton());
|
|
|
|
expect(screen.getByRole("menu")).toMatchSnapshot();
|
|
});
|
|
|
|
it("should display a caption when no threads are unread", async () => {
|
|
cli.getVisibleRooms = jest.fn().mockReturnValue([]);
|
|
renderTAC();
|
|
await userEvent.click(getTACButton());
|
|
|
|
expect(screen.getByRole("menu").getElementsByClassName("mx_ThreadsActivityCentre_emptyCaption").length).toEqual(
|
|
1,
|
|
);
|
|
});
|
|
|
|
it("should match snapshot when empty", async () => {
|
|
cli.getVisibleRooms = jest.fn().mockReturnValue([]);
|
|
renderTAC();
|
|
await userEvent.click(getTACButton());
|
|
|
|
expect(screen.getByRole("menu")).toMatchSnapshot();
|
|
});
|
|
|
|
it("should order the room with the same notification level by most recent", async () => {
|
|
// Generate two new rooms with threads
|
|
const secondRoomWithHighlight = new Room("!room4:server", cli, cli.getSafeUserId(), {
|
|
pendingEventOrdering: PendingEventOrdering.Detached,
|
|
});
|
|
secondRoomWithHighlight.name = "This is a second real highlight";
|
|
|
|
const secondHighlightThreadInfo = await populateThread({
|
|
...getDefaultThreadArgs(secondRoomWithHighlight),
|
|
// timestamp
|
|
ts: 1,
|
|
});
|
|
secondRoomWithHighlight.setThreadUnreadNotificationCount(
|
|
secondHighlightThreadInfo.thread.id,
|
|
NotificationCountType.Highlight,
|
|
1,
|
|
);
|
|
|
|
const thirdRoomWithHighlight = new Room("!room5:server", cli, cli.getSafeUserId(), {
|
|
pendingEventOrdering: PendingEventOrdering.Detached,
|
|
});
|
|
thirdRoomWithHighlight.name = "This is a third real highlight";
|
|
|
|
const thirdHighlightThreadInfo = await populateThread({
|
|
...getDefaultThreadArgs(thirdRoomWithHighlight),
|
|
// timestamp
|
|
ts: 7,
|
|
});
|
|
thirdRoomWithHighlight.setThreadUnreadNotificationCount(
|
|
thirdHighlightThreadInfo.thread.id,
|
|
NotificationCountType.Highlight,
|
|
1,
|
|
);
|
|
|
|
cli.getVisibleRooms = jest
|
|
.fn()
|
|
.mockReturnValue([roomWithHighlight, secondRoomWithHighlight, thirdRoomWithHighlight]);
|
|
|
|
renderTAC();
|
|
await userEvent.click(getTACButton());
|
|
|
|
// The room should be ordered by the most recent thread
|
|
// thirdHighlightThreadInfo (timestamp 7) > highlightThreadInfo (timestamp 5) > secondHighlightThreadInfo (timestamp 1)
|
|
expect(screen.getByRole("menu")).toMatchSnapshot();
|
|
});
|
|
|
|
it("should block Ctrl/CMD + k shortcut", async () => {
|
|
cli.getVisibleRooms = jest.fn().mockReturnValue([roomWithHighlight]);
|
|
|
|
const keyDownHandler = jest.fn();
|
|
render(
|
|
<div
|
|
onKeyDown={(evt) => {
|
|
keyDownHandler(evt.key, evt.ctrlKey);
|
|
}}
|
|
>
|
|
<MatrixClientContext.Provider value={cli}>
|
|
<ThreadsActivityCentre />
|
|
</MatrixClientContext.Provider>
|
|
</div>,
|
|
);
|
|
await userEvent.click(getTACButton());
|
|
|
|
// CTRL/CMD + k should be blocked
|
|
await userEvent.keyboard("{Control>}k{/Control}");
|
|
expect(keyDownHandler).not.toHaveBeenCalledWith("k", true);
|
|
|
|
// Sanity test
|
|
await userEvent.keyboard("{Control>}a{/Control}");
|
|
expect(keyDownHandler).toHaveBeenCalledWith("a", true);
|
|
});
|
|
});
|