diff --git a/src/components/views/settings/tabs/room/NotificationSettingsTab.tsx b/src/components/views/settings/tabs/room/NotificationSettingsTab.tsx index 2ac282654a9..76e8bee812e 100644 --- a/src/components/views/settings/tabs/room/NotificationSettingsTab.tsx +++ b/src/components/views/settings/tabs/room/NotificationSettingsTab.tsx @@ -19,7 +19,7 @@ import { logger } from "matrix-js-sdk/src/logger"; import { _t } from "../../../../../languageHandler"; import { MatrixClientPeg } from "../../../../../MatrixClientPeg"; -import AccessibleButton from "../../../elements/AccessibleButton"; +import AccessibleButton, { ButtonEvent } from "../../../elements/AccessibleButton"; import Notifier from "../../../../../Notifier"; import SettingsStore from '../../../../../settings/SettingsStore'; import { SettingLevel } from "../../../../../settings/SettingLevel"; @@ -163,7 +163,9 @@ export default class NotificationsSettingsTab extends React.Component { + private onOpenSettingsClick = (event: ButtonEvent) => { + // avoid selecting the radio button + event.preventDefault(); this.props.closeSettingsFn(); defaultDispatcher.dispatch({ action: Action.ViewUserSettings, diff --git a/test/components/views/settings/tabs/room/NotificationSettingsTab-test.tsx b/test/components/views/settings/tabs/room/NotificationSettingsTab-test.tsx new file mode 100644 index 00000000000..a48a7fc135e --- /dev/null +++ b/test/components/views/settings/tabs/room/NotificationSettingsTab-test.tsx @@ -0,0 +1,58 @@ +/* +Copyright 2022 The Matrix.org Foundation C.I.C. + +Licensed under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. +You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. +*/ + +import React from "react"; +import { render, RenderResult } from "@testing-library/react"; +import { MatrixClient } from "matrix-js-sdk/src/client"; +import userEvent from "@testing-library/user-event"; + +import NotificationSettingsTab from "../../../../../../src/components/views/settings/tabs/room/NotificationSettingsTab"; +import { mkStubRoom, stubClient } from "../../../../../test-utils"; +import { MatrixClientPeg } from "../../../../../../src/MatrixClientPeg"; +import { EchoChamber } from "../../../../../../src/stores/local-echo/EchoChamber"; +import { RoomEchoChamber } from "../../../../../../src/stores/local-echo/RoomEchoChamber"; + +describe("NotificatinSettingsTab", () => { + const roomId = "!room:example.com"; + let cli: MatrixClient; + let roomProps: RoomEchoChamber; + + const renderTab = (): RenderResult => { + return render( { }} />); + }; + + beforeEach(() => { + stubClient(); + cli = MatrixClientPeg.get(); + const room = mkStubRoom(roomId, "test room", cli); + roomProps = EchoChamber.forRoom(room); + + NotificationSettingsTab.contextType = React.createContext(cli); + }); + + it("should prevent »Settings« link click from bubbling up to radio buttons", async () => { + const tab = renderTab(); + + // settings link of mentions_only volume + const settingsLink = tab.container.querySelector( + "label.mx_NotificationSettingsTab_mentionsKeywordsEntry div.mx_AccessibleButton"); + if (!settingsLink) throw new Error("settings link does not exist."); + + await userEvent.click(settingsLink); + + expect(roomProps.notificationVolume).not.toBe("mentions_only"); + }); +});