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:
parent
54b71140b8
commit
56d8ef3640
51 changed files with 293 additions and 221 deletions
|
@ -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();
|
||||
});
|
||||
});
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue