Extract avatars from permalink hook (#10328)

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

@@ -38,6 +38,8 @@ describe("<Pill>", () => {
     const room1Alias = "#room1:example.com";
     const room1Id = "!room1:example.com";
     let room1: Room;
+    const space1Id = "!space1:example.com";
+    let space1: Room;
     const user1Id = "@user1:example.com";
     const user2Id = "@user2:example.com";
     let renderResult: RenderResult;
@@ -70,9 +72,13 @@ describe("<Pill>", () => {
         ]);
         room1.getMember(user1Id)!.setMembershipEvent(user1JoinRoom1Event);
 
-        client.getRooms.mockReturnValue([room1]);
+        space1 = new Room(space1Id, client, client.getSafeUserId());
+        space1.name = "Space 1";
+
+        client.getRooms.mockReturnValue([room1, space1]);
         client.getRoom.mockImplementation((roomId: string) => {
             if (roomId === room1.roomId) return room1;
+            if (roomId === space1.roomId) return space1;
             return null;
         });
 
@@ -116,6 +122,20 @@ describe("<Pill>", () => {
         });
     });
 
+    it("should not render a non-permalink", () => {
+        renderPill({
+            url: "https://example.com/hello",
+        });
+        expect(renderResult.asFragment()).toMatchSnapshot();
+    });
+
+    it("should render the expected pill for a space", () => {
+        renderPill({
+            url: permalinkPrefix + space1Id,
+        });
+        expect(renderResult.asFragment()).toMatchSnapshot();
+    });
+
     it("should render the expected pill for a room alias", () => {
         renderPill({
             url: permalinkPrefix + room1Alias,

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

@@ -1,5 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`<Pill> should not render a non-permalink 1`] = `<DocumentFragment />`;
+
 exports[`<Pill> should not render an avatar or link when called with inMessage = false and shouldShowPillAvatar = false 1`] = `
 <DocumentFragment>
   <bdi>
@@ -91,6 +93,44 @@ exports[`<Pill> should render the expected pill for a room alias 1`] = `
 </DocumentFragment>
 `;
 
+exports[`<Pill> should render the expected pill for a space 1`] = `
+<DocumentFragment>
+  <bdi>
+    <a
+      class="mx_Pill mx_RoomPill"
+      href="https://matrix.to/#/!space1: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;"
+        >
+          S
+        </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_linkText"
+      >
+        Space 1
+      </span>
+    </a>
+  </bdi>
+</DocumentFragment>
+`;
+
 exports[`<Pill> should render the expected pill for a user not in the room 1`] = `
 <DocumentFragment>
   <bdi>