mirrors/element-web
1
0
Fork 0
mirror of https://github.com/element-hq/element-web synced 2024-10-22 10:45:48 +03:00
Code Issues Projects Releases Packages Wiki Activity

Upgrade to latest compound-web package (#84)

Browse source 
* Upgrade to latest compound-web package

* Use a custom render function for jest tests

This way we don't need to manually wrap our components with
<TooltipProvider>

* Pin wrap-ansi to fix broken yarn install

* Add playwright helper to find tooltip from element

and use it in the failing test

* Exclude floating-ui divs/spans from axe testing

This is rendered outside .MatrixChat by compound and contains all the
tooltips.

* Wrap outermost components with TooltipProvider

* Remove onChange and use onSelect for toggle

* Fix jest tests and update snapshots

* Use vector-im/matrix-wysiwig

---------

Co-authored-by: Michael Telatynski <7t3chguy@gmail.com>
This commit is contained in:
R Midhun Suresh 2024-10-14 21:41:58 +05:30 committed by GitHub
parent 3bc0439fd2
commit 91e84f7951
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
389 changed files with 1261 additions and 1084 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
.eslintrc.js
View file

@ -51,6 +51,10 @@ module.exports = {
"error",
{
paths: [
{
name: "@testing-library/react",
message: "Please use jest-matrix-react instead",
},
{
name: "matrix-js-sdk",
message: "Please use matrix-js-sdk/src/matrix instead",

1
jest.config.ts
View file

@ -37,6 +37,7 @@ const config: Config = {
coverageReporters: ["text-summary", "lcov"],
testResultsProcessor: "@casualbot/jest-sonar-reporter",
prettierPath: null,
moduleDirectories: ["node_modules", "test/test-utils"],
};
// if we're running under GHA, enable the GHA reporter

6
package.json
View file

@ -68,7 +68,9 @@
"jwt-decode": "4.0.0",
"@floating-ui/react": "0.26.11",
"@radix-ui/react-id": "1.1.0",
"caniuse-lite": "1.0.30001655"
"caniuse-lite": "1.0.30001655",
"wrap-ansi-cjs": "npm:wrap-ansi@^7.0.0",
"wrap-ansi": "npm:wrap-ansi@^7.0.0"
},
"dependencies": {
"@babel/runtime": "^7.12.5",
@ -80,7 +82,7 @@
"@sentry/browser": "^8.0.0",
"@testing-library/react-hooks": "^8.0.1",
"@vector-im/compound-design-tokens": "^1.8.0",
"@vector-im/compound-web": "^5.5.0",
"@vector-im/compound-web": "^6.3.1",
"@zxcvbn-ts/core": "^3.0.4",
"@zxcvbn-ts/language-common": "^3.0.4",
"@zxcvbn-ts/language-en": "^3.0.2",

18
playwright/e2e/crypto/event-shields.spec.ts
View file

@ -70,7 +70,9 @@ test.describe("Cryptography", function () {
const lastE2eIcon = last.locator(".mx_EventTile_e2eIcon");
await expect(lastE2eIcon).toHaveClass(/mx_EventTile_e2eIcon_decryption_failure/);
await lastE2eIcon.focus();
await expect(page.getByRole("tooltip")).toContainText("This message could not be decrypted");
await expect(await app.getTooltipForElement(lastE2eIcon)).toContainText(
"This message could not be decrypted",
);
/* Should show a red padlock for an unencrypted message in an e2e room */
await bob.evaluate(
@ -90,7 +92,7 @@ test.describe("Cryptography", function () {
await expect(last).toContainText("test unencrypted");
await expect(lastE2eIcon).toHaveClass(/mx_EventTile_e2eIcon_warning/);
await lastE2eIcon.focus();
await expect(page.getByRole("tooltip")).toContainText("Not encrypted");
await expect(await app.getTooltipForElement(lastE2eIcon)).toContainText("Not encrypted");
/* Should show no padlock for an unverified user */
// bob sends a valid event
@ -123,7 +125,9 @@ test.describe("Cryptography", function () {
await expect(lastTile).toContainText("test encrypted from unverified");
await expect(lastTileE2eIcon).toHaveClass(/mx_EventTile_e2eIcon_warning/);
await lastTileE2eIcon.focus();
await expect(page.getByRole("tooltip")).toContainText("Encrypted by a device not verified by its owner.");
await expect(await app.getTooltipForElement(lastTileE2eIcon)).toContainText(
"Encrypted by a device not verified by its owner.",
);
/* In legacy crypto: should show a grey padlock for a message from a deleted device.
* In rust crypto: should show a red padlock for a message from an unverified device.
@ -159,7 +163,7 @@ test.describe("Cryptography", function () {
await expect(last).toContainText("test encrypted from unverified");
await expect(lastE2eIcon).toHaveClass(/mx_EventTile_e2eIcon_warning/);
await lastE2eIcon.focus();
await expect(page.getByRole("tooltip")).toContainText(
await expect(await app.getTooltipForElement(lastE2eIcon)).toContainText(
workerInfo.project.name === "Legacy Crypto"
? "Encrypted by an unknown or deleted device."
: "Encrypted by a device not verified by its owner.",
@ -212,7 +216,7 @@ test.describe("Cryptography", function () {
// The key is coming from backup, so it is not anymore possible to establish if the claimed device
// creator of this key is authentic. The tooltip should be "The authenticity of this encrypted message can't be guaranteed on this device."
// It is not "Encrypted by an unknown or deleted device." even if the claimed device is actually deleted.
await expect(page.getByRole("tooltip")).toContainText(
await expect(await app.getTooltipForElement(lastTileE2eIcon)).toContainText(
"The authenticity of this encrypted message can't be guaranteed on this device.",
);
});
@ -296,7 +300,9 @@ test.describe("Cryptography", function () {
const lastE2eIcon = last.locator(".mx_EventTile_e2eIcon");
await expect(lastE2eIcon).toHaveClass(/mx_EventTile_e2eIcon_warning/);
await lastE2eIcon.focus();
await expect(page.getByRole("tooltip")).toContainText("Encrypted by a device not verified by its owner.");
await expect(await app.getTooltipForElement(lastE2eIcon)).toContainText(
"Encrypted by a device not verified by its owner.",
);
const penultimate = page.locator(".mx_EventTile").filter({ hasText: "test encrypted from verified" });
await expect(penultimate.locator(".mx_EventTile_e2eIcon")).not.toBeVisible();

2
playwright/element-web-test.ts
View file

@ -224,7 +224,7 @@ export const test = base.extend<{
},
axe: async ({ page }, use) => {
await use(new AxeBuilder({ page }));
await use(new AxeBuilder({ page }).exclude("[id^='floating-ui-']"));
},
checkA11y: async ({ axe }, use, testInfo) =>
use(async () => {

18
playwright/pages/ElementAppPage.ts
View file

@ -172,4 +172,22 @@ export class ElementAppPage {
await this.page.getByRole("button", { name: "Room info" }).first().click();
return this.page.locator(".mx_RightPanel");
}
/**
* Get a locator for the tooltip associated with an element
* @param e The element with the tooltip
* @returns Locator to the tooltip
*/
public async getTooltipForElement(e: Locator): Promise<Locator> {
const [labelledById, describedById] = await Promise.all([
e.getAttribute("aria-labelledby"),
e.getAttribute("aria-describedby"),
]);
if (!labelledById && !describedById) {
throw new Error(
"Element has no aria-labelledby or aria-describedy attributes! The tooltip should have added either one of these.",
);
}
return this.page.locator(`#${labelledById ?? describedById}`);
}
}

46
src/Modal.tsx
View file

@ -12,7 +12,7 @@ import ReactDOM from "react-dom";
import classNames from "classnames";
import { IDeferred, defer, sleep } from "matrix-js-sdk/src/utils";
import { TypedEventEmitter } from "matrix-js-sdk/src/matrix";
import { Glass } from "@vector-im/compound-web";
import { Glass, TooltipProvider } from "@vector-im/compound-web";
import dis, { defaultDispatcher } from "./dispatcher/dispatcher";
import AsyncWrapper from "./AsyncWrapper";
@ -416,16 +416,18 @@ export class ModalManager extends TypedEventEmitter<ModalManagerEvent, HandlerMa
const classes = classNames("mx_Dialog_wrapper mx_Dialog_staticWrapper", this.staticModal.className);
const staticDialog = (
<div className={classes}>
<Glass className="mx_Dialog_border">
<div className="mx_Dialog">{this.staticModal.elem}</div>
</Glass>
<div
data-testid="dialog-background"
className="mx_Dialog_background mx_Dialog_staticBackground"
onClick={this.onBackgroundClick}
/>
</div>
<TooltipProvider>
<div className={classes}>
<Glass className="mx_Dialog_border">
<div className="mx_Dialog">{this.staticModal.elem}</div>
</Glass>
<div
data-testid="dialog-background"
className="mx_Dialog_background mx_Dialog_staticBackground"
onClick={this.onBackgroundClick}
/>
</div>
</TooltipProvider>
);
ReactDOM.render(staticDialog, ModalManager.getOrCreateStaticContainer());
@ -441,16 +443,18 @@ export class ModalManager extends TypedEventEmitter<ModalManagerEvent, HandlerMa
});
const dialog = (
<div className={classes}>
<Glass className="mx_Dialog_border">
<div className="mx_Dialog">{modal.elem}</div>
</Glass>
<div
data-testid="dialog-background"
className="mx_Dialog_background"
onClick={this.onBackgroundClick}
/>
</div>
<TooltipProvider>
<div className={classes}>
<Glass className="mx_Dialog_border">
<div className="mx_Dialog">{modal.elem}</div>
</Glass>
<div
data-testid="dialog-background"
className="mx_Dialog_background"
onClick={this.onBackgroundClick}
/>
</div>
</TooltipProvider>
);
setTimeout(() => ReactDOM.render(dialog, ModalManager.getOrCreateContainer()), 0);

21
src/components/structures/ContextMenu.tsx
View file

@ -12,6 +12,7 @@ import React, { CSSProperties, RefObject, SyntheticEvent, useRef, useState } fro
import ReactDOM from "react-dom";
import classNames from "classnames";
import FocusLock from "react-focus-lock";
import { TooltipProvider } from "@vector-im/compound-web";
import { Writeable } from "../../@types/common";
import UIStore from "../../stores/UIStore";
@ -621,15 +622,17 @@ export function createMenu(
};
const menu = (
<ContextMenu
{...props}
mountAsChild={true}
hasBackground={false}
onFinished={onFinished} // eslint-disable-line react/jsx-no-bind
windowResize={onFinished} // eslint-disable-line react/jsx-no-bind
>
<ElementClass {...props} onFinished={onFinished} />
</ContextMenu>
<TooltipProvider>
<ContextMenu
{...props}
mountAsChild={true}
hasBackground={false}
onFinished={onFinished} // eslint-disable-line react/jsx-no-bind
windowResize={onFinished} // eslint-disable-line react/jsx-no-bind
>
<ElementClass {...props} onFinished={onFinished} />
</ContextMenu>
</TooltipProvider>
);
ReactDOM.render(menu, getOrCreateContainer());

5
src/components/structures/MatrixChat.tsx
View file

@ -24,6 +24,7 @@ import { logger } from "matrix-js-sdk/src/logger";
import { throttle } from "lodash";
import { CryptoEvent } from "matrix-js-sdk/src/crypto";
import { KeyBackupInfo } from "matrix-js-sdk/src/crypto-api";
import { TooltipProvider } from "@vector-im/compound-web";
// what-input helps improve keyboard accessibility
import "what-input";
@ -2181,7 +2182,9 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
return (
<ErrorBoundary>
<SDKContext.Provider value={this.stores}>{view}</SDKContext.Provider>
<SDKContext.Provider value={this.stores}>
<TooltipProvider>{view}</TooltipProvider>
</SDKContext.Provider>
</ErrorBoundary>
);
}

2
src/components/structures/ThreadPanel.tsx
View file

@ -130,7 +130,7 @@ export const ThreadPanelHeader: React.FC<{
return (
<div className="mx_BaseCard_header_title">
<Tooltip label={_t("threads|mark_all_read")}>
<IconButton onClick={onMarkAllThreadsReadClick} aria-label={_t("threads|mark_all_read")} size="24px">
<IconButton onClick={onMarkAllThreadsReadClick} size="24px">
<MarkAllThreadsReadIcon />
</IconButton>
</Tooltip>

2
src/components/structures/auth/forgot-password/CheckEmail.tsx
View file

@ -58,7 +58,7 @@ export const CheckEmail: React.FC<CheckEmailProps> = ({
<input onClick={onSubmitForm} type="button" className="mx_Login_submit" value={_t("action|next")} />
<div className="mx_AuthBody_did-not-receive">
<span className="mx_VerifyEMailDialog_text-light">{_t("auth|check_email_resend_prompt")}</span>
<Tooltip label={_t("auth|check_email_resend_tooltip")} placement="top" open={tooltipVisible}>
<Tooltip description={_t("auth|check_email_resend_tooltip")} placement="top" open={tooltipVisible}>
<AccessibleButton className="mx_AuthBody_resend-button" kind="link" onClick={onResendClickFn}>
<RetryIcon className="mx_Icon mx_Icon_16" />
{_t("action|resend")}

2
src/components/structures/auth/forgot-password/VerifyEmailModal.tsx
View file

@ -57,7 +57,7 @@ export const VerifyEmailModal: React.FC<Props> = ({
<div className="mx_AuthBody_did-not-receive">
<span className="mx_VerifyEMailDialog_text-light">{_t("auth|check_email_resend_prompt")}</span>
<Tooltip label={_t("auth|check_email_resend_tooltip")} placement="top" open={tooltipVisible}>
<Tooltip description={_t("auth|check_email_resend_tooltip")} placement="top" open={tooltipVisible}>
<AccessibleButton className="mx_AuthBody_resend-button" kind="link" onClick={onResendClickFn}>
<RetryIcon className="mx_Icon mx_Icon_16" />
{_t("action|resend")}

2
src/components/views/elements/AccessibleButton.tsx
View file

@ -212,7 +212,7 @@ const AccessibleButton = forwardRef(function <T extends keyof JSX.IntrinsicEleme
if (title) {
return (
<Tooltip
label={title}
description={title}
caption={caption}
isTriggerInteractive={true}
placement={placement}

2
src/components/views/elements/InfoTooltip.tsx
View file

@ -35,7 +35,7 @@ export default class InfoTooltip extends React.PureComponent<TooltipProps> {
// Tooltip are forced on the right for a more natural feel to them on info icons
return (
<Tooltip label={tooltip || title} placement="right">
<Tooltip description={tooltip || title} placement="right">
<div className={classNames("mx_InfoTooltip", className)} tabIndex={this.props.tabIndex ?? 0}>
<span className={classNames("mx_InfoTooltip_icon", iconClassName)} aria-label={title} />
{children}

9
src/components/views/elements/PersistedElement.tsx
View file

@ -8,6 +8,7 @@ Please see LICENSE files in the repository root for full details.
import React, { MutableRefObject, ReactNode } from "react";
import ReactDOM from "react-dom";
import { isNullOrUndefined } from "matrix-js-sdk/src/utils";
import { TooltipProvider } from "@vector-im/compound-web";
import dis from "../../../dispatcher/dispatcher";
import MatrixClientContext from "../../../contexts/MatrixClientContext";
@ -167,9 +168,11 @@ export default class PersistedElement extends React.Component<IProps> {
private renderApp(): void {
const content = (
<MatrixClientContext.Provider value={MatrixClientPeg.safeGet()}>
<div ref={this.collectChild} style={this.props.style}>
{this.props.children}
</div>
<TooltipProvider>
<div ref={this.collectChild} style={this.props.style}>
{this.props.children}
</div>
</TooltipProvider>
</MatrixClientContext.Provider>
);

2
src/components/views/elements/Pill.tsx
View file

@ -141,7 +141,7 @@ export const Pill: React.FC<PillProps> = ({ type: propType, url, inMessage, room
<bdi>
<MatrixClientContext.Provider value={MatrixClientPeg.safeGet()}>
<Tooltip
label={resourceId ?? ""}
description={resourceId ?? ""}
open={resourceId ? undefined : false}
placement="right"
isTriggerInteractive={isAnchor}

2
src/components/views/elements/RoomTopic.tsx
View file

@ -111,7 +111,7 @@ export default function RoomTopic({ room, className, ...props }: IProps): JSX.El
if (!body) return <div className={classNames(className, "mx_RoomTopic")} />;
return (
<Tooltip label={_t("room|read_topic")} disabled={disableTooltip}>
<Tooltip description={_t("room|read_topic")} disabled={disableTooltip}>
<div
{...props}
tabIndex={0}

2
src/components/views/messages/MStickerBody.tsx
View file

@ -61,7 +61,7 @@ export default class MStickerBody extends MImageBody {
return {
placement: "right",
label: content.body,
description: content.body,
};
}

2
src/components/views/messages/MessageTimestamp.tsx
View file

@ -53,7 +53,7 @@ export default class MessageTimestamp extends React.Component<IProps> {
}
return (
<Tooltip label={label} caption={caption}>
<Tooltip description={label} caption={caption}>
<span className="mx_MessageTimestamp" aria-hidden={true} aria-live="off">
{icon}
{timestamp}

2
src/components/views/messages/ReactionsRowButtonTooltip.tsx
View file

@ -51,7 +51,7 @@ export default class ReactionsRowButtonTooltip extends React.PureComponent<Props
const caption = shortName ? _t("timeline|reactions|tooltip_caption", { shortName }) : undefined;
return (
<Tooltip label={formattedSenders} caption={caption} placement="right">
<Tooltip description={formattedSenders} caption={caption} placement="right">
{children}
</Tooltip>
);

7
src/components/views/messages/TextualBody.tsx
View file

@ -9,6 +9,7 @@ Please see LICENSE files in the repository root for full details.
import React, { createRef, SyntheticEvent, MouseEvent } from "react";
import ReactDOM from "react-dom";
import { MsgType } from "matrix-js-sdk/src/matrix";
import { TooltipProvider } from "@vector-im/compound-web";
import * as HtmlUtils from "../../../HtmlUtils";
import { formatDate } from "../../../DateUtils";
@ -335,7 +336,11 @@ export default class TextualBody extends React.Component<IBodyProps, IState> {
const reason = node.getAttribute("data-mx-spoiler") ?? undefined;
node.removeAttribute("data-mx-spoiler"); // we don't want to recurse
const spoiler = <Spoiler reason={reason} contentHtml={node.outerHTML} />;
const spoiler = (
<TooltipProvider>
<Spoiler reason={reason} contentHtml={node.outerHTML} />
</TooltipProvider>
);
ReactDOM.render(spoiler, spoilerContainer);
node.parentNode?.replaceChild(spoilerContainer, node);

4
src/components/views/right_panel/RoomSummaryCard.tsx
View file

@ -373,9 +373,7 @@ const RoomSummaryCard: React.FC<IProps> = ({
Icon={FavouriteIcon}
label={_t("room|context_menu|favourite")}
checked={isFavorite}
onChange={() => tagRoom(room, DefaultTagID.Favourite)}
// XXX: https://github.com/element-hq/compound/issues/288
onSelect={() => {}}
onSelect={() => tagRoom(room, DefaultTagID.Favourite)}
/>
<MenuItem
Icon={UserAddIcon}

2
src/components/views/rooms/EventTile.tsx
View file

@ -1555,7 +1555,7 @@ function SentReceipt({ messageState }: ISentReceiptProps): JSX.Element {
<div className="mx_EventTile_msgOption">
<div className="mx_ReadReceiptGroup">
<Tooltip label={label} placement="top-end">
<div className="mx_ReadReceiptGroup_button">
<div className="mx_ReadReceiptGroup_button" role="status">
<span className="mx_ReadReceiptGroup_container">
<span className={receiptClasses}>{nonCssBadge}</span>
</span>

2
src/components/views/rooms/MessageComposer.tsx
View file

@ -666,7 +666,7 @@ export class MessageComposer extends React.Component<IProps, IState> {
});
return (
<Tooltip open={isTooltipOpen} label={formatTimeLeft(secondsLeft)} placement="top">
<Tooltip open={isTooltipOpen} description={formatTimeLeft(secondsLeft)} placement="bottom">
<div className={classes} ref={this.ref} role="region" aria-label={_t("a11y|message_composer")}>
{recordingTooltip}
<div className="mx_MessageComposer_wrapper">

2
src/components/views/rooms/ReadReceiptGroup.tsx
View file

@ -211,7 +211,7 @@ export function ReadReceiptPerson({
onAfterClick,
}: ReadReceiptPersonProps): JSX.Element {
return (
<Tooltip label={roomMember?.rawDisplayName ?? userId} caption={userId} placement="top">
<Tooltip description={roomMember?.rawDisplayName ?? userId} caption={userId} placement="top">
<div>
<MenuItem
className="mx_ReadReceiptGroup_person"

2
src/components/views/rooms/RoomHeader.tsx
View file

@ -205,7 +205,7 @@ export default function RoomHeader({
);
const closeLobbyButton = (
<Tooltip label={_t("voip|close_lobby")}>
<IconButton onClick={toggleCall} aria-label={_t("voip|close_lobby")}>
<IconButton onClick={toggleCall}>
<CloseCallIcon />
</IconButton>
</Tooltip>

2
src/components/views/rooms/RoomHeader/CallGuestLinkButton.tsx
View file

@ -80,7 +80,7 @@ export const CallGuestLinkButton: React.FC<{ room: Room }> = ({ room }) => {
<>
{canInviteGuests && (
<Tooltip label={_t("voip|get_call_link")}>
<IconButton onClick={shareClick} aria-label={_t("voip|get_call_link")}>
<IconButton onClick={shareClick}>
<ExternalLinkIcon />
</IconButton>
</Tooltip>

68
src/toasts/IncomingCallToast.tsx
View file

@ -8,7 +8,7 @@ Please see LICENSE files in the repository root for full details.
import React, { useCallback, useEffect, useState } from "react";
import { MatrixEvent, RoomMember } from "matrix-js-sdk/src/matrix";
import { Button, Tooltip } from "@vector-im/compound-web";
import { Button, Tooltip, TooltipProvider } from "@vector-im/compound-web";
import VideoCallIcon from "@vector-im/compound-design-tokens/assets/web/icons/video-call-solid";
import { _t } from "../languageHandler";
@ -47,7 +47,7 @@ function JoinCallButtonWithCall({ onClick, call, disabledTooltip }: JoinCallButt
disTooltip = disabledTooltip ?? disabledBecauseFullTooltip ?? undefined;
return (
<Tooltip label={disTooltip ?? _t("voip|video_call")}>
<Tooltip description={disTooltip ?? _t("voip|video_call")}>
<Button
className="mx_IncomingCallToast_joinButton"
onClick={onClick}
@ -163,38 +163,40 @@ export function IncomingCallToast({ notifyEvent }: Props): JSX.Element {
useEventEmitter(call ?? undefined, CallEvent.Participants, onParticipantChange);
return (
<>
<div>
<RoomAvatar room={room ?? undefined} size="24px" />
</div>
<div className="mx_IncomingCallToast_content">
<div className="mx_IncomingCallToast_info">
<span className="mx_IncomingCallToast_room">
{room ? room.name : _t("voip|call_toast_unknown_room")}
</span>
<div className="mx_IncomingCallToast_message">{_t("voip|video_call_started")}</div>
{call ? (
<LiveContentSummaryWithCall call={call} />
) : (
<LiveContentSummary
type={LiveContentType.Video}
text={_t("common|video")}
active={false}
participantCount={0}
/>
)}
<TooltipProvider>
<>
<div>
<RoomAvatar room={room ?? undefined} size="24px" />
</div>
<JoinCallButtonWithCall
onClick={onJoinClick}
call={call}
disabledTooltip={otherCallIsOngoing ? "Ongoing call" : undefined}
<div className="mx_IncomingCallToast_content">
<div className="mx_IncomingCallToast_info">
<span className="mx_IncomingCallToast_room">
{room ? room.name : _t("voip|call_toast_unknown_room")}
</span>
<div className="mx_IncomingCallToast_message">{_t("voip|video_call_started")}</div>
{call ? (
<LiveContentSummaryWithCall call={call} />
) : (
<LiveContentSummary
type={LiveContentType.Video}
text={_t("common|video")}
active={false}
participantCount={0}
/>
)}
</div>
<JoinCallButtonWithCall
onClick={onJoinClick}
call={call}
disabledTooltip={otherCallIsOngoing ? "Ongoing call" : undefined}
/>
</div>
<AccessibleButton
className="mx_IncomingCallToast_closeButton"
onClick={onCloseClick}
title={_t("action|close")}
/>
</div>
<AccessibleButton
className="mx_IncomingCallToast_closeButton"
onClick={onCloseClick}
title={_t("action|close")}
/>
</>
</>
</TooltipProvider>
);
}

41
src/utils/exportUtils/HtmlExport.tsx
View file

@ -12,6 +12,7 @@ import { Room, MatrixEvent, EventType, MsgType } from "matrix-js-sdk/src/matrix"
import { renderToStaticMarkup } from "react-dom/server";
import { logger } from "matrix-js-sdk/src/logger";
import escapeHtml from "escape-html";
import { TooltipProvider } from "@vector-im/compound-web";
import Exporter from "./Exporter";
import { mediaFromMxc } from "../../customisations/Media";
@ -271,25 +272,27 @@ export default class HTMLExporter extends Exporter {
return (
<div className="mx_Export_EventWrapper" id={mxEv.getId()}>
<MatrixClientContext.Provider value={this.room.client}>
<EventTile
mxEvent={mxEv}
continuation={continuation}
isRedacted={mxEv.isRedacted()}
replacingEventId={mxEv.replacingEventId()}
forExport={true}
alwaysShowTimestamps={true}
showUrlPreview={false}
checkUnmounting={() => false}
isTwelveHour={false}
last={false}
lastInSection={false}
permalinkCreator={this.permalinkCreator}
lastSuccessful={false}
isSelectedEvent={false}
showReactions={false}
layout={Layout.Group}
showReadReceipts={false}
/>
<TooltipProvider>
<EventTile
mxEvent={mxEv}
continuation={continuation}
isRedacted={mxEv.isRedacted()}
replacingEventId={mxEv.replacingEventId()}
forExport={true}
alwaysShowTimestamps={true}
showUrlPreview={false}
checkUnmounting={() => false}
isTwelveHour={false}
last={false}
lastInSection={false}
permalinkCreator={this.permalinkCreator}
lastSuccessful={false}
isSelectedEvent={false}
showReactions={false}
layout={Layout.Group}
showReadReceipts={false}
/>
</TooltipProvider>
</MatrixClientContext.Provider>
</div>
);

19
src/utils/pillify.tsx
View file

@ -10,6 +10,7 @@ import React from "react";
import ReactDOM from "react-dom";
import { PushProcessor } from "matrix-js-sdk/src/pushprocessor";
import { MatrixClient, MatrixEvent, RuleId } from "matrix-js-sdk/src/matrix";
import { TooltipProvider } from "@vector-im/compound-web";
import SettingsStore from "../settings/SettingsStore";
import { Pill, pillRoomNotifLen, pillRoomNotifPos, PillType } from "../components/views/elements/Pill";
@ -75,7 +76,9 @@ export function pillifyLinks(
const pillContainer = document.createElement("span");
const pill = (
<Pill url={href} inMessage={true} room={room} shouldShowPillAvatar={shouldShowPillAvatar} />
<TooltipProvider>
<Pill url={href} inMessage={true} room={room} shouldShowPillAvatar={shouldShowPillAvatar} />
</TooltipProvider>
);
ReactDOM.render(pill, pillContainer);
@ -130,12 +133,14 @@ export function pillifyLinks(
const pillContainer = document.createElement("span");
const pill = (
<Pill
type={PillType.AtRoomMention}
inMessage={true}
room={room}
shouldShowPillAvatar={shouldShowPillAvatar}
/>
<TooltipProvider>
<Pill
type={PillType.AtRoomMention}
inMessage={true}
room={room}
shouldShowPillAvatar={shouldShowPillAvatar}
/>
</TooltipProvider>
);
ReactDOM.render(pill, pillContainer);

9
src/utils/tooltipify.tsx
View file

@ -8,6 +8,7 @@ Please see LICENSE files in the repository root for full details.
import React from "react";
import ReactDOM from "react-dom";
import { TooltipProvider } from "@vector-im/compound-web";
import PlatformPeg from "../PlatformPeg";
import LinkWithTooltip from "../components/views/elements/LinkWithTooltip";
@ -52,9 +53,11 @@ export function tooltipifyLinks(rootNodes: ArrayLike<Element>, ignoredNodes: Ele
// wrapping the link with the LinkWithTooltip component, keeping the same children. Ideally we'd do this
// without the superfluous span but this is not something React trivially supports at this time.
const tooltip = (
<LinkWithTooltip tooltip={href}>
<span dangerouslySetInnerHTML={{ __html: node.innerHTML }} />
</LinkWithTooltip>
<TooltipProvider>
<LinkWithTooltip tooltip={href}>
<span dangerouslySetInnerHTML={{ __html: node.innerHTML }} />
</LinkWithTooltip>
</TooltipProvider>
);
ReactDOM.render(tooltip, node);

2
test/HtmlUtils-test.tsx
View file

@ -8,7 +8,7 @@ Please see LICENSE files in the repository root for full details.
import React, { ReactElement } from "react";
import { mocked } from "jest-mock";
import { render, screen } from "@testing-library/react";
import { render, screen } from "jest-matrix-react";
import { IContent } from "matrix-js-sdk/src/matrix";
import { bodyToSpan, formatEmojis, topicToHtml } from "../src/HtmlUtils";

2
test/LegacyCallHandler-test.ts
View file

@ -21,7 +21,7 @@ import EventEmitter from "events";
import { mocked } from "jest-mock";
import { CallEventHandlerEvent } from "matrix-js-sdk/src/webrtc/callEventHandler";
import fetchMock from "fetch-mock-jest";
import { waitFor } from "@testing-library/react";
import { waitFor } from "jest-matrix-react";
import LegacyCallHandler, {
AudioID,

2
test/Notifier-test.ts
View file

@ -17,7 +17,7 @@ import {
MatrixEvent,
SyncState,
} from "matrix-js-sdk/src/matrix";
import { waitFor } from "@testing-library/react";
import { waitFor } from "jest-matrix-react";
import { CallMembership, MatrixRTCSession } from "matrix-js-sdk/src/matrixrtc";
import BasePlatform from "../src/BasePlatform";

2
test/TextForEvent-test.ts
View file

@ -16,7 +16,7 @@ import {
RoomMember,
} from "matrix-js-sdk/src/matrix";
import { KnownMembership } from "matrix-js-sdk/src/types";
import { render } from "@testing-library/react";
import { render } from "jest-matrix-react";
import { ReactElement } from "react";
import { Mocked, mocked } from "jest-mock";

2
test/accessibility/LandmarkNavigation-test.tsx
View file

@ -6,7 +6,7 @@
* Please see LICENSE files in the repository root for full details.
*/
import { render, screen, waitFor } from "@testing-library/react";
import { render, screen, waitFor } from "jest-matrix-react";
import React from "react";
import { Landmark, LandmarkNavigation } from "../../src/accessibility/LandmarkNavigation";

2
test/accessibility/RovingTabIndex-test.tsx
View file

@ -7,7 +7,7 @@ Please see LICENSE files in the repository root for full details.
*/
import React, { HTMLAttributes } from "react";
import { render } from "@testing-library/react";
import { render } from "jest-matrix-react";
import userEvent from "@testing-library/user-event";
import {

2
test/components/structures/AutocompleteInput-test.tsx
View file

@ -7,7 +7,7 @@ Please see LICENSE files in the repository root for full details.
*/
import React from "react";
import { screen, render, fireEvent, waitFor, within, act } from "@testing-library/react";
import { screen, render, fireEvent, waitFor, within, act } from "jest-matrix-react";
import * as TestUtils from "../../test-utils";
import AutocompleteProvider from "../../../src/autocomplete/AutocompleteProvider";

2
test/components/structures/FilePanel-test.tsx
View file

@ -8,7 +8,7 @@ Please see LICENSE files in the repository root for full details.
import React from "react";
import { EventTimelineSet, PendingEventOrdering, Room } from "matrix-js-sdk/src/matrix";
import { screen, render, waitFor } from "@testing-library/react";
import { screen, render, waitFor } from "jest-matrix-react";
import { mocked } from "jest-mock";
import FilePanel from "../../../src/components/structures/FilePanel";

2
test/components/structures/LargeLoader-test.tsx
View file

@ -7,7 +7,7 @@ Please see LICENSE files in the repository root for full details.
*/
import React from "react";
import { render, screen } from "@testing-library/react";
import { render, screen } from "jest-matrix-react";
import { LargeLoader } from "../../../src/components/structures/LargeLoader";

2
test/components/structures/LeftPanel-test.tsx
View file

@ -8,7 +8,7 @@ Please see LICENSE files in the repository root for full details.
*/
import React from "react";
import { render, RenderResult, screen } from "@testing-library/react";
import { render, RenderResult, screen } from "jest-matrix-react";
import { mocked } from "jest-mock";
import LeftPanel from "../../../src/components/structures/LeftPanel";

2
test/components/structures/LoggedInView-test.tsx
View file

@ -7,7 +7,7 @@ Please see LICENSE files in the repository root for full details.
*/
import React from "react";
import { render, RenderResult } from "@testing-library/react";
import { render, RenderResult } from "jest-matrix-react";
import { ConditionKind, EventType, IPushRule, MatrixEvent, ClientEvent, PushRuleKind } from "matrix-js-sdk/src/matrix";
import { MediaHandler } from "matrix-js-sdk/src/webrtc/mediaHandler";
import { logger } from "matrix-js-sdk/src/logger";

2
test/components/structures/MainSplit-test.tsx
View file

@ -7,7 +7,7 @@ Please see LICENSE files in the repository root for full details.
*/
import React from "react";
import { fireEvent, render } from "@testing-library/react";
import { render, fireEvent } from "jest-matrix-react";
import MainSplit from "../../../src/components/structures/MainSplit";
import ResizeNotifier from "../../../src/utils/ResizeNotifier";

2
test/components/structures/MatrixChat-test.tsx
View file

@ -11,7 +11,7 @@ Please see LICENSE files in the repository root for full details.
import "core-js/stable/structured-clone";
import "fake-indexeddb/auto";
import React, { ComponentProps } from "react";
import { fireEvent, render, RenderResult, screen, waitFor, within } from "@testing-library/react";
import { fireEvent, render, RenderResult, screen, waitFor, within } from "jest-matrix-react";
import fetchMock from "fetch-mock-jest";
import { Mocked, mocked } from "jest-mock";
import { ClientEvent, MatrixClient, MatrixEvent, Room, SyncState } from "matrix-js-sdk/src/matrix";

2
test/components/structures/MatrixClientContextProvider-test.tsx
View file

@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
Please see LICENSE files in the repository root for full details.
*/
import { act, render } from "@testing-library/react";
import { act, render } from "jest-matrix-react";
import React, { useContext } from "react";
import { CryptoEvent, MatrixClient } from "matrix-js-sdk/src/matrix";
import { UserVerificationStatus } from "matrix-js-sdk/src/crypto-api";

2
test/components/structures/MessagePanel-test.tsx
View file

@ -11,7 +11,7 @@ import React from "react";
import { EventEmitter } from "events";
import { MatrixEvent, Room, RoomMember, Thread, ReceiptType } from "matrix-js-sdk/src/matrix";
import { KnownMembership } from "matrix-js-sdk/src/types";
import { render } from "@testing-library/react";
import { render } from "jest-matrix-react";
import MessagePanel, { shouldFormContinuation } from "../../../src/components/structures/MessagePanel";
import SettingsStore from "../../../src/settings/SettingsStore";

2
test/components/structures/PictureInPictureDragger-test.tsx
View file

@ -7,7 +7,7 @@ Please see LICENSE files in the repository root for full details.
*/
import React, { MouseEventHandler } from "react";
import { screen, render, RenderResult } from "@testing-library/react";
import { screen, render, RenderResult } from "jest-matrix-react";
import userEvent from "@testing-library/user-event";
import PictureInPictureDragger, { CreatePipChildren } from "../../../src/components/structures/PictureInPictureDragger";

2
test/components/structures/PipContainer-test.tsx
View file

@ -8,7 +8,7 @@ Please see LICENSE files in the repository root for full details.
import React from "react";
import { mocked, Mocked } from "jest-mock";
import { screen, render, act, cleanup } from "@testing-library/react";
import { screen, render, act, cleanup } from "jest-matrix-react";
import userEvent from "@testing-library/user-event";
import { MatrixClient, PendingEventOrdering, Room, MatrixEvent, RoomStateEvent } from "matrix-js-sdk/src/matrix";
import { Widget, ClientWidgetApi } from "matrix-widget-api";

2
test/components/structures/ReleaseAnnouncement-test.tsx
View file

@ -7,7 +7,7 @@
*/
import React from "react";
import { act, render, screen, waitFor } from "@testing-library/react";
import { act, render, screen, waitFor } from "jest-matrix-react";
import { ReleaseAnnouncement } from "../../../src/components/structures/ReleaseAnnouncement";
import Modal, { ModalManagerEvent } from "../../../src/Modal";

2
test/components/structures/RightPanel-test.tsx
View file

@ -7,7 +7,7 @@ Please see LICENSE files in the repository root for full details.
*/
import React from "react";
import { render, screen, waitFor } from "@testing-library/react";
import { render, screen, waitFor } from "jest-matrix-react";
import { jest } from "@jest/globals";
import { mocked, MockedObject } from "jest-mock";
import { MatrixClient } from "matrix-js-sdk/src/matrix";

2
test/components/structures/RoomSearchView-test.tsx
View file

@ -8,7 +8,7 @@ Please see LICENSE files in the repository root for full details.
import React from "react";
import { mocked } from "jest-mock";
import { render, screen } from "@testing-library/react";
import { render, screen } from "jest-matrix-react";
import {
Room,
MatrixClient,

2
test/components/structures/RoomStatusBar-test.tsx
View file

@ -7,7 +7,7 @@ Please see LICENSE files in the repository root for full details.
*/
import React from "react";
import { render } from "@testing-library/react";
import { render } from "jest-matrix-react";
import {
MatrixClient,
PendingEventOrdering,

2
test/components/structures/RoomStatusBarUnsentMessages-test.tsx
View file

@ -7,7 +7,7 @@ Please see LICENSE files in the repository root for full details.
*/
import React from "react";
import { render, screen } from "@testing-library/react";
import { render, screen } from "jest-matrix-react";
import { RoomStatusBarUnsentMessages } from "../../../src/components/structures/RoomStatusBarUnsentMessages";
import { StaticNotificationState } from "../../../src/stores/notifications/StaticNotificationState";

2
test/components/structures/RoomView-test.tsx
View file

@ -22,7 +22,7 @@ import {
IEvent,
} from "matrix-js-sdk/src/matrix";
import { KnownMembership } from "matrix-js-sdk/src/types";
import { fireEvent, render, screen, RenderResult, waitForElementToBeRemoved, waitFor } from "@testing-library/react";
import { fireEvent, render, screen, RenderResult, waitForElementToBeRemoved, waitFor } from "jest-matrix-react";
import userEvent from "@testing-library/user-event";
import {

2
test/components/structures/SpaceHierarchy-test.tsx
View file

@ -8,7 +8,7 @@ Please see LICENSE files in the repository root for full details.
import React from "react";
import { mocked } from "jest-mock";
import { fireEvent, render, screen, waitFor, waitForElementToBeRemoved } from "@testing-library/react";
import { fireEvent, render, screen, waitFor, waitForElementToBeRemoved } from "jest-matrix-react";
import { HierarchyRoom, JoinRule, MatrixClient, Room } from "matrix-js-sdk/src/matrix";
import { KnownMembership } from "matrix-js-sdk/src/types";
import { RoomHierarchy } from "matrix-js-sdk/src/room-hierarchy";

2
test/components/structures/TabbedView-test.tsx
View file

@ -7,7 +7,7 @@ Please see LICENSE files in the repository root for full details.
*/
import React from "react";
import { act, fireEvent, render } from "@testing-library/react";
import { act, fireEvent, render } from "jest-matrix-react";
import TabbedView, { Tab, TabLocation } from "../../../src/components/structures/TabbedView";
import { NonEmptyArray } from "../../../src/@types/common";

2
test/components/structures/ThreadPanel-test.tsx
View file

@ -7,7 +7,7 @@ Please see LICENSE files in the repository root for full details.
*/
import React from "react";
import { render, screen, fireEvent, waitFor, getByRole } from "@testing-library/react";
import { render, screen, fireEvent, waitFor, getByRole } from "jest-matrix-react";
import { mocked } from "jest-mock";
import {
MatrixClient,

2
test/components/structures/ThreadView-test.tsx
View file

@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
Please see LICENSE files in the repository root for full details.
*/
import { act, getByTestId, render, RenderResult, waitFor } from "@testing-library/react";
import { act, getByTestId, render, RenderResult, waitFor } from "jest-matrix-react";
import userEvent from "@testing-library/user-event";
import { mocked } from "jest-mock";
import {

4
test/components/structures/TimelinePanel-test.tsx
View file

@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
Please see LICENSE files in the repository root for full details.
*/
import { render, waitFor, screen } from "@testing-library/react";
import { render, waitFor, screen } from "jest-matrix-react";
import {
ReceiptType,
EventTimelineSet,
@ -399,7 +399,7 @@ describe("TimelinePanel", () => {
setupPagination(client, timeline, eventsPage1, null);
await withScrollPanelMountSpy(async (mountSpy) => {
const { container } = render(<TimelinePanel {...getProps(room, events)} timelineSet={timelineSet} />, {});
const { container } = render(<TimelinePanel {...getProps(room, events)} timelineSet={timelineSet} />);
await waitFor(() => expectEvents(container, [events[1]]));

2
test/components/structures/UploadBar-test.tsx
View file

@ -7,7 +7,7 @@ Please see LICENSE files in the repository root for full details.
*/
import React from "react";
import { render } from "@testing-library/react";
import { render } from "jest-matrix-react";
import { jest } from "@jest/globals";
import { Room } from "matrix-js-sdk/src/matrix";

2
test/components/structures/UserMenu-test.tsx
View file

@ -7,7 +7,7 @@ Please see LICENSE files in the repository root for full details.
*/
import React from "react";
import { act, render, RenderResult, screen, waitFor } from "@testing-library/react";
import { act, render, RenderResult, screen, waitFor } from "jest-matrix-react";
import { DEVICE_CODE_SCOPE, MatrixClient, MatrixEvent, Room } from "matrix-js-sdk/src/matrix";
import { CryptoApi } from "matrix-js-sdk/src/crypto-api";
import { mocked } from "jest-mock";

2
test/components/structures/ViewSource-test.tsx
View file

@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
Please see LICENSE files in the repository root for full details.
*/
import { render } from "@testing-library/react";
import { render } from "jest-matrix-react";
import { EventType, MatrixEvent, Room } from "matrix-js-sdk/src/matrix";
import React from "react";

1
test/components/structures/__snapshots__/FilePanel-test.tsx.snap
View file

@ -19,6 +19,7 @@ exports[`FilePanel renders empty state 1`] = `
</p>
</div>
<button
aria-labelledby="floating-ui-1"
class="_icon-button_bh2qc_17 _subtle-bg_bh2qc_38"
data-testid="base-card-close-button"
role="button"

25
test/components/structures/__snapshots__/RoomView-test.tsx.snap
View file

@ -62,6 +62,7 @@ exports[`RoomView for a local room in state CREATING should match the snapshot 1
style="--cpd-icon-button-size: 100%;"
>
<svg
aria-labelledby="floating-ui-364"
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
@ -77,6 +78,7 @@ exports[`RoomView for a local room in state CREATING should match the snapshot 1
<button
aria-disabled="false"
aria-label="Voice call"
aria-labelledby="floating-ui-369"
class="_icon-button_bh2qc_17"
role="button"
style="--cpd-icon-button-size: 32px;"
@ -101,6 +103,7 @@ exports[`RoomView for a local room in state CREATING should match the snapshot 1
</button>
<button
aria-label="Room info"
aria-labelledby="floating-ui-374"
class="_icon-button_bh2qc_17"
role="button"
style="--cpd-icon-button-size: 32px;"
@ -125,6 +128,7 @@ exports[`RoomView for a local room in state CREATING should match the snapshot 1
</button>
<button
aria-label="Threads"
aria-labelledby="floating-ui-379"
class="_icon-button_bh2qc_17"
role="button"
style="--cpd-icon-button-size: 32px;"
@ -153,6 +157,7 @@ exports[`RoomView for a local room in state CREATING should match the snapshot 1
>
<div
aria-label="2 members"
aria-labelledby="floating-ui-384"
class="mx_AccessibleButton mx_FacePile"
role="button"
tabindex="0"
@ -275,6 +280,7 @@ exports[`RoomView for a local room in state ERROR should match the snapshot 1`]
style="--cpd-icon-button-size: 100%;"
>
<svg
aria-labelledby="floating-ui-394"
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
@ -290,6 +296,7 @@ exports[`RoomView for a local room in state ERROR should match the snapshot 1`]
<button
aria-disabled="false"
aria-label="Voice call"
aria-labelledby="floating-ui-399"
class="_icon-button_bh2qc_17"
role="button"
style="--cpd-icon-button-size: 32px;"
@ -314,6 +321,7 @@ exports[`RoomView for a local room in state ERROR should match the snapshot 1`]
</button>
<button
aria-label="Room info"
aria-labelledby="floating-ui-404"
class="_icon-button_bh2qc_17"
role="button"
style="--cpd-icon-button-size: 32px;"
@ -338,6 +346,7 @@ exports[`RoomView for a local room in state ERROR should match the snapshot 1`]
</button>
<button
aria-label="Threads"
aria-labelledby="floating-ui-409"
class="_icon-button_bh2qc_17"
role="button"
style="--cpd-icon-button-size: 32px;"
@ -366,6 +375,7 @@ exports[`RoomView for a local room in state ERROR should match the snapshot 1`]
>
<div
aria-label="2 members"
aria-labelledby="floating-ui-414"
class="mx_AccessibleButton mx_FacePile"
role="button"
tabindex="0"
@ -573,6 +583,7 @@ exports[`RoomView for a local room in state NEW should match the snapshot 1`] =
style="--cpd-icon-button-size: 100%;"
>
<svg
aria-labelledby="floating-ui-224"
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
@ -588,6 +599,7 @@ exports[`RoomView for a local room in state NEW should match the snapshot 1`] =
<button
aria-disabled="false"
aria-label="Voice call"
aria-labelledby="floating-ui-229"
class="_icon-button_bh2qc_17"
role="button"
style="--cpd-icon-button-size: 32px;"
@ -612,6 +624,7 @@ exports[`RoomView for a local room in state NEW should match the snapshot 1`] =
</button>
<button
aria-label="Room info"
aria-labelledby="floating-ui-234"
class="_icon-button_bh2qc_17"
role="button"
style="--cpd-icon-button-size: 32px;"
@ -636,6 +649,7 @@ exports[`RoomView for a local room in state NEW should match the snapshot 1`] =
</button>
<button
aria-label="Threads"
aria-labelledby="floating-ui-239"
class="_icon-button_bh2qc_17"
role="button"
style="--cpd-icon-button-size: 32px;"
@ -664,6 +678,7 @@ exports[`RoomView for a local room in state NEW should match the snapshot 1`] =
>
<div
aria-label="2 members"
aria-labelledby="floating-ui-244"
class="mx_AccessibleButton mx_FacePile"
role="button"
tabindex="0"
@ -948,6 +963,7 @@ exports[`RoomView for a local room in state NEW that is encrypted should match t
style="--cpd-icon-button-size: 100%;"
>
<svg
aria-labelledby="floating-ui-294"
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
@ -963,6 +979,7 @@ exports[`RoomView for a local room in state NEW that is encrypted should match t
<button
aria-disabled="false"
aria-label="Voice call"
aria-labelledby="floating-ui-299"
class="_icon-button_bh2qc_17"
role="button"
style="--cpd-icon-button-size: 32px;"
@ -987,6 +1004,7 @@ exports[`RoomView for a local room in state NEW that is encrypted should match t
</button>
<button
aria-label="Room info"
aria-labelledby="floating-ui-304"
class="_icon-button_bh2qc_17"
role="button"
style="--cpd-icon-button-size: 32px;"
@ -1011,6 +1029,7 @@ exports[`RoomView for a local room in state NEW that is encrypted should match t
</button>
<button
aria-label="Threads"
aria-labelledby="floating-ui-309"
class="_icon-button_bh2qc_17"
role="button"
style="--cpd-icon-button-size: 32px;"
@ -1039,6 +1058,7 @@ exports[`RoomView for a local room in state NEW that is encrypted should match t
>
<div
aria-label="2 members"
aria-labelledby="floating-ui-314"
class="mx_AccessibleButton mx_FacePile"
role="button"
tabindex="0"
@ -1350,6 +1370,7 @@ exports[`RoomView video rooms should render joined video room view 1`] = `
>
<button
aria-label="Room info"
aria-labelledby="floating-ui-84"
class="_icon-button_bh2qc_17"
role="button"
style="--cpd-icon-button-size: 32px;"
@ -1374,6 +1395,7 @@ exports[`RoomView video rooms should render joined video room view 1`] = `
</button>
<button
aria-label="Chat"
aria-labelledby="floating-ui-89"
class="_icon-button_bh2qc_17"
role="button"
style="--cpd-icon-button-size: 32px;"
@ -1398,6 +1420,7 @@ exports[`RoomView video rooms should render joined video room view 1`] = `
</button>
<button
aria-label="Threads"
aria-labelledby="floating-ui-94"
class="_icon-button_bh2qc_17"
role="button"
style="--cpd-icon-button-size: 32px;"
@ -1426,6 +1449,7 @@ exports[`RoomView video rooms should render joined video room view 1`] = `
>
<div
aria-label="0 members"
aria-labelledby="floating-ui-99"
class="mx_AccessibleButton mx_FacePile"
role="button"
tabindex="0"
@ -1463,6 +1487,7 @@ exports[`RoomView video rooms should render joined video room view 1`] = `
</p>
</div>
<button
aria-labelledby="floating-ui-108"
class="_icon-button_bh2qc_17 _subtle-bg_bh2qc_38"
data-testid="base-card-close-button"
role="button"

1
test/components/structures/__snapshots__/SpaceHierarchy-test.tsx.snap
View file

@ -393,6 +393,7 @@ exports[`SpaceHierarchy <SpaceHierarchy /> renders 1`] = `
Join
</div>
<span
aria-labelledby="floating-ui-9"
tabindex="0"
>
<span

4
test/components/structures/__snapshots__/ThreadPanel-test.tsx.snap
View file

@ -6,7 +6,7 @@ exports[`ThreadPanel Header expect that All filter for ThreadPanelHeader properl
class="mx_BaseCard_header_title"
>
<button
aria-label="Mark all as read"
aria-labelledby="floating-ui-1"
class="_icon-button_bh2qc_17"
role="button"
style="--cpd-icon-button-size: 24px;"
@ -41,7 +41,7 @@ exports[`ThreadPanel Header expect that My filter for ThreadPanelHeader properly
class="mx_BaseCard_header_title"
>
<button
aria-label="Mark all as read"
aria-labelledby="floating-ui-6"
class="_icon-button_bh2qc_17"
role="button"
style="--cpd-icon-button-size: 24px;"

2
test/components/structures/auth/CompleteSecurity-test.tsx
View file

@ -6,7 +6,7 @@ Please see LICENSE files in the repository root for full details.
*/
import React from "react";
import { render, screen } from "@testing-library/react";
import { render, screen } from "jest-matrix-react";
import { mocked } from "jest-mock";
import EventEmitter from "events";

2
test/components/structures/auth/ForgotPassword-test.tsx
View file

@ -8,7 +8,7 @@ Please see LICENSE files in the repository root for full details.
import React from "react";
import { mocked } from "jest-mock";
import { act, render, RenderResult, screen } from "@testing-library/react";
import { act, render, RenderResult, screen } from "jest-matrix-react";
import userEvent from "@testing-library/user-event";
import { MatrixClient, createClient } from "matrix-js-sdk/src/matrix";

2
test/components/structures/auth/Login-test.tsx
View file

@ -6,7 +6,7 @@ Please see LICENSE files in the repository root for full details.
*/
import React from "react";
import { fireEvent, render, screen, waitForElementToBeRemoved } from "@testing-library/react";
import { fireEvent, render, screen, waitForElementToBeRemoved } from "jest-matrix-react";
import { mocked, MockedObject } from "jest-mock";
import fetchMock from "fetch-mock-jest";
import { DELEGATED_OIDC_COMPATIBILITY, IdentityProviderBrand, OidcClientConfig } from "matrix-js-sdk/src/matrix";

2
test/components/structures/auth/LoginSplashView-test.tsx
View file

@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
Please see LICENSE files in the repository root for full details.
*/
import { act, render, RenderResult } from "@testing-library/react";
import { act, render, RenderResult } from "jest-matrix-react";
import React, { ComponentProps } from "react";
import EventEmitter from "events";
import { CryptoEvent } from "matrix-js-sdk/src/matrix";

2
test/components/structures/auth/Registration-test.tsx
View file

@ -8,7 +8,7 @@ Please see LICENSE files in the repository root for full details.
*/
import React from "react";
import { fireEvent, render, screen, waitFor, waitForElementToBeRemoved } from "@testing-library/react";
import { fireEvent, render, screen, waitFor, waitForElementToBeRemoved } from "jest-matrix-react";
import { createClient, MatrixClient, MatrixError, OidcClientConfig } from "matrix-js-sdk/src/matrix";
import { mocked, MockedObject } from "jest-mock";
import fetchMock from "fetch-mock-jest";

2
test/components/views/audio_messages/RecordingPlayback-test.tsx
View file

@ -9,7 +9,7 @@ Please see LICENSE files in the repository root for full details.
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 "jest-matrix-react";
import RecordingPlayback, { PlaybackLayout } from "../../../../src/components/views/audio_messages/RecordingPlayback";
import { Playback } from "../../../../src/audio/Playback";

2
test/components/views/audio_messages/SeekBar-test.tsx
View file

@ -8,7 +8,7 @@ Please see LICENSE files in the repository root for full details.
import React, { createRef, RefObject } from "react";
import { mocked } from "jest-mock";
import { act, fireEvent, render, RenderResult } from "@testing-library/react";
import { act, fireEvent, render, RenderResult } from "jest-matrix-react";
import { Playback } from "../../../../src/audio/Playback";
import { createTestPlayback } from "../../../test-utils/audio";

2
test/components/views/auth/CountryDropdown-test.tsx
View file

@ -7,7 +7,7 @@ Please see LICENSE files in the repository root for full details.
*/
import React from "react";
import { fireEvent, render } from "@testing-library/react";
import { fireEvent, render } from "jest-matrix-react";
import userEvent from "@testing-library/user-event";
import CountryDropdown from "../../../../src/components/views/auth/CountryDropdown";

2
test/components/views/auth/InteractiveAuthEntryComponents-test.tsx
View file

@ -7,7 +7,7 @@
*/
import React from "react";
import { render, screen, waitFor, act, fireEvent } from "@testing-library/react";
import { render, screen, waitFor, act, fireEvent } from "jest-matrix-react";
import { AuthType } from "matrix-js-sdk/src/interactive-auth";
import userEvent from "@testing-library/user-event";

2
test/components/views/auth/RegistrationToken-test.tsx
View file

@ -9,7 +9,7 @@ Please see LICENSE files in the repository root for full details.
*/
import React from "react";
import { fireEvent, render, RenderResult } from "@testing-library/react";
import { fireEvent, render, RenderResult } from "jest-matrix-react";
import InteractiveAuthComponent from "../../../../src/components/structures/InteractiveAuth";
import { flushPromises, getMockClientWithEventEmitter, unmockClientPeg } from "../../../test-utils";

4
test/components/views/auth/__snapshots__/InteractiveAuthEntryComponents-test.tsx.snap
View file

@ -46,7 +46,7 @@ exports[`<MasUnlockCrossSigningAuthEntry/> should render 1`] = `
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-4x);"
>
<button
class="_button_zt6rp_17 mx_Dialog_nonDialogButton _has-icon_zt6rp_61"
class="_button_i91xf_17 mx_Dialog_nonDialogButton _has-icon_i91xf_66"
data-kind="primary"
data-size="lg"
role="button"
@ -70,7 +70,7 @@ exports[`<MasUnlockCrossSigningAuthEntry/> should render 1`] = `
Go to your account
</button>
<button
class="_button_zt6rp_17 mx_Dialog_nonDialogButton"
class="_button_i91xf_17 mx_Dialog_nonDialogButton"
data-kind="secondary"
data-size="lg"
role="button"

6
test/components/views/avatars/DecoratedRoomAvatar-test.tsx
View file

@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
Please see LICENSE files in the repository root for full details.
*/
import { render, waitFor } from "@testing-library/react";
import { render, waitFor } from "jest-matrix-react";
import { mocked } from "jest-mock";
import { JoinRule, MatrixClient, PendingEventOrdering, Room } from "matrix-js-sdk/src/matrix";
import React from "react";
@ -61,7 +61,7 @@ describe("DecoratedRoomAvatar", () => {
// wait for the tooltip to open
const tooltip = await waitFor(() => {
const tooltip = document.getElementById(globe.getAttribute("aria-describedby")!);
const tooltip = document.getElementById(globe.getAttribute("aria-labelledby")!);
expect(tooltip).toBeVisible();
return tooltip;
});
@ -88,7 +88,7 @@ describe("DecoratedRoomAvatar", () => {
// wait for the tooltip to open
const tooltip = await waitFor(() => {
const tooltip = document.getElementById(presence.getAttribute("aria-describedby")!);
const tooltip = document.getElementById(presence.getAttribute("aria-labelledby")!);
expect(tooltip).toBeVisible();
return tooltip;
});

2
test/components/views/avatars/MemberAvatar-test.tsx
View file

@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
Please see LICENSE files in the repository root for full details.
*/
import { getByTestId, render, waitFor } from "@testing-library/react";
import { getByTestId, render, waitFor } from "jest-matrix-react";
import { mocked } from "jest-mock";
import { MatrixClient, PendingEventOrdering, Room, RoomMember } from "matrix-js-sdk/src/matrix";
import React, { ComponentProps } from "react";

2
test/components/views/avatars/RoomAvatar-test.tsx
View file

@ -7,7 +7,7 @@ Please see LICENSE files in the repository root for full details.
*/
import React from "react";
import { render } from "@testing-library/react";
import { render } from "jest-matrix-react";
import { MatrixClient, Room } from "matrix-js-sdk/src/matrix";
import { mocked } from "jest-mock";

4
test/components/views/avatars/WithPresenceIndicator-test.tsx
View file

@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
Please see LICENSE files in the repository root for full details.
*/
import { render, waitFor } from "@testing-library/react";
import { render, waitFor } from "jest-matrix-react";
import { mocked } from "jest-mock";
import { MatrixClient, PendingEventOrdering, Room, RoomMember, User } from "matrix-js-sdk/src/matrix";
import React from "react";
@ -91,7 +91,7 @@ describe("WithPresenceIndicator", () => {
// wait for the tooltip to open
const tooltip = await waitFor(() => {
const tooltip = document.getElementById(presence.getAttribute("aria-describedby")!);
const tooltip = document.getElementById(presence.getAttribute("aria-labelledby")!);
expect(tooltip).toBeVisible();
return tooltip;
});

4
test/components/views/avatars/__snapshots__/DecoratedRoomAvatar-test.tsx.snap
View file

@ -16,7 +16,7 @@ exports[`DecoratedRoomAvatar shows an avatar with globe icon and tooltip for pub
r
</span>
<div
aria-describedby="floating-ui-2"
aria-labelledby="floating-ui-1"
class="mx_DecoratedRoomAvatar_icon mx_DecoratedRoomAvatar_icon_globe"
tabindex="0"
/>
@ -40,7 +40,7 @@ exports[`DecoratedRoomAvatar shows the presence indicator in a DM room that also
r
</span>
<div
aria-describedby="floating-ui-8"
aria-labelledby="floating-ui-6"
class="mx_DecoratedRoomAvatar_icon mx_DecoratedRoomAvatar_icon_online"
tabindex="0"
/>

6
test/components/views/avatars/__snapshots__/WithPresenceIndicator-test.tsx.snap
View file

@ -7,7 +7,7 @@ exports[`WithPresenceIndicator renders presence indicator with tooltip for DM ro
>
<span />
<div
aria-describedby="floating-ui-2"
aria-labelledby="floating-ui-1"
class="mx_WithPresenceIndicator_icon mx_WithPresenceIndicator_icon_online"
style="width: 32px; height: 32px;"
tabindex="0"
@ -23,7 +23,7 @@ exports[`WithPresenceIndicator renders presence indicator with tooltip for DM ro
>
<span />
<div
aria-describedby="floating-ui-8"
aria-labelledby="floating-ui-6"
class="mx_WithPresenceIndicator_icon mx_WithPresenceIndicator_icon_offline"
style="width: 32px; height: 32px;"
tabindex="0"
@ -39,7 +39,7 @@ exports[`WithPresenceIndicator renders presence indicator with tooltip for DM ro
>
<span />
<div
aria-describedby="floating-ui-14"
aria-labelledby="floating-ui-12"
class="mx_WithPresenceIndicator_icon mx_WithPresenceIndicator_icon_away"
style="width: 32px; height: 32px;"
tabindex="0"

2
test/components/views/beacon/BeaconListItem-test.tsx
View file

@ -7,7 +7,7 @@ Please see LICENSE files in the repository root for full details.
*/
import React from "react";
import { act, fireEvent, render } from "@testing-library/react";
import { act, fireEvent, render } from "jest-matrix-react";
import { Beacon, RoomMember, MatrixEvent, LocationAssetType } from "matrix-js-sdk/src/matrix";
import BeaconListItem from "../../../../src/components/views/beacon/BeaconListItem";

2
test/components/views/beacon/BeaconMarker-test.tsx
View file

@ -7,7 +7,7 @@ Please see LICENSE files in the repository root for full details.
*/
import React from "react";
import { act, render, screen, waitFor } from "@testing-library/react";
import { act, render, screen, waitFor } from "jest-matrix-react";
import * as maplibregl from "maplibre-gl";
import { Beacon, Room, RoomMember, MatrixEvent, getBeaconInfoIdentifier } from "matrix-js-sdk/src/matrix";

2
test/components/views/beacon/BeaconStatus-test.tsx
View file

@ -7,7 +7,7 @@ Please see LICENSE files in the repository root for full details.
*/
import React from "react";
import { render, screen } from "@testing-library/react";
import { render, screen } from "jest-matrix-react";
import { Beacon } from "matrix-js-sdk/src/matrix";
import BeaconStatus from "../../../../src/components/views/beacon/BeaconStatus";

2
test/components/views/beacon/BeaconViewDialog-test.tsx
View file

@ -7,7 +7,7 @@ Please see LICENSE files in the repository root for full details.
*/
import React from "react";
import { act, fireEvent, render, RenderResult, waitFor } from "@testing-library/react";
import { act, fireEvent, render, RenderResult, waitFor } from "jest-matrix-react";
import { MatrixClient, MatrixEvent, Room, RoomMember, getBeaconInfoIdentifier } from "matrix-js-sdk/src/matrix";
import * as maplibregl from "maplibre-gl";
import { mocked } from "jest-mock";

2
test/components/views/beacon/DialogSidebar-test.tsx
View file

@ -7,7 +7,7 @@ Please see LICENSE files in the repository root for full details.
*/
import React, { ComponentProps } from "react";
import { act, fireEvent, render } from "@testing-library/react";
import { act, fireEvent, render } from "jest-matrix-react";
import DialogSidebar from "../../../../src/components/views/beacon/DialogSidebar";
import MatrixClientContext from "../../../../src/contexts/MatrixClientContext";

2
test/components/views/beacon/LeftPanelLiveShareWarning-test.tsx
View file

@ -8,7 +8,7 @@ Please see LICENSE files in the repository root for full details.
import React from "react";
import { mocked } from "jest-mock";
import { act, fireEvent, render } from "@testing-library/react";
import { act, fireEvent, render } from "jest-matrix-react";
import { Beacon, BeaconIdentifier } from "matrix-js-sdk/src/matrix";
import LeftPanelLiveShareWarning from "../../../../src/components/views/beacon/LeftPanelLiveShareWarning";

2
test/components/views/beacon/OwnBeaconStatus-test.tsx
View file

@ -9,7 +9,7 @@ Please see LICENSE files in the repository root for full details.
import React from "react";
import { mocked } from "jest-mock";
import { Beacon } from "matrix-js-sdk/src/matrix";
import { render, screen } from "@testing-library/react";
import { render, screen } from "jest-matrix-react";
import userEvent from "@testing-library/user-event";
import OwnBeaconStatus from "../../../../src/components/views/beacon/OwnBeaconStatus";

2
test/components/views/beacon/RoomCallBanner-test.tsx
View file

@ -9,7 +9,7 @@ Please see LICENSE files in the repository root for full details.
import React from "react";
import { Room, PendingEventOrdering, MatrixClient, RoomMember, RoomStateEvent } from "matrix-js-sdk/src/matrix";
import { ClientWidgetApi, Widget } from "matrix-widget-api";
import { act, cleanup, render, screen } from "@testing-library/react";
import { act, cleanup, render, screen } from "jest-matrix-react";
import { mocked, Mocked } from "jest-mock";
import { mkRoomMember, MockedCall, setupAsyncStoreWithClient, stubClient, useMockedCalls } from "../../../test-utils";

2
test/components/views/beacon/ShareLatestLocation-test.tsx
View file

@ -7,7 +7,7 @@ Please see LICENSE files in the repository root for full details.
*/
import React from "react";
import { fireEvent, render } from "@testing-library/react";
import { fireEvent, render } from "jest-matrix-react";
import ShareLatestLocation from "../../../../src/components/views/beacon/ShareLatestLocation";
import { copyPlaintext } from "../../../../src/utils/strings";

2
test/components/views/beacon/StyledLiveBeaconIcon-test.tsx
View file

@ -7,7 +7,7 @@ Please see LICENSE files in the repository root for full details.
*/
import React from "react";
import { render } from "@testing-library/react";
import { render } from "jest-matrix-react";
import StyledLiveBeaconIcon from "../../../../src/components/views/beacon/StyledLiveBeaconIcon";

1
test/components/views/beacon/__snapshots__/BeaconListItem-test.tsx.snap
View file

@ -32,6 +32,7 @@ exports[`<BeaconListItem /> when a beacon is live and has locations renders beac
class="mx_BeaconListItem_interactions"
>
<a
aria-labelledby="floating-ui-1"
data-testid="open-location-in-osm"
href="https://www.openstreetmap.org/?mlat=51&mlon=41#map=16/51/41"
rel="noreferrer noopener"

1
test/components/views/beacon/__snapshots__/DialogSidebar-test.tsx.snap
View file

@ -74,6 +74,7 @@ exports[`<DialogSidebar /> renders sidebar correctly with beacons 1`] = `
class="mx_BeaconListItem_interactions"
>
<a
aria-labelledby="floating-ui-8"
data-testid="open-location-in-osm"
href="https://www.openstreetmap.org/?mlat=51&mlon=41#map=16/51/41"
rel="noreferrer noopener"

1
test/components/views/beacon/__snapshots__/ShareLatestLocation-test.tsx.snap
View file

@ -3,6 +3,7 @@
exports[`<ShareLatestLocation /> renders share buttons when there is a location 1`] = `
<DocumentFragment>
<a
aria-labelledby="floating-ui-1"
data-testid="open-location-in-osm"
href="https://www.openstreetmap.org/?mlat=51&mlon=42#map=16/51/42"
rel="noreferrer noopener"

2
test/components/views/beta/BetaCard-test.tsx
View file

@ -8,7 +8,7 @@ Please see LICENSE files in the repository root for full details.
import React from "react";
import { mocked } from "jest-mock";
import { render, screen } from "@testing-library/react";
import { render, screen } from "jest-matrix-react";
import { shouldShowFeedback } from "../../../../src/utils/Feedback";
import BetaCard from "../../../../src/components/views/beta/BetaCard";

2
test/components/views/context_menus/ContextMenu-test.tsx
View file

@ -7,7 +7,7 @@ Please see LICENSE files in the repository root for full details.
*/
import React from "react";
import { render } from "@testing-library/react";
import { render } from "jest-matrix-react";
import ContextMenu, { ChevronFace } from "../../../../src/components/structures/ContextMenu";
import UIStore from "../../../../src/stores/UIStore";

2
test/components/views/context_menus/EmbeddedPage-test.tsx
View file

@ -8,7 +8,7 @@ Please see LICENSE files in the repository root for full details.
import React from "react";
import fetchMock from "fetch-mock-jest";
import { render, screen } from "@testing-library/react";
import { render, screen } from "jest-matrix-react";
import { mocked } from "jest-mock";
import { _t } from "../../../../src/languageHandler";

2
test/components/views/context_menus/MessageContextMenu-test.tsx
View file

@ -7,7 +7,7 @@ Please see LICENSE files in the repository root for full details.
*/
import React from "react";
import { fireEvent, render, RenderResult, screen, waitFor } from "@testing-library/react";
import { fireEvent, render, RenderResult, screen, waitFor } from "jest-matrix-react";
import {
EventStatus,
MatrixEvent,

Some files were not shown because too many files have changed in this diff Show more