Allow reporting a room when rejecting an invite. (#29570)

* Add report room dialog button/dialog.

* Update copy

* fixup tests / lint

* Fix title in test.

* update snapshot

* Add unit tests for dialog

* lint

* First pass at adding a report room on invite.

* Use a single line input field for reason to avoid bumping the layout.

* Fixups

* Embed reason to make it clear on grouping

* Revert accidental commit

* lint

* Add some playwright tests.

* tweaks

* Make ignored users list more accessible.

* i18n

* Fix sliding sync test.

* Add unit test

* Even more unit tests.

* move test

* Update to match designs.

* remove console statements

* fix css

* tidy up

* improve comments

* fix css

* updates
This commit is contained in:
Will Hunt
2025-04-08 10:08:00 +01:00
committed by GitHub
parent e2b7852998
commit 8fc6638d6e
29 changed files with 844 additions and 327 deletions

View File

@@ -19,6 +19,7 @@ import {
MatrixEvent,
Room,
RoomEvent,
RoomMember,
RoomStateEvent,
SearchResult,
} from "matrix-js-sdk/src/matrix";
@@ -78,6 +79,7 @@ import MatrixClientContext from "../../../../src/contexts/MatrixClientContext";
import { type ViewUserPayload } from "../../../../src/dispatcher/payloads/ViewUserPayload.ts";
import { CallStore } from "../../../../src/stores/CallStore.ts";
import MediaDeviceHandler, { MediaDeviceKindEnum } from "../../../../src/MediaDeviceHandler.ts";
import Modal from "../../../../src/Modal.tsx";
// Used by group calls
jest.spyOn(MediaDeviceHandler, "getDevices").mockResolvedValue({
@@ -196,7 +198,7 @@ describe("RoomView", () => {
<RoomView
// threepidInvite should be optional on RoomView props
// it is treated as optional in RoomView
threepidInvite={undefined as any}
threepidInvite={undefined}
resizeNotifier={new ResizeNotifier()}
forceTimeline={false}
onRegistered={jest.fn()}
@@ -233,6 +235,62 @@ describe("RoomView", () => {
expect(instance.getHiddenHighlightCount()).toBe(0);
});
describe("invites", () => {
beforeEach(() => {
const member = new RoomMember(room.roomId, cli.getSafeUserId());
member.membership = KnownMembership.Invite;
member.events.member = new MatrixEvent({
sender: "@bob:example.org",
});
room.getMyMembership = jest.fn().mockReturnValue(KnownMembership.Invite);
room.getMember = jest.fn().mockReturnValue(member);
});
it("renders an invite room", async () => {
const { asFragment } = await mountRoomView();
expect(asFragment()).toMatchSnapshot();
});
it("handles accepting an invite", async () => {
const { getByRole } = await mountRoomView();
await fireEvent.click(getByRole("button", { name: "Accept" }));
await untilDispatch(Action.JoinRoomReady, defaultDispatcher);
});
it("handles declining an invite", async () => {
const { getByRole } = await mountRoomView();
jest.spyOn(Modal, "createDialog").mockReturnValue({
finished: Promise.resolve([true, false, false]),
close: jest.fn(),
});
await fireEvent.click(getByRole("button", { name: "Decline" }));
await waitFor(() => expect(cli.leave).toHaveBeenCalledWith(room.roomId));
expect(cli.setIgnoredUsers).not.toHaveBeenCalled();
});
it("handles declining an invite and ignoring the user", async () => {
const { getByRole } = await mountRoomView();
cli.getIgnoredUsers.mockReturnValue(["@carol:example.org"]);
jest.spyOn(Modal, "createDialog").mockReturnValue({
finished: Promise.resolve([true, true, false]),
close: jest.fn(),
});
await fireEvent.click(getByRole("button", { name: "Decline and block" }));
expect(cli.leave).toHaveBeenCalledWith(room.roomId);
expect(cli.setIgnoredUsers).toHaveBeenCalledWith(["@carol:example.org", "@bob:example.org"]);
});
it("handles declining an invite and reporting the room", async () => {
const { getByRole } = await mountRoomView();
jest.spyOn(Modal, "createDialog").mockReturnValue({
finished: Promise.resolve([true, false, "with a reason"]),
close: jest.fn(),
});
await fireEvent.click(getByRole("button", { name: "Decline and block" }));
expect(cli.leave).toHaveBeenCalledWith(room.roomId);
expect(cli.reportRoom).toHaveBeenCalledWith(room.roomId, "with a reason");
});
});
describe("when there is an old room", () => {
let instance: RoomView;
let oldRoom: Room;

View File

@@ -1264,6 +1264,79 @@ exports[`RoomView for a local room in state NEW that is encrypted should match t
</div>
`;
exports[`RoomView invites renders an invite room 1`] = `
<DocumentFragment>
<div
class="mx_RoomView"
>
<div
class="mx_RoomPreviewBar mx_RoomPreviewBar_Invite mx_RoomPreviewBar_dialog"
role="complementary"
>
<div
class="mx_RoomPreviewBar_message"
>
<h3>
Do you want to join !2:example.org?
</h3>
<p>
<span
class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52"
data-color="4"
data-testid="avatar-img"
data-type="round"
role="presentation"
style="--cpd-avatar-size: 36px;"
>
!
</span>
</p>
<p>
<span>
Invited by
<span
class="mx_RoomPreviewBar_inviter"
>
@bob:example.org
</span>
</span>
</p>
</div>
<div
class="mx_RoomPreviewBar_actions"
>
<div
class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary"
role="button"
tabindex="0"
>
Accept
</div>
<div
class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_secondary"
role="button"
tabindex="0"
>
Decline
</div>
<button
class="_button_vczzf_8 _destructive_vczzf_107"
data-kind="tertiary"
data-size="lg"
role="button"
tabindex="0"
>
Decline and block
</button>
</div>
<div
class="mx_RoomPreviewBar_footer"
/>
</div>
</div>
</DocumentFragment>
`;
exports[`RoomView should not display the timeline when the room encryption is loading 1`] = `
<DocumentFragment>
<div
@@ -1290,7 +1363,7 @@ exports[`RoomView should not display the timeline when the room encryption is lo
aria-label="Open room settings"
aria-live="off"
class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52"
data-color="2"
data-color="4"
data-testid="avatar-img"
data-type="round"
role="button"
@@ -1317,7 +1390,7 @@ exports[`RoomView should not display the timeline when the room encryption is lo
<span
class="mx_RoomHeader_truncated mx_lineClamp"
>
!6:example.org
!11:example.org
</span>
</div>
</div>
@@ -1498,7 +1571,7 @@ exports[`RoomView should not display the timeline when the room encryption is lo
aria-label="Open room settings"
aria-live="off"
class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52"
data-color="2"
data-color="4"
data-testid="avatar-img"
data-type="round"
role="button"
@@ -1525,7 +1598,7 @@ exports[`RoomView should not display the timeline when the room encryption is lo
<span
class="mx_RoomHeader_truncated mx_lineClamp"
>
!6:example.org
!11:example.org
</span>
</div>
</div>
@@ -1879,7 +1952,7 @@ exports[`RoomView video rooms should render joined video room view 1`] = `
aria-label="Open room settings"
aria-live="off"
class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52"
data-color="6"
data-color="5"
data-testid="avatar-img"
data-type="round"
role="button"
@@ -1906,7 +1979,7 @@ exports[`RoomView video rooms should render joined video room view 1`] = `
<span
class="mx_RoomHeader_truncated mx_lineClamp"
>
!13:example.org
!18:example.org
</span>
</div>
</div>

View File

@@ -0,0 +1,52 @@
/*
Copyright 2025 New Vector Ltd.
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/
import { render } from "jest-matrix-react";
import userEvent from "@testing-library/user-event";
import React from "react";
import SdkConfig from "../../../../../src/SdkConfig";
import { DeclineAndBlockInviteDialog } from "../../../../../src/components/views/dialogs/DeclineAndBlockInviteDialog";
describe("ConfirmRejectInviteDialog", () => {
const onFinished: jest.Mock<any, any> = jest.fn();
const MY_ROOM_NAME = "foo";
beforeEach(() => {
jest.resetAllMocks();
});
afterEach(() => {
SdkConfig.reset();
});
it("can close the dialog", async () => {
const { getByTestId } = render(<DeclineAndBlockInviteDialog onFinished={onFinished} roomName={MY_ROOM_NAME} />);
await userEvent.click(getByTestId("dialog-cancel-button"));
expect(onFinished).toHaveBeenCalledWith(false, false, false);
});
it("can reject with options selected", async () => {
const { container, getByLabelText, getByRole } = render(
<DeclineAndBlockInviteDialog onFinished={onFinished} roomName={MY_ROOM_NAME} />,
);
await userEvent.click(getByRole("switch", { name: "Ignore user" }));
await userEvent.click(getByRole("switch", { name: "Report room" }));
await userEvent.type(getByLabelText("Reason"), "I want to report this room");
expect(container).toMatchSnapshot();
await userEvent.click(getByRole("button", { name: "Decline invite" }));
expect(onFinished).toHaveBeenCalledWith(true, true, "I want to report this room");
});
it("can reject without a reason", async () => {
const { getByRole } = render(<DeclineAndBlockInviteDialog onFinished={onFinished} roomName={MY_ROOM_NAME} />);
await userEvent.click(getByRole("switch", { name: "Ignore user" }));
await userEvent.click(getByRole("switch", { name: "Report room" }));
await userEvent.click(getByRole("button", { name: "Decline invite" }));
expect(onFinished).toHaveBeenCalledWith(true, true, "");
});
});

View File

@@ -0,0 +1,151 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`ConfirmRejectInviteDialog can reject with options selected 1`] = `
<div>
<div
data-focus-guard="true"
style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
tabindex="0"
/>
<div
aria-describedby="mx_Dialog_content"
aria-labelledby="mx_BaseDialog_title"
class="mx_DeclineAndBlockInviteDialog mx_Dialog_fixedWidth"
data-focus-lock-disabled="false"
role="dialog"
>
<div
class="mx_Dialog_header"
>
<h1
class="mx_Heading_h3 mx_Dialog_title"
id="mx_BaseDialog_title"
>
Decline invitation
</h1>
</div>
<form
class="_root_19upo_16"
>
<p>
Are you sure you want to decline the invitation to join "foo"?
</p>
<div
class="mx_SettingsFlag"
>
<span
class="mx_SettingsFlag_label"
>
<div
id="mx_LabelledToggleSwitch_:r7:"
>
Ignore user
</div>
<span
class="mx_Caption"
id="mx_LabelledToggleSwitch_:r7:_caption"
>
You will not see any messages or room invites from this user.
</span>
</span>
<div
aria-checked="true"
aria-describedby="mx_LabelledToggleSwitch_:r7:_caption"
aria-disabled="false"
aria-labelledby="mx_LabelledToggleSwitch_:r7:"
class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on mx_ToggleSwitch_enabled"
role="switch"
tabindex="0"
>
<div
class="mx_ToggleSwitch_ball"
/>
</div>
</div>
<div
class="mx_SettingsFlag"
>
<span
class="mx_SettingsFlag_label"
>
<div
id="mx_LabelledToggleSwitch_:r8:"
>
Report room
</div>
<span
class="mx_Caption"
id="mx_LabelledToggleSwitch_:r8:_caption"
>
Report this room to your account provider.
</span>
</span>
<div
aria-checked="true"
aria-describedby="mx_LabelledToggleSwitch_:r8:_caption"
aria-disabled="false"
aria-labelledby="mx_LabelledToggleSwitch_:r8:"
class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on mx_ToggleSwitch_enabled"
role="switch"
tabindex="0"
>
<div
class="mx_ToggleSwitch_ball"
/>
</div>
</div>
<div
aria-disabled="false"
class="_field_19upo_26"
>
<label
class="_label_19upo_59"
for="mx_DeclineAndBlockInviteDialog_reason"
>
Reason
</label>
<textarea
class="mx_RoomReportTextArea"
id="mx_DeclineAndBlockInviteDialog_reason"
placeholder="Describe the reason for reporting the room."
rows="5"
>
I want to report this room
</textarea>
</div>
<div
class="mx_Dialog_buttons"
>
<span
class="mx_Dialog_buttons_row"
>
<button
data-testid="dialog-cancel-button"
type="button"
>
Cancel
</button>
<button
class="mx_Dialog_primary danger"
data-testid="dialog-primary-button"
type="button"
>
Decline invite
</button>
</span>
</div>
</form>
<div
aria-label="Close dialog"
class="mx_AccessibleButton mx_Dialog_cancelButton"
role="button"
tabindex="0"
/>
</div>
<div
data-focus-guard="true"
style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
tabindex="0"
/>
</div>
`;

View File

@@ -43,7 +43,7 @@ exports[`ReportRoomDialog displays admin message 1`] = `
/>
<span
class="_message_19upo_85 _help-message_19upo_91"
id="radix-:r7:"
id="radix-:r8:"
>
Report this room to your account provider. If the messages are encrypted, your admin will not be able to read them.
</span>
@@ -71,7 +71,7 @@ exports[`ReportRoomDialog displays admin message 1`] = `
class="mx_SettingsFlag_label"
>
<div
id="mx_LabelledToggleSwitch_undefined"
id="mx_LabelledToggleSwitch_:r9:"
>
Leave room
</div>
@@ -79,7 +79,7 @@ exports[`ReportRoomDialog displays admin message 1`] = `
<div
aria-checked="false"
aria-disabled="false"
aria-labelledby="mx_LabelledToggleSwitch_undefined"
aria-labelledby="mx_LabelledToggleSwitch_:r9:"
class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_enabled"
role="switch"
tabindex="0"

View File

@@ -26,7 +26,7 @@ exports[`<LocationShareMenu /> with live location disabled goes to labs flag scr
class="mx_SettingsFlag_label"
>
<div
id="mx_LabelledToggleSwitch_vY7Q4uEh9K38"
id="mx_LabelledToggleSwitch_:r0:"
>
Enable live location sharing
</div>
@@ -34,7 +34,7 @@ exports[`<LocationShareMenu /> with live location disabled goes to labs flag scr
<div
aria-checked="false"
aria-disabled="false"
aria-labelledby="mx_LabelledToggleSwitch_vY7Q4uEh9K38"
aria-labelledby="mx_LabelledToggleSwitch_:r0:"
class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_enabled"
role="switch"
tabindex="0"

View File

@@ -279,37 +279,31 @@ describe("<RoomPreviewBar />", () => {
});
it("renders join and reject action buttons correctly", () => {
const component = getComponent({ inviterName, room, onJoinClick, onRejectClick });
expect(getActions(component)).toMatchSnapshot();
});
it("renders reject and ignore action buttons when handler is provided", () => {
const onRejectAndIgnoreClick = jest.fn();
const component = getComponent({
inviterName,
room,
onJoinClick,
onRejectClick,
onRejectAndIgnoreClick,
});
const component = getComponent({ inviterName, room, onJoinClick, onDeclineClick: onRejectClick });
expect(getActions(component)).toMatchSnapshot();
});
it("renders join and reject action buttons in reverse order when room can previewed", () => {
// when room is previewed action buttons are rendered left to right, with primary on the right
const component = getComponent({ inviterName, room, onJoinClick, onRejectClick, canPreview: true });
const component = getComponent({
inviterName,
room,
onJoinClick,
onDeclineClick: onRejectClick,
canPreview: true,
});
expect(getActions(component)).toMatchSnapshot();
});
it("joins room on primary button click", () => {
const component = getComponent({ inviterName, room, onJoinClick, onRejectClick });
const component = getComponent({ inviterName, room, onJoinClick, onDeclineClick: onRejectClick });
fireEvent.click(getPrimaryActionButton(component)!);
expect(onJoinClick).toHaveBeenCalled();
});
it("rejects invite on secondary button click", () => {
const component = getComponent({ inviterName, room, onJoinClick, onRejectClick });
const component = getComponent({ inviterName, room, onJoinClick, onDeclineClick: onRejectClick });
fireEvent.click(getSecondaryActionButton(component)!);
expect(onRejectClick).toHaveBeenCalled();
@@ -337,18 +331,6 @@ describe("<RoomPreviewBar />", () => {
const component = getComponent({ inviterName, room });
expect(getMessage(component)).toMatchSnapshot();
});
it("renders join and reject action buttons with correct labels", () => {
const onRejectAndIgnoreClick = jest.fn();
const component = getComponent({
inviterName,
room,
onJoinClick,
onRejectAndIgnoreClick,
onRejectClick,
});
expect(getActions(component)).toMatchSnapshot();
});
});
});
@@ -364,7 +346,7 @@ describe("<RoomPreviewBar />", () => {
async () => {
const onJoinClick = jest.fn();
const onRejectClick = jest.fn();
const component = getComponent({ ...props, onJoinClick, onRejectClick });
const component = getComponent({ ...props, onJoinClick, onDeclineClick: onRejectClick });
await waitFor(() => expect(getPrimaryActionButton(component)).toBeTruthy());
if (expectSecondaryButton) expect(getSecondaryActionButton(component)).toBeFalsy();
fireEvent.click(getPrimaryActionButton(component)!);

View File

@@ -339,34 +339,6 @@ exports[`<RoomPreviewBar /> with an invite without an invited email for a dm roo
</div>
`;
exports[`<RoomPreviewBar /> with an invite without an invited email for a dm room renders join and reject action buttons with correct labels 1`] = `
<div
class="mx_RoomPreviewBar_actions"
>
<div
class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary"
role="button"
tabindex="0"
>
Start chatting
</div>
<div
class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_secondary"
role="button"
tabindex="0"
>
Reject & Ignore user
</div>
<div
class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_secondary"
role="button"
tabindex="0"
>
Reject
</div>
</div>
`;
exports[`<RoomPreviewBar /> with an invite without an invited email for a non-dm room renders invite message 1`] = `
<div
class="mx_RoomPreviewBar_message"
@@ -421,7 +393,7 @@ exports[`<RoomPreviewBar /> with an invite without an invited email for a non-dm
role="button"
tabindex="0"
>
Reject
Decline
</div>
</div>
`;
@@ -435,7 +407,7 @@ exports[`<RoomPreviewBar /> with an invite without an invited email for a non-dm
role="button"
tabindex="0"
>
Reject
Decline
</div>
<div
class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary"
@@ -446,31 +418,3 @@ exports[`<RoomPreviewBar /> with an invite without an invited email for a non-dm
</div>
</div>
`;
exports[`<RoomPreviewBar /> with an invite without an invited email for a non-dm room renders reject and ignore action buttons when handler is provided 1`] = `
<div
class="mx_RoomPreviewBar_actions"
>
<div
class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary"
role="button"
tabindex="0"
>
Accept
</div>
<div
class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_secondary"
role="button"
tabindex="0"
>
Reject & Ignore user
</div>
<div
class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_secondary"
role="button"
tabindex="0"
>
Reject
</div>
</div>
`;

View File

@@ -10,22 +10,22 @@ exports[`<Notifications /> main notification switches renders only enable notifi
class="mx_SettingsFlag_label"
>
<div
id="mx_LabelledToggleSwitch_testid_0"
id="mx_LabelledToggleSwitch_:r0:"
>
Enable notifications for this account
</div>
<span
class="mx_Caption"
id="mx_LabelledToggleSwitch_testid_0_caption"
id="mx_LabelledToggleSwitch_:r0:_caption"
>
Turn off to disable notifications on all your devices and sessions
</span>
</span>
<div
aria-checked="false"
aria-describedby="mx_LabelledToggleSwitch_testid_0_caption"
aria-describedby="mx_LabelledToggleSwitch_:r0:_caption"
aria-disabled="false"
aria-labelledby="mx_LabelledToggleSwitch_testid_0"
aria-labelledby="mx_LabelledToggleSwitch_:r0:"
class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_enabled"
role="switch"
tabindex="0"
@@ -41,7 +41,7 @@ exports[`<Notifications /> main notification switches renders only enable notifi
>
<label
class="mx_SettingsFlag_label"
for="mx_SettingsFlag_testid_1"
for="mx_SettingsFlag_testid_0"
>
<span
class="mx_SettingsFlag_labelText"
@@ -54,7 +54,7 @@ exports[`<Notifications /> main notification switches renders only enable notifi
aria-disabled="false"
aria-label="Show all activity in the room list (dots or number of unread messages)"
class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on mx_ToggleSwitch_enabled"
id="mx_SettingsFlag_testid_1"
id="mx_SettingsFlag_testid_0"
role="switch"
tabindex="0"
>
@@ -68,7 +68,7 @@ exports[`<Notifications /> main notification switches renders only enable notifi
>
<label
class="mx_SettingsFlag_label"
for="mx_SettingsFlag_testid_2"
for="mx_SettingsFlag_testid_1"
>
<span
class="mx_SettingsFlag_labelText"
@@ -81,7 +81,7 @@ exports[`<Notifications /> main notification switches renders only enable notifi
aria-disabled="false"
aria-label="Only show notifications in the thread activity centre"
class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on mx_ToggleSwitch_enabled"
id="mx_SettingsFlag_testid_2"
id="mx_SettingsFlag_testid_1"
role="switch"
tabindex="0"
>

View File

@@ -21,7 +21,7 @@ exports[`<Notifications /> correctly handles the loading/disabled state 1`] = `
class="mx_SettingsFlag_label"
>
<div
id="mx_LabelledToggleSwitch_vY7Q4uEh9K38"
id="mx_LabelledToggleSwitch_:r17:"
>
Enable notifications for this account
</div>
@@ -29,7 +29,7 @@ exports[`<Notifications /> correctly handles the loading/disabled state 1`] = `
<div
aria-checked="true"
aria-disabled="true"
aria-labelledby="mx_LabelledToggleSwitch_vY7Q4uEh9K38"
aria-labelledby="mx_LabelledToggleSwitch_:r17:"
class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on"
role="switch"
tabindex="0"
@@ -46,7 +46,7 @@ exports[`<Notifications /> correctly handles the loading/disabled state 1`] = `
class="mx_SettingsFlag_label"
>
<div
id="mx_LabelledToggleSwitch_QgU2PomxwKpa"
id="mx_LabelledToggleSwitch_:r18:"
>
Enable desktop notifications for this session
</div>
@@ -54,7 +54,7 @@ exports[`<Notifications /> correctly handles the loading/disabled state 1`] = `
<div
aria-checked="false"
aria-disabled="false"
aria-labelledby="mx_LabelledToggleSwitch_QgU2PomxwKpa"
aria-labelledby="mx_LabelledToggleSwitch_:r18:"
class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_enabled"
role="switch"
tabindex="0"
@@ -71,7 +71,7 @@ exports[`<Notifications /> correctly handles the loading/disabled state 1`] = `
class="mx_SettingsFlag_label"
>
<div
id="mx_LabelledToggleSwitch_6hpi3YEetmBG"
id="mx_LabelledToggleSwitch_:r19:"
>
Show message preview in desktop notification
</div>
@@ -79,7 +79,7 @@ exports[`<Notifications /> correctly handles the loading/disabled state 1`] = `
<div
aria-checked="false"
aria-disabled="false"
aria-labelledby="mx_LabelledToggleSwitch_6hpi3YEetmBG"
aria-labelledby="mx_LabelledToggleSwitch_:r19:"
class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_enabled"
role="switch"
tabindex="0"
@@ -96,7 +96,7 @@ exports[`<Notifications /> correctly handles the loading/disabled state 1`] = `
class="mx_SettingsFlag_label"
>
<div
id="mx_LabelledToggleSwitch_4yVCeEefiPqp"
id="mx_LabelledToggleSwitch_:r1a:"
>
Enable audible notifications for this session
</div>
@@ -104,7 +104,7 @@ exports[`<Notifications /> correctly handles the loading/disabled state 1`] = `
<div
aria-checked="true"
aria-disabled="false"
aria-labelledby="mx_LabelledToggleSwitch_4yVCeEefiPqp"
aria-labelledby="mx_LabelledToggleSwitch_:r1a:"
class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on mx_ToggleSwitch_enabled"
role="switch"
tabindex="0"
@@ -251,7 +251,7 @@ exports[`<Notifications /> correctly handles the loading/disabled state 1`] = `
checked=""
class="_input_1hel1_18"
disabled=""
id="checkbox_MRMwbPDmfG"
id="checkbox_vY7Q4uEh9K"
type="checkbox"
/>
<div
@@ -277,7 +277,7 @@ exports[`<Notifications /> correctly handles the loading/disabled state 1`] = `
>
<label
class="_label_19upo_59"
for="checkbox_MRMwbPDmfG"
for="checkbox_vY7Q4uEh9K"
>
<span
class="mx_LabelledCheckbox_label"
@@ -308,7 +308,7 @@ exports[`<Notifications /> correctly handles the loading/disabled state 1`] = `
checked=""
class="_input_1hel1_18"
disabled=""
id="checkbox_tmGQvdMWe9"
id="checkbox_38QgU2Pomx"
type="checkbox"
/>
<div
@@ -334,7 +334,7 @@ exports[`<Notifications /> correctly handles the loading/disabled state 1`] = `
>
<label
class="_label_19upo_59"
for="checkbox_tmGQvdMWe9"
for="checkbox_38QgU2Pomx"
>
<span
class="mx_LabelledCheckbox_label"
@@ -365,7 +365,7 @@ exports[`<Notifications /> correctly handles the loading/disabled state 1`] = `
checked=""
class="_input_1hel1_18"
disabled=""
id="checkbox_54DVIAu5Cs"
id="checkbox_wKpa6hpi3Y"
type="checkbox"
/>
<div
@@ -391,7 +391,7 @@ exports[`<Notifications /> correctly handles the loading/disabled state 1`] = `
>
<label
class="_label_19upo_59"
for="checkbox_54DVIAu5Cs"
for="checkbox_wKpa6hpi3Y"
>
<span
class="mx_LabelledCheckbox_label"
@@ -439,7 +439,7 @@ exports[`<Notifications /> correctly handles the loading/disabled state 1`] = `
checked=""
class="_input_1hel1_18"
disabled=""
id="checkbox_iHRD7nyrA2"
id="checkbox_EetmBG4yVC"
type="checkbox"
/>
<div
@@ -465,7 +465,7 @@ exports[`<Notifications /> correctly handles the loading/disabled state 1`] = `
>
<label
class="_label_19upo_59"
for="checkbox_iHRD7nyrA2"
for="checkbox_EetmBG4yVC"
>
<span
class="mx_LabelledCheckbox_label"
@@ -495,7 +495,7 @@ exports[`<Notifications /> correctly handles the loading/disabled state 1`] = `
<input
class="_input_1hel1_18"
disabled=""
id="checkbox_ohjWVJIPau"
id="checkbox_eEefiPqpMR"
type="checkbox"
/>
<div
@@ -521,7 +521,7 @@ exports[`<Notifications /> correctly handles the loading/disabled state 1`] = `
>
<label
class="_label_19upo_59"
for="checkbox_ohjWVJIPau"
for="checkbox_eEefiPqpMR"
>
<span
class="mx_LabelledCheckbox_label"
@@ -552,7 +552,7 @@ exports[`<Notifications /> correctly handles the loading/disabled state 1`] = `
checked=""
class="_input_1hel1_18"
disabled=""
id="checkbox_y1OmnTidX4"
id="checkbox_MwbPDmfGtm"
type="checkbox"
/>
<div
@@ -578,7 +578,7 @@ exports[`<Notifications /> correctly handles the loading/disabled state 1`] = `
>
<label
class="_label_19upo_59"
for="checkbox_y1OmnTidX4"
for="checkbox_MwbPDmfGtm"
>
<span
class="mx_LabelledCheckbox_label"
@@ -647,7 +647,7 @@ exports[`<Notifications /> correctly handles the loading/disabled state 1`] = `
checked=""
class="_input_1hel1_18"
disabled=""
id="checkbox_ePDS0OpWwA"
id="checkbox_GQvdMWe954"
type="checkbox"
/>
<div
@@ -673,7 +673,7 @@ exports[`<Notifications /> correctly handles the loading/disabled state 1`] = `
>
<label
class="_label_19upo_59"
for="checkbox_ePDS0OpWwA"
for="checkbox_GQvdMWe954"
>
<span
class="mx_LabelledCheckbox_label"
@@ -704,7 +704,7 @@ exports[`<Notifications /> correctly handles the loading/disabled state 1`] = `
checked=""
class="_input_1hel1_18"
disabled=""
id="checkbox_HG75JNTNkN"
id="checkbox_DVIAu5CsiH"
type="checkbox"
/>
<div
@@ -730,7 +730,7 @@ exports[`<Notifications /> correctly handles the loading/disabled state 1`] = `
>
<label
class="_label_19upo_59"
for="checkbox_HG75JNTNkN"
for="checkbox_DVIAu5CsiH"
>
<span
class="mx_LabelledCheckbox_label"
@@ -758,11 +758,11 @@ exports[`<Notifications /> correctly handles the loading/disabled state 1`] = `
class="_container_1hel1_10"
>
<input
aria-describedby=":r1s:"
aria-describedby=":r24:"
checked=""
class="_input_1hel1_18"
disabled=""
id="checkbox_U64raTLcRs"
id="checkbox_RD7nyrA2oh"
type="checkbox"
/>
<div
@@ -788,7 +788,7 @@ exports[`<Notifications /> correctly handles the loading/disabled state 1`] = `
>
<label
class="_label_19upo_59"
for="checkbox_U64raTLcRs"
for="checkbox_RD7nyrA2oh"
>
<span
class="mx_LabelledCheckbox_label"
@@ -798,7 +798,7 @@ exports[`<Notifications /> correctly handles the loading/disabled state 1`] = `
</label>
<span
class="_message_19upo_85 _help-message_19upo_91"
id=":r1s:"
id=":r24:"
>
Enter keywords here, or use for spelling variations or nicknames
</span>
@@ -850,7 +850,7 @@ exports[`<Notifications /> correctly handles the loading/disabled state 1`] = `
>
<label
class="mx_SettingsFlag_label"
for="mx_SettingsFlag_QRlYy75nfv5b"
for="mx_SettingsFlag_jWVJIPauy1Om"
>
<span
class="mx_SettingsFlag_labelText"
@@ -863,7 +863,7 @@ exports[`<Notifications /> correctly handles the loading/disabled state 1`] = `
aria-disabled="false"
aria-label="Show all activity in the room list (dots or number of unread messages)"
class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on mx_ToggleSwitch_enabled"
id="mx_SettingsFlag_QRlYy75nfv5b"
id="mx_SettingsFlag_jWVJIPauy1Om"
role="switch"
tabindex="0"
>
@@ -877,7 +877,7 @@ exports[`<Notifications /> correctly handles the loading/disabled state 1`] = `
>
<label
class="mx_SettingsFlag_label"
for="mx_SettingsFlag_OEPN1su1JYVt"
for="mx_SettingsFlag_nTidX4ePDS0O"
>
<span
class="mx_SettingsFlag_labelText"
@@ -890,7 +890,7 @@ exports[`<Notifications /> correctly handles the loading/disabled state 1`] = `
aria-disabled="false"
aria-label="Only show notifications in the thread activity centre"
class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on mx_ToggleSwitch_enabled"
id="mx_SettingsFlag_OEPN1su1JYVt"
id="mx_SettingsFlag_nTidX4ePDS0O"
role="switch"
tabindex="0"
>
@@ -998,7 +998,7 @@ exports[`<Notifications /> matches the snapshot 1`] = `
class="mx_SettingsFlag_label"
>
<div
id="mx_LabelledToggleSwitch_vY7Q4uEh9K38"
id="mx_LabelledToggleSwitch_:r0:"
>
Enable notifications for this account
</div>
@@ -1006,7 +1006,7 @@ exports[`<Notifications /> matches the snapshot 1`] = `
<div
aria-checked="true"
aria-disabled="false"
aria-labelledby="mx_LabelledToggleSwitch_vY7Q4uEh9K38"
aria-labelledby="mx_LabelledToggleSwitch_:r0:"
class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on mx_ToggleSwitch_enabled"
role="switch"
tabindex="0"
@@ -1023,7 +1023,7 @@ exports[`<Notifications /> matches the snapshot 1`] = `
class="mx_SettingsFlag_label"
>
<div
id="mx_LabelledToggleSwitch_QgU2PomxwKpa"
id="mx_LabelledToggleSwitch_:r1:"
>
Enable desktop notifications for this session
</div>
@@ -1031,7 +1031,7 @@ exports[`<Notifications /> matches the snapshot 1`] = `
<div
aria-checked="false"
aria-disabled="false"
aria-labelledby="mx_LabelledToggleSwitch_QgU2PomxwKpa"
aria-labelledby="mx_LabelledToggleSwitch_:r1:"
class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_enabled"
role="switch"
tabindex="0"
@@ -1048,7 +1048,7 @@ exports[`<Notifications /> matches the snapshot 1`] = `
class="mx_SettingsFlag_label"
>
<div
id="mx_LabelledToggleSwitch_6hpi3YEetmBG"
id="mx_LabelledToggleSwitch_:r2:"
>
Show message preview in desktop notification
</div>
@@ -1056,7 +1056,7 @@ exports[`<Notifications /> matches the snapshot 1`] = `
<div
aria-checked="false"
aria-disabled="false"
aria-labelledby="mx_LabelledToggleSwitch_6hpi3YEetmBG"
aria-labelledby="mx_LabelledToggleSwitch_:r2:"
class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_enabled"
role="switch"
tabindex="0"
@@ -1073,7 +1073,7 @@ exports[`<Notifications /> matches the snapshot 1`] = `
class="mx_SettingsFlag_label"
>
<div
id="mx_LabelledToggleSwitch_4yVCeEefiPqp"
id="mx_LabelledToggleSwitch_:r3:"
>
Enable audible notifications for this session
</div>
@@ -1081,7 +1081,7 @@ exports[`<Notifications /> matches the snapshot 1`] = `
<div
aria-checked="true"
aria-disabled="false"
aria-labelledby="mx_LabelledToggleSwitch_4yVCeEefiPqp"
aria-labelledby="mx_LabelledToggleSwitch_:r3:"
class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on mx_ToggleSwitch_enabled"
role="switch"
tabindex="0"
@@ -1224,7 +1224,7 @@ exports[`<Notifications /> matches the snapshot 1`] = `
<input
checked=""
class="_input_1hel1_18"
id="checkbox_OyR5kbu3pE"
id="checkbox_pWwAHG75JN"
type="checkbox"
/>
<div
@@ -1250,7 +1250,7 @@ exports[`<Notifications /> matches the snapshot 1`] = `
>
<label
class="_label_19upo_59"
for="checkbox_OyR5kbu3pE"
for="checkbox_pWwAHG75JN"
>
<span
class="mx_LabelledCheckbox_label"
@@ -1280,7 +1280,7 @@ exports[`<Notifications /> matches the snapshot 1`] = `
<input
checked=""
class="_input_1hel1_18"
id="checkbox_wuLn9EnnYu"
id="checkbox_TNkNU64raT"
type="checkbox"
/>
<div
@@ -1306,7 +1306,7 @@ exports[`<Notifications /> matches the snapshot 1`] = `
>
<label
class="_label_19upo_59"
for="checkbox_wuLn9EnnYu"
for="checkbox_TNkNU64raT"
>
<span
class="mx_LabelledCheckbox_label"
@@ -1336,7 +1336,7 @@ exports[`<Notifications /> matches the snapshot 1`] = `
<input
checked=""
class="_input_1hel1_18"
id="checkbox_xfFEpOsztW"
id="checkbox_LcRsQRlYy7"
type="checkbox"
/>
<div
@@ -1362,7 +1362,7 @@ exports[`<Notifications /> matches the snapshot 1`] = `
>
<label
class="_label_19upo_59"
for="checkbox_xfFEpOsztW"
for="checkbox_LcRsQRlYy7"
>
<span
class="mx_LabelledCheckbox_label"
@@ -1409,7 +1409,7 @@ exports[`<Notifications /> matches the snapshot 1`] = `
<input
checked=""
class="_input_1hel1_18"
id="checkbox_hQkBerF1ej"
id="checkbox_5nfv5bOEPN"
type="checkbox"
/>
<div
@@ -1435,7 +1435,7 @@ exports[`<Notifications /> matches the snapshot 1`] = `
>
<label
class="_label_19upo_59"
for="checkbox_hQkBerF1ej"
for="checkbox_5nfv5bOEPN"
>
<span
class="mx_LabelledCheckbox_label"
@@ -1464,7 +1464,7 @@ exports[`<Notifications /> matches the snapshot 1`] = `
>
<input
class="_input_1hel1_18"
id="checkbox_c4GFes1UFz"
id="checkbox_1su1JYVtOy"
type="checkbox"
/>
<div
@@ -1490,7 +1490,7 @@ exports[`<Notifications /> matches the snapshot 1`] = `
>
<label
class="_label_19upo_59"
for="checkbox_c4GFes1UFz"
for="checkbox_1su1JYVtOy"
>
<span
class="mx_LabelledCheckbox_label"
@@ -1520,7 +1520,7 @@ exports[`<Notifications /> matches the snapshot 1`] = `
<input
checked=""
class="_input_1hel1_18"
id="checkbox_OK2nvfGFMl"
id="checkbox_R5kbu3pEwu"
type="checkbox"
/>
<div
@@ -1546,7 +1546,7 @@ exports[`<Notifications /> matches the snapshot 1`] = `
>
<label
class="_label_19upo_59"
for="checkbox_OK2nvfGFMl"
for="checkbox_R5kbu3pEwu"
>
<span
class="mx_LabelledCheckbox_label"
@@ -1614,7 +1614,7 @@ exports[`<Notifications /> matches the snapshot 1`] = `
<input
checked=""
class="_input_1hel1_18"
id="checkbox_dL2r2vbsSw"
id="checkbox_Ln9EnnYuxf"
type="checkbox"
/>
<div
@@ -1640,7 +1640,7 @@ exports[`<Notifications /> matches the snapshot 1`] = `
>
<label
class="_label_19upo_59"
for="checkbox_dL2r2vbsSw"
for="checkbox_Ln9EnnYuxf"
>
<span
class="mx_LabelledCheckbox_label"
@@ -1670,7 +1670,7 @@ exports[`<Notifications /> matches the snapshot 1`] = `
<input
checked=""
class="_input_1hel1_18"
id="checkbox_icmKUiOBdv"
id="checkbox_FEpOsztWhQ"
type="checkbox"
/>
<div
@@ -1696,7 +1696,7 @@ exports[`<Notifications /> matches the snapshot 1`] = `
>
<label
class="_label_19upo_59"
for="checkbox_icmKUiOBdv"
for="checkbox_FEpOsztWhQ"
>
<span
class="mx_LabelledCheckbox_label"
@@ -1724,10 +1724,10 @@ exports[`<Notifications /> matches the snapshot 1`] = `
class="_container_1hel1_10"
>
<input
aria-describedby=":rp:"
aria-describedby=":rt:"
checked=""
class="_input_1hel1_18"
id="checkbox_qsxEaZtl3A"
id="checkbox_kBerF1ejc4"
type="checkbox"
/>
<div
@@ -1753,7 +1753,7 @@ exports[`<Notifications /> matches the snapshot 1`] = `
>
<label
class="_label_19upo_59"
for="checkbox_qsxEaZtl3A"
for="checkbox_kBerF1ejc4"
>
<span
class="mx_LabelledCheckbox_label"
@@ -1763,7 +1763,7 @@ exports[`<Notifications /> matches the snapshot 1`] = `
</label>
<span
class="_message_19upo_85 _help-message_19upo_91"
id=":rp:"
id=":rt:"
>
Enter keywords here, or use for spelling variations or nicknames
</span>
@@ -2029,7 +2029,7 @@ exports[`<Notifications /> matches the snapshot 1`] = `
>
<label
class="mx_SettingsFlag_label"
for="mx_SettingsFlag_QRlYy75nfv5b"
for="mx_SettingsFlag_jWVJIPauy1Om"
>
<span
class="mx_SettingsFlag_labelText"
@@ -2042,7 +2042,7 @@ exports[`<Notifications /> matches the snapshot 1`] = `
aria-disabled="false"
aria-label="Show all activity in the room list (dots or number of unread messages)"
class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on mx_ToggleSwitch_enabled"
id="mx_SettingsFlag_QRlYy75nfv5b"
id="mx_SettingsFlag_jWVJIPauy1Om"
role="switch"
tabindex="0"
>
@@ -2056,7 +2056,7 @@ exports[`<Notifications /> matches the snapshot 1`] = `
>
<label
class="mx_SettingsFlag_label"
for="mx_SettingsFlag_OEPN1su1JYVt"
for="mx_SettingsFlag_nTidX4ePDS0O"
>
<span
class="mx_SettingsFlag_labelText"
@@ -2069,7 +2069,7 @@ exports[`<Notifications /> matches the snapshot 1`] = `
aria-disabled="false"
aria-label="Only show notifications in the thread activity centre"
class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on mx_ToggleSwitch_enabled"
id="mx_SettingsFlag_OEPN1su1JYVt"
id="mx_SettingsFlag_nTidX4ePDS0O"
role="switch"
tabindex="0"
>
@@ -2139,7 +2139,7 @@ exports[`<Notifications /> matches the snapshot 1`] = `
>
<input
class="_input_1hel1_18"
id="checkbox_NIiWzqsApP"
id="checkbox_GFes1UFzOK"
type="checkbox"
/>
<div
@@ -2165,7 +2165,7 @@ exports[`<Notifications /> matches the snapshot 1`] = `
>
<label
class="_label_19upo_59"
for="checkbox_NIiWzqsApP"
for="checkbox_GFes1UFzOK"
>
<span
class="mx_LabelledCheckbox_label"

View File

@@ -6,7 +6,8 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
Please see LICENSE files in the repository root for full details.
*/
import { render } from "jest-matrix-react";
import React from "react";
import React, { act } from "react";
import userEvent from "@testing-library/user-event";
import SecurityUserSettingsTab from "../../../../../../../src/components/views/settings/tabs/user/SecurityUserSettingsTab";
import MatrixClientContext from "../../../../../../../src/contexts/MatrixClientContext";
@@ -19,12 +20,16 @@ import {
mockPlatformPeg,
} from "../../../../../../test-utils";
import { SDKContext, SdkContextClass } from "../../../../../../../src/contexts/SDKContext";
import defaultDispatcher from "../../../../../../../src/dispatcher/dispatcher";
describe("<SecurityUserSettingsTab />", () => {
const defaultProps = {
closeSettingsFn: jest.fn(),
};
const getIgnoredUsers = jest.fn();
const setIgnoredUsers = jest.fn();
const userId = "@alice:server.org";
const deviceId = "alices-device";
const mockClient = getMockClientWithEventEmitter({
@@ -33,7 +38,9 @@ describe("<SecurityUserSettingsTab />", () => {
...mockClientMethodsDevice(deviceId),
...mockClientMethodsCrypto(),
getRooms: jest.fn().mockReturnValue([]),
getIgnoredUsers: jest.fn(),
getPushers: jest.fn().mockReturnValue([]),
getIgnoredUsers,
setIgnoredUsers,
});
const sdkContext = new SdkContextClass();
@@ -57,4 +64,29 @@ describe("<SecurityUserSettingsTab />", () => {
expect(container).toMatchSnapshot();
});
it("renders ignored users", () => {
getIgnoredUsers.mockReturnValue(["@bob:example.org"]);
const { getByRole } = render(getComponent());
const ignoredUsers = getByRole("list", { name: "Ignored users" });
expect(ignoredUsers).toMatchSnapshot();
});
it("allows unignoring a user", async () => {
getIgnoredUsers.mockReturnValue(["@bob:example.org"]);
const { getByText, getByRole } = render(getComponent());
await userEvent.click(getByRole("button", { name: "Unignore" }));
expect(setIgnoredUsers).toHaveBeenCalledWith([]);
await act(() => {
getIgnoredUsers.mockReturnValue([]);
defaultDispatcher.dispatch(
{
action: "ignore_state_changed",
},
true,
);
});
expect(getByText("You have no ignored users.")).toBeVisible();
});
});

View File

@@ -1,5 +1,31 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`<SecurityUserSettingsTab /> renders ignored users 1`] = `
<ul
aria-label="Ignored users"
class="mx_SecurityUserSettingsTab_ignoredUsers"
>
<li
aria-label="@bob:example.org"
class="mx_SecurityUserSettingsTab_ignoredUser"
>
<div
aria-describedby="mx_SecurityUserSettingsTab_ignoredUser_@bob:example.org"
class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary_sm"
role="button"
tabindex="0"
>
Unignore
</div>
<span
id="mx_SecurityUserSettingsTab_ignoredUser_@bob:example.org"
>
@bob:example.org
</span>
</li>
</ul>
`;
exports[`<SecurityUserSettingsTab /> renders security section 1`] = `
<div>
<div

View File

@@ -4,7 +4,7 @@ exports[`<SpaceSettingsVisibilityTab /> for a public space Access renders guest
<div
aria-checked="true"
aria-disabled="false"
aria-labelledby="mx_LabelledToggleSwitch_testid_1"
aria-labelledby="mx_LabelledToggleSwitch_:rb:"
class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on mx_ToggleSwitch_enabled"
role="switch"
tabindex="0"
@@ -122,7 +122,7 @@ exports[`<SpaceSettingsVisibilityTab /> renders container 1`] = `
class="mx_SettingsFlag_label"
>
<div
id="mx_LabelledToggleSwitch_testid_0"
id="mx_LabelledToggleSwitch_:r0:"
>
Preview Space
</div>
@@ -130,7 +130,7 @@ exports[`<SpaceSettingsVisibilityTab /> renders container 1`] = `
<div
aria-checked="true"
aria-disabled="false"
aria-labelledby="mx_LabelledToggleSwitch_testid_0"
aria-labelledby="mx_LabelledToggleSwitch_:r0:"
class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on mx_ToggleSwitch_enabled"
role="switch"
tabindex="0"