Add UserProfilesStore, LruCache and cache for user permalink profiles (#10425)

test/components/views/elements/Pill-test.tsx

@@ -33,6 +33,7 @@ import {
 import DMRoomMap from "../../../../src/utils/DMRoomMap";
 import { Action } from "../../../../src/dispatcher/actions";
 import { ButtonEvent } from "../../../../src/components/views/elements/AccessibleButton";
+import { SdkContextClass } from "../../../../src/contexts/SDKContext";
 
 describe("<Pill>", () => {
     let client: Mocked<MatrixClient>;
@@ -47,6 +48,7 @@ describe("<Pill>", () => {
     let space1: Room;
     const user1Id = "@user1:example.com";
     const user2Id = "@user2:example.com";
+    const user3Id = "@user3:example.com";
     let renderResult: RenderResult;
     let pillParentClickHandler: (e: ButtonEvent) => void;
 
@@ -72,6 +74,7 @@ describe("<Pill>", () => {
 
     beforeEach(() => {
         client = mocked(stubClient());
+        SdkContextClass.instance.client = client;
         DMRoomMap.makeShared();
         room1 = new Room(room1Id, client, user1Id);
         room1.name = "Room 1";
@@ -93,12 +96,13 @@ describe("<Pill>", () => {
         room1.addLiveEvents([room1Message]);
 
         room2 = new Room(room2Id, client, user1Id);
+        room2.currentState.setStateEvents([mkRoomMemberJoinEvent(user2Id, room2Id)]);
         room2.name = "Room 2";
 
         space1 = new Room(space1Id, client, client.getSafeUserId());
         space1.name = "Space 1";
 
-        client.getRooms.mockReturnValue([room1, space1]);
+        client.getRooms.mockReturnValue([room1, room2, space1]);
         client.getRoom.mockImplementation((roomId: string) => {
             if (roomId === room1.roomId) return room1;
             if (roomId === room2.roomId) return room2;
@@ -204,7 +208,7 @@ describe("<Pill>", () => {
         });
     });
 
-    it("should render the expected pill for a user not in the room", async () => {
+    it("should render the expected pill for a known user not in the room", async () => {
         renderPill({
             room: room1,
             url: permalinkPrefix + user2Id,
@@ -218,6 +222,20 @@ describe("<Pill>", () => {
         expect(renderResult.asFragment()).toMatchSnapshot();
     });
 
+    it("should render the expected pill for an uknown user not in the room", async () => {
+        renderPill({
+            room: room1,
+            url: permalinkPrefix + user3Id,
+        });
+
+        // wait for profile query via API
+        await act(async () => {
+            await flushPromises();
+        });
+
+        expect(renderResult.asFragment()).toMatchSnapshot();
+    });
+
     it("should not render anything if the type cannot be detected", () => {
         renderPill({
             url: permalinkPrefix,

test/components/views/elements/__snapshots__/Pill-test.tsx.snap

@@ -63,6 +63,46 @@ exports[`<Pill> should render the expected pill for @room 1`] = `
 </DocumentFragment>
 `;
 
+exports[`<Pill> should render the expected pill for a known user not in the room 1`] = `
+<DocumentFragment>
+  <div>
+    <bdi>
+      <a
+        class="mx_Pill mx_UserPill"
+        href="https://matrix.to/#/@user2:example.com"
+      >
+        <span
+          aria-hidden="true"
+          class="mx_BaseAvatar"
+          role="presentation"
+        >
+          <span
+            aria-hidden="true"
+            class="mx_BaseAvatar_initial"
+            style="font-size: 10.4px; width: 16px; line-height: 16px;"
+          >
+            U
+          </span>
+          <img
+            alt=""
+            aria-hidden="true"
+            class="mx_BaseAvatar_image"
+            data-testid="avatar-img"
+            src="data:image/png;base64,00"
+            style="width: 16px; height: 16px;"
+          />
+        </span>
+        <span
+          class="mx_Pill_text"
+        >
+          User 2
+        </span>
+      </a>
+    </bdi>
+  </div>
+</DocumentFragment>
+`;
+
 exports[`<Pill> should render the expected pill for a message in another room 1`] = `
 <DocumentFragment>
   <div>
@@ -223,39 +263,21 @@ exports[`<Pill> should render the expected pill for a space 1`] = `
 </DocumentFragment>
 `;
 
-exports[`<Pill> should render the expected pill for a user not in the room 1`] = `
+exports[`<Pill> should render the expected pill for an uknown user not in the room 1`] = `
 <DocumentFragment>
   <div>
     <bdi>
       <a
         class="mx_Pill mx_UserPill"
-        href="https://matrix.to/#/@user2:example.com"
+        href="https://matrix.to/#/@user3:example.com"
       >
-        <span
-          aria-hidden="true"
-          class="mx_BaseAvatar"
-          role="presentation"
-        >
-          <span
-            aria-hidden="true"
-            class="mx_BaseAvatar_initial"
-            style="font-size: 10.4px; width: 16px; line-height: 16px;"
-          >
-            U
-          </span>
-          <img
-            alt=""
-            aria-hidden="true"
-            class="mx_BaseAvatar_image"
-            data-testid="avatar-img"
-            src="data:image/png;base64,00"
-            style="width: 16px; height: 16px;"
-          />
-        </span>
+        <div
+          class="mx_Pill_UserIcon mx_BaseAvatar mx_BaseAvatar_image"
+        />
         <span
           class="mx_Pill_text"
         >
-          User 2
+          @user3:example.com
         </span>
       </a>
     </bdi>