From 07974c7747a2660d3e161872d742a345d156d678 Mon Sep 17 00:00:00 2001
From: David Baker <dbkr@users.noreply.github.com>
Date: Mon, 8 Jun 2026 18:14:31 +0100
Subject: [PATCH] Move tooltip test up to PresenceIconView

---
 .../avatars/WithPresenceIndicator-test.tsx    |  14 +-
 .../WithPresenceIndicator-test.tsx.snap       | 128 ++++++++++++++++--
 .../memberlist/PresenceIconView-test.tsx      |  23 +++-
 .../PresenceIconView-test.tsx.snap            |  41 ++++++
 4 files changed, 177 insertions(+), 29 deletions(-)

diff --git a/apps/web/test/unit-tests/components/views/avatars/WithPresenceIndicator-test.tsx b/apps/web/test/unit-tests/components/views/avatars/WithPresenceIndicator-test.tsx
index 0583f728d2..20ef1799ad 100644
--- a/apps/web/test/unit-tests/components/views/avatars/WithPresenceIndicator-test.tsx
+++ b/apps/web/test/unit-tests/components/views/avatars/WithPresenceIndicator-test.tsx
@@ -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();
     });
diff --git a/apps/web/test/unit-tests/components/views/avatars/__snapshots__/WithPresenceIndicator-test.tsx.snap b/apps/web/test/unit-tests/components/views/avatars/__snapshots__/WithPresenceIndicator-test.tsx.snap
index ac7ebee2be..46f56e3a7a 100644
--- a/apps/web/test/unit-tests/components/views/avatars/__snapshots__/WithPresenceIndicator-test.tsx.snap
+++ b/apps/web/test/unit-tests/components/views/avatars/__snapshots__/WithPresenceIndicator-test.tsx.snap
@@ -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>
 `;
diff --git a/apps/web/test/unit-tests/components/views/rooms/memberlist/PresenceIconView-test.tsx b/apps/web/test/unit-tests/components/views/rooms/memberlist/PresenceIconView-test.tsx
index 74c23f2199..4c9714a782 100644
--- a/apps/web/test/unit-tests/components/views/rooms/memberlist/PresenceIconView-test.tsx
+++ b/apps/web/test/unit-tests/components/views/rooms/memberlist/PresenceIconView-test.tsx
@@ -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();
+    });
 });
diff --git a/apps/web/test/unit-tests/components/views/rooms/memberlist/__snapshots__/PresenceIconView-test.tsx.snap b/apps/web/test/unit-tests/components/views/rooms/memberlist/__snapshots__/PresenceIconView-test.tsx.snap
index a2be761ec7..87159b7d1e 100644
--- a/apps/web/test/unit-tests/components/views/rooms/memberlist/__snapshots__/PresenceIconView-test.tsx.snap
+++ b/apps/web/test/unit-tests/components/views/rooms/memberlist/__snapshots__/PresenceIconView-test.tsx.snap
@@ -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>
+`;