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
GitHub
@@ -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, "");
|
||||
});
|
||||
});
|
||||
@@ -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>
|
||||
`;
|
||||
@@ -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"
|
||||
|
||||
Reference in New Issue
Block a user