From 6596877630fb115ffe19bc7e39b37cb6078ede8b Mon Sep 17 00:00:00 2001 From: Florian Duros Date: Mon, 29 Apr 2024 15:39:13 +0200 Subject: [PATCH 1/4] Update reusable elements --- .../views/elements/CopyableText.tsx | 10 ++++++---- src/components/views/elements/ImageView.tsx | 20 ++++++++++++------- src/components/views/elements/SSOButtons.tsx | 5 ++--- .../views/elements/ToggleSwitch.tsx | 11 ++++++---- 4 files changed, 28 insertions(+), 18 deletions(-) diff --git a/src/components/views/elements/CopyableText.tsx b/src/components/views/elements/CopyableText.tsx index 7e92b395641..147e585aba1 100644 --- a/src/components/views/elements/CopyableText.tsx +++ b/src/components/views/elements/CopyableText.tsx @@ -20,8 +20,7 @@ import classNames from "classnames"; import { _t } from "../../../languageHandler"; import { copyPlaintext } from "../../../utils/strings"; -import { ButtonEvent } from "./AccessibleButton"; -import AccessibleTooltipButton from "./AccessibleTooltipButton"; +import AccessibleButton, { ButtonEvent } from "./AccessibleButton"; interface IProps { children?: React.ReactNode; @@ -53,11 +52,14 @@ const CopyableText: React.FC = ({ children, getTextToCopy, border = true return (
{children} - { + if (!open) onHideTooltip(); + }} + placement="right" />
); diff --git a/src/components/views/elements/ImageView.tsx b/src/components/views/elements/ImageView.tsx index 6f5815e95a1..c57dd0cfa9d 100644 --- a/src/components/views/elements/ImageView.tsx +++ b/src/components/views/elements/ImageView.tsx @@ -21,7 +21,6 @@ import FocusLock from "react-focus-lock"; import { MatrixEvent } from "matrix-js-sdk/src/matrix"; import { _t } from "../../../languageHandler"; -import AccessibleTooltipButton from "./AccessibleTooltipButton"; import MemberAvatar from "../avatars/MemberAvatar"; import { ContextMenuTooltipButton } from "../../../accessibility/context_menu/ContextMenuTooltipButton"; import MessageContextMenu from "../context_menus/MessageContextMenu"; @@ -38,6 +37,7 @@ import { ViewRoomPayload } from "../../../dispatcher/payloads/ViewRoomPayload"; import { KeyBindingAction } from "../../../accessibility/KeyboardShortcuts"; import { getKeyBindingsManager } from "../../../KeyBindingsManager"; import { presentableTextForFile } from "../../../utils/FileUtils"; +import AccessibleButton from "./AccessibleButton"; // Max scale to keep gaps around the image const MAX_SCALE = 0.95; @@ -513,17 +513,19 @@ export default class ImageView extends React.Component { } const zoomOutButton = ( - ); const zoomInButton = ( - ); @@ -553,26 +555,30 @@ export default class ImageView extends React.Component {
{zoomOutButton} {zoomInButton} - - - {contextMenuButton} - {this.renderContextMenu()}
diff --git a/src/components/views/elements/SSOButtons.tsx b/src/components/views/elements/SSOButtons.tsx index 829ffaf3c56..6f08894fed4 100644 --- a/src/components/views/elements/SSOButtons.tsx +++ b/src/components/views/elements/SSOButtons.tsx @@ -30,7 +30,6 @@ import { Signup } from "@matrix-org/analytics-events/types/typescript/Signup"; import PlatformPeg from "../../../PlatformPeg"; import AccessibleButton from "./AccessibleButton"; import { _t } from "../../../languageHandler"; -import AccessibleTooltipButton from "./AccessibleTooltipButton"; import { mediaFromMxc } from "../../../customisations/Media"; import { PosthogAnalytics } from "../../../PosthogAnalytics"; @@ -131,9 +130,9 @@ const SSOButton: React.FC = ({ if (mini) { // TODO fallback icon return ( - + {icon} - + ); } diff --git a/src/components/views/elements/ToggleSwitch.tsx b/src/components/views/elements/ToggleSwitch.tsx index 588374d17b6..86e897b7a57 100644 --- a/src/components/views/elements/ToggleSwitch.tsx +++ b/src/components/views/elements/ToggleSwitch.tsx @@ -18,7 +18,7 @@ limitations under the License. import React from "react"; import classNames from "classnames"; -import AccessibleTooltipButton from "./AccessibleTooltipButton"; +import AccessibleButton from "./AccessibleButton"; interface IProps { // Whether or not this toggle is in the 'on' position. @@ -41,7 +41,7 @@ interface IProps { } // Controlled Toggle Switch element, written with Accessibility in mind -export default ({ checked, disabled = false, onChange, ...props }: IProps): JSX.Element => { +export default ({ checked, disabled = false, onChange, title, tooltip, ...props }: IProps): JSX.Element => { const _onClick = (): void => { if (disabled) return; onChange(!checked); @@ -54,15 +54,18 @@ export default ({ checked, disabled = false, onChange, ...props }: IProps): JSX. }); return ( -
- + ); }; From b16b7172513e6c9c0061507c56342654b8a976c4 Mon Sep 17 00:00:00 2001 From: Florian Duros Date: Mon, 29 Apr 2024 15:58:43 +0200 Subject: [PATCH 2/4] Update tests --- .../BeaconListItem-test.tsx.snap | 1 + .../__snapshots__/DialogSidebar-test.tsx.snap | 1 + .../ShareLatestLocation-test.tsx.snap | 1 + .../DevtoolsDialog-test.tsx.snap | 1 + .../AdvancedRoomSettingsTab-test.tsx.snap | 1 + .../tabs/user/LabsUserSettingsTab-test.tsx | 31 +++++++++++-------- .../PreferencesUserSettingsTab-test.tsx.snap | 1 + 7 files changed, 24 insertions(+), 13 deletions(-) diff --git a/test/components/views/beacon/__snapshots__/BeaconListItem-test.tsx.snap b/test/components/views/beacon/__snapshots__/BeaconListItem-test.tsx.snap index 1d7a958672a..f3f1eceb5a4 100644 --- a/test/components/views/beacon/__snapshots__/BeaconListItem-test.tsx.snap +++ b/test/components/views/beacon/__snapshots__/BeaconListItem-test.tsx.snap @@ -48,6 +48,7 @@ exports[` when a beacon is live and has locations renders beac
diff --git a/test/components/views/beacon/__snapshots__/DialogSidebar-test.tsx.snap b/test/components/views/beacon/__snapshots__/DialogSidebar-test.tsx.snap index 5ed76727c93..5946edd573b 100644 --- a/test/components/views/beacon/__snapshots__/DialogSidebar-test.tsx.snap +++ b/test/components/views/beacon/__snapshots__/DialogSidebar-test.tsx.snap @@ -82,6 +82,7 @@ exports[` renders sidebar correctly with beacons 1`] = `
diff --git a/test/components/views/beacon/__snapshots__/ShareLatestLocation-test.tsx.snap b/test/components/views/beacon/__snapshots__/ShareLatestLocation-test.tsx.snap index 068e4b8ca9b..edebf1b0ebd 100644 --- a/test/components/views/beacon/__snapshots__/ShareLatestLocation-test.tsx.snap +++ b/test/components/views/beacon/__snapshots__/ShareLatestLocation-test.tsx.snap @@ -19,6 +19,7 @@ exports[` renders share buttons when there is a location
diff --git a/test/components/views/dialogs/__snapshots__/DevtoolsDialog-test.tsx.snap b/test/components/views/dialogs/__snapshots__/DevtoolsDialog-test.tsx.snap index 20b79a2ccbf..90198f32e86 100644 --- a/test/components/views/dialogs/__snapshots__/DevtoolsDialog-test.tsx.snap +++ b/test/components/views/dialogs/__snapshots__/DevtoolsDialog-test.tsx.snap @@ -41,6 +41,7 @@ exports[`DevtoolsDialog renders the devtools dialog 1`] = `
diff --git a/test/components/views/settings/tabs/room/__snapshots__/AdvancedRoomSettingsTab-test.tsx.snap b/test/components/views/settings/tabs/room/__snapshots__/AdvancedRoomSettingsTab-test.tsx.snap index 17390e6b00c..9656af6fd5e 100644 --- a/test/components/views/settings/tabs/room/__snapshots__/AdvancedRoomSettingsTab-test.tsx.snap +++ b/test/components/views/settings/tabs/room/__snapshots__/AdvancedRoomSettingsTab-test.tsx.snap @@ -45,6 +45,7 @@ exports[`AdvancedRoomSettingsTab should render as expected 1`] = `
diff --git a/test/components/views/settings/tabs/user/LabsUserSettingsTab-test.tsx b/test/components/views/settings/tabs/user/LabsUserSettingsTab-test.tsx index fd9a92a2253..53c26963188 100644 --- a/test/components/views/settings/tabs/user/LabsUserSettingsTab-test.tsx +++ b/test/components/views/settings/tabs/user/LabsUserSettingsTab-test.tsx @@ -15,7 +15,8 @@ limitations under the License. */ import React from "react"; -import { fireEvent, render, screen } from "@testing-library/react"; +import { render, screen, waitFor } from "@testing-library/react"; +import userEvent from "@testing-library/user-event"; import LabsUserSettingsTab from "../../../../../../src/components/views/settings/tabs/user/LabsUserSettingsTab"; import SettingsStore from "../../../../../../src/settings/SettingsStore"; @@ -113,12 +114,14 @@ describe("", () => { expect(toggle.getAttribute("aria-checked")).toEqual("true"); // Hover over the toggle to make it show the tooltip - fireEvent.mouseOver(toggle); - - const tooltip = rendered.getByRole("tooltip"); - expect(tooltip).toHaveTextContent( - "Once enabled, Rust cryptography can only be disabled by logging out and in again", - ); + await userEvent.hover(toggle); + + await waitFor(() => { + const tooltip = screen.getByRole("tooltip"); + expect(tooltip).toHaveTextContent( + "Once enabled, Rust cryptography can only be disabled by logging out and in again", + ); + }); }); }); @@ -150,12 +153,14 @@ describe("", () => { expect(toggle.getAttribute("aria-checked")).toEqual("true"); // Hover over the toggle to make it show the tooltip - fireEvent.mouseOver(toggle); - - const tooltip = rendered.getByRole("tooltip"); - expect(tooltip).toHaveTextContent( - "Rust cryptography cannot be disabled on this deployment of BrandedClient", - ); + await userEvent.hover(toggle); + + await waitFor(() => { + const tooltip = rendered.getByRole("tooltip"); + expect(tooltip).toHaveTextContent( + "Rust cryptography cannot be disabled on this deployment of BrandedClient", + ); + }); }); }); }); diff --git a/test/components/views/settings/tabs/user/__snapshots__/PreferencesUserSettingsTab-test.tsx.snap b/test/components/views/settings/tabs/user/__snapshots__/PreferencesUserSettingsTab-test.tsx.snap index 45e1999af68..244746a9095 100644 --- a/test/components/views/settings/tabs/user/__snapshots__/PreferencesUserSettingsTab-test.tsx.snap +++ b/test/components/views/settings/tabs/user/__snapshots__/PreferencesUserSettingsTab-test.tsx.snap @@ -289,6 +289,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = ` aria-disabled="true" aria-label="Send read receipts" class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on" + data-state="closed" id="mx_SettingsFlag_GQvdMWe954DV" role="switch" tabindex="0" From 0a6e875206bd1fbbdeecbccfd9b2a59a95c4f4d0 Mon Sep 17 00:00:00 2001 From: Florian Duros Date: Mon, 29 Apr 2024 16:45:12 +0200 Subject: [PATCH 3/4] Make right as default tooltip placement --- src/components/views/elements/AccessibleButton.tsx | 2 +- src/components/views/elements/CopyableText.tsx | 1 - src/components/views/elements/ImageView.tsx | 6 ------ src/components/views/elements/SSOButtons.tsx | 2 +- src/components/views/elements/ToggleSwitch.tsx | 1 - 5 files changed, 2 insertions(+), 10 deletions(-) diff --git a/src/components/views/elements/AccessibleButton.tsx b/src/components/views/elements/AccessibleButton.tsx index 05b844284a5..055818f742d 100644 --- a/src/components/views/elements/AccessibleButton.tsx +++ b/src/components/views/elements/AccessibleButton.tsx @@ -138,7 +138,7 @@ const AccessibleButton = forwardRef(function , diff --git a/src/components/views/elements/CopyableText.tsx b/src/components/views/elements/CopyableText.tsx index 147e585aba1..5d9946d2c1b 100644 --- a/src/components/views/elements/CopyableText.tsx +++ b/src/components/views/elements/CopyableText.tsx @@ -59,7 +59,6 @@ const CopyableText: React.FC = ({ children, getTextToCopy, border = true onTooltipOpenChange={(open) => { if (!open) onHideTooltip(); }} - placement="right" />
); diff --git a/src/components/views/elements/ImageView.tsx b/src/components/views/elements/ImageView.tsx index c57dd0cfa9d..ddc2769c48d 100644 --- a/src/components/views/elements/ImageView.tsx +++ b/src/components/views/elements/ImageView.tsx @@ -517,7 +517,6 @@ export default class ImageView extends React.Component { className="mx_ImageView_button mx_ImageView_button_zoomOut" title={_t("action|zoom_out")} onClick={this.onZoomOutClick} - placement="right" /> ); const zoomInButton = ( @@ -525,7 +524,6 @@ export default class ImageView extends React.Component { className="mx_ImageView_button mx_ImageView_button_zoomIn" title={_t("action|zoom_in")} onClick={this.onZoomInClick} - placement="right" /> ); @@ -559,26 +557,22 @@ export default class ImageView extends React.Component { className="mx_ImageView_button mx_ImageView_button_rotateCCW" title={_t("lightbox|rotate_left")} onClick={this.onRotateCounterClockwiseClick} - placement="right" /> {contextMenuButton} {this.renderContextMenu()}
diff --git a/src/components/views/elements/SSOButtons.tsx b/src/components/views/elements/SSOButtons.tsx index 6f08894fed4..c0647e504f7 100644 --- a/src/components/views/elements/SSOButtons.tsx +++ b/src/components/views/elements/SSOButtons.tsx @@ -130,7 +130,7 @@ const SSOButton: React.FC = ({ if (mini) { // TODO fallback icon return ( - + {icon} ); diff --git a/src/components/views/elements/ToggleSwitch.tsx b/src/components/views/elements/ToggleSwitch.tsx index 86e897b7a57..8e595ff2343 100644 --- a/src/components/views/elements/ToggleSwitch.tsx +++ b/src/components/views/elements/ToggleSwitch.tsx @@ -63,7 +63,6 @@ export default ({ checked, disabled = false, onChange, title, tooltip, ...props aria-checked={checked} aria-disabled={disabled} title={tooltip} - placement="right" >
From 7f3f3d39fe0972b69a74bcabf3c32923c0ccdc6c Mon Sep 17 00:00:00 2001 From: Florian Duros Date: Mon, 29 Apr 2024 17:39:26 +0200 Subject: [PATCH 4/4] Add tests --- .../views/elements/ImageView-test.tsx | 29 ++++++ .../__snapshots__/ImageView-test.tsx.snap | 88 +++++++++++++++++++ 2 files changed, 117 insertions(+) create mode 100644 test/components/views/elements/ImageView-test.tsx create mode 100644 test/components/views/elements/__snapshots__/ImageView-test.tsx.snap diff --git a/test/components/views/elements/ImageView-test.tsx b/test/components/views/elements/ImageView-test.tsx new file mode 100644 index 00000000000..f0475df964c --- /dev/null +++ b/test/components/views/elements/ImageView-test.tsx @@ -0,0 +1,29 @@ +/* + * + * Copyright 2024 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 } from "@testing-library/react"; + +import ImageView from "../../../../src/components/views/elements/ImageView"; + +describe("", () => { + it("renders correctly", () => { + const { container } = render(); + expect(container).toMatchSnapshot(); + }); +}); diff --git a/test/components/views/elements/__snapshots__/ImageView-test.tsx.snap b/test/components/views/elements/__snapshots__/ImageView-test.tsx.snap new file mode 100644 index 00000000000..acd85fb6338 --- /dev/null +++ b/test/components/views/elements/__snapshots__/ImageView-test.tsx.snap @@ -0,0 +1,88 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[` renders correctly 1`] = ` +
+
+