Update settings toggles to use consistent design across app. (#30169)
* 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
co-authored by
Michael Telatynski
Michael Telatynski
parent
f84e2815d0
commit
a2f5c49438
@@ -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);
|
||||
});
|
||||
});
|
||||
|
||||
+96
-76
@@ -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>
|
||||
`;
|
||||
|
||||
+28
-30
@@ -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>
|
||||
`;
|
||||
|
||||
@@ -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();
|
||||
|
||||
+2198
-2097
File diff suppressed because it is too large
Load Diff
+7
-7
@@ -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();
|
||||
});
|
||||
|
||||
@@ -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,
|
||||
|
||||
+7
-6
@@ -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();
|
||||
});
|
||||
|
||||
@@ -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", () => {
|
||||
|
||||
+1419
-1150
File diff suppressed because it is too large
Load Diff
+31
-33
@@ -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=""
|
||||
|
||||
Reference in New Issue
Block a user