enki/blap
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 6 Wiki Activity

Move tooltip test up to PresenceIconView

Browse Source
This commit is contained in:
David Baker
2026-06-08 18:14:31 +01:00
parent 107289a16c
commit 07974c7747
4 changed files with 177 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/test/unit-tests/components/views/avatars/WithPresenceIndicator-test.tsx
+1 -13
View File
@@ -83,19 +83,7 @@ describe("WithPresenceIndicator", () => {
return member;
});
const { container, asFragment } = renderComponent();
const presence = container.querySelector(".mx_WithPresenceIndicator_icon")!;
expect(presence).toBeVisible();
await userEvent.hover(presence!);
// wait for the tooltip to open
const tooltip = await waitFor(() => {
const tooltip = document.getElementById(presence.getAttribute("aria-labelledby")!);
expect(tooltip).toBeVisible();
return tooltip;
});
expect(tooltip).toHaveTextContent(renderedStr);
const { asFragment } = renderComponent();
expect(asFragment()).toMatchSnapshot();
});
apps/web/test/unit-tests/components/views/avatars/__snapshots__/WithPresenceIndicator-test.tsx.snap
+113 -15
View File
@@ -7,11 +7,43 @@ exports[`WithPresenceIndicator renders presence indicator with tooltip for DM ro
>
<span />
<div
aria-labelledby="react-use-id-1"
class="mx_WithPresenceIndicator_icon mx_WithPresenceIndicator_icon_online"
style="width: 32px; height: 32px;"
tabindex="0"
/>
class="mx_WithPresenceIndicator_icon"
>
<span
tabindex="0"
>
<div
aria-labelledby="react-use-id-1"
class="mx_PresenceIconView"
>
<svg
class="mx_PresenceIconView_online"
fill="currentColor"
height="8px"
viewBox="0 0 8 8"
width="8px"
xmlns="http://www.w3.org/2000/svg"
>
<g
clip-path="url(#cpd_PresenceSolid8X8Icon_a)"
>
<path
d="M8 4a4 4 0 1 1-8 0 4 4 0 0 1 8 0"
/>
</g>
<defs>
<clippath
id="cpd_PresenceSolid8X8Icon_a"
>
<path
d="M0 0h8v8H0z"
/>
</clippath>
</defs>
</svg>
</div>
</span>
</div>
</div>
</DocumentFragment>
`;
@@ -23,11 +55,45 @@ exports[`WithPresenceIndicator renders presence indicator with tooltip for DM ro
>
<span />
<div
aria-labelledby="react-use-id-1"
class="mx_WithPresenceIndicator_icon mx_WithPresenceIndicator_icon_offline"
style="width: 32px; height: 32px;"
tabindex="0"
/>
class="mx_WithPresenceIndicator_icon"
>
<span
tabindex="0"
>
<div
aria-labelledby="react-use-id-1"
class="mx_PresenceIconView"
>
<svg
class="mx_PresenceIconView_offline"
fill="currentColor"
height="8px"
viewBox="0 0 8 8"
width="8px"
xmlns="http://www.w3.org/2000/svg"
>
<g
clip-path="url(#cpd_PresenceOutline8X8Icon_a)"
>
<path
clip-rule="evenodd"
d="M4 6.5a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5M4 8a4 4 0 1 0 0-8 4 4 0 0 0 0 8"
fill-rule="evenodd"
/>
</g>
<defs>
<clippath
id="cpd_PresenceOutline8X8Icon_a"
>
<path
d="M0 0h8v8H0z"
/>
</clippath>
</defs>
</svg>
</div>
</span>
</div>
</div>
</DocumentFragment>
`;
@@ -39,11 +105,43 @@ exports[`WithPresenceIndicator renders presence indicator with tooltip for DM ro
>
<span />
<div
aria-labelledby="react-use-id-1"
class="mx_WithPresenceIndicator_icon mx_WithPresenceIndicator_icon_away"
style="width: 32px; height: 32px;"
tabindex="0"
/>
class="mx_WithPresenceIndicator_icon"
>
<span
tabindex="0"
>
<div
aria-labelledby="react-use-id-1"
class="mx_PresenceIconView"
>
<svg
class="mx_PresenceIconView_unavailable"
fill="currentColor"
height="8px"
viewBox="0 0 8 8"
width="8px"
xmlns="http://www.w3.org/2000/svg"
>
<g
clip-path="url(#cpd_PresenceSolid8X8Icon_a)"
>
<path
d="M8 4a4 4 0 1 1-8 0 4 4 0 0 1 8 0"
/>
</g>
<defs>
<clippath
id="cpd_PresenceSolid8X8Icon_a"
>
<path
d="M0 0h8v8H0z"
/>
</clippath>
</defs>
</svg>
</div>
</span>
</div>
</div>
</DocumentFragment>
`;
apps/web/test/unit-tests/components/views/rooms/memberlist/PresenceIconView-test.tsx
+22 -1
View File
@@ -7,7 +7,8 @@ Please see LICENSE files in the repository root for full details.
*/
import React from "react";
import { render } from "jest-matrix-react";
import { render, waitFor } from "jest-matrix-react";
import userEvent from "@testing-library/user-event";
import AvatarPresenceIconView from "../../../../../../src/components/views/rooms/MemberList/tiles/common/PresenceIconView";
@@ -39,4 +40,24 @@ describe("<PresenceIconView/>", () => {
expect(container.querySelector(".mx_PresenceIconView_dnd")).toBeDefined();
expect(container).toMatchSnapshot();
});
it("renders the tooltip", async () => {
const user = userEvent.setup();
const { container, asFragment } = render(<AvatarPresenceIconView presenceState="busy" />);
const presence = container.querySelector(".mx_PresenceIconView")!;
expect(presence).toBeVisible();
await user.hover(presence!);
// wait for the tooltip to open
const tooltip = await waitFor(() => {
const tooltip = document.getElementById(presence.getAttribute("aria-labelledby")!);
expect(tooltip).toBeVisible();
return tooltip;
});
expect(tooltip).toHaveTextContent("Busy");
expect(asFragment()).toMatchSnapshot();
});
});
apps/web/test/unit-tests/components/views/rooms/memberlist/__snapshots__/PresenceIconView-test.tsx.snap
+41
View File
@@ -173,3 +173,44 @@ exports[`<PresenceIconView/> renders correctly for presence=unavailable/unreacha
</div>
</div>
`;
exports[`<PresenceIconView/> renders the tooltip 1`] = `
<DocumentFragment>
<span
tabindex="0"
>
<div
aria-labelledby="react-use-id-1"
class="mx_PresenceIconView"
>
<svg
class="mx_PresenceIconView_dnd"
fill="currentColor"
height="8px"
viewBox="0 0 8 8"
width="8px"
xmlns="http://www.w3.org/2000/svg"
>
<g
clip-path="url(#cpd_PresenceStrikethrough8X8Icon_a)"
>
<path
clip-rule="evenodd"
d="M8 4a4 4 0 1 1-8 0 4 4 0 0 1 8 0M5.435 6.048A2.5 2.5 0 0 1 1.687 3.05zm.914-1.19L2.648 1.897a2.5 2.5 0 0 1 3.701 2.961"
fill-rule="evenodd"
/>
</g>
<defs>
<clippath
id="cpd_PresenceStrikethrough8X8Icon_a"
>
<path
d="M0 0h8v8H0z"
/>
</clippath>
</defs>
</svg>
</div>
</span>
</DocumentFragment>
`;