Jika/element-web
1
0
Fork 0
Code Issues Pull Requests Projects Wiki Activity

Update dependency @vector-im/compound-web to v2 (#12133)

Browse Source 
* Update dependency @vector-im/compound-web to v2

* Update Tooltip props

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Include TooltipProvider in MatrixChat

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Fix pillify & tooltipify

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Update tests to use TooltipProvider where necessary

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Fix tooltips in Modals, ContextMenus, PersistedElements, Spoiler, HtmlExport

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Update tests

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* delint

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Update tests

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Fix tooltips in HTMLExport

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Don't pass mountAsChild to DOM

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* prettier

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Stabilise test

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

---------

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: Michael Telatynski <7t3chguy@gmail.com>
This commit is contained in:
renovate[bot]
2024-01-11 19:56:36 +00:00
committed by GitHub
parent 54b71140b8
commit 56d8ef3640
51 changed files with 293 additions and 221 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
test/components/views/avatars/DecoratedRoomAvatar-test.tsx
View File

@@ -19,6 +19,7 @@ import { mocked } from "jest-mock";
import { JoinRule, MatrixClient, PendingEventOrdering, Room } from "matrix-js-sdk/src/matrix";
import React from "react";
import userEvent from "@testing-library/user-event";
import { TooltipProvider } from "@vector-im/compound-web";
import { MatrixClientPeg } from "../../../../src/MatrixClientPeg";
import { stubClient } from "../../../test-utils";
@@ -47,7 +48,9 @@ describe("DecoratedRoomAvatar", () => {
it("shows an avatar with globe icon and tooltip for public room", async () => {
room.getJoinRule = jest.fn().mockReturnValue(JoinRule.Public);
const { container, asFragment } = render(<DecoratedRoomAvatar room={room} size="32px" />);
const { container, asFragment } = render(<DecoratedRoomAvatar room={room} size="32px" />, {
wrapper: TooltipProvider,
});
const globe = container.querySelector(".mx_DecoratedRoomAvatar_icon_globe")!;
expect(globe).toBeVisible();

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

@@ -17,6 +17,7 @@ limitations under the License.
import React from "react";
import { act, fireEvent, render } from "@testing-library/react";
import { Beacon, RoomMember, MatrixEvent, LocationAssetType } from "matrix-js-sdk/src/matrix";
import { TooltipProvider } from "@vector-im/compound-web";
import BeaconListItem from "../../../../src/components/views/beacon/BeaconListItem";
import MatrixClientContext from "../../../../src/contexts/MatrixClientContext";
@@ -75,6 +76,7 @@ describe("<BeaconListItem />", () => {
<MatrixClientContext.Provider value={mockClient}>
<BeaconListItem {...defaultProps} {...props} />
</MatrixClientContext.Provider>,
{ wrapper: TooltipProvider },
);
const setupRoomWithBeacons = (beaconInfoEvents: MatrixEvent[], locationEvents?: MatrixEvent[]): Beacon[] => {

4
test/components/views/beacon/BeaconViewDialog-test.tsx
View File

@@ -19,6 +19,7 @@ import { act, fireEvent, render, RenderResult } from "@testing-library/react";
import { MatrixClient, MatrixEvent, Room, RoomMember, getBeaconInfoIdentifier } from "matrix-js-sdk/src/matrix";
import * as maplibregl from "maplibre-gl";
import { mocked } from "jest-mock";
import { TooltipProvider } from "@vector-im/compound-web";
import BeaconViewDialog from "../../../../src/components/views/beacon/BeaconViewDialog";
import {
@@ -79,7 +80,8 @@ describe("<BeaconViewDialog />", () => {
matrixClient: mockClient as MatrixClient,
};
const getComponent = (props = {}): RenderResult => render(<BeaconViewDialog {...defaultProps} {...props} />);
const getComponent = (props = {}): RenderResult =>
render(<BeaconViewDialog {...defaultProps} {...props} />, { wrapper: TooltipProvider });
const openSidebar = (getByTestId: RenderResult["getByTestId"]) => {
fireEvent.click(getByTestId("beacon-view-dialog-open-sidebar"));

6
test/components/views/beacon/DialogSidebar-test.tsx
View File

@@ -16,6 +16,7 @@ limitations under the License.
import React, { ComponentProps } from "react";
import { act, fireEvent, render } from "@testing-library/react";
import { TooltipProvider } from "@vector-im/compound-web";
import DialogSidebar from "../../../../src/components/views/beacon/DialogSidebar";
import MatrixClientContext from "../../../../src/contexts/MatrixClientContext";
@@ -52,8 +53,9 @@ describe("<DialogSidebar />", () => {
const getComponent = (props = {}) => (
<MatrixClientContext.Provider value={client}>
<DialogSidebar {...defaultProps} {...props} />
);
<TooltipProvider>
<DialogSidebar {...defaultProps} {...props} />
</TooltipProvider>
</MatrixClientContext.Provider>
);

4
test/components/views/beacon/ShareLatestLocation-test.tsx
View File

@@ -16,6 +16,7 @@ limitations under the License.
import React from "react";
import { fireEvent, render } from "@testing-library/react";
import { TooltipProvider } from "@vector-im/compound-web";
import ShareLatestLocation from "../../../../src/components/views/beacon/ShareLatestLocation";
import { copyPlaintext } from "../../../../src/utils/strings";
@@ -32,7 +33,8 @@ describe("<ShareLatestLocation />", () => {
timestamp: 123,
},
};
const getComponent = (props = {}) => render(<ShareLatestLocation {...defaultProps} {...props} />);
const getComponent = (props = {}) =>
render(<ShareLatestLocation {...defaultProps} {...props} />, { wrapper: TooltipProvider });
beforeEach(() => {
jest.clearAllMocks();

2
test/components/views/beacon/__snapshots__/DialogSidebar-test.tsx.snap
View File

@@ -96,7 +96,6 @@ exports[`<DialogSidebar /> renders sidebar correctly with beacons 1`] = `
</li>
</ol>
</div>
);
</div>
`;
@@ -131,6 +130,5 @@ exports[`<DialogSidebar /> renders sidebar correctly without beacons 1`] = `
No live locations
</div>
</div>
);
</div>
`;

3
test/components/views/dialogs/ServerPickerDialog-test.tsx
View File

@@ -17,6 +17,7 @@ limitations under the License.
import React from "react";
import { fireEvent, render, screen } from "@testing-library/react";
import fetchMock from "fetch-mock-jest";
import { TooltipProvider } from "@vector-im/compound-web";
import ServerPickerDialog from "../../../../src/components/views/dialogs/ServerPickerDialog";
import SdkConfig from "../../../../src/SdkConfig";
@@ -55,7 +56,7 @@ describe("<ServerPickerDialog />", () => {
onFinished: any;
serverConfig: ValidatedServerConfig;
}> = {},
) => render(<ServerPickerDialog {...defaultProps} {...props} />);
) => render(<ServerPickerDialog {...defaultProps} {...props} />, { wrapper: TooltipProvider });
beforeEach(() => {
SdkConfig.add({

2
test/components/views/elements/FacePile-test.tsx
View File

@@ -14,6 +14,7 @@ limitations under the License.
import { render } from "@testing-library/react";
import React from "react";
import { TooltipProvider } from "@vector-im/compound-web";
import FacePile from "../../../../src/components/views/elements/FacePile";
import { mkRoomMember } from "../../../test-utils";
@@ -24,6 +25,7 @@ describe("<FacePile />", () => {
const { asFragment } = render(
<FacePile members={[member]} size="36px" overflow={false} tooltipLabel="tooltip" />,
{ wrapper: TooltipProvider },
);
expect(asFragment()).toMatchSnapshot();

5
test/components/views/elements/InfoTooltip-test.tsx
View File

@@ -17,12 +17,15 @@ limitations under the License.
import React from "react";
import userEvent from "@testing-library/user-event";
import { render, waitFor } from "@testing-library/react";
import { TooltipProvider } from "@vector-im/compound-web";
import InfoTooltip from "../../../../src/components/views/elements/InfoTooltip";
describe("InfoTooltip", () => {
it("should show tooltip on hover", async () => {
const { getByText, asFragment } = render(<InfoTooltip tooltip="Tooltip text">Trigger text</InfoTooltip>);
const { getByText, asFragment } = render(<InfoTooltip tooltip="Tooltip text">Trigger text</InfoTooltip>, {
wrapper: TooltipProvider,
});
const trigger = getByText("Trigger text");
expect(trigger).toBeVisible();

2
test/components/views/elements/Pill-test.tsx
View File

@@ -19,6 +19,7 @@ import { act, render, RenderResult, screen } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { mocked, Mocked } from "jest-mock";
import { MatrixClient, MatrixEvent, Room } from "matrix-js-sdk/src/matrix";
import { TooltipProvider } from "@vector-im/compound-web";
import dis from "../../../../src/dispatcher/dispatcher";
import { Pill, PillProps, PillType } from "../../../../src/components/views/elements/Pill";
@@ -64,6 +65,7 @@ describe("<Pill>", () => {
<div onClick={pillParentClickHandler}>
<Pill {...withDefault} />
</div>,
{ wrapper: TooltipProvider },
);
};

5
test/components/views/elements/RoomFacePile-test.tsx
View File

@@ -14,6 +14,7 @@ limitations under the License.
import { render } from "@testing-library/react";
import React from "react";
import { TooltipProvider } from "@vector-im/compound-web";
import { mkRoom, mkRoomMember, stubClient, withClientContextRenderOptions } from "../../../test-utils";
import RoomFacePile from "../../../../src/components/views/elements/RoomFacePile";
@@ -29,7 +30,9 @@ describe("<RoomFacePile />", () => {
jest.spyOn(room, "getJoinedMembers").mockReturnValue([mkRoomMember(room.roomId, "@bob:example.org", "join")]);
const { asFragment } = render(
<RoomFacePile onlyKnownUsers={false} room={room} />,
<TooltipProvider>
<RoomFacePile onlyKnownUsers={false} room={room} />
</TooltipProvider>,
withClientContextRenderOptions(MatrixClientPeg.get()!),
);

3
test/components/views/messages/CallEvent-test.tsx
View File

@@ -19,6 +19,7 @@ import { render, screen, act, cleanup, fireEvent, waitFor } from "@testing-libra
import { mocked, Mocked } from "jest-mock";
import { Room, RoomStateEvent, MatrixClient, PendingEventOrdering } from "matrix-js-sdk/src/matrix";
import { ClientWidgetApi, Widget } from "matrix-widget-api";
import { TooltipProvider } from "@vector-im/compound-web";
import type { RoomMember } from "matrix-js-sdk/src/matrix";
import {
@@ -102,7 +103,7 @@ describe("CallEvent", () => {
});
const renderEvent = () => {
render(<CallEvent mxEvent={call.event} />);
render(<CallEvent mxEvent={call.event} />, { wrapper: TooltipProvider });
};
it("shows a message and duration if the call was ended", () => {

3
test/components/views/messages/MStickerBody-test.tsx
View File

@@ -19,6 +19,7 @@ import { render, screen } from "@testing-library/react";
import { EventType, getHttpUriForMxc, MatrixEvent, Room } from "matrix-js-sdk/src/matrix";
import fetchMock from "fetch-mock-jest";
import userEvent from "@testing-library/user-event";
import { TooltipProvider } from "@vector-im/compound-web";
import { RoomPermalinkCreator } from "../../../../src/utils/permalinks/Permalinks";
import {
@@ -85,7 +86,7 @@ describe("<MStickerBody/>", () => {
it("should show a tooltip on hover", async () => {
fetchMock.getOnce(url, { status: 200 });
render(<MStickerBody {...props} mxEvent={mediaEvent} />);
render(<MStickerBody {...props} mxEvent={mediaEvent} />, { wrapper: TooltipProvider });
expect(screen.queryByRole("tooltip")).toBeNull();
await userEvent.hover(screen.getByRole("img"));

6
test/components/views/messages/MessageTimestamp-test.tsx
View File

@@ -17,6 +17,7 @@ limitations under the License.
import React from "react";
import { render, screen } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { TooltipProvider } from "@vector-im/compound-web";
import MessageTimestamp from "../../../../src/components/views/messages/MessageTimestamp";
@@ -30,7 +31,7 @@ describe("MessageTimestamp", () => {
const DAY_MS = HOUR_MS * 24;
it("should render HH:MM", () => {
const { asFragment } = render(<MessageTimestamp ts={nowDate.getTime()} />);
const { asFragment } = render(<MessageTimestamp ts={nowDate.getTime()} />, { wrapper: TooltipProvider });
expect(asFragment()).toMatchInlineSnapshot(`
<DocumentFragment>
<span
@@ -46,7 +47,7 @@ describe("MessageTimestamp", () => {
});
it("should show full date & time on hover", async () => {
const { container } = render(<MessageTimestamp ts={nowDate.getTime()} />);
const { container } = render(<MessageTimestamp ts={nowDate.getTime()} />, { wrapper: TooltipProvider });
await userEvent.hover(container.querySelector(".mx_MessageTimestamp")!);
expect((await screen.findByRole("tooltip")).textContent).toMatchInlineSnapshot(`"Fri, Dec 17, 2021, 08:09:00"`);
});
@@ -54,6 +55,7 @@ describe("MessageTimestamp", () => {
it("should show sent & received time on hover if passed", async () => {
const { container } = render(
<MessageTimestamp ts={nowDate.getTime()} receivedTs={nowDate.getTime() + DAY_MS} />,
{ wrapper: TooltipProvider },
);
await userEvent.hover(container.querySelector(".mx_MessageTimestamp")!);
expect((await screen.findByRole("tooltip")).textContent).toMatchInlineSnapshot(

5
test/components/views/polls/pollHistory/PollHistory-test.tsx
View File

@@ -17,6 +17,7 @@ limitations under the License.
import React from "react";
import { act, fireEvent, render } from "@testing-library/react";
import { Filter, EventTimeline, Room, MatrixEvent, M_POLL_START } from "matrix-js-sdk/src/matrix";
import { TooltipProvider } from "@vector-im/compound-web";
import { PollHistory } from "../../../../../src/components/views/polls/pollHistory/PollHistory";
import {
@@ -67,7 +68,9 @@ describe("<PollHistory />", () => {
const getComponent = () =>
render(<PollHistory {...defaultProps} />, {
wrapper: ({ children }) => (
<MatrixClientContext.Provider value={mockClient}>{children}</MatrixClientContext.Provider>
<MatrixClientContext.Provider value={mockClient}>
<TooltipProvider>{children}</TooltipProvider>
</MatrixClientContext.Provider>
),
});

4
test/components/views/polls/pollHistory/PollListItem-test.tsx
View File

@@ -17,6 +17,7 @@ limitations under the License.
import React from "react";
import { fireEvent, render } from "@testing-library/react";
import { MatrixEvent } from "matrix-js-sdk/src/matrix";
import { TooltipProvider } from "@vector-im/compound-web";
import { PollListItem } from "../../../../../src/components/views/polls/pollHistory/PollListItem";
import { makePollStartEvent, mockIntlDateTimeFormat, unmockIntlDateTimeFormat } from "../../../../test-utils";
@@ -25,7 +26,8 @@ describe("<PollListItem />", () => {
const event = makePollStartEvent("Question?", "@me:domain.org");
event.getContent().origin;
const defaultProps = { event, onClick: jest.fn() };
const getComponent = (props = {}) => render(<PollListItem {...defaultProps} {...props} />);
const getComponent = (props = {}) =>
render(<PollListItem {...defaultProps} {...props} />, { wrapper: TooltipProvider });
beforeAll(() => {
// mock default locale to en-GB and set timezone

3
test/components/views/polls/pollHistory/PollListItemEnded-test.tsx
View File

@@ -17,6 +17,7 @@ limitations under the License.
import React from "react";
import { render } from "@testing-library/react";
import { MatrixEvent, Poll, Room, M_TEXT } from "matrix-js-sdk/src/matrix";
import { TooltipProvider } from "@vector-im/compound-web";
import { PollListItemEnded } from "../../../../../src/components/views/polls/pollHistory/PollListItemEnded";
import {
@@ -60,7 +61,7 @@ describe("<PollListItemEnded />", () => {
const pollEndEvent = makePollEndEvent(pollId, roomId, userId, timestamp + 60000);
const getComponent = (props: { event: MatrixEvent; poll: Poll }) =>
render(<PollListItemEnded {...props} onClick={jest.fn()} />);
render(<PollListItemEnded {...props} onClick={jest.fn()} />, { wrapper: TooltipProvider });
beforeAll(() => {
// mock default locale to en-GB and set timezone

5
test/components/views/right_panel/RoomSummaryCard-test.tsx
View File

@@ -18,6 +18,7 @@ import React from "react";
import { render, fireEvent, screen } from "@testing-library/react";
import { EventType, MatrixEvent, Room, MatrixClient, JoinRule } from "matrix-js-sdk/src/matrix";
import { mocked, MockedObject } from "jest-mock";
import { TooltipProvider } from "@vector-im/compound-web";
import DMRoomMap from "../../../../src/utils/DMRoomMap";
import RoomSummaryCard from "../../../../src/components/views/right_panel/RoomSummaryCard";
@@ -55,7 +56,9 @@ describe("<RoomSummaryCard />", () => {
return render(<RoomSummaryCard {...defaultProps} {...props} />, {
wrapper: ({ children }) => (
<MatrixClientContext.Provider value={mockClient}>{children}</MatrixClientContext.Provider>
<MatrixClientContext.Provider value={mockClient}>
<TooltipProvider>{children}</TooltipProvider>
</MatrixClientContext.Provider>
),
});
};

13
test/components/views/right_panel/UserInfo-test.tsx
View File

@@ -37,6 +37,7 @@ import {
import { defer } from "matrix-js-sdk/src/utils";
import { EventEmitter } from "events";
import { UserVerificationStatus } from "matrix-js-sdk/src/crypto-api";
import { TooltipProvider } from "@vector-im/compound-web";
import UserInfo, {
BanToggleButton,
@@ -195,7 +196,11 @@ describe("<UserInfo />", () => {
const renderComponent = (props = {}) => {
const Wrapper = (wrapperProps = {}) => {
return <MatrixClientContext.Provider value={mockClient} {...wrapperProps} />;
return (
<TooltipProvider>
<MatrixClientContext.Provider value={mockClient} {...wrapperProps} />
</TooltipProvider>
);
};
return render(<UserInfo {...defaultProps} {...props} />, {
@@ -412,7 +417,11 @@ describe("<UserInfoHeader />", () => {
const renderComponent = (props = {}) => {
const Wrapper = (wrapperProps = {}) => {
return <MatrixClientContext.Provider value={mockClient} {...wrapperProps} />;
return (
<TooltipProvider>
<MatrixClientContext.Provider value={mockClient} {...wrapperProps} />
</TooltipProvider>
);
};
return render(<UserInfoHeader {...defaultProps} {...props} />, {

13
test/components/views/rooms/EventTile-test.tsx
View File

@@ -30,6 +30,7 @@ import {
} from "matrix-js-sdk/src/matrix";
import { EventEncryptionInfo, EventShieldColour, EventShieldReason } from "matrix-js-sdk/src/crypto-api";
import { CryptoBackend } from "matrix-js-sdk/src/common-crypto/CryptoBackend";
import { TooltipProvider } from "@vector-im/compound-web";
import EventTile, { EventTileProps } from "../../../../src/components/views/rooms/EventTile";
import MatrixClientContext from "../../../../src/contexts/MatrixClientContext";
@@ -66,11 +67,13 @@ describe("EventTile", () => {
return (
<MatrixClientContext.Provider value={client}>
<RoomContext.Provider value={props.roomContext}>
<EventTile
mxEvent={mxEvent}
replacingEventId={mxEvent.replacingEventId()}
{...(props.eventTilePropertyOverrides ?? {})}
/>
<TooltipProvider>
<EventTile
mxEvent={mxEvent}
replacingEventId={mxEvent.replacingEventId()}
{...(props.eventTilePropertyOverrides ?? {})}
/>
</TooltipProvider>
</RoomContext.Provider>
</MatrixClientContext.Provider>
);

3
test/components/views/rooms/LegacyRoomHeader-test.tsx
View File

@@ -30,6 +30,7 @@ import { ClientWidgetApi, Widget } from "matrix-widget-api";
import EventEmitter from "events";
import { setupJestCanvasMock } from "jest-canvas-mock";
import { ViewRoomOpts } from "@matrix-org/react-sdk-module-api/lib/lifecycles/RoomViewLifecycle";
import { TooltipProvider } from "@vector-im/compound-web";
import type { MatrixClient, MatrixEvent, RoomMember } from "matrix-js-sdk/src/matrix";
import type { MatrixCall } from "matrix-js-sdk/src/webrtc/call";
@@ -219,6 +220,7 @@ describe("LegacyRoomHeader", () => {
{...props}
/>
</RoomContext.Provider>,
{ wrapper: TooltipProvider },
);
};
@@ -843,6 +845,7 @@ function mountHeader(room: Room, propsOverride = {}, roomContext?: Partial<IRoom
<RoomContext.Provider value={{ ...roomContext, room } as IRoomState}>
<RoomHeader {...props} />
</RoomContext.Provider>,
{ wrapper: TooltipProvider },
);
}

3
test/components/views/rooms/MemberList-test.tsx
View File

@@ -20,6 +20,7 @@ import { act, fireEvent, render, RenderResult, screen } from "@testing-library/r
import { Room, MatrixClient, RoomState, RoomMember, User, MatrixEvent } from "matrix-js-sdk/src/matrix";
import { compare } from "matrix-js-sdk/src/utils";
import { mocked, MockedObject } from "jest-mock";
import { TooltipProvider } from "@vector-im/compound-web";
import { MatrixClientPeg } from "../../../../src/MatrixClientPeg";
import * as TestUtils from "../../../test-utils";
@@ -229,6 +230,7 @@ describe("MemberList", () => {
ref={gatherWrappedRef}
/>
</SDKContext.Provider>,
{ wrapper: TooltipProvider },
);
}
@@ -380,6 +382,7 @@ describe("MemberList", () => {
roomId={room.roomId}
/>
</SDKContext.Provider>,
{ wrapper: TooltipProvider },
);
};

7
test/components/views/rooms/MemberTile-test.tsx
View File

@@ -21,6 +21,7 @@ import { MatrixClient, RoomMember, Device } from "matrix-js-sdk/src/matrix";
import { UserVerificationStatus, DeviceVerificationStatus } from "matrix-js-sdk/src/crypto-api";
import { mocked } from "jest-mock";
import userEvent from "@testing-library/user-event";
import { TooltipProvider } from "@vector-im/compound-web";
import * as TestUtils from "../../../test-utils";
import MemberTile from "../../../../src/components/views/rooms/MemberTile";
@@ -36,7 +37,7 @@ describe("MemberTile", () => {
});
it("should not display an E2EIcon when the e2E status = normal", () => {
const { container } = render(<MemberTile member={member} />);
const { container } = render(<MemberTile member={member} />, { wrapper: TooltipProvider });
expect(container).toMatchSnapshot();
});
@@ -47,7 +48,7 @@ describe("MemberTile", () => {
wasCrossSigningVerified: jest.fn().mockReturnValue(true),
} as unknown as UserVerificationStatus);
const { container } = render(<MemberTile member={member} />);
const { container } = render(<MemberTile member={member} />, { wrapper: TooltipProvider });
expect(container).toMatchSnapshot();
await waitFor(async () => {
@@ -71,7 +72,7 @@ describe("MemberTile", () => {
crossSigningVerified: true,
} as DeviceVerificationStatus);
const { container } = render(<MemberTile member={member} />);
const { container } = render(<MemberTile member={member} />, { wrapper: TooltipProvider });
expect(container).toMatchSnapshot();
await waitFor(async () => {

2
test/components/views/rooms/MessageComposer-test.tsx
View File

@@ -18,6 +18,7 @@ import * as React from "react";
import { EventType, MatrixEvent, Room, RoomMember, THREAD_RELATION_TYPE } from "matrix-js-sdk/src/matrix";
import { act, render, screen } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { TooltipProvider } from "@vector-im/compound-web";
import {
clearAllModals,
@@ -513,6 +514,7 @@ function wrapAndRender(
<MessageComposer {...defaultProps} {...props} />
</RoomContext.Provider>
</MatrixClientContext.Provider>,
{ wrapper: TooltipProvider },
),
roomContext,
};

141
test/components/views/rooms/RoomHeader-test.tsx
View File

@@ -33,12 +33,14 @@ import {
getByRole,
getByText,
render,
RenderOptions,
screen,
waitFor,
} from "@testing-library/react";
import { ViewRoomOpts } from "@matrix-org/react-sdk-module-api/lib/lifecycles/RoomViewLifecycle";
import { TooltipProvider } from "@vector-im/compound-web";
import { filterConsole, mkEvent, stubClient, withClientContextRenderOptions } from "../../../test-utils";
import { filterConsole, mkEvent, stubClient } from "../../../test-utils";
import RoomHeader from "../../../../src/components/views/rooms/RoomHeader";
import DMRoomMap from "../../../../src/utils/DMRoomMap";
import { MatrixClientPeg } from "../../../../src/MatrixClientPeg";
@@ -52,9 +54,22 @@ import { CallStore } from "../../../../src/stores/CallStore";
import { Call, ElementCall } from "../../../../src/models/Call";
import * as ShieldUtils from "../../../../src/utils/ShieldUtils";
import { Container, WidgetLayoutStore } from "../../../../src/stores/widgets/WidgetLayoutStore";
import MatrixClientContext from "../../../../src/contexts/MatrixClientContext";
jest.mock("../../../../src/utils/ShieldUtils");
function getWrapper(): RenderOptions {
return {
wrapper: ({ children }) => (
<TooltipProvider>
<MatrixClientContext.Provider value={MatrixClientPeg.safeGet()}>
{children}
</MatrixClientContext.Provider>
</TooltipProvider>
),
};
}
describe("RoomHeader", () => {
filterConsole(
"[getType] Room !1:example.org does not have an m.room.create event",
@@ -84,10 +99,7 @@ describe("RoomHeader", () => {
});
it("renders the room header", () => {
const { container } = render(
<RoomHeader room={room} />,
withClientContextRenderOptions(MatrixClientPeg.get()!),
);
const { container } = render(<RoomHeader room={room} />, getWrapper());
expect(container).toHaveTextContent(ROOM_ID);
});
@@ -105,19 +117,13 @@ describe("RoomHeader", () => {
});
await room.addLiveEvents([roomTopic]);
const { container } = render(
<RoomHeader room={room} />,
withClientContextRenderOptions(MatrixClientPeg.get()!),
);
const { container } = render(<RoomHeader room={room} />, getWrapper());
expect(container).toHaveTextContent(TOPIC);
expect(getByRole(container, "link")).toHaveTextContent("http://element.io");
});
it("opens the room summary", async () => {
const { container } = render(
<RoomHeader room={room} />,
withClientContextRenderOptions(MatrixClientPeg.get()!),
);
const { container } = render(<RoomHeader room={room} />, getWrapper());
fireEvent.click(getByText(container, ROOM_ID));
expect(setCardSpy).toHaveBeenCalledWith({ phase: RightPanelPhases.RoomSummary });
@@ -149,10 +155,7 @@ describe("RoomHeader", () => {
},
]);
const { asFragment } = render(
<RoomHeader room={room} />,
withClientContextRenderOptions(MatrixClientPeg.get()!),
);
const { asFragment } = render(<RoomHeader room={room} />, getWrapper());
expect(asFragment()).toMatchSnapshot();
});
@@ -199,10 +202,7 @@ describe("RoomHeader", () => {
room.currentState.setJoinedMemberCount(members.length);
room.getJoinedMembers = jest.fn().mockReturnValue(members);
const { container } = render(
<RoomHeader room={room} />,
withClientContextRenderOptions(MatrixClientPeg.get()!),
);
const { container } = render(<RoomHeader room={room} />, getWrapper());
expect(container).toHaveTextContent("4");
@@ -215,10 +215,7 @@ describe("RoomHeader", () => {
});
it("opens the thread panel", async () => {
const { container } = render(
<RoomHeader room={room} />,
withClientContextRenderOptions(MatrixClientPeg.get()!),
);
const { container } = render(<RoomHeader room={room} />, getWrapper());
fireEvent.click(getByLabelText(container, "Threads"));
expect(setCardSpy).toHaveBeenCalledWith({ phase: RightPanelPhases.ThreadPanel });
@@ -229,10 +226,7 @@ describe("RoomHeader", () => {
if (name === "feature_notifications") return true;
});
const { container } = render(
<RoomHeader room={room} />,
withClientContextRenderOptions(MatrixClientPeg.get()!),
);
const { container } = render(<RoomHeader room={room} />, getWrapper());
fireEvent.click(getByLabelText(container, "Notifications"));
expect(setCardSpy).toHaveBeenCalledWith({ phase: RightPanelPhases.NotificationPanel });
@@ -241,10 +235,7 @@ describe("RoomHeader", () => {
describe("groups call disabled", () => {
it("you can't call if you're alone", () => {
mockRoomMembers(room, 1);
const { container } = render(
<RoomHeader room={room} />,
withClientContextRenderOptions(MatrixClientPeg.get()!),
);
const { container } = render(<RoomHeader room={room} />, getWrapper());
for (const button of getAllByLabelText(container, "There's no one here to call")) {
expect(button).toHaveAttribute("aria-disabled", "true");
}
@@ -252,10 +243,7 @@ describe("RoomHeader", () => {
it("you can call when you're two in the room", async () => {
mockRoomMembers(room, 2);
const { container } = render(
<RoomHeader room={room} />,
withClientContextRenderOptions(MatrixClientPeg.get()!),
);
const { container } = render(<RoomHeader room={room} />, getWrapper());
const voiceButton = getByLabelText(container, "Voice call");
const videoButton = getByLabelText(container, "Video call");
expect(voiceButton).not.toHaveAttribute("aria-disabled", "true");
@@ -276,10 +264,7 @@ describe("RoomHeader", () => {
// The JS-SDK does not export the class `MatrixCall` only the type
{} as MatrixCall,
);
const { container } = render(
<RoomHeader room={room} />,
withClientContextRenderOptions(MatrixClientPeg.get()!),
);
const { container } = render(<RoomHeader room={room} />, getWrapper());
for (const button of getAllByLabelText(container, "Ongoing call")) {
expect(button).toHaveAttribute("aria-disabled", "true");
}
@@ -288,10 +273,7 @@ describe("RoomHeader", () => {
it("can calls in large rooms if able to edit widgets", () => {
mockRoomMembers(room, 10);
jest.spyOn(room.currentState, "mayClientSendStateEvent").mockReturnValue(true);
const { container } = render(
<RoomHeader room={room} />,
withClientContextRenderOptions(MatrixClientPeg.get()!),
);
const { container } = render(<RoomHeader room={room} />, getWrapper());
expect(getByLabelText(container, "Voice call")).not.toHaveAttribute("aria-disabled", "true");
expect(getByLabelText(container, "Video call")).not.toHaveAttribute("aria-disabled", "true");
@@ -300,10 +282,7 @@ describe("RoomHeader", () => {
it("disable calls in large rooms by default", () => {
mockRoomMembers(room, 10);
jest.spyOn(room.currentState, "mayClientSendStateEvent").mockReturnValue(false);
const { container } = render(
<RoomHeader room={room} />,
withClientContextRenderOptions(MatrixClientPeg.get()!),
);
const { container } = render(<RoomHeader room={room} />, getWrapper());
expect(
getByLabelText(container, "You do not have permission to start voice calls", { selector: "button" }),
).toHaveAttribute("aria-disabled", "true");
@@ -324,10 +303,7 @@ describe("RoomHeader", () => {
// allow element calls
jest.spyOn(room.currentState, "mayClientSendStateEvent").mockReturnValue(true);
const { container } = render(
<RoomHeader room={room} />,
withClientContextRenderOptions(MatrixClientPeg.get()!),
);
const { container } = render(<RoomHeader room={room} />, getWrapper());
expect(screen.queryByTitle("Voice call")).toBeNull();
@@ -349,10 +325,7 @@ describe("RoomHeader", () => {
jest.spyOn(CallStore.instance, "getCall").mockReturnValue({ widget: {} } as Call);
const { container } = render(
<RoomHeader room={room} />,
withClientContextRenderOptions(MatrixClientPeg.get()!),
);
const { container } = render(<RoomHeader room={room} />, getWrapper());
expect(getByLabelText(container, "Ongoing call")).toHaveAttribute("aria-disabled", "true");
});
@@ -366,10 +339,7 @@ describe("RoomHeader", () => {
const widget = {};
jest.spyOn(CallStore.instance, "getCall").mockReturnValue({ widget } as Call);
const { container } = render(
<RoomHeader room={room} />,
withClientContextRenderOptions(MatrixClientPeg.get()!),
);
const { container } = render(<RoomHeader room={room} />, getWrapper());
expect(getByLabelText(container, "Video call")).not.toHaveAttribute("aria-disabled", "true");
fireEvent.click(getByLabelText(container, "Video call"));
expect(spy).toHaveBeenCalledWith(room, widget, Container.Top);
@@ -381,10 +351,7 @@ describe("RoomHeader", () => {
// The JS-SDK does not export the class `MatrixCall` only the type
{} as MatrixCall,
);
const { container } = render(
<RoomHeader room={room} />,
withClientContextRenderOptions(MatrixClientPeg.get()!),
);
const { container } = render(<RoomHeader room={room} />, getWrapper());
for (const button of getAllByLabelText(container, "Ongoing call")) {
expect(button).toHaveAttribute("aria-disabled", "true");
}
@@ -392,10 +359,7 @@ describe("RoomHeader", () => {
it("can't call if you have no friends", () => {
mockRoomMembers(room, 1);
const { container } = render(
<RoomHeader room={room} />,
withClientContextRenderOptions(MatrixClientPeg.get()!),
);
const { container } = render(<RoomHeader room={room} />, getWrapper());
for (const button of getAllByLabelText(container, "There's no one here to call")) {
expect(button).toHaveAttribute("aria-disabled", "true");
}
@@ -403,10 +367,7 @@ describe("RoomHeader", () => {
it("calls using legacy or jitsi", async () => {
mockRoomMembers(room, 2);
const { container } = render(
<RoomHeader room={room} />,
withClientContextRenderOptions(MatrixClientPeg.get()!),
);
const { container } = render(<RoomHeader room={room} />, getWrapper());
const voiceButton = getByLabelText(container, "Voice call");
const videoButton = getByLabelText(container, "Video call");
@@ -429,10 +390,7 @@ describe("RoomHeader", () => {
return false;
});
const { container } = render(
<RoomHeader room={room} />,
withClientContextRenderOptions(MatrixClientPeg.get()!),
);
const { container } = render(<RoomHeader room={room} />, getWrapper());
const voiceButton = getByLabelText(container, "Voice call");
const videoButton = getByLabelText(container, "Video call");
@@ -456,10 +414,7 @@ describe("RoomHeader", () => {
return false;
});
const { container } = render(
<RoomHeader room={room} />,
withClientContextRenderOptions(MatrixClientPeg.get()!),
);
const { container } = render(<RoomHeader room={room} />, getWrapper());
const voiceButton = getByLabelText(container, "Voice call");
const videoButton = getByLabelText(container, "Video call");
@@ -483,10 +438,7 @@ describe("RoomHeader", () => {
});
room.addLiveEvents([joinRuleEvent]);
const { container } = render(
<RoomHeader room={room} />,
withClientContextRenderOptions(MatrixClientPeg.get()!),
);
const { container } = render(<RoomHeader room={room} />, getWrapper());
expect(getByLabelText(container, "Public room")).toBeInTheDocument();
});
@@ -521,10 +473,7 @@ describe("RoomHeader", () => {
])("shows the %s icon", async (value: ShieldUtils.E2EStatus, expectedLabel: string) => {
jest.spyOn(ShieldUtils, "shieldStatusForRoom").mockResolvedValue(value);
const { container } = render(
<RoomHeader room={room} />,
withClientContextRenderOptions(MatrixClientPeg.get()!),
);
const { container } = render(<RoomHeader room={room} />, getWrapper());
await waitFor(() => expect(getByLabelText(container, expectedLabel)).toBeInTheDocument());
});
@@ -539,10 +488,7 @@ describe("RoomHeader", () => {
onClick: () => {},
},
];
render(
<RoomHeader room={room} additionalButtons={additionalButtons} />,
withClientContextRenderOptions(MatrixClientPeg.get()!),
);
render(<RoomHeader room={room} additionalButtons={additionalButtons} />, getWrapper());
expect(screen.getByRole("button", { name: "test-label" })).toBeInTheDocument();
});
@@ -557,10 +503,7 @@ describe("RoomHeader", () => {
},
];
render(
<RoomHeader room={room} additionalButtons={additionalButtons} />,
withClientContextRenderOptions(MatrixClientPeg.get()!),
);
render(<RoomHeader room={room} additionalButtons={additionalButtons} />, getWrapper());
const button = screen.getByRole("button", { name: "test-label" });
const event = createEvent.click(button);
@@ -573,7 +516,7 @@ describe("RoomHeader", () => {
describe("ask to join disabled", () => {
it("does not render the RoomKnocksBar", () => {
render(<RoomHeader room={room} />, withClientContextRenderOptions(MatrixClientPeg.get()!));
render(<RoomHeader room={room} />, getWrapper());
expect(screen.queryByRole("heading", { name: "Asking to join" })).not.toBeInTheDocument();
});
});
@@ -585,7 +528,7 @@ describe("RoomHeader", () => {
jest.spyOn(room, "getJoinRule").mockReturnValue(JoinRule.Knock);
jest.spyOn(room, "getMembersWithMembership").mockReturnValue([new RoomMember(room.roomId, "@foo")]);
render(<RoomHeader room={room} />, withClientContextRenderOptions(MatrixClientPeg.get()!));
render(<RoomHeader room={room} />, getWrapper());
expect(screen.getByRole("heading", { name: "Asking to join" })).toBeInTheDocument();
});
});

7
test/components/views/rooms/RoomHeader/VideoRoomChatButton-test.tsx
View File

@@ -18,6 +18,7 @@ import React from "react";
import { MockedObject } from "jest-mock";
import { Room } from "matrix-js-sdk/src/matrix";
import { fireEvent, render, screen } from "@testing-library/react";
import { TooltipProvider } from "@vector-im/compound-web";
import { VideoRoomChatButton } from "../../../../../src/components/views/rooms/RoomHeader/VideoRoomChatButton";
import { SDKContext, SdkContextClass } from "../../../../../src/contexts/SDKContext";
@@ -56,7 +57,11 @@ describe("<VideoRoomChatButton />", () => {
const getComponent = (room: Room) =>
render(<VideoRoomChatButton room={room} />, {
wrapper: ({ children }) => <SDKContext.Provider value={sdkContext}>{children}</SDKContext.Provider>,
wrapper: ({ children }) => (
<SDKContext.Provider value={sdkContext}>
<TooltipProvider>{children}</TooltipProvider>
</SDKContext.Provider>
),
});
beforeEach(() => {

7
test/components/views/settings/devices/FilteredDeviceList-test.tsx
View File

@@ -16,6 +16,7 @@ limitations under the License.
import React, { ComponentProps } from "react";
import { act, fireEvent, render } from "@testing-library/react";
import { TooltipProvider } from "@vector-im/compound-web";
import { FilteredDeviceList } from "../../../../../src/components/views/settings/devices/FilteredDeviceList";
import { DeviceSecurityVariation } from "../../../../../src/components/views/settings/devices/types";
@@ -81,7 +82,11 @@ describe("<FilteredDeviceList />", () => {
supportsMSC3881: true,
};
const getComponent = (props = {}) => <FilteredDeviceList {...defaultProps} {...props} />;
const getComponent = (props = {}) => (
<TooltipProvider>
<FilteredDeviceList {...defaultProps} {...props} />
</TooltipProvider>
);
afterAll(() => {
jest.spyOn(global.Date, "now").mockRestore();

7
test/components/views/settings/devices/FilteredDeviceListHeader-test.tsx
View File

@@ -16,6 +16,7 @@ limitations under the License.
import { fireEvent, render } from "@testing-library/react";
import React from "react";
import { TooltipProvider } from "@vector-im/compound-web";
import FilteredDeviceListHeader from "../../../../../src/components/views/settings/devices/FilteredDeviceListHeader";
@@ -27,7 +28,11 @@ describe("<FilteredDeviceListHeader />", () => {
children: <div>test</div>,
["data-testid"]: "test123",
};
const getComponent = (props = {}) => <FilteredDeviceListHeader {...defaultProps} {...props} />;
const getComponent = (props = {}) => (
<TooltipProvider>
<FilteredDeviceListHeader {...defaultProps} {...props} />
</TooltipProvider>
);
it("renders correctly when no devices are selected", () => {
const { container } = render(getComponent());

9
test/components/views/settings/tabs/user/SessionManagerTab-test.tsx
View File

@@ -35,6 +35,7 @@ import {
MatrixClient,
} from "matrix-js-sdk/src/matrix";
import { mocked, MockedObject } from "jest-mock";
import { TooltipProvider } from "@vector-im/compound-web";
import {
clearAllModals,
@@ -97,9 +98,11 @@ describe("<SessionManagerTab />", () => {
const defaultProps = {};
const getComponent = (props = {}): React.ReactElement => (
<SDKContext.Provider value={sdkContext}>
<SessionManagerTab {...defaultProps} {...props} />
</SDKContext.Provider>
<TooltipProvider>
<SDKContext.Provider value={sdkContext}>
<SessionManagerTab {...defaultProps} {...props} />
</SDKContext.Provider>
</TooltipProvider>
);
const toggleDeviceDetails = (

3
test/components/views/voip/CallView-test.tsx
View File

@@ -20,6 +20,7 @@ import { render, screen, act, fireEvent, waitFor, cleanup } from "@testing-libra
import { mocked, Mocked } from "jest-mock";
import { MatrixClient, PendingEventOrdering, Room, RoomStateEvent } from "matrix-js-sdk/src/matrix";
import { Widget } from "matrix-widget-api";
import { TooltipProvider } from "@vector-im/compound-web";
import type { RoomMember } from "matrix-js-sdk/src/matrix";
import type { ClientWidgetApi } from "matrix-widget-api";
@@ -75,7 +76,7 @@ describe("CallView", () => {
});
const renderView = async (): Promise<void> => {
render(<CallView room={room} resizing={false} waitForCall={false} />);
render(<CallView room={room} resizing={false} waitForCall={false} />, { wrapper: TooltipProvider });
await act(() => Promise.resolve()); // Let effects settle
};