Fix tests

Signed-off-by: Michael Telatynski <[email protected]>

Author: t3chguy

src/components/structures/LeftPanel.tsx

@@ -26,6 +26,7 @@ import { HEADER_HEIGHT } from "../views/rooms/RoomSublist";
 import { Action } from "../../dispatcher/actions";
 import RoomSearch from "./RoomSearch";
 import ResizeNotifier from "../../utils/ResizeNotifier";
+import AccessibleTooltipButton from "../views/elements/AccessibleTooltipButton";
 import SpaceStore from "../../stores/spaces/SpaceStore";
 import { MetaSpace, SpaceKey, UPDATE_SELECTED_SPACE } from "../../stores/spaces";
 import { getKeyBindingsManager } from "../../KeyBindingsManager";
@@ -40,7 +41,7 @@ import RoomBreadcrumbs from "../views/rooms/RoomBreadcrumbs";
 import { KeyBindingAction } from "../../accessibility/KeyboardShortcuts";
 import { shouldShowComponent } from "../../customisations/helpers/UIComponents";
 import { UIComponent } from "../../settings/UIFeature";
-import AccessibleButton, { ButtonEvent } from "../views/elements/AccessibleButton";
+import { ButtonEvent } from "../views/elements/AccessibleButton";
 import PosthogTrackers from "../../PosthogTrackers";
 import PageType from "../../PageTypes";
 import { UserOnboardingButton } from "../views/user-onboarding/UserOnboardingButton";
