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

Update settings toggles to use consistent design across app. (#30169)

Browse Source 
* Use EditInPlace for identity server picker.

* Update test

* Add a test for setting an ID server.

* fix tests

* Reformat other :not sections

* forgot a comma

* Update Apperance settings to use toggle switches.

* Remove unused checkbox setting.

* Remove unused import.

* Update tests

* lint

* update apperance screenshot

* Begin replacing settings

* Refactor RoomPublishSetting

* Remove LabelledToggleSwitch

* Refactor SettingsFlag to use SettingsToggleInput

* Refactor CreateRoomDialog to use SettingsToggleInput

* Refactor DeclineAndBlockInviteDialog to use SettingsToggleInput

* Update DevtoolsDialog

* Refactor ReportRoomDialog to use SettingsToggle

* Update RoomUpgradeWarningDialog to use SettingsToggleInput

* Update WidgetCapabilitiesPromptDialog to use SettingsToggleInput

* Update trivial switchovers

* Update Notifications settings to use SettingsFlag where possible

* Update RoomPublishSetting and SpaceSettingVisibilityTab to use SettingsToggleInput with a warning

* revert changes to field

* Updated screenshots

* Prevent accidental submits

* Replace test ID tests

* Create new snapshot tests

* Add screenshot test for DeclineAndBlockDialog

* Add screenshot for create room dialog.

* Add devtools test

* Add upgrade rooms test

* Add widget capabilites prompt test

* Fix spec

* Add a test for the live location sharing prompt.

* fix copyright

* Add tests for notification settings

* Add tests for user security tab.

* Add test for room security tab.

* Add test for video settings tab.

* remove .only

* Test creating a video room

* Mask the IM name in the header.

* Add spaces vis tab test.

* Fixup unit tests to check correct attributes.

* Various fixes to components for tests.

* lint

* Update compound

* update setting names

* Cleanup tests

prettier

Updates some more playwright tests

Update more snapshots

Update switch

more fixes

drop .only

last screenshot round

fix video room flake

Remove console.logs

Remove roomId from devtools view.

lint

final screenshot

* Add playwright tests

* import pages/ remove duplicate create-room

* Update screenshots

* Fix accessibility for devtools

* Disable region test

* Fixup headers

* remove extra test

* Fix permissions dialog

* fixup tests

* update snapshot

* Update jest tests

* Clear up playwright tests

* update widget screenshot

* Fix wrong snaps from using wrong compound version

* Revert mistaken s/checkbox/switch/

* lint lint

* Update headings

* fix snap

* remove unused

* update snapshot

* update tab screenshot

* Update snapshots

* Fix margins

* Iterate

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Iterate

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Iterate

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Delint

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Iterate

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Iterate

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Iterate

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Iterate

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Update snapshot

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Update snapshot

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

---------

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
Co-authored-by: Michael Telatynski <7t3chguy@gmail.com>
This commit is contained in:
Will Hunt
2025-12-04 15:46:21 +00:00
committed by GitHub
parent f84e2815d0
commit a2f5c49438
93 changed files with 5491 additions and 4726 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
test/unit-tests/components/views/dialogs/CreateRoomDialog-test.tsx
View File

@@ -19,9 +19,6 @@ describe("<CreateRoomDialog />", () => {
const userId = "@alice:server.org";
const getE2eeEnableToggleInputElement = () => screen.getByLabelText("Enable end-to-end encryption");
// labelled toggle switch doesn't set the disabled attribute, only aria-disabled
const getE2eeEnableToggleIsDisabled = () =>
getE2eeEnableToggleInputElement().getAttribute("aria-disabled") === "true";
let mockClient: ReturnType<typeof getMockClientWithEventEmitter>;
beforeEach(() => {
@@ -121,7 +118,7 @@ describe("<CreateRoomDialog />", () => {
await flushPromises();
expect(getE2eeEnableToggleInputElement()).not.toBeChecked();
expect(getE2eeEnableToggleIsDisabled()).toBeFalsy();
expect(getE2eeEnableToggleInputElement()).not.toBeDisabled();
expect(
screen.getByText(
"Your server admin has disabled end-to-end encryption by default in private rooms & Direct Messages.",
@@ -141,7 +138,7 @@ describe("<CreateRoomDialog />", () => {
await flushPromises();
expect(getE2eeEnableToggleInputElement()).not.toBeChecked();
expect(getE2eeEnableToggleIsDisabled()).toBeTruthy();
expect(getE2eeEnableToggleInputElement()).toBeDisabled();
expect(
screen.getByText(
"Your server admin has disabled end-to-end encryption by default in private rooms & Direct Messages.",
@@ -161,7 +158,7 @@ describe("<CreateRoomDialog />", () => {
await flushPromises();
// encryption enabled
expect(getE2eeEnableToggleInputElement()).toBeChecked();
expect(getE2eeEnableToggleIsDisabled()).toBeFalsy();
expect(getE2eeEnableToggleInputElement()).not.toBeDisabled();
});
it("should use defaultEncrypted prop when it is false", async () => {
@@ -177,7 +174,7 @@ describe("<CreateRoomDialog />", () => {
// encryption disabled
expect(getE2eeEnableToggleInputElement()).not.toBeChecked();
// not forced to off
expect(getE2eeEnableToggleIsDisabled()).toBeFalsy();
expect(getE2eeEnableToggleInputElement()).not.toBeDisabled();
});
it("should override defaultEncrypted when server .well-known forces disabled encryption", async () => {
@@ -192,7 +189,7 @@ describe("<CreateRoomDialog />", () => {
// server forces encryption to disabled, even though defaultEncrypted is false
expect(getE2eeEnableToggleInputElement()).not.toBeChecked();
expect(getE2eeEnableToggleIsDisabled()).toBeTruthy();
expect(getE2eeEnableToggleInputElement()).toBeDisabled();
expect(
screen.getByText(
"Your server admin has disabled end-to-end encryption by default in private rooms & Direct Messages.",
@@ -207,7 +204,7 @@ describe("<CreateRoomDialog />", () => {
// server forces encryption to enabled, even though defaultEncrypted is true
expect(getE2eeEnableToggleInputElement()).toBeChecked();
expect(getE2eeEnableToggleIsDisabled()).toBeTruthy();
expect(getE2eeEnableToggleInputElement()).toBeDisabled();
expect(screen.getByText("Your server requires encryption to be enabled in private rooms.")).toBeDefined();
});
@@ -217,7 +214,7 @@ describe("<CreateRoomDialog />", () => {
await flushPromises();
expect(getE2eeEnableToggleInputElement()).toBeChecked();
expect(getE2eeEnableToggleIsDisabled()).toBeTruthy();
expect(getE2eeEnableToggleInputElement()).toBeDisabled();
expect(screen.getByText("Your server requires encryption to be enabled in private rooms.")).toBeDefined();
});
@@ -319,7 +316,7 @@ describe("<CreateRoomDialog />", () => {
it("should create a knock room with public visibility", async () => {
fireEvent.click(
screen.getByRole("checkbox", { name: "Make this room visible in the public room directory." }),
screen.getByRole("switch", { name: "Make this room visible in the public room directory." }),
);
fireEvent.click(screen.getByText("Create room"));
await flushPromises();

37
test/unit-tests/components/views/dialogs/WidgetOpenIDPermissionsDialog-test.tsx Normal file
View File

@@ -0,0 +1,37 @@
/*
Copyright 2025 Element Creations 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 React from "react";
import { render } from "jest-matrix-react";
import { WidgetKind } from "matrix-widget-api";
import { stubClient } from "../../../../test-utils";
import WidgetOpenIDPermissionsDialog from "../../../../../src/components/views/dialogs/WidgetOpenIDPermissionsDialog.tsx";
describe("WidgetOpenIDPermissionsDialog", () => {
const mockWidget = {
id: "test-widget",
name: "Test Widget",
templateUrl: "https://imawidget",
} as any;
const onFinished = jest.fn();
beforeEach(() => {
stubClient();
onFinished.mockClear();
});
it("should render", () => {
const dialog = render(
<WidgetOpenIDPermissionsDialog widget={mockWidget} widgetKind={WidgetKind.Room} onFinished={onFinished} />,
);
expect(dialog.getByText("Allow this widget to verify your identity")).toBeInTheDocument();
expect(dialog.asFragment()).toMatchSnapshot();
});
});

90
test/unit-tests/components/views/dialogs/__snapshots__/ConfirmRejectInviteDialog-test.tsx.snap
View File

@@ -32,67 +32,77 @@ exports[`ConfirmRejectInviteDialog can reject with options selected 1`] = `
Are you sure you want to decline the invitation to join "foo"?
</p>
<div
class="mx_SettingsFlag"
class="_inline-field_19upo_32"
>
<span
class="mx_SettingsFlag_label"
<div
class="_inline-field-control_19upo_44"
>
<div
id="mx_LabelledToggleSwitch__r_7_"
class="_container_udcm8_10"
>
<input
class="_input_udcm8_24"
id="_r_b_"
role="switch"
type="checkbox"
/>
<div
class="_ui_udcm8_34"
/>
</div>
</div>
<div
class="_inline-field-body_19upo_38"
>
<label
class="_label_19upo_59"
for="_r_b_"
>
Ignore user
</div>
</label>
<span
class="mx_Caption"
id="mx_LabelledToggleSwitch__r_7__caption"
class="_message_19upo_85 _help-message_19upo_91"
id="radix-_r_d_"
>
You will not see any messages or room invites from this user.
</span>
</span>
<div
aria-checked="true"
aria-describedby="mx_LabelledToggleSwitch__r_7__caption"
aria-disabled="false"
aria-labelledby="mx_LabelledToggleSwitch__r_7_"
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"
class="_inline-field_19upo_32"
>
<span
class="mx_SettingsFlag_label"
<div
class="_inline-field-control_19upo_44"
>
<div
id="mx_LabelledToggleSwitch__r_8_"
class="_container_udcm8_10"
>
<input
class="_input_udcm8_24"
id="_r_e_"
role="switch"
type="checkbox"
/>
<div
class="_ui_udcm8_34"
/>
</div>
</div>
<div
class="_inline-field-body_19upo_38"
>
<label
class="_label_19upo_59"
for="_r_e_"
>
Report room
</div>
</label>
<span
class="mx_Caption"
id="mx_LabelledToggleSwitch__r_8__caption"
class="_message_19upo_85 _help-message_19upo_91"
id="radix-_r_g_"
>
Report this room to your account provider.
</span>
</span>
<div
aria-checked="true"
aria-describedby="mx_LabelledToggleSwitch__r_8__caption"
aria-disabled="false"
aria-labelledby="mx_LabelledToggleSwitch__r_8_"
class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on mx_ToggleSwitch_enabled"
role="switch"
tabindex="0"
>
<div
class="mx_ToggleSwitch_ball"
/>
</div>
</div>
<div

295
test/unit-tests/components/views/dialogs/__snapshots__/CreateRoomDialog-test.tsx.snap
View File

@@ -24,9 +24,11 @@ exports[`<CreateRoomDialog /> for a private room should create a private room 1`
Create a private room
</h1>
</div>
<form>
<div
class="mx_Dialog_content"
<div
class="mx_Dialog_content"
>
<form
class="_root_19upo_16"
>
<div
class="mx_Field mx_Field_input mx_CreateRoomDialog_name"
@@ -60,74 +62,86 @@ exports[`<CreateRoomDialog /> for a private room should create a private room 1`
Topic (optional)
</label>
</div>
<div
class="mx_Dropdown mx_JoinRuleDropdown"
>
<div>
<div
aria-describedby="mx_JoinRuleDropdown_value"
aria-expanded="false"
aria-haspopup="listbox"
aria-label="Room visibility"
aria-owns="mx_JoinRuleDropdown_input"
class="mx_AccessibleButton mx_Dropdown_input mx_no_textinput"
role="button"
tabindex="0"
class="mx_Dropdown mx_JoinRuleDropdown"
>
<div
class="mx_Dropdown_option"
id="mx_JoinRuleDropdown_value"
aria-describedby="mx_JoinRuleDropdown_value"
aria-expanded="false"
aria-haspopup="listbox"
aria-label="Room visibility"
aria-owns="mx_JoinRuleDropdown_input"
class="mx_AccessibleButton mx_Dropdown_input mx_no_textinput"
role="button"
tabindex="0"
>
<div
class="mx_JoinRuleDropdown_invite"
class="mx_Dropdown_option"
id="mx_JoinRuleDropdown_value"
>
Private room (invite only)
<div
class="mx_JoinRuleDropdown_invite"
>
Private room (invite only)
</div>
</div>
<svg
class="mx_Dropdown_arrow"
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M12 14.95q-.2 0-.375-.062a.9.9 0 0 1-.325-.213l-4.6-4.6a.95.95 0 0 1-.275-.7q0-.425.275-.7a.95.95 0 0 1 .7-.275q.425 0 .7.275l3.9 3.9 3.9-3.9a.95.95 0 0 1 .7-.275q.425 0 .7.275a.95.95 0 0 1 .275.7.95.95 0 0 1-.275.7l-4.6 4.6q-.15.15-.325.212a1.1 1.1 0 0 1-.375.063"
/>
</svg>
</div>
<svg
class="mx_Dropdown_arrow"
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M12 14.95q-.2 0-.375-.062a.9.9 0 0 1-.325-.213l-4.6-4.6a.95.95 0 0 1-.275-.7q0-.425.275-.7a.95.95 0 0 1 .7-.275q.425 0 .7.275l3.9 3.9 3.9-3.9a.95.95 0 0 1 .7-.275q.425 0 .7.275a.95.95 0 0 1 .275.7.95.95 0 0 1-.275.7l-4.6 4.6q-.15.15-.325.212a1.1 1.1 0 0 1-.375.063"
/>
</svg>
</div>
<p>
Only people invited will be able to find and join this room. You can change this at any time from room settings.
</p>
</div>
<p>
Only people invited will be able to find and join this room. You can change this at any time from room settings.
</p>
<div
class="mx_SettingsFlag mx_CreateRoomDialog_e2eSwitch"
class="_inline-field_19upo_32"
>
<span
class="mx_SettingsFlag_label"
<div
class="_inline-field-control_19upo_44"
>
<div
id="mx_LabelledToggleSwitch__r_5i_"
class="_container_udcm8_10"
>
<input
checked=""
class="_input_udcm8_24"
id="_r_72_"
role="switch"
type="checkbox"
/>
<div
class="_ui_udcm8_34"
/>
</div>
</div>
<div
class="_inline-field-body_19upo_38"
>
<label
class="_label_19upo_59"
for="_r_72_"
>
Enable end-to-end encryption
</div>
</span>
<div
aria-checked="true"
aria-disabled="false"
aria-labelledby="mx_LabelledToggleSwitch__r_5i_"
class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on mx_ToggleSwitch_enabled"
role="switch"
tabindex="0"
>
<div
class="mx_ToggleSwitch_ball"
/>
</label>
<span
class="_message_19upo_85 _help-message_19upo_91"
id="radix-_r_74_"
>
You can't disable this later. Bridges & most bots won't work yet.
</span>
</div>
</div>
<p>
You can't disable this later. Bridges & most bots won't work yet.
</p>
<details
class="mx_CreateRoomDialog_details"
>
@@ -137,36 +151,49 @@ exports[`<CreateRoomDialog /> for a private room should create a private room 1`
Show advanced
</summary>
<div
class="mx_SettingsFlag"
class="_inline-field_19upo_32"
>
<span
class="mx_SettingsFlag_label"
<div
class="_inline-field-control_19upo_44"
>
<div
id="mx_LabelledToggleSwitch__r_5j_"
class="_container_udcm8_10"
>
<input
class="_input_udcm8_24"
id="_r_75_"
role="switch"
type="checkbox"
/>
<div
class="_ui_udcm8_34"
/>
</div>
</div>
<div
class="_inline-field-body_19upo_38"
>
<label
class="_label_19upo_59"
for="_r_75_"
>
Block anyone not part of server.org from ever joining this room.
</div>
</span>
<div
aria-checked="false"
aria-disabled="false"
aria-labelledby="mx_LabelledToggleSwitch__r_5j_"
class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_enabled"
role="switch"
tabindex="0"
>
<div
class="mx_ToggleSwitch_ball"
/>
</label>
<span
class="_message_19upo_85 _help-message_19upo_91"
id="radix-_r_77_"
>
You might enable this if the room will only be used for collaborating with internal teams on your homeserver. This cannot be changed later.
</span>
</div>
</div>
z
<p>
You might enable this if the room will only be used for collaborating with internal teams on your homeserver. This cannot be changed later.
</p>
</details>
</div>
</form>
</form>
</div>
<div
class="mx_Dialog_buttons"
>
@@ -227,9 +254,11 @@ exports[`<CreateRoomDialog /> for a private room should render not the advanced
Create a private room
</h1>
</div>
<form>
<div
class="mx_Dialog_content"
<div
class="mx_Dialog_content"
>
<form
class="_root_19upo_16"
>
<div
class="mx_Field mx_Field_input mx_CreateRoomDialog_name"
@@ -263,76 +292,88 @@ exports[`<CreateRoomDialog /> for a private room should render not the advanced
Topic (optional)
</label>
</div>
<div
class="mx_Dropdown mx_JoinRuleDropdown"
>
<div>
<div
aria-describedby="mx_JoinRuleDropdown_value"
aria-expanded="false"
aria-haspopup="listbox"
aria-label="Room visibility"
aria-owns="mx_JoinRuleDropdown_input"
class="mx_AccessibleButton mx_Dropdown_input mx_no_textinput"
role="button"
tabindex="0"
class="mx_Dropdown mx_JoinRuleDropdown"
>
<div
class="mx_Dropdown_option"
id="mx_JoinRuleDropdown_value"
aria-describedby="mx_JoinRuleDropdown_value"
aria-expanded="false"
aria-haspopup="listbox"
aria-label="Room visibility"
aria-owns="mx_JoinRuleDropdown_input"
class="mx_AccessibleButton mx_Dropdown_input mx_no_textinput"
role="button"
tabindex="0"
>
<div
class="mx_JoinRuleDropdown_invite"
class="mx_Dropdown_option"
id="mx_JoinRuleDropdown_value"
>
Private room (invite only)
<div
class="mx_JoinRuleDropdown_invite"
>
Private room (invite only)
</div>
</div>
<svg
class="mx_Dropdown_arrow"
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M12 14.95q-.2 0-.375-.062a.9.9 0 0 1-.325-.213l-4.6-4.6a.95.95 0 0 1-.275-.7q0-.425.275-.7a.95.95 0 0 1 .7-.275q.425 0 .7.275l3.9 3.9 3.9-3.9a.95.95 0 0 1 .7-.275q.425 0 .7.275a.95.95 0 0 1 .275.7.95.95 0 0 1-.275.7l-4.6 4.6q-.15.15-.325.212a1.1 1.1 0 0 1-.375.063"
/>
</svg>
</div>
<svg
class="mx_Dropdown_arrow"
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M12 14.95q-.2 0-.375-.062a.9.9 0 0 1-.325-.213l-4.6-4.6a.95.95 0 0 1-.275-.7q0-.425.275-.7a.95.95 0 0 1 .7-.275q.425 0 .7.275l3.9 3.9 3.9-3.9a.95.95 0 0 1 .7-.275q.425 0 .7.275a.95.95 0 0 1 .275.7.95.95 0 0 1-.275.7l-4.6 4.6q-.15.15-.325.212a1.1 1.1 0 0 1-.375.063"
/>
</svg>
</div>
<p>
Only people invited will be able to find and join this room. You can change this at any time from room settings.
</p>
</div>
<p>
Only people invited will be able to find and join this room. You can change this at any time from room settings.
</p>
<div
class="mx_SettingsFlag mx_CreateRoomDialog_e2eSwitch"
class="_inline-field_19upo_32"
>
<span
class="mx_SettingsFlag_label"
<div
class="_inline-field-control_19upo_44"
>
<div
id="mx_LabelledToggleSwitch__r_60_"
class="_container_udcm8_10"
>
<input
checked=""
class="_input_udcm8_24"
id="_r_7k_"
role="switch"
type="checkbox"
/>
<div
class="_ui_udcm8_34"
/>
</div>
</div>
<div
class="_inline-field-body_19upo_38"
>
<label
class="_label_19upo_59"
for="_r_7k_"
>
Enable end-to-end encryption
</div>
</span>
<div
aria-checked="true"
aria-disabled="false"
aria-labelledby="mx_LabelledToggleSwitch__r_60_"
class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on mx_ToggleSwitch_enabled"
role="switch"
tabindex="0"
>
<div
class="mx_ToggleSwitch_ball"
/>
</label>
<span
class="_message_19upo_85 _help-message_19upo_91"
id="radix-_r_7m_"
>
You can't disable this later. Bridges & most bots won't work yet.
</span>
</div>
</div>
<p>
You can't disable this later. Bridges & most bots won't work yet.
</p>
</div>
</form>
</form>
</div>
<div
class="mx_Dialog_buttons"
>

206
test/unit-tests/components/views/dialogs/__snapshots__/DevtoolsDialog-test.tsx.snap
View File

@@ -116,119 +116,129 @@ exports[`DevtoolsDialog renders the devtools dialog 1`] = `
End-to-end encryption
</button>
</div>
<div>
<form
class="_root_19upo_16 mx_DevTools_toggleForm"
>
<h2
class="mx_DevTools_toolHeading"
>
Options
</h2>
<div
class="mx_SettingsFlag"
>
<label
class="mx_SettingsFlag_label"
for="mx_SettingsFlag_vY7Q4uEh9K38"
>
<span
class="mx_SettingsFlag_labelText"
>
Developer mode
</span>
</label>
<div
aria-checked="false"
aria-disabled="false"
aria-label="Developer mode"
class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_enabled"
id="mx_SettingsFlag_vY7Q4uEh9K38"
role="switch"
tabindex="0"
>
<div
class="mx_ToggleSwitch_ball"
/>
</div>
</div>
<div
class="mx_SettingsFlag"
>
<label
class="mx_SettingsFlag_label"
for="mx_SettingsFlag_QgU2PomxwKpa"
>
<span
class="mx_SettingsFlag_labelText"
>
Show hidden events in timeline
</span>
</label>
<div
aria-checked="false"
aria-disabled="false"
aria-label="Show hidden events in timeline"
class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_enabled"
id="mx_SettingsFlag_QgU2PomxwKpa"
role="switch"
tabindex="0"
>
<div
class="mx_ToggleSwitch_ball"
/>
</div>
</div>
<div
class="mx_SettingsFlag"
>
<label
class="mx_SettingsFlag_label"
for="mx_SettingsFlag_6hpi3YEetmBG"
>
<span
class="mx_SettingsFlag_labelText"
>
Enable widget screenshots on supported widgets
</span>
</label>
<div
aria-checked="false"
aria-disabled="false"
aria-label="Enable widget screenshots on supported widgets"
class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_enabled"
id="mx_SettingsFlag_6hpi3YEetmBG"
role="switch"
tabindex="0"
>
<div
class="mx_ToggleSwitch_ball"
/>
</div>
</div>
<form
class="_root_19upo_16"
class="_inline-field_19upo_32"
>
<div
class="_field_19upo_26"
class="_inline-field-control_19upo_44"
>
<label
class="_label_19upo_59"
for="radix-_r_4_"
>
Element Call URL
</label>
<div
class="_controls_17lij_8"
class="_container_udcm8_10"
>
<input
class="_control_sqdq4_10"
id="radix-_r_4_"
name="input"
title=""
value=""
class="_input_udcm8_24"
id="mx_SettingsFlag_vY7Q4uEh9K38"
role="switch"
type="checkbox"
/>
<div
class="_ui_udcm8_34"
/>
</div>
</div>
</form>
</div>
<div
class="_inline-field-body_19upo_38"
>
<label
class="_label_19upo_59"
for="mx_SettingsFlag_vY7Q4uEh9K38"
>
Developer mode
</label>
</div>
</div>
<div
class="_inline-field_19upo_32"
>
<div
class="_inline-field-control_19upo_44"
>
<div
class="_container_udcm8_10"
>
<input
class="_input_udcm8_24"
id="mx_SettingsFlag_QgU2PomxwKpa"
role="switch"
type="checkbox"
/>
<div
class="_ui_udcm8_34"
/>
</div>
</div>
<div
class="_inline-field-body_19upo_38"
>
<label
class="_label_19upo_59"
for="mx_SettingsFlag_QgU2PomxwKpa"
>
Show hidden events in timeline
</label>
</div>
</div>
<div
class="_inline-field_19upo_32"
>
<div
class="_inline-field-control_19upo_44"
>
<div
class="_container_udcm8_10"
>
<input
class="_input_udcm8_24"
id="mx_SettingsFlag_6hpi3YEetmBG"
role="switch"
type="checkbox"
/>
<div
class="_ui_udcm8_34"
/>
</div>
</div>
<div
class="_inline-field-body_19upo_38"
>
<label
class="_label_19upo_59"
for="mx_SettingsFlag_6hpi3YEetmBG"
>
Enable widget screenshots on supported widgets
</label>
</div>
</div>
<div
class="_field_19upo_26"
>
<label
class="_label_19upo_59"
for="radix-_r_a_"
>
Element Call URL
</label>
<div
class="_controls_17lij_8"
>
<input
class="_control_sqdq4_10"
id="radix-_r_a_"
name="input"
title=""
value=""
/>
</div>
</div>
</form>
</div>
<div
class="mx_Dialog_buttons"

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

@@ -44,7 +44,7 @@ exports[`ReportRoomDialog displays admin message 1`] = `
/>
<span
class="_message_19upo_85 _help-message_19upo_91"
id="radix-_r_8_"
id="radix-_r_9_"
>
Report this room to your account provider. If the messages are encrypted, your admin will not be able to read them.
</span>
@@ -66,28 +66,34 @@ exports[`ReportRoomDialog displays admin message 1`] = `
</p>
<div
class="mx_SettingsFlag"
class="_inline-field_19upo_32"
>
<span
class="mx_SettingsFlag_label"
<div
class="_inline-field-control_19upo_44"
>
<div
id="mx_LabelledToggleSwitch__r_9_"
class="_container_udcm8_10"
>
<input
class="_input_udcm8_24"
id="_r_a_"
role="switch"
type="checkbox"
/>
<div
class="_ui_udcm8_34"
/>
</div>
</div>
<div
class="_inline-field-body_19upo_38"
>
<label
class="_label_19upo_59"
for="_r_a_"
>
Leave room
</div>
</span>
<div
aria-checked="false"
aria-disabled="false"
aria-labelledby="mx_LabelledToggleSwitch__r_9_"
class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_enabled"
role="switch"
tabindex="0"
>
<div
class="mx_ToggleSwitch_ball"
/>
</label>
</div>
</div>
<div

112
test/unit-tests/components/views/dialogs/__snapshots__/WidgetOpenIDPermissionsDialog-test.tsx.snap Normal file
View File

@@ -0,0 +1,112 @@
// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
exports[`WidgetOpenIDPermissionsDialog should render 1`] = `
<DocumentFragment>
<div
data-focus-guard="true"
style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
tabindex="0"
/>
<div
aria-labelledby="mx_BaseDialog_title"
class="mx_WidgetOpenIDPermissionsDialog mx_Dialog_fixedWidth"
data-focus-lock-disabled="false"
role="dialog"
tabindex="-1"
>
<div
class="mx_Dialog_header"
>
<h1
class="mx_Heading_h3 mx_Dialog_title"
id="mx_BaseDialog_title"
>
Allow this widget to verify your identity
</h1>
</div>
<div
class="mx_WidgetOpenIDPermissionsDialog_content"
>
<p>
The widget will verify your user ID, but won't be able to perform actions for you:
</p>
<p
class="text-muted"
>
https://imawidget
</p>
</div>
<div
class="mx_Dialog_buttons"
>
<div
class="mx_Dialog_buttons_additive"
>
<form
class="_root_19upo_16"
>
<div
class="_inline-field_19upo_32"
>
<div
class="_inline-field-control_19upo_44"
>
<div
class="_container_udcm8_10"
>
<input
class="_input_udcm8_24"
id="_r_0_"
role="switch"
type="checkbox"
/>
<div
class="_ui_udcm8_34"
/>
</div>
</div>
<div
class="_inline-field-body_19upo_38"
>
<label
class="_label_19upo_59"
for="_r_0_"
>
Remember this
</label>
</div>
</div>
</form>
</div>
<span
class="mx_Dialog_buttons_row"
>
<button
data-testid="dialog-cancel-button"
type="button"
>
Cancel
</button>
<button
class="mx_Dialog_primary"
data-testid="dialog-primary-button"
type="button"
>
Continue
</button>
</span>
</div>
<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"
/>
</DocumentFragment>
`;

51
test/unit-tests/components/views/dialogs/devtools/__snapshots__/Users-test.tsx.snap
View File

@@ -417,31 +417,42 @@ exports[`<Users /> should render a user list 1`] = `
</label>
</div>
No results found
<div
class="mx_SettingsFlag"
<form
class="_root_19upo_16"
>
<span
class="mx_SettingsFlag_label"
>
<div
id="mx_LabelledToggleSwitch__r_4_"
>
Only joined users
</div>
</span>
<div
aria-checked="true"
aria-disabled="false"
aria-labelledby="mx_LabelledToggleSwitch__r_4_"
class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on mx_ToggleSwitch_enabled"
role="switch"
tabindex="0"
class="_inline-field_19upo_32"
>
<div
class="mx_ToggleSwitch_ball"
/>
class="_inline-field-control_19upo_44"
>
<div
class="_container_udcm8_10"
>
<input
checked=""
class="_input_udcm8_24"
id="_r_4_"
role="switch"
type="checkbox"
/>
<div
class="_ui_udcm8_34"
/>
</div>
</div>
<div
class="_inline-field-body_19upo_38"
>
<label
class="_label_19upo_59"
for="_r_4_"
>
Only joined users
</label>
</div>
</div>
</div>
</form>
</div>
<div
class="mx_Dialog_buttons"

4
test/unit-tests/components/views/location/LocationShareMenu-test.tsx
View File

@@ -301,7 +301,7 @@ describe("<LocationShareMenu />", () => {
setShareType(getByText, LocationShareType.Live);
expect(getByText("OK").hasAttribute("disabled")).toBeTruthy();
expect(getByText("OK")).toHaveAttribute("aria-disabled", "true");
});
it("enables OK button when labs flag is toggled to enabled", () => {
@@ -311,7 +311,7 @@ describe("<LocationShareMenu />", () => {
fireEvent.click(getByLabelText("Enable live location sharing"));
expect(getByText("OK").hasAttribute("disabled")).toBeFalsy();
expect(getByText("OK")).not.toHaveAttribute("aria-disabled", "true");
});
it("enables live share setting on ok button submit", () => {

67
test/unit-tests/components/views/location/__snapshots__/LocationShareMenu-test.tsx.snap
View File

@@ -18,41 +18,50 @@ exports[`<LocationShareMenu /> with live location disabled goes to labs flag scr
>
Please note: this is a labs feature using a temporary implementation. This means you will not be able to delete your location history, and advanced users will be able to see your location history even after you stop sharing your live location with this room.
</p>
<div
class="mx_SettingsFlag"
data-testid="enable-live-share-toggle"
<form
class="_root_19upo_16"
>
<span
class="mx_SettingsFlag_label"
<div
class="_inline-field_19upo_32"
>
<div
id="mx_LabelledToggleSwitch__r_0_"
class="_inline-field-control_19upo_44"
>
Enable live location sharing
<div
class="_container_udcm8_10"
>
<input
class="_input_udcm8_24"
id="_r_0_"
role="switch"
type="checkbox"
/>
<div
class="_ui_udcm8_34"
/>
</div>
</div>
</span>
<div
aria-checked="false"
aria-disabled="false"
aria-labelledby="mx_LabelledToggleSwitch__r_0_"
class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_enabled"
role="switch"
<div
class="_inline-field-body_19upo_38"
>
<label
class="_label_19upo_59"
for="_r_0_"
>
Enable live location sharing
</label>
</div>
</div>
<button
aria-disabled="true"
class="_button_187yx_8 mx_EnableLiveShare_button"
data-kind="primary"
data-size="lg"
role="button"
tabindex="0"
>
<div
class="mx_ToggleSwitch_ball"
/>
</div>
</div>
<button
aria-disabled="true"
class="mx_AccessibleButton mx_EnableLiveShare_button mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary mx_AccessibleButton_disabled"
data-testid="enable-live-share-submit"
disabled=""
role="button"
tabindex="0"
>
OK
</button>
OK
</button>
</form>
</div>
`;

8
test/unit-tests/components/views/room_settings/UrlPreviewSettings-test.tsx
View File

@@ -9,6 +9,7 @@ import React from "react";
import { type MatrixClient, type Room } from "matrix-js-sdk/src/matrix";
import { render, screen } from "jest-matrix-react";
import { waitFor } from "@testing-library/dom";
import { Form } from "@vector-im/compound-web";
import { createTestClient, mkStubRoom, withClientContextRenderOptions } from "../../../../test-utils";
import { UrlPreviewSettings } from "../../../../../src/components/views/room_settings/UrlPreviewSettings.tsx";
@@ -30,7 +31,12 @@ describe("UrlPreviewSettings", () => {
});
function renderComponent() {
return render(<UrlPreviewSettings room={room} />, withClientContextRenderOptions(client));
return render(
<Form.Root>
<UrlPreviewSettings room={room} />
</Form.Root>,
withClientContextRenderOptions(client),
);
}
it("should display the correct preview when the setting is in a loading state", () => {

396
test/unit-tests/components/views/room_settings/__snapshots__/UrlPreviewSettings-test.tsx.snap
View File

@@ -2,235 +2,269 @@
exports[`UrlPreviewSettings should display the correct preview when the room is encrypted and the url preview is enabled 1`] = `
<DocumentFragment>
<fieldset
class="mx_SettingsFieldset"
<form
class="_root_19upo_16"
>
<legend
class="mx_SettingsFieldset_legend"
<fieldset
class="mx_SettingsFieldset"
>
URL Previews
</legend>
<div
class="mx_SettingsFieldset_description"
>
<div
class="mx_SettingsSubsection_text"
<legend
class="mx_SettingsFieldset_legend"
>
<p>
When someone puts a URL in their message, a URL preview can be shown to give more information about that link such as the title, description, and an image from the website.
</p>
<p>
In encrypted rooms, like this one, URL previews are disabled by default to ensure that your homeserver (where the previews are generated) cannot gather information about links you see in this room.
</p>
</div>
</div>
<div
class="mx_SettingsFieldset_content"
>
URL Previews
</legend>
<div
class="mx_SettingsFlag"
class="mx_SettingsFieldset_description"
>
<label
class="mx_SettingsFlag_label"
for="mx_SettingsFlag_vY7Q4uEh9K38"
>
<span
class="mx_SettingsFlag_labelText"
/>
</label>
<div
aria-checked="true"
aria-disabled="false"
class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on mx_ToggleSwitch_enabled"
id="mx_SettingsFlag_vY7Q4uEh9K38"
role="switch"
tabindex="0"
class="mx_SettingsSubsection_text"
>
<div
class="mx_ToggleSwitch_ball"
/>
<p>
When someone puts a URL in their message, a URL preview can be shown to give more information about that link such as the title, description, and an image from the website.
</p>
<p>
In encrypted rooms, like this one, URL previews are disabled by default to ensure that your homeserver (where the previews are generated) cannot gather information about links you see in this room.
</p>
</div>
</div>
</div>
</fieldset>
<div
class="mx_SettingsFieldset_content"
>
<div
class="_inline-field_19upo_32"
>
<div
class="_inline-field-control_19upo_44"
>
<div
class="_container_udcm8_10"
>
<input
checked=""
class="_input_udcm8_24"
id="mx_SettingsFlag_vY7Q4uEh9K38"
role="switch"
type="checkbox"
/>
<div
class="_ui_udcm8_34"
/>
</div>
</div>
<div
class="_inline-field-body_19upo_38"
>
<label
class="_label_19upo_59"
for="mx_SettingsFlag_vY7Q4uEh9K38"
>
urlPreviewsEnabled_e2ee
</label>
</div>
</div>
</div>
</fieldset>
</form>
</DocumentFragment>
`;
exports[`UrlPreviewSettings should display the correct preview when the room is unencrypted and the url preview is disabled 1`] = `
<DocumentFragment>
<fieldset
class="mx_SettingsFieldset"
<form
class="_root_19upo_16"
>
<legend
class="mx_SettingsFieldset_legend"
<fieldset
class="mx_SettingsFieldset"
>
URL Previews
</legend>
<div
class="mx_SettingsFieldset_description"
>
<div
class="mx_SettingsSubsection_text"
<legend
class="mx_SettingsFieldset_legend"
>
URL Previews
</legend>
<div
class="mx_SettingsFieldset_description"
>
<p>
When someone puts a URL in their message, a URL preview can be shown to give more information about that link such as the title, description, and an image from the website.
</p>
<p>
<span>
You have
</span>
</p>
<div
class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_link_inline"
role="button"
tabindex="0"
class="mx_SettingsSubsection_text"
>
disabled
</div>
URL previews by default.
<p />
</div>
</div>
<div
class="mx_SettingsFieldset_content"
>
<div>
URL previews are disabled by default for participants in this room.
</div>
<div
class="mx_SettingsFlag"
>
<label
class="mx_SettingsFlag_label"
for="mx_SettingsFlag_vY7Q4uEh9K38"
>
<span
class="mx_SettingsFlag_labelText"
<p>
When someone puts a URL in their message, a URL preview can be shown to give more information about that link such as the title, description, and an image from the website.
</p>
<p>
<span>
You have
</span>
</p>
<div
class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_link_inline"
role="button"
tabindex="0"
>
Enable inline URL previews by default
</span>
</label>
disabled
</div>
URL previews by default.
<p />
</div>
</div>
<div
class="mx_SettingsFieldset_content"
>
<div>
URL previews are disabled by default for participants in this room.
</div>
<div
aria-checked="false"
aria-disabled="true"
aria-label="Enable inline URL previews by default"
class="mx_AccessibleButton mx_ToggleSwitch"
id="mx_SettingsFlag_vY7Q4uEh9K38"
role="switch"
tabindex="0"
class="_inline-field_19upo_32"
>
<div
class="mx_ToggleSwitch_ball"
/>
class="_inline-field-control_19upo_44"
>
<div
class="_container_udcm8_10"
>
<input
class="_input_udcm8_24"
disabled=""
id="mx_SettingsFlag_vY7Q4uEh9K38"
role="switch"
type="checkbox"
/>
<div
class="_ui_udcm8_34"
/>
</div>
</div>
<div
class="_inline-field-body_19upo_38"
>
<label
class="_label_19upo_59"
for="mx_SettingsFlag_vY7Q4uEh9K38"
>
Enable inline URL previews by default
</label>
</div>
</div>
</div>
</div>
</fieldset>
</fieldset>
</form>
</DocumentFragment>
`;
exports[`UrlPreviewSettings should display the correct preview when the room is unencrypted and the url preview is enabled 1`] = `
<DocumentFragment>
<fieldset
class="mx_SettingsFieldset"
<form
class="_root_19upo_16"
>
<legend
class="mx_SettingsFieldset_legend"
<fieldset
class="mx_SettingsFieldset"
>
URL Previews
</legend>
<div
class="mx_SettingsFieldset_description"
>
<div
class="mx_SettingsSubsection_text"
<legend
class="mx_SettingsFieldset_legend"
>
URL Previews
</legend>
<div
class="mx_SettingsFieldset_description"
>
<p>
When someone puts a URL in their message, a URL preview can be shown to give more information about that link such as the title, description, and an image from the website.
</p>
<p>
<span>
You have
</span>
</p>
<div
class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_link_inline"
role="button"
tabindex="0"
class="mx_SettingsSubsection_text"
>
enabled
</div>
URL previews by default.
<p />
</div>
</div>
<div
class="mx_SettingsFieldset_content"
>
<div>
URL previews are enabled by default for participants in this room.
</div>
<div
class="mx_SettingsFlag"
>
<label
class="mx_SettingsFlag_label"
for="mx_SettingsFlag_vY7Q4uEh9K38"
>
<span
class="mx_SettingsFlag_labelText"
<p>
When someone puts a URL in their message, a URL preview can be shown to give more information about that link such as the title, description, and an image from the website.
</p>
<p>
<span>
You have
</span>
</p>
<div
class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_link_inline"
role="button"
tabindex="0"
>
Enable inline URL previews by default
</span>
</label>
enabled
</div>
URL previews by default.
<p />
</div>
</div>
<div
class="mx_SettingsFieldset_content"
>
<div>
URL previews are enabled by default for participants in this room.
</div>
<div
aria-checked="true"
aria-disabled="false"
aria-label="Enable inline URL previews by default"
class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on mx_ToggleSwitch_enabled"
id="mx_SettingsFlag_vY7Q4uEh9K38"
role="switch"
tabindex="0"
class="_inline-field_19upo_32"
>
<div
class="mx_ToggleSwitch_ball"
/>
class="_inline-field-control_19upo_44"
>
<div
class="_container_udcm8_10"
>
<input
checked=""
class="_input_udcm8_24"
id="mx_SettingsFlag_vY7Q4uEh9K38"
role="switch"
type="checkbox"
/>
<div
class="_ui_udcm8_34"
/>
</div>
</div>
<div
class="_inline-field-body_19upo_38"
>
<label
class="_label_19upo_59"
for="mx_SettingsFlag_vY7Q4uEh9K38"
>
Enable inline URL previews by default
</label>
</div>
</div>
</div>
</div>
</fieldset>
</fieldset>
</form>
</DocumentFragment>
`;
exports[`UrlPreviewSettings should display the correct preview when the setting is in a loading state 1`] = `
<DocumentFragment>
<fieldset
class="mx_SettingsFieldset"
<form
class="_root_19upo_16"
>
<legend
class="mx_SettingsFieldset_legend"
<fieldset
class="mx_SettingsFieldset"
>
URL Previews
</legend>
<div
class="mx_SettingsFieldset_content"
>
<svg
class="_icon_11k6c_18"
fill="currentColor"
height="1em"
style="width: 20px; height: 20px;"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
<legend
class="mx_SettingsFieldset_legend"
>
<path
clip-rule="evenodd"
d="M12 4.031a8 8 0 1 0 8 8 1 1 0 0 1 2 0c0 5.523-4.477 10-10 10s-10-4.477-10-10 4.477-10 10-10a1 1 0 1 1 0 2"
fill-rule="evenodd"
/>
</svg>
</div>
</fieldset>
URL Previews
</legend>
<div
class="mx_SettingsFieldset_content"
>
<svg
class="_icon_11k6c_18"
fill="currentColor"
height="1em"
style="width: 20px; height: 20px;"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
clip-rule="evenodd"
d="M12 4.031a8 8 0 1 0 8 8 1 1 0 0 1 2 0c0 5.523-4.477 10-10 10s-10-4.477-10-10 4.477-10 10-10a1 1 0 1 1 0 2"
fill-rule="evenodd"
/>
</svg>
</div>
</fieldset>
</form>
</DocumentFragment>
`;

40
test/unit-tests/components/views/settings/Notifications-test.tsx
View File

@@ -37,6 +37,7 @@ import {
import { mocked } from "jest-mock";
import userEvent from "@testing-library/user-event";
import { PushProcessor } from "matrix-js-sdk/src/pushprocessor";
import { Form } from "@vector-im/compound-web";
import Notifications from "../../../../../src/components/views/settings/Notifications";
import SettingsStore from "../../../../../src/settings/SettingsStore";
@@ -248,7 +249,12 @@ const pushRules: IPushRules = {
const flushPromises = async () => await new Promise((resolve) => window.setTimeout(resolve));
describe("<Notifications />", () => {
const getComponent = () => render(<Notifications />);
const getComponent = () =>
render(
<Form.Root>
<Notifications />
</Form.Root>,
);
// get component, wait for async data and force a render
const getComponentAndWait = async () => {
@@ -347,11 +353,11 @@ describe("<Notifications />", () => {
it("renders switches correctly", async () => {
await getComponentAndWait();
expect(screen.getByTestId("notif-master-switch")).toBeInTheDocument();
expect(screen.getByTestId("notif-device-switch")).toBeInTheDocument();
expect(screen.getByTestId("notif-setting-notificationsEnabled")).toBeInTheDocument();
expect(screen.getByTestId("notif-setting-notificationBodyEnabled")).toBeInTheDocument();
expect(screen.getByTestId("notif-setting-audioNotificationsEnabled")).toBeInTheDocument();
expect(screen.getByLabelText("Enable notifications for this account")).toBeInTheDocument();
expect(screen.getByLabelText("Enable notifications for this device")).toBeInTheDocument();
expect(screen.getByLabelText("Enable desktop notifications for this session")).toBeInTheDocument();
expect(screen.getByLabelText("Show message in desktop notification")).toBeInTheDocument();
expect(screen.getByLabelText("Enable audible notifications for this session")).toBeInTheDocument();
});
describe("email switches", () => {
@@ -370,7 +376,7 @@ describe("<Notifications />", () => {
it("renders email switches correctly when email 3pids exist", async () => {
await getComponentAndWait();
expect(screen.getByTestId("notif-email-switch")).toBeInTheDocument();
expect(screen.getByLabelText(`Enable email notifications for ${testEmail}`)).toBeInTheDocument();
});
it("renders email switches correctly when notifications are on for email", async () => {
@@ -379,14 +385,14 @@ describe("<Notifications />", () => {
});
await getComponentAndWait();
const emailSwitch = screen.getByTestId("notif-email-switch");
expect(emailSwitch.querySelector('[aria-checked="true"]')).toBeInTheDocument();
const emailSwitch = screen.getByLabelText(`Enable email notifications for ${testEmail}`);
expect(emailSwitch).toBeChecked();
});
it("enables email notification when toggling on", async () => {
await getComponentAndWait();
const emailToggle = screen.getByTestId("notif-email-switch").querySelector('div[role="switch"]')!;
const emailToggle = screen.getByLabelText(`Enable email notifications for ${testEmail}`);
fireEvent.click(emailToggle);
expect(mockClient.setPusher).toHaveBeenCalledWith(
@@ -405,7 +411,7 @@ describe("<Notifications />", () => {
mockClient.setPusher.mockRejectedValue({});
await getComponentAndWait();
const emailToggle = screen.getByTestId("notif-email-switch").querySelector('div[role="switch"]')!;
const emailToggle = screen.getByLabelText(`Enable email notifications for ${testEmail}`);
fireEvent.click(emailToggle);
// force render
@@ -431,7 +437,7 @@ describe("<Notifications />", () => {
mockClient.getPushers.mockResolvedValue({ pushers: [testPusher] });
await getComponentAndWait();
const emailToggle = screen.getByTestId("notif-email-switch").querySelector('div[role="switch"]')!;
const emailToggle = screen.getByLabelText(`Enable email notifications for ${testEmail}`);
fireEvent.click(emailToggle);
expect(mockClient.removePusher).toHaveBeenCalledWith(testPusher.pushkey, testPusher.app_id);
@@ -452,22 +458,20 @@ describe("<Notifications />", () => {
it("toggles and sets settings correctly", async () => {
await getComponentAndWait();
let audioNotifsToggle!: HTMLDivElement;
let audioNotifsToggle!: HTMLInputElement;
const update = () => {
audioNotifsToggle = screen
.getByTestId("notif-setting-audioNotificationsEnabled")
.querySelector('div[role="switch"]')!;
audioNotifsToggle = screen.getByLabelText("Enable audible notifications for this session");
};
update();
expect(audioNotifsToggle.getAttribute("aria-checked")).toEqual("true");
expect(audioNotifsToggle).toBeChecked();
expect(SettingsStore.getValue("audioNotificationsEnabled")).toEqual(true);
fireEvent.click(audioNotifsToggle);
update();
expect(audioNotifsToggle.getAttribute("aria-checked")).toEqual("false");
expect(audioNotifsToggle).not.toBeChecked();
expect(SettingsStore.getValue("audioNotificationsEnabled")).toEqual(false);
});
});

172
test/unit-tests/components/views/settings/__snapshots__/Notifications-test.tsx.snap
View File

@@ -2,94 +2,114 @@
exports[`<Notifications /> main notification switches renders only enable notifications switch when notifications are disabled 1`] = `
<div>
<div
class="mx_SettingsFlag"
data-testid="notif-master-switch"
<form
class="_root_19upo_16"
>
<span
class="mx_SettingsFlag_label"
>
<div
id="mx_LabelledToggleSwitch__r_0_"
>
Enable notifications for this account
</div>
<span
class="mx_Caption"
id="mx_LabelledToggleSwitch__r_0__caption"
>
Turn off to disable notifications on all your devices and sessions
</span>
</span>
<div
aria-checked="false"
aria-describedby="mx_LabelledToggleSwitch__r_0__caption"
aria-disabled="false"
aria-labelledby="mx_LabelledToggleSwitch__r_0_"
class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_enabled"
role="switch"
tabindex="0"
class="_inline-field_19upo_32"
>
<div
class="mx_ToggleSwitch_ball"
/>
</div>
</div>
<div>
<div
class="mx_SettingsFlag"
>
<label
class="mx_SettingsFlag_label"
for="mx_SettingsFlag_testid_0"
>
<span
class="mx_SettingsFlag_labelText"
>
Show all activity in the room list (dots or number of unread messages)
</span>
</label>
<div
aria-checked="true"
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_0"
role="switch"
tabindex="0"
class="_inline-field-control_19upo_44"
>
<div
class="mx_ToggleSwitch_ball"
/>
class="_container_udcm8_10"
>
<input
class="_input_udcm8_24"
id="_r_0_"
role="switch"
type="checkbox"
/>
<div
class="_ui_udcm8_34"
/>
</div>
</div>
<div
class="_inline-field-body_19upo_38"
>
<label
class="_label_19upo_59"
for="_r_0_"
>
Enable notifications for this account
</label>
<span
class="_message_19upo_85 _help-message_19upo_91"
id="radix-_r_2_"
>
Turn off to disable notifications on all your devices and sessions
</span>
</div>
</div>
<div
class="mx_SettingsFlag"
<form
class="_root_19upo_16"
>
<label
class="mx_SettingsFlag_label"
for="mx_SettingsFlag_testid_1"
>
<span
class="mx_SettingsFlag_labelText"
>
Only show notifications in the thread activity centre
</span>
</label>
<div
aria-checked="true"
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_1"
role="switch"
tabindex="0"
class="_inline-field_19upo_32"
>
<div
class="mx_ToggleSwitch_ball"
/>
class="_inline-field-control_19upo_44"
>
<div
class="_container_udcm8_10"
>
<input
checked=""
class="_input_udcm8_24"
id="mx_SettingsFlag_testid_0"
role="switch"
type="checkbox"
/>
<div
class="_ui_udcm8_34"
/>
</div>
</div>
<div
class="_inline-field-body_19upo_38"
>
<label
class="_label_19upo_59"
for="mx_SettingsFlag_testid_0"
>
Show all activity in the room list (dots or number of unread messages)
</label>
</div>
</div>
</div>
</div>
<div
class="_inline-field_19upo_32"
>
<div
class="_inline-field-control_19upo_44"
>
<div
class="_container_udcm8_10"
>
<input
checked=""
class="_input_udcm8_24"
id="mx_SettingsFlag_testid_1"
role="switch"
type="checkbox"
/>
<div
class="_ui_udcm8_34"
/>
</div>
</div>
<div
class="_inline-field-body_19upo_38"
>
<label
class="_label_19upo_59"
for="mx_SettingsFlag_testid_1"
>
Only show notifications in the thread activity centre
</label>
</div>
</div>
</form>
</form>
</div>
`;

58
test/unit-tests/components/views/settings/__snapshots__/SetIntegrationManager-test.tsx.snap
View File

@@ -1,8 +1,8 @@
// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
exports[`SetIntegrationManager should render manage integrations sections 1`] = `
<div
class="mx_SetIntegrationManager"
<form
class="_root_19upo_16 mx_SetIntegrationManager"
data-testid="mx_SetIntegrationManager"
>
<div
@@ -18,6 +18,7 @@ exports[`SetIntegrationManager should render manage integrations sections 1`] =
</h3>
<h4
class="mx_Heading_h4"
id="mx_SetIntegrationManager_ManagerName"
>
(scalar.vector.im)
</h4>
@@ -25,6 +26,7 @@ exports[`SetIntegrationManager should render manage integrations sections 1`] =
</div>
<div
class="mx_SettingsSubsection_text"
id="mx_SetIntegrationManager_BodyText"
>
<span>
Use an integration manager
@@ -39,40 +41,36 @@ exports[`SetIntegrationManager should render manage integrations sections 1`] =
>
Integration managers receive configuration data, and can modify widgets, send room invites, and set power levels on your behalf.
</div>
<form
class="_root_19upo_16"
<div
class="_inline-field_19upo_32"
>
<div
class="_inline-field_19upo_32"
class="_inline-field-control_19upo_44"
>
<div
class="_inline-field-control_19upo_44"
class="_container_udcm8_10"
>
<input
class="_input_udcm8_24"
id="_r_0_"
role="switch"
type="checkbox"
/>
<div
class="_container_udcm8_10"
>
<input
class="_input_udcm8_24"
id="mx_SetIntegrationManager_Toggle"
role="switch"
type="checkbox"
/>
<div
class="_ui_udcm8_34"
/>
</div>
</div>
<div
class="_inline-field-body_19upo_38"
>
<label
class="_label_19upo_59"
for="mx_SetIntegrationManager_Toggle"
>
Enable the integration manager
</label>
class="_ui_udcm8_34"
/>
</div>
</div>
</form>
</div>
<div
class="_inline-field-body_19upo_38"
>
<label
class="_label_19upo_59"
for="_r_0_"
>
Enable the integration manager
</label>
</div>
</div>
</form>
`;

83
test/unit-tests/components/views/settings/notifications/Notifications2-test.tsx
View File

@@ -18,6 +18,7 @@ import {
RuleId,
} from "matrix-js-sdk/src/matrix";
import React from "react";
import { Form } from "@vector-im/compound-web";
import NotificationSettings2 from "../../../../../../src/components/views/settings/notifications/NotificationSettings2";
import MatrixClientContext from "../../../../../../src/contexts/MatrixClientContext";
@@ -93,7 +94,9 @@ describe("<Notifications />", () => {
const screen = render(
<MatrixClientContext.Provider value={cli}>
<NotificationSettings2 />
<Form.Root>
<NotificationSettings2 />
</Form.Root>
</MatrixClientContext.Provider>,
);
await act(waitForUpdate);
@@ -106,7 +109,9 @@ describe("<Notifications />", () => {
const user = userEvent.setup();
const screen = render(
<MatrixClientContext.Provider value={cli}>
<NotificationSettings2 />
<Form.Root>
<NotificationSettings2 />
</Form.Root>
</MatrixClientContext.Provider>,
);
await act(async () => {
@@ -114,7 +119,7 @@ describe("<Notifications />", () => {
expect(screen.container).toMatchSnapshot();
const globalMute = screen.getByLabelText(labelGlobalMute);
expect(globalMute).toHaveAttribute("aria-disabled", "true");
expect(globalMute).toBeDisabled();
const levelAllMessages = screen.getByLabelText(labelLevelAllMessage);
expect(levelAllMessages).toBeDisabled();
@@ -167,7 +172,9 @@ describe("<Notifications />", () => {
const user = userEvent.setup();
const screen = render(
<MatrixClientContext.Provider value={cli}>
<NotificationSettings2 />
<Form.Root>
<NotificationSettings2 />
</Form.Root>
</MatrixClientContext.Provider>,
);
await act(waitForUpdate);
@@ -183,7 +190,9 @@ describe("<Notifications />", () => {
const user = userEvent.setup();
const screen = render(
<MatrixClientContext.Provider value={cli}>
<NotificationSettings2 />
<Form.Root>
<NotificationSettings2 />
</Form.Root>
</MatrixClientContext.Provider>,
);
await act(waitForUpdate);
@@ -221,7 +230,9 @@ describe("<Notifications />", () => {
const user = userEvent.setup();
const screen = render(
<MatrixClientContext.Provider value={cli}>
<NotificationSettings2 />
<Form.Root>
<NotificationSettings2 />
</Form.Root>
</MatrixClientContext.Provider>,
);
await act(waitForUpdate);
@@ -256,7 +267,9 @@ describe("<Notifications />", () => {
const user = userEvent.setup();
const screen = render(
<MatrixClientContext.Provider value={cli}>
<NotificationSettings2 />
<Form.Root>
<NotificationSettings2 />
</Form.Root>
</MatrixClientContext.Provider>,
);
await act(waitForUpdate);
@@ -285,7 +298,9 @@ describe("<Notifications />", () => {
const user = userEvent.setup();
const screen = render(
<MatrixClientContext.Provider value={cli}>
<NotificationSettings2 />
<Form.Root>
<NotificationSettings2 />
</Form.Root>
</MatrixClientContext.Provider>,
);
await act(waitForUpdate);
@@ -310,7 +325,9 @@ describe("<Notifications />", () => {
const user = userEvent.setup();
const screen = render(
<MatrixClientContext.Provider value={cli}>
<NotificationSettings2 />
<Form.Root>
<NotificationSettings2 />
</Form.Root>
</MatrixClientContext.Provider>,
);
await act(waitForUpdate);
@@ -332,7 +349,9 @@ describe("<Notifications />", () => {
const user = userEvent.setup();
const screen = render(
<MatrixClientContext.Provider value={cli}>
<NotificationSettings2 />
<Form.Root>
<NotificationSettings2 />
</Form.Root>
</MatrixClientContext.Provider>,
);
await act(waitForUpdate);
@@ -360,7 +379,9 @@ describe("<Notifications />", () => {
const user = userEvent.setup();
const screen = render(
<MatrixClientContext.Provider value={cli}>
<NotificationSettings2 />
<Form.Root>
<NotificationSettings2 />
</Form.Root>
</MatrixClientContext.Provider>,
);
await act(waitForUpdate);
@@ -384,7 +405,9 @@ describe("<Notifications />", () => {
const user = userEvent.setup();
const screen = render(
<MatrixClientContext.Provider value={cli}>
<NotificationSettings2 />
<Form.Root>
<NotificationSettings2 />
</Form.Root>
</MatrixClientContext.Provider>,
);
await act(waitForUpdate);
@@ -406,7 +429,9 @@ describe("<Notifications />", () => {
const user = userEvent.setup();
const screen = render(
<MatrixClientContext.Provider value={cli}>
<NotificationSettings2 />
<Form.Root>
<NotificationSettings2 />
</Form.Root>
</MatrixClientContext.Provider>,
);
await act(waitForUpdate);
@@ -434,7 +459,9 @@ describe("<Notifications />", () => {
const user = userEvent.setup();
const screen = render(
<MatrixClientContext.Provider value={cli}>
<NotificationSettings2 />
<Form.Root>
<NotificationSettings2 />
</Form.Root>
</MatrixClientContext.Provider>,
);
await act(waitForUpdate);
@@ -458,7 +485,9 @@ describe("<Notifications />", () => {
const user = userEvent.setup();
const screen = render(
<MatrixClientContext.Provider value={cli}>
<NotificationSettings2 />
<Form.Root>
<NotificationSettings2 />
</Form.Root>
</MatrixClientContext.Provider>,
);
await act(waitForUpdate);
@@ -485,7 +514,9 @@ describe("<Notifications />", () => {
const user = userEvent.setup();
const screen = render(
<MatrixClientContext.Provider value={cli}>
<NotificationSettings2 />
<Form.Root>
<NotificationSettings2 />
</Form.Root>
</MatrixClientContext.Provider>,
);
await act(waitForUpdate);
@@ -504,7 +535,9 @@ describe("<Notifications />", () => {
const user = userEvent.setup();
const screen = render(
<MatrixClientContext.Provider value={cli}>
<NotificationSettings2 />
<Form.Root>
<NotificationSettings2 />
</Form.Root>
</MatrixClientContext.Provider>,
);
await act(waitForUpdate);
@@ -615,7 +648,9 @@ describe("<Notifications />", () => {
const user = userEvent.setup();
const screen = render(
<MatrixClientContext.Provider value={cli}>
<NotificationSettings2 />
<Form.Root>
<NotificationSettings2 />
</Form.Root>
</MatrixClientContext.Provider>,
);
await act(waitForUpdate);
@@ -674,7 +709,9 @@ describe("<Notifications />", () => {
const user = userEvent.setup();
const screen = render(
<MatrixClientContext.Provider value={cli}>
<NotificationSettings2 />
<Form.Root>
<NotificationSettings2 />
</Form.Root>
</MatrixClientContext.Provider>,
);
await act(waitForUpdate);
@@ -694,7 +731,9 @@ describe("<Notifications />", () => {
const { container } = render(
<MatrixClientContext.Provider value={cli}>
<NotificationSettings2 />
<Form.Root>
<NotificationSettings2 />
</Form.Root>
</MatrixClientContext.Provider>,
);
await waitForUpdate();
@@ -721,7 +760,9 @@ describe("<Notifications />", () => {
const user = userEvent.setup();
const { container } = render(
<MatrixClientContext.Provider value={cli}>
<NotificationSettings2 />
<Form.Root>
<NotificationSettings2 />
</Form.Root>
</MatrixClientContext.Provider>,
);
await waitForUpdate();

4295
test/unit-tests/components/views/settings/notifications/__snapshots__/Notifications2-test.tsx.snap
View File

File diff suppressed because it is too large Load Diff

14
test/unit-tests/components/views/settings/tabs/room/SecurityRoomSettingsTab-test.tsx
View File

@@ -252,7 +252,7 @@ describe("<SecurityRoomSettingsTab />", () => {
fireEvent.click(screen.getByText("Show advanced"));
expect(screen.getByLabelText("Enable guest access").getAttribute("aria-checked")).toBe("false");
expect(screen.getByLabelText("Enable guest access")).not.toBeChecked();
});
it("updates guest access on toggle", () => {
@@ -264,7 +264,7 @@ describe("<SecurityRoomSettingsTab />", () => {
fireEvent.click(screen.getByLabelText("Enable guest access"));
// toggle set immediately
expect(screen.getByLabelText("Enable guest access").getAttribute("aria-checked")).toBe("true");
expect(screen.getByLabelText("Enable guest access")).toBeChecked();
expect(client.sendStateEvent).toHaveBeenCalledWith(
room.roomId,
@@ -285,14 +285,14 @@ describe("<SecurityRoomSettingsTab />", () => {
fireEvent.click(screen.getByLabelText("Enable guest access"));
// toggle set immediately
expect(screen.getByLabelText("Enable guest access").getAttribute("aria-checked")).toBe("false");
expect(screen.getByLabelText("Enable guest access")).not.toBeChecked();
await flushPromises();
expect(client.sendStateEvent).toHaveBeenCalled();
expect(logger.error).toHaveBeenCalledWith("oups");
// toggle reset to old value
expect(screen.getByLabelText("Enable guest access").getAttribute("aria-checked")).toBe("true");
expect(screen.getByLabelText("Enable guest access")).toBeChecked();
});
});
@@ -388,7 +388,7 @@ describe("<SecurityRoomSettingsTab />", () => {
await waitFor(() => expect(screen.getByLabelText("Encrypted")).toBeChecked());
// can't disable encryption once enabled
expect(screen.getByLabelText("Encrypted").getAttribute("aria-disabled")).toEqual("true");
expect(screen.getByLabelText("Encrypted")).toBeDisabled();
});
it("asks users to confirm when setting room to encrypted", async () => {
@@ -495,7 +495,7 @@ describe("<SecurityRoomSettingsTab />", () => {
getComponent(room);
await waitFor(() => expect(screen.getByLabelText("Encrypted")).toBeChecked());
expect(screen.getByLabelText("Encrypted").getAttribute("aria-disabled")).toEqual("true");
expect(screen.getByLabelText("Encrypted")).toBeDisabled();
expect(screen.getByText("Once enabled, encryption cannot be disabled.")).toBeInTheDocument();
});
@@ -505,7 +505,7 @@ describe("<SecurityRoomSettingsTab />", () => {
getComponent(room);
await waitFor(() => expect(screen.getByLabelText("Encrypted")).not.toBeChecked());
expect(screen.getByLabelText("Encrypted").getAttribute("aria-disabled")).toEqual("true");
expect(screen.getByLabelText("Encrypted")).toBeDisabled();
expect(screen.queryByText("Once enabled, encryption cannot be disabled.")).not.toBeInTheDocument();
expect(screen.getByText("Your server requires encryption to be disabled.")).toBeInTheDocument();
});

12
test/unit-tests/components/views/settings/tabs/room/VoipRoomSettingsTab-test.tsx
View File

@@ -43,7 +43,7 @@ describe("VoipRoomSettingsTab", () => {
};
const getElementCallSwitch = (tab: RenderResult): HTMLElement => {
return tab.container.querySelector("[data-testid='element-call-switch']")!;
return tab.getByLabelText("Enable Element Call as an additional calling option in this room")!;
};
describe("correct state", () => {
@@ -52,7 +52,7 @@ describe("VoipRoomSettingsTab", () => {
const tab = renderTab();
expect(getElementCallSwitch(tab).querySelector("[aria-checked='true']")).toBeTruthy();
expect(getElementCallSwitch(tab)).toBeChecked();
});
it.each([1, 50, 100])("shows disabled when call member power level is 0", (level: number) => {
@@ -60,7 +60,7 @@ describe("VoipRoomSettingsTab", () => {
const tab = renderTab();
expect(getElementCallSwitch(tab).querySelector("[aria-checked='false']")).toBeTruthy();
expect(getElementCallSwitch(tab)).not.toBeChecked();
});
});
@@ -75,7 +75,7 @@ describe("VoipRoomSettingsTab", () => {
const tab = renderTab();
fireEvent.click(getElementCallSwitch(tab).querySelector(".mx_ToggleSwitch")!);
fireEvent.click(getElementCallSwitch(tab));
await waitFor(() =>
expect(cli.sendStateEvent).toHaveBeenCalledWith(
room.roomId,
@@ -95,7 +95,7 @@ describe("VoipRoomSettingsTab", () => {
const tab = renderTab();
fireEvent.click(getElementCallSwitch(tab).querySelector(".mx_ToggleSwitch")!);
fireEvent.click(getElementCallSwitch(tab));
await waitFor(() =>
expect(cli.sendStateEvent).toHaveBeenCalledWith(
room.roomId,
@@ -116,7 +116,7 @@ describe("VoipRoomSettingsTab", () => {
const tab = renderTab();
fireEvent.click(getElementCallSwitch(tab).querySelector(".mx_ToggleSwitch")!);
fireEvent.click(getElementCallSwitch(tab));
await waitFor(() =>
expect(cli.sendStateEvent).toHaveBeenCalledWith(
room.roomId,

13
test/unit-tests/components/views/settings/tabs/user/PreferencesUserSettingsTab-test.tsx
View File

@@ -89,7 +89,7 @@ describe("PreferencesUserSettingsTab", () => {
renderTab();
const toggle = await screen.findByRole("switch", { name: "Allow spell check" });
expect(toggle).toHaveAttribute("aria-checked", "false");
expect(toggle).not.toBeDisabled();
await userEvent.click(toggle);
@@ -149,7 +149,7 @@ describe("PreferencesUserSettingsTab", () => {
mockGetValue(false);
const toggle = getToggle();
await waitFor(() => expect(toggle).toHaveAttribute("aria-disabled", "false"));
await waitFor(() => expect(toggle).not.toBeDisabled());
fireEvent.click(toggle);
expectSetValueToHaveBeenCalled("sendReadReceipts", null, SettingLevel.ACCOUNT, true);
});
@@ -158,7 +158,7 @@ describe("PreferencesUserSettingsTab", () => {
mockGetValue(true);
const toggle = getToggle();
await waitFor(() => expect(toggle).toHaveAttribute("aria-disabled", "false"));
await waitFor(() => expect(toggle).not.toBeDisabled());
fireEvent.click(toggle);
expectSetValueToHaveBeenCalled("sendReadReceipts", null, SettingLevel.ACCOUNT, false);
});
@@ -172,8 +172,8 @@ describe("PreferencesUserSettingsTab", () => {
it("is forcibly enabled", async () => {
const toggle = getToggle();
await waitFor(() => {
expect(toggle).toHaveAttribute("aria-checked", "true");
expect(toggle).toHaveAttribute("aria-disabled", "true");
expect(toggle).toBeChecked();
expect(toggle).toBeDisabled();
});
});
@@ -181,7 +181,8 @@ describe("PreferencesUserSettingsTab", () => {
mockGetValue(true);
const toggle = getToggle();
await waitFor(() => expect(toggle).toHaveAttribute("aria-disabled", "true"));
await waitFor(() => expect(toggle).toBeDisabled());
console.log(toggle.innerHTML);
fireEvent.click(toggle);
expect(SettingsStore.setValue).not.toHaveBeenCalled();
});

8
test/unit-tests/components/views/settings/tabs/user/VoiceUserSettingsTab-test.tsx
View File

@@ -113,10 +113,10 @@ describe("<VoiceUserSettingsTab />", () => {
});
it("renders audio processing settings", () => {
const { getByTestId } = render(getComponent());
expect(getByTestId("voice-auto-gain")).toBeTruthy();
expect(getByTestId("voice-noise-suppression")).toBeTruthy();
expect(getByTestId("voice-echo-cancellation")).toBeTruthy();
const { getByRole } = render(getComponent());
expect(getByRole("switch", { name: "Automatically adjust the microphone volume" })).toBeTruthy();
expect(getByRole("switch", { name: "Noise suppression" })).toBeTruthy();
expect(getByRole("switch", { name: "Echo cancellation" })).toBeTruthy();
});
it("sets and displays audio processing settings", () => {

2569
test/unit-tests/components/views/settings/tabs/user/__snapshots__/PreferencesUserSettingsTab-test.tsx.snap
View File

File diff suppressed because it is too large Load Diff

64
test/unit-tests/components/views/settings/tabs/user/__snapshots__/SecurityUserSettingsTab-test.tsx.snap
View File

@@ -34,8 +34,8 @@ exports[`<SecurityUserSettingsTab /> renders security section 1`] = `
<div
class="mx_SettingsTab_sections"
>
<div
class="mx_SetIntegrationManager"
<form
class="_root_19upo_16 mx_SetIntegrationManager"
data-testid="mx_SetIntegrationManager"
>
<div
@@ -51,6 +51,7 @@ exports[`<SecurityUserSettingsTab /> renders security section 1`] = `
</h3>
<h4
class="mx_Heading_h4"
id="mx_SetIntegrationManager_ManagerName"
>
(scalar.vector.im)
</h4>
@@ -58,6 +59,7 @@ exports[`<SecurityUserSettingsTab /> renders security section 1`] = `
</div>
<div
class="mx_SettingsSubsection_text"
id="mx_SetIntegrationManager_BodyText"
>
<span>
Use an integration manager
@@ -72,43 +74,39 @@ exports[`<SecurityUserSettingsTab /> renders security section 1`] = `
>
Integration managers receive configuration data, and can modify widgets, send room invites, and set power levels on your behalf.
</div>
<form
class="_root_19upo_16"
<div
class="_inline-field_19upo_32"
>
<div
class="_inline-field_19upo_32"
class="_inline-field-control_19upo_44"
>
<div
class="_inline-field-control_19upo_44"
class="_container_udcm8_10"
>
<input
checked=""
class="_input_udcm8_24"
id="_r_0_"
role="switch"
type="checkbox"
/>
<div
class="_container_udcm8_10"
>
<input
checked=""
class="_input_udcm8_24"
id="mx_SetIntegrationManager_Toggle"
role="switch"
type="checkbox"
/>
<div
class="_ui_udcm8_34"
/>
</div>
</div>
<div
class="_inline-field-body_19upo_38"
>
<label
class="_label_19upo_59"
for="mx_SetIntegrationManager_Toggle"
>
Enable the integration manager
</label>
class="_ui_udcm8_34"
/>
</div>
</div>
</form>
</div>
<div
class="_inline-field-body_19upo_38"
>
<label
class="_label_19upo_59"
for="_r_0_"
>
Enable the integration manager
</label>
</div>
</div>
</form>
<div
class="mx_SettingsSection"
>
@@ -213,7 +211,7 @@ exports[`<SecurityUserSettingsTab /> renders security section 1`] = `
>
<label
class="_label_19upo_59"
for="radix-_r_1_"
for="radix-_r_2_"
>
Enter a new identity server
</label>
@@ -222,7 +220,7 @@ exports[`<SecurityUserSettingsTab /> renders security section 1`] = `
>
<input
class="_control_sqdq4_10"
id="radix-_r_1_"
id="radix-_r_2_"
name="input"
placeholder=""
title=""

14
test/unit-tests/components/views/spaces/SpaceSettingsVisibilityTab-test.tsx
View File

@@ -150,7 +150,7 @@ describe("<SpaceSettingsVisibilityTab />", () => {
await toggleGuestAccessSection(component);
const guestAccessInput = getGuestAccessToggle(component);
expect(guestAccessInput?.getAttribute("aria-checked")).toEqual("true");
expect(guestAccessInput).toBeChecked();
fireEvent.click(guestAccessInput!);
expect(mockMatrixClient.sendStateEvent).toHaveBeenCalledWith(
@@ -162,7 +162,7 @@ describe("<SpaceSettingsVisibilityTab />", () => {
);
// toggled off
expect(guestAccessInput?.getAttribute("aria-checked")).toEqual("false");
expect(guestAccessInput).not.toBeChecked();
});
it("renders error message when update fails", async () => {
@@ -184,7 +184,7 @@ describe("<SpaceSettingsVisibilityTab />", () => {
await toggleGuestAccessSection(component);
expect(getGuestAccessToggle(component)?.getAttribute("aria-disabled")).toEqual("true");
expect(getGuestAccessToggle(component)).toBeDisabled();
});
});
@@ -194,7 +194,7 @@ describe("<SpaceSettingsVisibilityTab />", () => {
const component = getComponent({ space });
// toggle off because space settings is != WorldReadable
expect(getHistoryVisibilityToggle(component)?.getAttribute("aria-checked")).toEqual("false");
expect(getHistoryVisibilityToggle(component)).not.toBeChecked();
});
it("updates history visibility on toggle", () => {
@@ -202,7 +202,7 @@ describe("<SpaceSettingsVisibilityTab />", () => {
const component = getComponent({ space });
// toggle off because space settings is != WorldReadable
expect(getHistoryVisibilityToggle(component)?.getAttribute("aria-checked")).toEqual("false");
expect(getHistoryVisibilityToggle(component)).not.toBeChecked();
fireEvent.click(getHistoryVisibilityToggle(component)!);
expect(mockMatrixClient.sendStateEvent).toHaveBeenCalledWith(
@@ -212,7 +212,7 @@ describe("<SpaceSettingsVisibilityTab />", () => {
"",
);
expect(getHistoryVisibilityToggle(component)?.getAttribute("aria-checked")).toEqual("true");
expect(getHistoryVisibilityToggle(component)).toBeChecked();
});
it("renders error message when history update fails", async () => {
@@ -231,7 +231,7 @@ describe("<SpaceSettingsVisibilityTab />", () => {
const space = makeMockSpace(mockMatrixClient, joinRule, guestRule, historyRule);
(space.currentState.maySendStateEvent as jest.Mock).mockReturnValue(false);
const component = getComponent({ space });
expect(getHistoryVisibilityToggle(component)?.getAttribute("aria-disabled")).toEqual("true");
expect(getHistoryVisibilityToggle(component)).toBeDisabled();
});
});

72
test/unit-tests/components/views/spaces/__snapshots__/SpaceSettingsVisibilityTab-test.tsx.snap
View File

@@ -1,18 +1,13 @@
// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
exports[`<SpaceSettingsVisibilityTab /> for a public space Access renders guest access section toggle 1`] = `
<div
aria-checked="true"
aria-disabled="false"
aria-labelledby="mx_LabelledToggleSwitch__r_b_"
class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on mx_ToggleSwitch_enabled"
<input
checked=""
class="_input_udcm8_24"
id="_r_h_"
role="switch"
tabindex="0"
>
<div
class="mx_ToggleSwitch_ball"
/>
</div>
type="checkbox"
/>
`;
exports[`<SpaceSettingsVisibilityTab /> renders container 1`] = `
@@ -112,42 +107,53 @@ exports[`<SpaceSettingsVisibilityTab /> renders container 1`] = `
>
Anyone can find and join.
</span>
<div
class="mx_SettingsTab_toggleWithDescription"
<form
class="_root_19upo_16"
>
<div
class="mx_SettingsFlag"
class="_inline-field_19upo_32"
>
<span
class="mx_SettingsFlag_label"
<div
class="_inline-field-control_19upo_44"
>
<div
id="mx_LabelledToggleSwitch__r_0_"
class="_container_udcm8_10"
>
<input
checked=""
class="_input_udcm8_24"
id="_r_0_"
role="switch"
type="checkbox"
/>
<div
class="_ui_udcm8_34"
/>
</div>
</div>
<div
class="_inline-field-body_19upo_38"
>
<label
class="_label_19upo_59"
for="_r_0_"
>
Preview Space
</div>
</span>
<div
aria-checked="true"
aria-disabled="false"
aria-labelledby="mx_LabelledToggleSwitch__r_0_"
class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on mx_ToggleSwitch_enabled"
role="switch"
tabindex="0"
>
<div
class="mx_ToggleSwitch_ball"
/>
</label>
<span
class="_message_19upo_85 _help-message_19upo_91"
id="radix-_r_2_"
>
Allow people to preview your space before they join.
</span>
</div>
</div>
<p>
Allow people to preview your space before they join.
<br />
<strong>
Recommended for public spaces.
</strong>
</p>
</div>
</form>
</div>
</fieldset>
</div>