mirror of
https://github.com/vector-im/element-call.git
synced 2026-10-10 23:25:52 +00:00
Timo K.andClaude Fable 5.1
e296d88969
Compound's Tooltip floats its bubble through floating-ui's FloatingPortal, into the body: outside the element the component build confines its stylesheet to, so a label tooltip shows as bare text at all times. An enclosing FloatingPortal rooted at the container makes the nested portals land inside it instead. The call goes in an isolating wrapper there, standing in for the standalone page's #root, so that its footer layer no longer paints above the modals. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
44 lines
1.4 KiB
TypeScript
44 lines
1.4 KiB
TypeScript
/*
|
|
Copyright 2026 Element Creations Ltd.
|
|
|
|
SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
|
|
Please see LICENSE in the repository root for full details.
|
|
*/
|
|
|
|
import { render, screen } from "@testing-library/react";
|
|
import { Tooltip, TooltipProvider } from "@vector-im/compound-web";
|
|
import { afterEach, describe, expect, test } from "vitest";
|
|
|
|
import { PortalRoot } from "./PortalRoot";
|
|
|
|
describe("PortalRoot", () => {
|
|
const root = document.createElement("div");
|
|
document.body.appendChild(root);
|
|
afterEach(() => root.replaceChildren());
|
|
|
|
// A label tooltip is in the DOM from the start, hidden by the stylesheet until
|
|
// hovered, which is what makes it show as bare text when it lands outside the
|
|
// root
|
|
const tree = (
|
|
<TooltipProvider>
|
|
<Tooltip label="Mute microphone">
|
|
<button>mic</button>
|
|
</Tooltip>
|
|
</TooltipProvider>
|
|
);
|
|
|
|
test("Compound's tooltips float into the root", () => {
|
|
render(<PortalRoot root={root}>{tree}</PortalRoot>);
|
|
expect(root).toContainElement(
|
|
screen.getByRole("button", { name: "Mute microphone" }),
|
|
);
|
|
expect(root).toContainElement(screen.getByText("Mute microphone"));
|
|
});
|
|
|
|
test("without it they float into the body", () => {
|
|
render(tree);
|
|
expect(root).not.toContainElement(screen.getByText("Mute microphone"));
|
|
expect(document.body).toContainElement(screen.getByText("Mute microphone"));
|
|
});
|
|
});
|