Fix missing avatar for show current profiles (#9563)

src/components/views/avatars/BaseAvatar.tsx

@@ -48,11 +48,11 @@ interface IProps {
  tabIndex?: number;
 }
 
-const calculateUrls = (url, urls, lowBandwidth) => {
+const calculateUrls = (url: string, urls: string[], lowBandwidth: boolean): string[] => {
  // work out the full set of urls to try to load. This is formed like so:
  // imageUrls: [ props.url, ...props.urls ]
 
- let _urls = [];
+ let _urls: string[] = [];
  if (!lowBandwidth) {
  _urls = urls || [];
 
@@ -119,7 +119,7 @@ const BaseAvatar = (props: IProps) => {
 
  const [imageUrl, onError] = useImageUrl({ url, urls });
 
- if (!imageUrl && defaultToInitialLetter) {
+ if (!imageUrl && defaultToInitialLetter && name) {
  const initialLetter = AvatarLogic.getInitialLetter(name);
  const textNode = (
  <span
@@ -145,7 +145,8 @@ const BaseAvatar = (props: IProps) => {
  width: toPx(width),
  height: toPx(height),
  }}
- aria-hidden="true" />
+ aria-hidden="true"
+ data-testid="avatar-img" />
  );
 
  if (onClick) {
@@ -193,6 +194,7 @@ const BaseAvatar = (props: IProps) => {
  title={title}
  alt={_t("Avatar")}
  inputRef={inputRef}
+ data-testid="avatar-img"
  {...otherProps} />
  );
  } else {
@@ -208,6 +210,7 @@ const BaseAvatar = (props: IProps) => {
  title={title}
  alt=""
  ref={inputRef}
+ data-testid="avatar-img"
  {...otherProps} />
  );
  }

src/components/views/avatars/MemberAvatar.tsx

@@ -77,27 +77,24 @@ export default function MemberAvatar({
  ) ?? props.fallbackUserId;
  }
  }
- const userId = member?.userId ?? props.fallbackUserId;
 
- return (
- <BaseAvatar
- {...props}
- width={width}
- height={height}
- resizeMethod={resizeMethod}
- name={name ?? ""}
- title={props.hideTitle ? undefined : title}
- idName={userId}
- url={imageUrl}
- onClick={viewUserOnClick ? () => {
- dis.dispatch({
- action: Action.ViewUser,
- member: props.member,
- push: card.isCard,
- });
- } : props.onClick}
- />
- );
+ return <BaseAvatar
+ {...props}
+ width={width}
+ height={height}
+ resizeMethod={resizeMethod}
+ name={name ?? ""}
+ title={props.hideTitle ? undefined : title}
+ idName={member?.userId ?? props.fallbackUserId}
+ url={imageUrl}
+ onClick={viewUserOnClick ? () => {
+ dis.dispatch({
+ action: Action.ViewUser,
+ member: props.member,
+ push: card.isCard,
+ });
+ } : props.onClick}
+ />;
 }
 
 export class LegacyMemberAvatar extends React.Component<IProps> {

src/hooks/room/useRoomMemberProfile.ts

@@ -15,7 +15,7 @@ limitations under the License.
 */
 
 import { RoomMember } from "matrix-js-sdk/src/models/room-member";
-import { useContext, useEffect, useState } from "react";
+import { useContext, useMemo } from "react";
 
 import RoomContext, { TimelineRenderingType } from "../../contexts/RoomContext";
 import { useSettingValue } from "../useSettings";
@@ -29,18 +29,19 @@ export function useRoomMemberProfile({
  member?: RoomMember | null;
  forceHistorical?: boolean;
 }): RoomMember | undefined | null {
- const [member, setMember] = useState<RoomMember | undefined | null>(propMember);
-
  const context = useContext(RoomContext);
  const useOnlyCurrentProfiles = useSettingValue("useOnlyCurrentProfiles");
 
- useEffect(() => {
+ const member = useMemo(() => {
  const threadContexts = [TimelineRenderingType.ThreadsList, TimelineRenderingType.Thread];
- if ((propMember && !forceHistorical && useOnlyCurrentProfiles)
- || threadContexts.includes(context?.timelineRenderingType)) {
- setMember(context?.room?.getMember(userId));
+ if ((!forceHistorical && useOnlyCurrentProfiles)
+ || threadContexts.includes(context.timelineRenderingType)) {
+ const currentMember = context.room?.getMember(userId);
+ if (currentMember) return currentMember;
  }
- }, [forceHistorical, propMember, context.room, context?.timelineRenderingType, useOnlyCurrentProfiles, userId]);
+
+ return propMember;
+ }, [forceHistorical, propMember, context.room, context.timelineRenderingType, useOnlyCurrentProfiles, userId]);
 
  return member;
 }

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

@@ -0,0 +1,79 @@
+/*
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import { getByTestId, render, waitFor } from "@testing-library/react";
+import { mocked } from "jest-mock";
+import { MatrixClient, PendingEventOrdering } from "matrix-js-sdk/src/client";
+import { Room } from "matrix-js-sdk/src/models/room";
+import { RoomMember } from "matrix-js-sdk/src/models/room-member";
+import React from "react";
+
+import MemberAvatar from "../../../../src/components/views/avatars/MemberAvatar";
+import RoomContext from "../../../../src/contexts/RoomContext";
+import { MatrixClientPeg } from "../../../../src/MatrixClientPeg";
+import SettingsStore from "../../../../src/settings/SettingsStore";
+import { getRoomContext } from "../../../test-utils/room";
+import { stubClient } from "../../../test-utils/test-utils";
+
+describe("MemberAvatar", () => {
+ const ROOM_ID = "roomId";
+
+ let mockClient: MatrixClient;
+ let room: Room;
+ let member: RoomMember;
+
+ function getComponent(props) {
+ return <RoomContext.Provider value={getRoomContext(room, {})}>
+ <MemberAvatar
+ member={null}
+ width={35}
+ height={35}
+ {...props}
+ />
+ </RoomContext.Provider>;
+ }
+
+ beforeEach(() => {
+ jest.clearAllMocks();
+
+ stubClient();
+ mockClient = mocked(MatrixClientPeg.get());
+
+ room = new Room(ROOM_ID, mockClient, mockClient.getUserId() ?? "", {
+ pendingEventOrdering: PendingEventOrdering.Detached,
+ });
+
+ member = new RoomMember(ROOM_ID, "@bob:example.org");
+ jest.spyOn(room, "getMember").mockReturnValue(member);
+ jest.spyOn(member, "getMxcAvatarUrl").mockReturnValue("http://placekitten.com/400/400");
+ });
+
+ it("shows an avatar for useOnlyCurrentProfiles", async () => {
+ jest.spyOn(SettingsStore, "getValue").mockImplementation((settingName: string) => {
+ return settingName === "useOnlyCurrentProfiles";
+ });
+
+ const { container } = render(getComponent({}));
+
+ let avatar: HTMLElement;
+ await waitFor(() => {
+ avatar = getByTestId(container, "avatar-img");
+ expect(avatar).toBeInTheDocument();
+ });
+
+ expect(avatar!.getAttribute("src")).not.toBe("");
+ });
+});

test/components/views/beacon/__snapshots__/BeaconMarker-test.tsx.snap

@@ -262,6 +262,7 @@ exports[`<BeaconMarker /> renders marker when beacon has location 1`] = `
  alt=""
  aria-hidden="true"
  className="mx_BaseAvatar_image"
+ data-testid="avatar-img"
  onError={[Function]}
  src="data:image/png;base64,00"
  style={

test/components/views/beacon/__snapshots__/DialogSidebar-test.tsx.snap

@@ -31,23 +31,12 @@ exports[`<DialogSidebar /> renders sidebar correctly with beacons 1`] = `
  <li
  class="mx_BeaconListItem"
  >
- <span
- class="mx_BaseAvatar mx_BeaconListItem_avatar"
- role="presentation"
- >
- <span
- aria-hidden="true"
- class="mx_BaseAvatar_initial"
- style="font-size: 20.8px; width: 32px; line-height: 32px;"
- />
- <img
- alt=""
- aria-hidden="true"
- class="mx_BaseAvatar_image"
- src=""
- style="width: 32px; height: 32px;"
- />
- </span>
+ <img
+ alt=""
+ class="mx_BaseAvatar mx_BaseAvatar_image mx_BeaconListItem_avatar"
+ data-testid="avatar-img"
+ style="width: 32px; height: 32px;"
+ />
  <div
  class="mx_BeaconListItem_info"
  >

test/components/views/messages/TextualBody-test.tsx

@@ -335,7 +335,7 @@ describe("<TextualBody />", () => {
  '?via=example.com&amp;via=bob.com"' +
  '><img class="mx_BaseAvatar mx_BaseAvatar_image" ' +
  'src="mxc://avatar.url/room.png" ' +
- 'style="width: 16px; height: 16px;" alt="" aria-hidden="true">' +
+ 'style="width: 16px; height: 16px;" alt="" data-testid="avatar-img" aria-hidden="true">' +
  '<span class="mx_Pill_linkText">room name</span></a></bdi></span> with vias</span>',
  );
  });

test/components/views/messages/__snapshots__/TextualBody-test.tsx.snap

@@ -14,4 +14,4 @@ exports[`<TextualBody /> renders formatted m.text correctly pills do not appear
 </span>"
 `;
 
-exports[`<TextualBody /> renders formatted m.text correctly pills get injected correctly into the DOM 1`] = `"<span class="mx_EventTile_body markdown-body" dir="auto">Hey <span><bdi><a class="mx_Pill mx_UserPill"><img class="mx_BaseAvatar mx_BaseAvatar_image" src="mxc://avatar.url/image.png" style="width: 16px; height: 16px;" alt="" member="[object Object]" aria-hidden="true"><span class="mx_Pill_linkText">Member</span></a></bdi></span></span>"`;
+exports[`<TextualBody /> renders formatted m.text correctly pills get injected correctly into the DOM 1`] = `"<span class="mx_EventTile_body markdown-body" dir="auto">Hey <span><bdi><a class="mx_Pill mx_UserPill"><img class="mx_BaseAvatar mx_BaseAvatar_image" src="mxc://avatar.url/image.png" style="width: 16px; height: 16px;" alt="" data-testid="avatar-img" member="[object Object]" aria-hidden="true"><span class="mx_Pill_linkText">Member</span></a></bdi></span></span>"`;

test/components/views/rooms/__snapshots__/RoomPreviewBar-test.tsx.snap

@@ -173,6 +173,7 @@ exports[`<RoomPreviewBar /> with an invite without an invited email for a dm roo
  alt=""
  aria-hidden="true"
  class="mx_BaseAvatar_image"
+ data-testid="avatar-img"
  src="data:image/png;base64,00"
  style="width: 36px; height: 36px;"
  />
@@ -247,6 +248,7 @@ exports[`<RoomPreviewBar /> with an invite without an invited email for a non-dm
  alt=""
  aria-hidden="true"
  class="mx_BaseAvatar_image"
+ data-testid="avatar-img"
  src="data:image/png;base64,00"
  style="width: 36px; height: 36px;"
  />