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

* 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
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
51 changed files with 293 additions and 221 deletions

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();
});
});