@@ -332,7 +333,7 @@ export default class LeftPanel extends React.Component<IProps, IState> {
         // to start a new call
         if (LegacyCallHandler.instance.getSupportsPstnProtocol()) {
             dialPadButton = (
-                <AccessibleButton
+                <AccessibleTooltipButton
                     className={classNames("mx_LeftPanel_dialPadButton", {})}
                     onClick={this.onDialPad}
                     title={_t("left_panel|open_dial_pad")}
@@ -343,7 +344,7 @@ export default class LeftPanel extends React.Component<IProps, IState> {
         let rightButton: JSX.Element | undefined;
         if (this.state.activeSpace === MetaSpace.Home && shouldShowComponent(UIComponent.ExploreRooms)) {
             rightButton = (
-                <AccessibleButton
+                <AccessibleTooltipButton
                     className="mx_LeftPanel_exploreButton"
                     onClick={this.onExplore}
                     title={_t("action|explore_rooms")}

src/components/structures/SpaceHierarchy.tsx

@@ -145,7 +145,7 @@ const Tile: React.FC<ITileProps> = ({
     let button: ReactElement;
     if (busy) {
         button = (
-            <AccessibleButton
+            <AccessibleTooltipButton
                 disabled={true}
                 onClick={onJoinClick}
                 kind="primary_outline"
@@ -154,7 +154,7 @@ const Tile: React.FC<ITileProps> = ({
                 title={_t("space|joining_space")}
             >
                 <Spinner w={24} h={24} />
-            </AccessibleButton>
+            </AccessibleTooltipButton>
         );
     } else if (joinedRoom) {
         button = (

src/components/views/dialogs/spotlight/TooltipOption.tsx

@@ -19,7 +19,7 @@ import React, { ComponentProps, ReactNode } from "react";
 
 import { RovingAccessibleTooltipButton } from "../../../../accessibility/roving/RovingAccessibleTooltipButton";
 import { useRovingTabIndex } from "../../../../accessibility/RovingTabIndex";
-import AccessibleButton from "../../elements/AccessibleButton";
+import AccessibleTooltipButton from "../../elements/AccessibleTooltipButton";
 
 interface TooltipOptionProps extends ComponentProps<typeof RovingAccessibleTooltipButton> {
     endAdornment?: ReactNode;
@@ -28,7 +28,7 @@ interface TooltipOptionProps extends ComponentProps<typeof RovingAccessibleToolt
 export const TooltipOption: React.FC<TooltipOptionProps> = ({ inputRef, className, ...props }) => {
     const [onFocus, isActive, ref] = useRovingTabIndex(inputRef);
     return (
-        <AccessibleButton
+        <AccessibleTooltipButton
             {...props}
             className={classNames(className, "mx_SpotlightDialog_option")}
             onFocus={onFocus}

src/components/views/rooms/LegacyRoomHeader.tsx

@@ -32,7 +32,7 @@ import SettingsStore from "../../../settings/SettingsStore";
 import RoomHeaderButtons from "../right_panel/LegacyRoomHeaderButtons";
 import E2EIcon from "./E2EIcon";
 import DecoratedRoomAvatar from "../avatars/DecoratedRoomAvatar";
-import AccessibleButton, { ButtonEvent } from "../elements/AccessibleButton";
+import { ButtonEvent } from "../elements/AccessibleButton";
 import AccessibleTooltipButton from "../elements/AccessibleTooltipButton";
 import RoomTopic from "../elements/RoomTopic";
 import RoomName from "../elements/RoomName";
@@ -654,7 +654,7 @@ export default class RoomHeader extends React.Component<IProps, IState> {
         if (this.props.viewingCall && !isVideoRoom) {
             if (this.props.activeCall === null) {
                 endButtons.push(
-                    <AccessibleButton
+                    <AccessibleTooltipButton
                         className="mx_LegacyRoomHeader_button mx_LegacyRoomHeader_closeButton"
                         onClick={this.onHideCallClick}
                         title={_t("room|header|close_call_button")}

src/components/views/settings/devices/DeviceExpandDetailsButton.tsx

@@ -19,11 +19,11 @@ import React, { ComponentProps } from "react";
 
 import { Icon as CaretIcon } from "../../../../../res/img/feather-customised/dropdown-arrow.svg";
 import { _t } from "../../../../languageHandler";
-import AccessibleButton from "../../elements/AccessibleButton";
+import AccessibleTooltipButton from "../../elements/AccessibleTooltipButton";
 
 type Props<T extends keyof JSX.IntrinsicElements> = Omit<
-    ComponentProps<typeof AccessibleButton<T>>,
-    "title" | "kind" | "className" | "onClick"
+    ComponentProps<typeof AccessibleTooltipButton<T>>,
+    "aria-label" | "title" | "kind" | "className" | "onClick"
 > & {
     isExpanded: boolean;
     onClick: () => void;
@@ -36,8 +36,9 @@ export const DeviceExpandDetailsButton = <T extends keyof JSX.IntrinsicElements>
 }: Props<T>): JSX.Element => {
     const label = isExpanded ? _t("settings|sessions|hide_details") : _t("settings|sessions|show_details");
     return (
-        <AccessibleButton
+        <AccessibleTooltipButton
             {...rest}
+            aria-label={label}
             title={label}
             kind="icon"
             className={classNames("mx_DeviceExpandDetailsButton", {
@@ -46,6 +47,6 @@ export const DeviceExpandDetailsButton = <T extends keyof JSX.IntrinsicElements>
             onClick={onClick}
         >
             <CaretIcon className="mx_DeviceExpandDetailsButton_icon" />
-        </AccessibleButton>
+        </AccessibleTooltipButton>
     );
 };

src/i18n/strings/en_EN.json

@@ -3203,7 +3203,6 @@
         "download_action_decrypting": "Decrypting",
         "download_action_downloading": "Downloading",
         "edits": {
-            "tooltip_label": "Edited at %(date)s. Click to view edits.",
             "tooltip_sub": "Click to view edits",
             "tooltip_title": "Edited at %(date)s"
         },

src/toasts/IncomingCallToast.tsx

@@ -28,13 +28,14 @@ import defaultDispatcher from "../dispatcher/dispatcher";
 import { ViewRoomPayload } from "../dispatcher/payloads/ViewRoomPayload";
 import { Action } from "../dispatcher/actions";
 import ToastStore from "../stores/ToastStore";
+import AccessibleTooltipButton from "../components/views/elements/AccessibleTooltipButton";
 import {
     LiveContentSummary,
     LiveContentSummaryWithCall,
     LiveContentType,
 } from "../components/views/rooms/LiveContentSummary";
 import { useCall, useJoinCallButtonDisabledTooltip } from "../hooks/useCall";
-import AccessibleButton, { ButtonEvent } from "../components/views/elements/AccessibleButton";
+import { ButtonEvent } from "../components/views/elements/AccessibleButton";
 import { useDispatcher } from "../hooks/useDispatcher";
 import { ActionPayload } from "../dispatcher/payloads";
 import { Call } from "../models/Call";
@@ -53,15 +54,15 @@ function JoinCallButtonWithCall({ onClick, call }: JoinCallButtonWithCallProps):
     const disabledTooltip = useJoinCallButtonDisabledTooltip(call);
 
     return (
-        <AccessibleButton
+        <AccessibleTooltipButton
             className="mx_IncomingCallToast_joinButton"
             onClick={onClick}
             disabled={disabledTooltip !== null}
-            title={disabledTooltip ?? undefined}
+            tooltip={disabledTooltip ?? undefined}
             kind="primary"
         >
             {_t("action|join")}
-        </AccessibleButton>
+        </AccessibleTooltipButton>
     );
 }
 
@@ -177,12 +178,16 @@ export function IncomingCallToast({ notifyEvent }: Props): JSX.Element {
                 {call ? (
                     <JoinCallButtonWithCall onClick={onJoinClick} call={call} />
                 ) : (
-                    <AccessibleButton className="mx_IncomingCallToast_joinButton" onClick={onJoinClick} kind="primary">
+                    <AccessibleTooltipButton
+                        className="mx_IncomingCallToast_joinButton"
+                        onClick={onJoinClick}
+                        kind="primary"
+                    >
                         {_t("action|join")}
-                    </AccessibleButton>
+                    </AccessibleTooltipButton>
                 )}
             </div>
-            <AccessibleButton
+            <AccessibleTooltipButton
                 className="mx_IncomingCallToast_closeButton"
                 onClick={onCloseClick}
                 title={_t("action|close")}

test/components/structures/LeftPanel-test.tsx

@@ -16,9 +16,9 @@ limitations under the License.
 */
 
 import React from "react";
-import { render, RenderResult, screen } from "@testing-library/react";
 import { mocked } from "jest-mock";
 
+import { render, RenderResult, screen } from "../..";
 import LeftPanel from "../../../src/components/structures/LeftPanel";
 import PageType from "../../../src/PageTypes";
 import ResizeNotifier from "../../../src/utils/ResizeNotifier";

test/components/structures/UserMenu-test.tsx

@@ -15,9 +15,9 @@ limitations under the License.
 */
 
 import React from "react";
-import { act, render, RenderResult } from "@testing-library/react";
 import { MatrixClient, MatrixEvent } from "matrix-js-sdk/src/matrix";
 
+import { act, render, RenderResult } from "../..";
 import UnwrappedUserMenu from "../../../src/components/structures/UserMenu";
 import { stubClient, wrapInSdkContext } from "../../test-utils";
 import {

test/components/structures/__snapshots__/RoomView-test.tsx.snap

@@ -462,20 +462,20 @@ exports[`RoomView for a local room in state NEW should match the snapshot 1`] =
               class="mx_MessageComposer_actions"
             >
               <div
-                aria-label="Emoji"
                 class="mx_AccessibleButton mx_EmojiButton mx_MessageComposer_button mx_EmojiButton_icon"
+                data-state="closed"
                 role="button"
                 tabindex="0"
               />
               <div
-                aria-label="Attachment"
                 class="mx_AccessibleButton mx_MessageComposer_button mx_MessageComposer_upload"
+                data-state="closed"
                 role="button"
                 tabindex="0"
               />
               <div
-                aria-label="More options"
                 class="mx_AccessibleButton mx_MessageComposer_button mx_MessageComposer_buttonMenu"
+                data-state="closed"
                 role="button"
                 tabindex="0"
               />
@@ -709,20 +709,20 @@ exports[`RoomView for a local room in state NEW that is encrypted should match t
               class="mx_MessageComposer_actions"
             >
               <div
-                aria-label="Emoji"
                 class="mx_AccessibleButton mx_EmojiButton mx_MessageComposer_button mx_EmojiButton_icon"
+                data-state="closed"
                 role="button"
                 tabindex="0"
               />
               <div
-                aria-label="Attachment"
                 class="mx_AccessibleButton mx_MessageComposer_button mx_MessageComposer_upload"
+                data-state="closed"
                 role="button"
                 tabindex="0"
               />
               <div
-                aria-label="More options"
                 class="mx_AccessibleButton mx_MessageComposer_button mx_MessageComposer_buttonMenu"
+                data-state="closed"
                 role="button"
                 tabindex="0"
               />

test/components/structures/__snapshots__/UserMenu-test.tsx.snap

@@ -10,9 +10,9 @@ exports[`<UserMenu> when rendered should render as expected 1`] = `
       aria-haspopup="true"
       aria-label="User menu"
       class="mx_AccessibleButton mx_UserMenu_contextMenuButton"
+      data-state="closed"
       role="button"
       tabindex="0"
-      title="User menu"
     >
       <div
         class="mx_UserMenu_userAvatar"

test/components/views/audio_messages/RecordingPlayback-test.tsx

@@ -17,8 +17,8 @@ limitations under the License.
 import React from "react";
 import { mocked } from "jest-mock";
 import { logger } from "matrix-js-sdk/src/logger";
-import { fireEvent, render, RenderResult } from "@testing-library/react";
 
+import { fireEvent, render, RenderResult } from "../../..";
 import RecordingPlayback, { PlaybackLayout } from "../../../../src/components/views/audio_messages/RecordingPlayback";
 import { Playback } from "../../../../src/audio/Playback";
 import RoomContext, { TimelineRenderingType } from "../../../../src/contexts/RoomContext";

test/components/views/location/LocationViewDialog-test.tsx

@@ -15,9 +15,9 @@ limitations under the License.
 */
 
 import React from "react";
-import { render, RenderResult } from "@testing-library/react";
 import { RoomMember, LocationAssetType } from "matrix-js-sdk/src/matrix";
 
+import { render, RenderResult } from "../../..";
 import LocationViewDialog from "../../../../src/components/views/location/LocationViewDialog";
 import { TILE_SERVER_WK_KEY } from "../../../../src/utils/WellKnownUtils";
 import { getMockClientWithEventEmitter, makeLocationEvent } from "../../../test-utils";

test/components/views/location/ZoomButtons-test.tsx

@@ -16,8 +16,8 @@ limitations under the License.
 
 import React from "react";
 import * as maplibregl from "maplibre-gl";
-import { render, screen } from "@testing-library/react";
 
+import { render, screen } from "../../..";
 import ZoomButtons from "../../../../src/components/views/location/ZoomButtons";
 
 describe("<ZoomButtons />", () => {

test/components/views/location/__snapshots__/LocationViewDialog-test.tsx.snap

@@ -24,21 +24,21 @@ exports[`<LocationViewDialog /> renders map correctly 1`] = `
   >
     <div
       class="mx_AccessibleButton mx_ZoomButtons_button"
+      data-state="closed"
       data-testid="map-zoom-in-button"
       role="button"
       tabindex="0"
-      title="Zoom in"
     >
       <div
         class="mx_ZoomButtons_icon"
       />
     </div>
     <div
       class="mx_AccessibleButton mx_ZoomButtons_button"
+      data-state="closed"
       data-testid="map-zoom-out-button"
       role="button"
       tabindex="0"
-      title="Zoom out"
     >
       <div
         class="mx_ZoomButtons_icon"

test/components/views/location/__snapshots__/ZoomButtons-test.tsx.snap

@@ -7,21 +7,21 @@ exports[`<ZoomButtons /> renders buttons 1`] = `
   >
     <div
       class="mx_AccessibleButton mx_ZoomButtons_button"
+      data-state="closed"
       data-testid="map-zoom-in-button"
       role="button"
       tabindex="0"
-      title="Zoom in"
     >
       <div
         class="mx_ZoomButtons_icon"
       />
     </div>
     <div
       class="mx_AccessibleButton mx_ZoomButtons_button"
+      data-state="closed"
       data-testid="map-zoom-out-button"
       role="button"
       tabindex="0"
-      title="Zoom out"
     >
       <div
         class="mx_ZoomButtons_icon"

test/components/views/right_panel/UserInfo-test.tsx

@@ -15,7 +15,7 @@ limitations under the License.
 */
 
 import React from "react";
-import { fireEvent, render, screen, waitFor, cleanup, act, within } from "@testing-library/react";
+import { fireEvent, render, screen, waitFor, cleanup, act } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { Mocked, mocked } from "jest-mock";
 import {
@@ -288,7 +288,8 @@ describe("<UserInfo />", () => {
 
         it("renders close button correctly when encryption panel with a pending verification request", () => {
             renderComponent({ phase: RightPanelPhases.EncryptionPanel, verificationRequest });
-            expect(screen.getByTestId("base-card-close-button")).toHaveAttribute("title", "Cancel");
+            screen.getByTestId("base-card-close-button").focus();
+            expect(screen.getByRole("tooltip")).toHaveTextContent("Cancel");
         });
     });
 
@@ -355,11 +356,8 @@ describe("<UserInfo />", () => {
             // click it
             await userEvent.click(devicesButton);
 
-            // there should now be a button with the device id ...
-            const deviceButton = screen.getByRole("button", { description: "d1" });
-
-            // ... which should contain the device name
-            expect(within(deviceButton).getByText("my device")).toBeInTheDocument();
+            // there should now be a button with the device id which should contain the device name
+            expect(screen.getByRole("button", { name: "my device" })).toBeInTheDocument();
         });
 
         it("renders <BasicUserInfo />", async () => {
@@ -460,7 +458,11 @@ describe("<DeviceItem />", () => {
 
     const renderComponent = (props = {}) => {
         const Wrapper = (wrapperProps = {}) => {
-            return <MatrixClientContext.Provider value={mockClient} {...wrapperProps} />;
+            return (
+                <TooltipProvider>
+                    <MatrixClientContext.Provider value={mockClient} {...wrapperProps} />
+                </TooltipProvider>
+            );
         };
 
         return render(<DeviceItem {...defaultProps} {...props} />, {