nikrozman/element-web
1
0
Fork 0
Code Issues Actions 3 Packages Projects Releases Wiki Activity

Update report room dialog to match designs (#29669)

Browse Source 
* Rework for designs

* Update report room position

* lint

* Improve test coverage
This commit is contained in:
Will Hunt
2025-04-03 14:25:19 +01:00
committed by GitHub
parent 1f9db9fa1a
commit cb657d6848
11 changed files with 280 additions and 186 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
test/unit-tests/components/views/dialogs/ReportRoomDialog-test.tsx
View File

@@ -14,6 +14,7 @@ import SdkConfig from "../../../../../src/SdkConfig";
import { stubClient } from "../../../../test-utils";
const ROOM_ID = "!foo:bar";
const REASON = "This room is bad!";
describe("ReportRoomDialog", () => {
const onFinished: jest.Mock<any, any> = jest.fn();
@@ -48,19 +49,24 @@ This doesn't actually go **anywhere**.`,
expect(container).toMatchSnapshot();
});
it("can submit a report", async () => {
const REASON = "This room is bad!";
const { getByLabelText, getByText, getByRole } = render(
<ReportRoomDialog roomId={ROOM_ID} onFinished={onFinished} />,
);
it("can submit a report without leaving the room", async () => {
const { getByLabelText, getByRole } = render(<ReportRoomDialog roomId={ROOM_ID} onFinished={onFinished} />);
await userEvent.type(getByLabelText("Reason"), REASON);
await userEvent.type(getByLabelText("Describe the reason"), REASON);
await userEvent.click(getByRole("button", { name: "Send report" }));
expect(reportRoom).toHaveBeenCalledWith(ROOM_ID, REASON);
expect(getByText("Your report was sent.")).toBeInTheDocument();
expect(onFinished).toHaveBeenCalledWith(false);
});
await userEvent.click(getByRole("button", { name: "Close dialog" }));
it("can submit a report and leave the room", async () => {
const { getByLabelText, getByRole } = render(<ReportRoomDialog roomId={ROOM_ID} onFinished={onFinished} />);
await userEvent.type(getByLabelText("Describe the reason"), REASON);
await userEvent.click(getByRole("switch", { name: "Leave room" }));
await userEvent.click(getByRole("button", { name: "Send report" }));
expect(reportRoom).toHaveBeenCalledWith(ROOM_ID, REASON);
expect(onFinished).toHaveBeenCalledWith(true);
});
});

60
test/unit-tests/components/views/dialogs/__snapshots__/ReportRoomDialog-test.tsx.snap
View File

@@ -21,16 +21,33 @@ exports[`ReportRoomDialog displays admin message 1`] = `
class="mx_Heading_h3 mx_Dialog_title"
id="mx_BaseDialog_title"
>
Report Room
Report room
</h1>
</div>
<form
class="_root_19upo_16"
id="mx_ReportEventDialog"
>
<p>
Report this room to your homeserver admin. This will send the room's unique ID, but if messages are encrypted, the administrator won't be able to read them or view shared files.
</p>
<div
class="_field_19upo_26"
>
<label
class="_label_19upo_59"
for="mx_ReportRoomDialog_reason"
>
Describe the reason
</label>
<textarea
id="mx_ReportRoomDialog_reason"
rows="5"
/>
<span
class="_message_19upo_85 _help-message_19upo_91"
id="radix-:r7:"
>
Report this room to your account provider. If the messages are encrypted, your admin will not be able to read them.
</span>
</div>
<p>
<h1>
You should know
@@ -48,19 +65,29 @@ exports[`ReportRoomDialog displays admin message 1`] = `
</p>
<div
class="_field_19upo_26"
class="mx_SettingsFlag"
>
<label
class="_label_19upo_59"
for="mx_ReportRoomDialog_reason"
<span
class="mx_SettingsFlag_label"
>
Reason
</label>
<textarea
id="mx_ReportRoomDialog_reason"
placeholder=" Reason for reporting..."
rows="5"
/>
<div
id="mx_LabelledToggleSwitch_undefined"
>
Leave room
</div>
</span>
<div
aria-checked="false"
aria-disabled="false"
aria-labelledby="mx_LabelledToggleSwitch_undefined"
class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_enabled"
role="switch"
tabindex="0"
>
<div
class="mx_ToggleSwitch_ball"
/>
</div>
</div>
<div
class="mx_Dialog_buttons"
@@ -75,8 +102,9 @@ exports[`ReportRoomDialog displays admin message 1`] = `
Cancel
</button>
<button
class="mx_Dialog_primary"
class="mx_Dialog_primary danger"
data-testid="dialog-primary-button"
disabled=""
type="button"
>
Send report