fix automatic DM avatar with functional members (#12157)

* fix automatic DM avatar with functional members

* add tests for functional members

* add snapshot for functional members avatar test

* update snapshot for functional members avatar test

* restore mocks after each functional members avatar test

* refactor DecoratedRoomAvatar-test

---------

Co-authored-by: Richard van der Hoff <[email protected]>
Co-authored-by: R Midhun Suresh <[email protected]>

Author: 3 people

src/components/views/avatars/DecoratedRoomAvatar.tsx

@@ -29,6 +29,7 @@ import { MatrixClientPeg } from "../../../MatrixClientPeg";
 import { _t } from "../../../languageHandler";
 import DMRoomMap from "../../../utils/DMRoomMap";
 import { IOOBData } from "../../../stores/ThreepidInviteStore";
+import { getJoinedNonFunctionalMembers } from "../../../utils/room/getJoinedNonFunctionalMembers";
 
 interface IProps {
     room: Room;
@@ -158,7 +159,7 @@ export default class DecoratedRoomAvatar extends React.PureComponent<IProps, ISt
 
         // We look at the DMRoomMap and not the tag here so that we don't exclude DMs in Favourites
         const otherUserId = DMRoomMap.shared().getUserIdForRoomId(this.props.room.roomId);
-        if (otherUserId && this.props.room.getJoinedMemberCount() === 2) {
+        if (otherUserId && getJoinedNonFunctionalMembers(this.props.room).length === 2) {
             // Track presence, if available
             if (isPresenceEnabled(this.props.room.client)) {
                 this.dmUser = MatrixClientPeg.safeGet().getUser(otherUserId);

test/components/views/avatars/DecoratedRoomAvatar-test.tsx

@@ -26,31 +26,45 @@ import { stubClient } from "../../../test-utils";
 import DecoratedRoomAvatar from "../../../../src/components/views/avatars/DecoratedRoomAvatar";
 import DMRoomMap from "../../../../src/utils/DMRoomMap";
 
+jest.mock("../../../../src/utils/presence", () => ({ isPresenceEnabled: jest.fn().mockReturnValue(true) }));
+
+jest.mock("../../../../src/utils/room/getJoinedNonFunctionalMembers", () => ({
+    getJoinedNonFunctionalMembers: jest.fn().mockReturnValue([0, 1]),
+}));
+
 describe("DecoratedRoomAvatar", () => {
     const ROOM_ID = "roomId";
 
     let mockClient: MatrixClient;
     let room: Room;
 
+    function renderComponent() {
+        return render(<DecoratedRoomAvatar room={room} size="32px" />, {
+            wrapper: TooltipProvider,
+        });
+    }
+
     beforeEach(() => {
         stubClient();
         mockClient = mocked(MatrixClientPeg.safeGet());
 
         room = new Room(ROOM_ID, mockClient, mockClient.getUserId() ?? "", {
             pendingEventOrdering: PendingEventOrdering.Detached,
         });
+    });
+
+    afterEach(() => {
+        jest.restoreAllMocks();
+    });
 
+    it("shows an avatar with globe icon and tooltip for public room", async () => {
         const dmRoomMap = {
             getUserIdForRoomId: jest.fn(),
         } as unknown as DMRoomMap;
         jest.spyOn(DMRoomMap, "shared").mockReturnValue(dmRoomMap);
-    });
-
-    it("shows an avatar with globe icon and tooltip for public room", async () => {
         room.getJoinRule = jest.fn().mockReturnValue(JoinRule.Public);
-        const { container, asFragment } = render(<DecoratedRoomAvatar room={room} size="32px" />, {
-            wrapper: TooltipProvider,
-        });
+
+        const { container, asFragment } = renderComponent();
 
         const globe = container.querySelector(".mx_DecoratedRoomAvatar_icon_globe")!;
         expect(globe).toBeVisible();
@@ -66,4 +80,31 @@ describe("DecoratedRoomAvatar", () => {
 
         expect(asFragment()).toMatchSnapshot();
     });
+
+    it("shows the presence indicator in a DM room that also has functional members", async () => {
+        const DM_USER_ID = "@bob:foo.bar";
+        const dmRoomMap = {
+            getUserIdForRoomId: () => {
+                return DM_USER_ID;
+            },
+        } as unknown as DMRoomMap;
+        jest.spyOn(DMRoomMap, "shared").mockReturnValue(dmRoomMap);
+        jest.spyOn(DecoratedRoomAvatar.prototype as any, "getPresenceIcon").mockImplementation(() => "ONLINE");
+
+        const { container, asFragment } = renderComponent();
+
+        const presence = container.querySelector(".mx_DecoratedRoomAvatar_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-describedby")!);
+            expect(tooltip).toBeVisible();
+            return tooltip;
+        });
+        expect(tooltip).toHaveTextContent("Online");
+
+        expect(asFragment()).toMatchSnapshot();
+    });
 });

test/components/views/avatars/__snapshots__/DecoratedRoomAvatar-test.tsx.snap

@@ -24,3 +24,28 @@ exports[`DecoratedRoomAvatar shows an avatar with globe icon and tooltip for pub
   </div>
 </DocumentFragment>
 `;
+
+exports[`DecoratedRoomAvatar shows the presence indicator in a DM room that also has functional members 1`] = `
+<DocumentFragment>
+  <div
+    class="mx_DecoratedRoomAvatar mx_DecoratedRoomAvatar_cutout"
+  >
+    <span
+      class="_avatar_k41ul_17 mx_BaseAvatar _avatar-imageless_k41ul_60"
+      data-color="5"
+      data-testid="avatar-img"
+      data-type="round"
+      role="presentation"
+      style="--cpd-avatar-size: 32px;"
+    >
+      r
+    </span>
+    <div
+      aria-describedby="radix-1"
+      class="mx_DecoratedRoomAvatar_icon mx_DecoratedRoomAvatar_icon_online"
+      data-state="delayed-open"
+      tabindex="0"
+    />
+  </div>
+</DocumentFragment>
+`;