Refactor pill and add tests (#10304)

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

@@ -152,7 +152,7 @@ describe("<TextualBody />", () => {
             const { container } = getComponent({ mxEvent: ev });
             const content = container.querySelector(".mx_EventTile_body");
             expect(content.innerHTML).toMatchInlineSnapshot(
-                `"Chat with <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" aria-hidden="true"><span class="mx_Pill_linkText">Member</span></a></bdi></span>"`,
+                `"Chat with <span><bdi><a class="mx_Pill mx_UserPill mx_UserPill_me" href="https://matrix.to/#/@user:example.com"><img class="mx_BaseAvatar mx_BaseAvatar_image" src="mxc://avatar.url/image.png" style="width: 16px; height: 16px;" alt="" data-testid="avatar-img" aria-hidden="true"><span class="mx_Pill_linkText">Member</span></a></bdi></span>"`,
             );
         });
 

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

@@ -91,6 +91,7 @@ exports[`<TextualBody /> renders formatted m.text correctly pills get injected c
     <bdi>
       <a
         class="mx_Pill mx_UserPill"
+        href="https://matrix.to/#/@user:server"
       >
         <img
           alt=""