Merge 1e6d183d00 into d2acce1221

playwright/e2e/accessibility/keyboard-navigation.spec.ts

@@ -11,7 +11,7 @@ import { Bot } from "../../pages/bot";
 
 test.describe("Landmark navigation tests", () => {
     test.use({
-        displayName: "Alice",
+        displayName: "<alice>",
     });
 
     test("without any rooms", async ({ page, homeserver, app, user }) => {

playwright/e2e/chat-export/html-export.spec.ts

@@ -81,7 +81,7 @@ async function extractZipFileToPath(file: string, outputPath: string): Promise<J
 
 test.describe("HTML Export", () => {
     test.use({
-        displayName: "Alice",
+        displayName: "<alice>",
         room: async ({ app, user }, use) => {
             const roomId = await app.client.createRoom({ name: "Important Room" });
             await app.viewRoomByName("Important Room");

playwright/e2e/crypto/complete-security.spec.ts

@@ -11,7 +11,7 @@ import { logIntoElement } from "./utils";
 
 test.describe("Complete security", () => {
     test.use({
-        displayName: "Jeff",
+        displayName: "<jeff>",
     });
 
     test("should go straight to the welcome screen if we have no signed device", async ({
@@ -20,7 +20,7 @@ test.describe("Complete security", () => {
         credentials,
     }) => {
         await logIntoElement(page, homeserver, credentials);
-        await expect(page.getByText("Welcome Jeff", { exact: true })).toBeVisible();
+        await expect(page.getByText("Welcome <jeff>", { exact: true })).toBeVisible();
     });
 
     // see also "Verify device during login with SAS" in `verifiction.spec.ts`.

playwright/e2e/crypto/crypto.spec.ts

@@ -14,8 +14,8 @@ import { ElementAppPage } from "../../pages/ElementAppPage";
 
 const checkDMRoom = async (page: Page) => {
     const body = page.locator(".mx_RoomView_body");
-    await expect(body.getByText("Alice created this DM.")).toBeVisible();
+    await expect(body.getByText("<alice> created this DM.")).toBeVisible();
-    await expect(body.getByText("Alice invited Bob")).toBeVisible({ timeout: 1000 });
+    await expect(body.getByText("<alice> invited Bob")).toBeVisible({ timeout: 1000 });
     await expect(body.locator(".mx_cryptoEvent").getByText("Encryption enabled")).toBeVisible();
 };
 
@@ -57,10 +57,10 @@ const bobJoin = async (page: Page, bob: Bot) => {
         }
     });
 
-    const roomId = await bob.joinRoomByName("Alice");
+    const roomId = await bob.joinRoomByName("<alice>");
     await expect(page.getByText("Bob joined the room")).toBeVisible();
 
-    // Even though Alice has seen Bob's join event, Bob may not have done so yet. Wait for the sync to arrive.
+    // Even though <alice> has seen Bob's join event, Bob may not have done so yet. Wait for the sync to arrive.
     await bob.awaitRoomMembership(roomId);
 
     return roomId;
@@ -68,7 +68,7 @@ const bobJoin = async (page: Page, bob: Bot) => {
 
 test.describe("Cryptography", function () {
     test.use({
-        displayName: "Alice",
+        displayName: "<alice>",
         botCreateOpts: {
             displayName: "Bob",
             autoAcceptInvites: false,
@@ -94,10 +94,10 @@ test.describe("Cryptography", function () {
                 expect(key.mac).toBeDefined();
             }
 
-            test("by recovery code", async ({ page, app, user: aliceCredentials }) => {
+            test("by recovery code", async ({ page, app, user: <alice>Credentials }) => {
                 // Verified the device
                 if (isDeviceVerified) {
-                    await app.client.bootstrapCrossSigning(aliceCredentials);
+                    await app.client.bootstrapCrossSigning(<alice>Credentials);
                 }
 
                 await page.route("**/_matrix/client/v3/keys/signatures/upload", async (route) => {
@@ -128,10 +128,10 @@ test.describe("Cryptography", function () {
                 await verifyKey(app, "user_signing");
             });
 
-            test("by passphrase", async ({ page, app, user: aliceCredentials }) => {
+            test("by passphrase", async ({ page, app, user: <alice>Credentials }) => {
                 // Verified the device
                 if (isDeviceVerified) {
-                    await app.client.bootstrapCrossSigning(aliceCredentials);
+                    await app.client.bootstrapCrossSigning(<alice>Credentials);
                 }
 
                 await app.settings.openUserSettings("Security & Privacy");
@@ -163,7 +163,7 @@ test.describe("Cryptography", function () {
         });
     }
 
-    test("Can reset cross-signing keys", async ({ page, app, user: aliceCredentials }) => {
+    test("Can reset cross-signing keys", async ({ page, app, user: <alice>Credentials }) => {
         const secretStorageKey = await enableKeyBackup(app);
 
         // Fetch the current cross-signing keys
@@ -192,7 +192,7 @@ test.describe("Cryptography", function () {
         await page.getByRole("button", { name: "Continue" }).click();
 
         // Enter the password
-        await page.getByPlaceholder("Password").fill(aliceCredentials.password);
+        await page.getByPlaceholder("Password").fill(<alice>Credentials.password);
         await page.getByRole("button", { name: "Continue" }).click();
 
         await expect(async () => {
@@ -208,9 +208,9 @@ test.describe("Cryptography", function () {
         page,
         app,
         bot: bob,
-        user: aliceCredentials,
+        user: <alice>Credentials,
     }) => {
-        await app.client.bootstrapCrossSigning(aliceCredentials);
+        await app.client.bootstrapCrossSigning(<alice>Credentials);
         await startDMWithBob(page, bob);
         // send first message
         await page.getByRole("textbox", { name: "Send a message…" }).fill("Hey!");
@@ -233,9 +233,9 @@ test.describe("Cryptography", function () {
         page,
         app,
         bot: bob,
-        user: aliceCredentials,
+        user: <alice>Credentials,
     }) => {
-        await app.client.bootstrapCrossSigning(aliceCredentials);
+        await app.client.bootstrapCrossSigning(<alice>Credentials);
         await autoJoin(bob);
 
         // we need to have a room with the other user present, so we can open the verification panel

playwright/e2e/crypto/decryption-failure-messages.spec.ts

@@ -20,7 +20,7 @@ import { isDendrite } from "../../plugins/homeserver/dendrite";
 
 test.describe("Cryptography", function () {
     test.use({
-        displayName: "Alice",
+        displayName: "<alice>",
         botCreateOpts: {
             displayName: "Bob",
             autoAcceptInvites: false,
@@ -99,13 +99,13 @@ test.describe("Cryptography", function () {
                 homeserver,
                 page,
                 app,
-                credentials: aliceCredentials,
+                credentials: <alice>Credentials,
-                user: alice,
+                user: <alice>,
                 bot: bob,
             }) => {
-                // Bob creates an encrypted room and sends a message to it. He then invites Alice
+                // Bob creates an encrypted room and sends a message to it. He then invites <alice>
                 const roomId = await bob.evaluate(
-                    async (client, { alice }) => {
+                    async (client, { <alice> }) => {
                         const encryptionStatePromise = new Promise<void>((resolve) => {
                             client.on("RoomState.events" as EmittedEvents, (event, _state, _lastStateEvent) => {
                                 if (event.getType() === "m.room.encryption") {
@@ -133,14 +133,14 @@ test.describe("Cryptography", function () {
 
                         await client.sendTextMessage(roomId, "This should be undecryptable");
 
-                        await client.invite(roomId, alice.userId);
+                        await client.invite(roomId, <alice>.userId);
 
                         return roomId;
                     },
-                    { alice },
+                    { <alice> },
                 );
 
-                // Alice accepts the invite
+                // <alice> accepts the invite
                 await expect(
                     page.getByRole("group", { name: "Invites" }).locator(".mx_RoomSublist_tiles").getByRole("treeitem"),
                 ).toHaveCount(1);
@@ -175,16 +175,16 @@ test.describe("Cryptography", function () {
                 await expect(page.locator(`.mx_EventTile`).getByText("Unable to decrypt message")).toBeVisible();
 
                 // And then we ensure that they are where we expect them to be
-                // Alice should see these event tiles:
+                // <alice> should see these event tiles:
                 // - first message sent by Bob (undecryptable)
-                // - Bob invited Alice
+                // - Bob invited <alice>
-                // - Alice joined the room
+                // - <alice> joined the room
                 // - second message sent by Bob (decryptable)
                 // - third message sent by Bob (undecryptable)
                 const tiles = await page.locator(".mx_EventTile").all();
                 expect(tiles.length).toBeGreaterThanOrEqual(5);
 
-                // The first message from Bob was sent before Alice was in the room, so should
+                // The first message from Bob was sent before <alice> was in the room, so should
                 // be different from the standard UTD message
                 await expect(tiles[tiles.length - 5]).toContainText("You don't have access to this message");
                 await expect(tiles[tiles.length - 5].locator(".mx_EventTile_e2eIcon_decryption_failure")).toBeVisible();
@@ -193,7 +193,7 @@ test.describe("Cryptography", function () {
                 await expect(tiles[tiles.length - 2]).toContainText("This should be decryptable");
                 // this tile won't have an e2e icon since we got the key from the sender
 
-                // The third message from Bob is undecryptable, but was sent while Alice was
+                // The third message from Bob is undecryptable, but was sent while <alice> was
                 // in the room and is expected to be decryptable, so this should have the
                 // standard UTD message
                 await expect(tiles[tiles.length - 1]).toContainText("Unable to decrypt message");
@@ -204,24 +204,24 @@ test.describe("Cryptography", function () {
                 homeserver,
                 page,
                 app,
-                credentials: aliceCredentials,
+                credentials: <alice>Credentials,
-                user: alice,
+                user: <alice>,
                 bot: bob,
             }) => {
                 // Bob:
                 // - creates an encrypted room,
-                // - invites Alice,
+                // - invites <alice>,
                 // - sends a message to it,
-                // - kicks Alice,
+                // - kicks <alice>,
                 // - sends a bunch more events
-                // - invites Alice again
+                // - invites <alice> again
-                // In this way, there will be an event that Alice can decrypt,
+                // In this way, there will be an event that <alice> can decrypt,
-                // followed by a bunch of undecryptable events which Alice shouldn't
+                // followed by a bunch of undecryptable events which <alice> shouldn't
                 // expect to be able to decrypt.  The old code would have hidden all
                 // the events, even the decryptable event (which it wouldn't have
                 // even tried to fetch, if it was far enough back).
                 const { roomId, eventId } = await bob.evaluate(
-                    async (client, { alice }) => {
+                    async (client, { <alice> }) => {
                         const { room_id: roomId } = await client.createRoom({
                             initial_state: [
                                 {
@@ -235,49 +235,49 @@ test.describe("Cryptography", function () {
                             preset: "private_chat" as Preset,
                         });
 
-                        // invite Alice
+                        // invite <alice>
-                        const inviteAlicePromise = new Promise<void>((resolve) => {
+                        const invite<alice>Promise = new Promise<void>((resolve) => {
                             client.on("RoomMember.membership" as EmittedEvents, (_event, member, _oldMembership?) => {
-                                if (member.userId === alice.userId && member.membership === "invite") {
+                                if (member.userId === <alice>.userId && member.membership === "invite") {
                                     resolve();
                                 }
                             });
                         });
-                        await client.invite(roomId, alice.userId);
+                        await client.invite(roomId, <alice>.userId);
-                        // wait for the invite to come back so that we encrypt to Alice
+                        // wait for the invite to come back so that we encrypt to <alice>
-                        await inviteAlicePromise;
+                        await invite<alice>Promise;
 
-                        // send a message that Alice should be able to decrypt
+                        // send a message that <alice> should be able to decrypt
                         const { event_id: eventId } = await client.sendTextMessage(
                             roomId,
                             "This should be decryptable",
                         );
 
-                        // kick Alice
+                        // kick <alice>
-                        const kickAlicePromise = new Promise<void>((resolve) => {
+                        const kick<alice>Promise = new Promise<void>((resolve) => {
                             client.on("RoomMember.membership" as EmittedEvents, (_event, member, _oldMembership?) => {
-                                if (member.userId === alice.userId && member.membership === "leave") {
+                                if (member.userId === <alice>.userId && member.membership === "leave") {
                                     resolve();
                                 }
                             });
                         });
-                        await client.kick(roomId, alice.userId);
+                        await client.kick(roomId, <alice>.userId);
-                        await kickAlicePromise;
+                        await kick<alice>Promise;
 
-                        // send a bunch of messages that Alice won't be able to decrypt
+                        // send a bunch of messages that <alice> won't be able to decrypt
                         for (let i = 0; i < 20; i++) {
                             await client.sendTextMessage(roomId, `${i}`);
                         }
 
-                        // invite Alice again
+                        // invite <alice> again
-                        await client.invite(roomId, alice.userId);
+                        await client.invite(roomId, <alice>.userId);
 
                         return { roomId, eventId };
                     },
-                    { alice },
+                    { <alice> },
                 );
 
-                // Alice accepts the invite
+                // <alice> accepts the invite
                 await expect(
                     page.getByRole("group", { name: "Invites" }).locator(".mx_RoomSublist_tiles").getByRole("treeitem"),
                 ).toHaveCount(1);
@@ -285,7 +285,7 @@ test.describe("Cryptography", function () {
                 await page.locator(".mx_RoomView").getByRole("button", { name: "Accept" }).click();
 
                 // wait until we're joined and see the timeline
-                await expect(page.locator(`.mx_EventTile`).getByText("Alice joined the room")).toBeVisible();
+                await expect(page.locator(`.mx_EventTile`).getByText("<alice> joined the room")).toBeVisible();
 
                 // we should be able to jump to the decryptable message that Bob sent
                 await page.goto(`#/room/${roomId}/${eventId}`);

playwright/e2e/crypto/dehydration.spec.ts

@@ -36,7 +36,7 @@ const test = base.extend({
 });
 
 const ROOM_NAME = "Test room";
-const NAME = "Alice";
+const NAME = "<alice>";
 
 function getMemberTileByName(page: Page, name: string): Locator {
     return page.locator(`.mx_EntityTile, [title="${name}"]`);

playwright/e2e/crypto/device-verification.spec.ts

@@ -22,7 +22,7 @@ import {
 import { Bot } from "../../pages/bot";
 
 test.describe("Device verification", () => {
-    let aliceBotClient: Bot;
+    let <alice>BotClient: Bot;
 
     /** The backup version that was set up by the bot client. */
     let expectedBackupVersion: string;
@@ -34,15 +34,15 @@ test.describe("Device verification", () => {
         // wait for the page to load
         await page.waitForSelector(".mx_AuthPage", { timeout: 30000 });
 
-        // Create a new device for alice
+        // Create a new device for <alice>
-        aliceBotClient = new Bot(page, homeserver, {
+        <alice>BotClient = new Bot(page, homeserver, {
             bootstrapCrossSigning: true,
             bootstrapSecretStorage: true,
         });
-        aliceBotClient.setCredentials(credentials);
+        <alice>BotClient.setCredentials(credentials);
 
         // Backup is prepared in the background. Poll until it is ready.
-        const botClientHandle = await aliceBotClient.prepareClient();
+        const botClientHandle = await <alice>BotClient.prepareClient();
         await expect
             .poll(async () => {
                 expectedBackupVersion = await botClientHandle.evaluate((cli) =>
@@ -54,22 +54,22 @@ test.describe("Device verification", () => {
     });
 
     // Click the "Verify with another device" button, and have the bot client auto-accept it.
-    async function initiateAliceVerificationRequest(page: Page): Promise<JSHandle<VerificationRequest>> {
+    async function initiate<alice>VerificationRequest(page: Page): Promise<JSHandle<VerificationRequest>> {
-        // alice bot waits for verification request
+        // <alice> bot waits for verification request
-        const promiseVerificationRequest = waitForVerificationRequest(aliceBotClient);
+        const promiseVerificationRequest = waitForVerificationRequest(<alice>BotClient);
 
         // Click on "Verify with another device"
         await page.locator(".mx_AuthPage").getByRole("button", { name: "Verify with another device" }).click();
 
-        // alice bot responds yes to verification request from alice
+        // <alice> bot responds yes to verification request from <alice>
         return promiseVerificationRequest;
     }
 
     test("Verify device with SAS during login", async ({ page, app, credentials, homeserver }) => {
         await logIntoElement(page, homeserver, credentials);
 
-        // Launch the verification request between alice and the bot
+        // Launch the verification request between <alice> and the bot
-        const verificationRequest = await initiateAliceVerificationRequest(page);
+        const verificationRequest = await initiate<alice>VerificationRequest(page);
 
         // Handle emoji SAS verification
         const infoDialog = page.locator(".mx_InfoDialog");
@@ -95,8 +95,8 @@ test.describe("Device verification", () => {
         // A mode 0x02 verification: "self-verifying in which the current device does not yet trust the master key"
         await logIntoElement(page, homeserver, credentials);
 
-        // Launch the verification request between alice and the bot
+        // Launch the verification request between <alice> and the bot
-        const verificationRequest = await initiateAliceVerificationRequest(page);
+        const verificationRequest = await initiate<alice>VerificationRequest(page);
 
         const infoDialog = page.locator(".mx_InfoDialog");
         // feed the QR code into the verification request.
@@ -118,14 +118,14 @@ test.describe("Device verification", () => {
         await page.waitForTimeout(1000);
 
         // our device should trust the bot device
-        await app.client.evaluate(async (cli, aliceBotCredentials) => {
+        await app.client.evaluate(async (cli, <alice>BotCredentials) => {
             const deviceStatus = await cli
                 .getCrypto()!
-                .getDeviceVerificationStatus(aliceBotCredentials.userId, aliceBotCredentials.deviceId);
+                .getDeviceVerificationStatus(<alice>BotCredentials.userId, <alice>BotCredentials.deviceId);
             if (!deviceStatus.isVerified()) {
                 throw new Error("Bot device was not verified after QR code verification");
             }
-        }, aliceBotClient.credentials);
+        }, <alice>BotClient.credentials);
 
         // Check that our device is now cross-signed
         await checkDeviceIsCrossSigned(app);
@@ -166,8 +166,8 @@ test.describe("Device verification", () => {
         // Fill the security key
         const dialog = page.locator(".mx_Dialog");
         await dialog.getByRole("button", { name: "use your Security Key" }).click();
-        const aliceRecoveryKey = await aliceBotClient.getRecoveryKey();
+        const <alice>RecoveryKey = await <alice>BotClient.getRecoveryKey();
-        await dialog.locator("#mx_securityKey").fill(aliceRecoveryKey.encodedPrivateKey);
+        await dialog.locator("#mx_securityKey").fill(<alice>RecoveryKey.encodedPrivateKey);
         await dialog.locator(".mx_Dialog_primary:not([disabled])", { hasText: "Continue" }).click();
 
         await page.locator(".mx_AuthPage").getByRole("button", { name: "Done" }).click();
@@ -192,7 +192,7 @@ test.describe("Device verification", () => {
         const elementDeviceId = await page.evaluate(() => window.mxMatrixClientPeg.get().getDeviceId());
 
         /* Now initiate a verification request from the *bot* device. */
-        const botVerificationRequest = await aliceBotClient.evaluateHandle(
+        const botVerificationRequest = await <alice>BotClient.evaluateHandle(
             async (client, { userId, deviceId }) => {
                 return client.getCrypto()!.requestDeviceVerification(userId, deviceId);
             },
@@ -202,7 +202,7 @@ test.describe("Device verification", () => {
         /* Check the toast for the incoming request */
         const toast = await toasts.getToast("Verification requested");
         // it should contain the device ID of the requesting device
-        await expect(toast.getByText(`${aliceBotClient.credentials.deviceId} from `)).toBeVisible();
+        await expect(toast.getByText(`${<alice>BotClient.credentials.deviceId} from `)).toBeVisible();
         // Accept
         await toast.getByRole("button", { name: "Verify Session" }).click();
 
@@ -220,7 +220,7 @@ test.describe("Device verification", () => {
         const infoDialog = page.locator(".mx_InfoDialog");
         await infoDialog.getByRole("button", { name: "They match" }).click();
         await expect(
-            infoDialog.getByText(`You've successfully verified (${aliceBotClient.credentials.deviceId})!`),
+            infoDialog.getByText(`You've successfully verified (${<alice>BotClient.credentials.deviceId})!`),
         ).toBeVisible();
         await infoDialog.getByRole("button", { name: "Got it" }).click();
     });

playwright/e2e/crypto/event-shields.spec.ts

@@ -20,7 +20,7 @@ import { bootstrapCrossSigningForClient } from "../../pages/client.ts";
 
 test.describe("Cryptography", function () {
     test.use({
-        displayName: "Alice",
+        displayName: "<alice>",
         botCreateOpts: {
             displayName: "Bob",
             autoAcceptInvites: false,
@@ -30,8 +30,8 @@ test.describe("Cryptography", function () {
     test.describe("event shields", () => {
         let testRoomId: string;
 
-        test.beforeEach(async ({ page, bot: bob, user: aliceCredentials, app }) => {
+        test.beforeEach(async ({ page, bot: bob, user: <alice>Credentials, app }) => {
-            await app.client.bootstrapCrossSigning(aliceCredentials);
+            await app.client.bootstrapCrossSigning(<alice>Credentials);
             await autoJoin(bob);
 
             // create an encrypted room, and wait for Bob to join it.
@@ -48,7 +48,7 @@ test.describe("Cryptography", function () {
                 ],
             });
 
-            // Even though Alice has seen Bob's join event, Bob may not have done so yet. Wait for the sync to arrive.
+            // Even though <alice> has seen Bob's join event, Bob may not have done so yet. Wait for the sync to arrive.
             await bob.awaitRoomMembership(testRoomId);
         });
 
@@ -176,7 +176,7 @@ test.describe("Cryptography", function () {
             app,
             bot: bob,
             homeserver,
-            user: aliceCredentials,
+            user: <alice>Credentials,
         }) => {
             test.slow();
             const securityKey = await enableKeyBackup(app);
@@ -205,7 +205,7 @@ test.describe("Cryptography", function () {
                 window.localStorage.clear();
             });
             await page.reload();
-            await logIntoElement(page, homeserver, aliceCredentials, securityKey);
+            await logIntoElement(page, homeserver, <alice>Credentials, securityKey);
 
             /* go back to the test room and find Bob's message again */
             await app.viewRoomById(testRoomId);

playwright/e2e/crypto/invisible-crypto.spec.ts

@@ -12,7 +12,7 @@ import { bootstrapCrossSigningForClient } from "../../pages/client.ts";
 /** Tests for the "invisible crypto" behaviour -- i.e., when the "exclude insecure devices" setting is enabled */
 test.describe("Invisible cryptography", () => {
     test.use({
-        displayName: "Alice",
+        displayName: "<alice>",
         botCreateOpts: { displayName: "Bob" },
         labsFlags: ["feature_exclude_insecure_devices"],
     });
@@ -20,11 +20,11 @@ test.describe("Invisible cryptography", () => {
     test("Messages fail to decrypt when sender is previously verified", async ({
         page,
         bot: bob,
-        user: aliceCredentials,
+        user: <alice>Credentials,
         app,
         homeserver,
     }) => {
-        await app.client.bootstrapCrossSigning(aliceCredentials);
+        await app.client.bootstrapCrossSigning(<alice>Credentials);
         await autoJoin(bob);
 
         // create an encrypted room

playwright/e2e/crypto/migration.spec.ts

@@ -26,7 +26,7 @@ const test = base.extend({
 });
 
 test.describe("migration", function () {
-    test.use({ displayName: "Alice" });
+    test.use({ displayName: "<alice>" });
 
     test("Should support migration from legacy crypto", async ({ context, user, page }, workerInfo) => {
         test.skip(workerInfo.project.name === "Legacy Crypto", "This test only works with Rust crypto.");

playwright/e2e/crypto/user-verification.spec.ts

@@ -16,13 +16,13 @@ test.describe("User verification", () => {
     // note that there are other tests that check user verification works in `crypto.spec.ts`.
 
     test.use({
-        displayName: "Alice",
+        displayName: "<alice>",
         botCreateOpts: { displayName: "Bob", autoAcceptInvites: true, userIdPrefix: "bob_" },
-        room: async ({ page, app, bot: bob, user: aliceCredentials }, use) => {
+        room: async ({ page, app, bot: bob, user: <alice>Credentials }, use) => {
-            await app.client.bootstrapCrossSigning(aliceCredentials);
+            await app.client.bootstrapCrossSigning(<alice>Credentials);
 
             // the other user creates a DM
-            const dmRoomId = await createDMRoom(bob, aliceCredentials.userId);
+            const dmRoomId = await createDMRoom(bob, <alice>Credentials.userId);
 
             // accept the DM
             await app.viewRoomByName("Bob");
@@ -34,23 +34,23 @@ test.describe("User verification", () => {
     test("can receive a verification request when there is no existing DM", async ({
         page,
         bot: bob,
-        user: aliceCredentials,
+        user: <alice>Credentials,
         toasts,
         room: { roomId: dmRoomId },
     }) => {
-        // once Alice has joined, Bob starts the verification
+        // once <alice> has joined, Bob starts the verification
         const bobVerificationRequest = await bob.evaluateHandle(
-            async (client, { dmRoomId, aliceCredentials }) => {
+            async (client, { dmRoomId, <alice>Credentials }) => {
                 const room = client.getRoom(dmRoomId);
-                while (room.getMember(aliceCredentials.userId)?.membership !== "join") {
+                while (room.getMember(<alice>Credentials.userId)?.membership !== "join") {
                     await new Promise((resolve) => {
                         room.once(window.matrixcs.RoomStateEvent.Members, resolve);
                     });
                 }
 
-                return client.getCrypto().requestVerificationDM(aliceCredentials.userId, dmRoomId);
+                return client.getCrypto().requestVerificationDM(<alice>Credentials.userId, dmRoomId);
             },
-            { dmRoomId, aliceCredentials },
+            { dmRoomId, <alice>Credentials },
         );
 
         // there should also be a toast
@@ -83,23 +83,23 @@ test.describe("User verification", () => {
     test("can abort emoji verification when emoji mismatch", async ({
         page,
         bot: bob,
-        user: aliceCredentials,
+        user: <alice>Credentials,
         toasts,
         room: { roomId: dmRoomId },
     }) => {
-        // once Alice has joined, Bob starts the verification
+        // once <alice> has joined, Bob starts the verification
         const bobVerificationRequest = await bob.evaluateHandle(
-            async (client, { dmRoomId, aliceCredentials }) => {
+            async (client, { dmRoomId, <alice>Credentials }) => {
                 const room = client.getRoom(dmRoomId);
-                while (room.getMember(aliceCredentials.userId)?.membership !== "join") {
+                while (room.getMember(<alice>Credentials.userId)?.membership !== "join") {
                     await new Promise((resolve) => {
                         room.once(window.matrixcs.RoomStateEvent.Members, resolve);
                     });
                 }
 
-                return client.getCrypto().requestVerificationDM(aliceCredentials.userId, dmRoomId);
+                return client.getCrypto().requestVerificationDM(<alice>Credentials.userId, dmRoomId);
             },
-            { dmRoomId, aliceCredentials },
+            { dmRoomId, <alice>Credentials },
         );
 
         // Accept verification via toast

playwright/e2e/file-upload/image-upload.spec.ts

@@ -10,7 +10,7 @@ import { test, expect } from "../../element-web-test";
 
 test.describe("Image Upload", () => {
     test.use({
-        displayName: "Alice",
+        displayName: "<alice>",
     });
 
     test.beforeEach(async ({ page, app, user }) => {

playwright/e2e/integration-manager/get-openid-token.spec.ts

@@ -55,7 +55,7 @@ async function sendActionFromIntegrationManager(page: Page, integrationManagerUr
 
 test.describe("Integration Manager: Get OpenID Token", () => {
     test.use({
-        displayName: "Alice",
+        displayName: "<alice>",
         room: async ({ user, app }, use) => {
             const roomId = await app.client.createRoom({
                 name: ROOM_NAME,

playwright/e2e/integration-manager/kick.spec.ts

@@ -11,7 +11,7 @@ import { test, expect } from "../../element-web-test";
 import { openIntegrationManager } from "./utils";
 
 const ROOM_NAME = "Integration Manager Test";
-const USER_DISPLAY_NAME = "Alice";
+const USER_DISPLAY_NAME = "<alice>";
 const BOT_DISPLAY_NAME = "Bob";
 const KICK_REASON = "Goodbye";
 
@@ -95,7 +95,7 @@ async function expectKickedMessage(page: Page, shouldExist: boolean) {
 
 test.describe("Integration Manager: Kick", () => {
     test.use({
-        displayName: "Alice",
+        displayName: "<alice>",
         room: async ({ user, app }, use) => {
             const roomId = await app.client.createRoom({
                 name: ROOM_NAME,

playwright/e2e/integration-manager/read_events.spec.ts

@@ -70,7 +70,7 @@ async function sendActionFromIntegrationManager(
 
 test.describe("Integration Manager: Read Events", () => {
     test.use({
-        displayName: "Alice",
+        displayName: "<alice>",
         room: async ({ user, app }, use) => {
             const roomId = await app.client.createRoom({
                 name: ROOM_NAME,

playwright/e2e/integration-manager/send_event.spec.ts

@@ -76,7 +76,7 @@ async function sendActionFromIntegrationManager(
 
 test.describe("Integration Manager: Send Event", () => {
     test.use({
-        displayName: "Alice",
+        displayName: "<alice>",
         room: async ({ user, app }, use) => {
             const roomId = await app.client.createRoom({
                 name: ROOM_NAME,

playwright/e2e/invite/invite-dialog.spec.ts

@@ -13,11 +13,11 @@ test.describe("Invite dialog", function () {
     test.use({
         displayName: "Hanako",
         botCreateOpts: {
-            displayName: "BotAlice",
+            displayName: "Bot<alice>",
         },
     });
 
-    const botName = "BotAlice";
+    const botName = "Bot<alice>";
 
     test("should support inviting a user to a room", async ({ page, app, user, bot }) => {
         // Create and view a room

playwright/e2e/knock/create-knock-room.spec.ts

@@ -12,7 +12,7 @@ import { Filter } from "../../pages/Spotlight";
 
 test.describe("Create Knock Room", () => {
     test.use({
-        displayName: "Alice",
+        displayName: "<alice>",
         labsFlags: ["feature_ask_to_join"],
     });
 

playwright/e2e/knock/knock-into-room.spec.ts

@@ -16,7 +16,7 @@ import { Filter } from "../../pages/Spotlight";
 
 test.describe("Knock Into Room", () => {
     test.use({
-        displayName: "Alice",
+        displayName: "<alice>",
         labsFlags: ["feature_ask_to_join"],
         botCreateOpts: {
             displayName: "Bob",
@@ -60,25 +60,25 @@ test.describe("Knock Into Room", () => {
             page.getByRole("group", { name: "Rooms" }).getByRole("treeitem", { name: "Cybersecurity" }),
         ).toBeVisible();
 
-        // bot waits for knock request from Alice
+        // bot waits for knock request from <alice>
         await waitForRoom(page, bot, room.roomId, (room) => {
             const events = room.getLiveTimeline().getEvents();
             return events.some(
                 (e) =>
                     e.getType() === "m.room.member" &&
                     e.getContent()?.membership === "knock" &&
-                    e.getContent()?.displayname === "Alice",
+                    e.getContent()?.displayname === "<alice>",
             );
         });
 
-        // bot invites Alice
+        // bot invites <alice>
         await bot.inviteUser(room.roomId, user.userId);
 
         await expect(
             page.getByRole("group", { name: "Invites" }).getByRole("treeitem", { name: "Cybersecurity" }),
         ).toBeVisible();
 
-        // Alice have to accept invitation in order to join the room.
+        // <alice> have to accept invitation in order to join the room.
         // It will be not needed when homeserver implements auto accept knock requests.
         await page.locator(".mx_RoomView").getByRole("button", { name: "Accept" }).click();
 
@@ -86,34 +86,34 @@ test.describe("Knock Into Room", () => {
             page.getByRole("group", { name: "Rooms" }).getByRole("treeitem", { name: "Cybersecurity" }),
         ).toBeVisible();
 
-        await expect(page.getByText("Alice joined the room")).toBeVisible();
+        await expect(page.getByText("<alice> joined the room")).toBeVisible();
 
-        // bot kicks Alice
+        // bot kicks <alice>
         await bot.kick(room.roomId, user.userId);
 
         await roomPreviewBar.getByRole("button", { name: "Re-join" }).click();
         await expect(roomPreviewBar.getByRole("heading", { name: "Ask to join Cybersecurity?" })).toBeVisible();
         await roomPreviewBar.getByRole("button", { name: "Request access" }).click();
 
-        // bot waits for knock request from Alice
+        // bot waits for knock request from <alice>
         await waitForRoom(page, bot, room.roomId, (room) => {
             const events = room.getLiveTimeline().getEvents();
             return events.some(
                 (e) =>
                     e.getType() === "m.room.member" &&
                     e.getContent()?.membership === "knock" &&
-                    e.getContent()?.displayname === "Alice",
+                    e.getContent()?.displayname === "<alice>",
             );
         });
 
-        // bot invites Alice
+        // bot invites <alice>
         await bot.inviteUser(room.roomId, user.userId);
 
-        // Alice have to accept invitation in order to join the room.
+        // <alice> have to accept invitation in order to join the room.
         // It will be not needed when homeserver implements auto accept knock requests.
         await page.locator(".mx_RoomView").getByRole("button", { name: "Accept" }).click();
 
-        await expect(page.getByText("Alice was invited, joined, was removed, was invited, and joined")).toBeVisible();
+        await expect(page.getByText("<alice> was invited, joined, was removed, was invited, and joined")).toBeVisible();
     });
 
     test("should knock into the room then knock is approved and user joins the room then user is banned/unbanned and joins again", async ({
@@ -137,25 +137,25 @@ test.describe("Knock Into Room", () => {
             page.getByRole("group", { name: "Rooms" }).getByRole("treeitem", { name: "Cybersecurity" }),
         ).toBeVisible();
 
-        // bot waits for knock request from Alice
+        // bot waits for knock request from <alice>
         await waitForRoom(page, bot, room.roomId, (room) => {
             const events = room.getLiveTimeline().getEvents();
             return events.some(
                 (e) =>
                     e.getType() === "m.room.member" &&
                     e.getContent()?.membership === "knock" &&
-                    e.getContent()?.displayname === "Alice",
+                    e.getContent()?.displayname === "<alice>",
             );
         });
 
-        // bot invites Alice
+        // bot invites <alice>
         await bot.inviteUser(room.roomId, user.userId);
 
         await expect(
             page.getByRole("group", { name: "Invites" }).getByRole("treeitem", { name: "Cybersecurity" }),
         ).toBeVisible();
 
-        // Alice have to accept invitation in order to join the room.
+        // <alice> have to accept invitation in order to join the room.
         // It will be not needed when homeserver implements auto accept knock requests.
         await page.locator(".mx_RoomView").getByRole("button", { name: "Accept" }).click();
 
@@ -163,42 +163,42 @@ test.describe("Knock Into Room", () => {
             page.getByRole("group", { name: "Rooms" }).getByRole("treeitem", { name: "Cybersecurity" }),
         ).toBeVisible();
 
-        await expect(page.getByText("Alice joined the room")).toBeVisible();
+        await expect(page.getByText("<alice> joined the room")).toBeVisible();
 
-        // bot bans Alice
+        // bot bans <alice>
         await bot.ban(room.roomId, user.userId);
 
         await expect(
             page.locator(".mx_RoomPreviewBar").getByText("You were banned from Cybersecurity by Bob"),
         ).toBeVisible();
 
-        // bot unbans Alice
+        // bot unbans <alice>
         await bot.unban(room.roomId, user.userId);
 
         await roomPreviewBar.getByRole("button", { name: "Re-join" }).click();
         await expect(roomPreviewBar.getByRole("heading", { name: "Ask to join Cybersecurity?" })).toBeVisible();
         await roomPreviewBar.getByRole("button", { name: "Request access" }).click();
 
-        // bot waits for knock request from Alice
+        // bot waits for knock request from <alice>
         await waitForRoom(page, bot, room.roomId, (room) => {
             const events = room.getLiveTimeline().getEvents();
             return events.some(
                 (e) =>
                     e.getType() === "m.room.member" &&
                     e.getContent()?.membership === "knock" &&
-                    e.getContent()?.displayname === "Alice",
+                    e.getContent()?.displayname === "<alice>",
             );
         });
 
-        // bot invites Alice
+        // bot invites <alice>
         await bot.inviteUser(room.roomId, user.userId);
 
-        // Alice have to accept invitation in order to join the room.
+        // <alice> have to accept invitation in order to join the room.
         // It will be not needed when homeserver implements auto accept knock requests.
         await page.locator(".mx_RoomView").getByRole("button", { name: "Accept" }).click();
 
         await expect(
-            page.getByText("Alice was invited, joined, was banned, was unbanned, was invited, and joined"),
+            page.getByText("<alice> was invited, joined, was banned, was unbanned, was invited, and joined"),
         ).toBeVisible();
     });
 
@@ -245,18 +245,18 @@ test.describe("Knock Into Room", () => {
             page.getByRole("group", { name: "Rooms" }).getByRole("treeitem", { name: "Cybersecurity" }),
         ).toBeVisible();
 
-        // bot waits for knock request from Alice
+        // bot waits for knock request from <alice>
         await waitForRoom(page, bot, room.roomId, (room) => {
             const events = room.getLiveTimeline().getEvents();
             return events.some(
                 (e) =>
                     e.getType() === "m.room.member" &&
                     e.getContent()?.membership === "knock" &&
-                    e.getContent()?.displayname === "Alice",
+                    e.getContent()?.displayname === "<alice>",
             );
         });
 
-        // bot kicks Alice
+        // bot kicks <alice>
         await bot.kick(room.roomId, user.userId);
 
         // Room should stay in Rooms and have red badge when knock is denied

playwright/e2e/knock/manage-knocks.spec.ts

@@ -13,7 +13,7 @@ import { waitForRoom } from "../utils";
 
 test.describe("Manage Knocks", () => {
     test.use({
-        displayName: "Alice",
+        displayName: "<alice>",
         labsFlags: ["feature_ask_to_join"],
         botCreateOpts: {
             displayName: "Bob",
@@ -46,7 +46,7 @@ test.describe("Manage Knocks", () => {
 
         await expect(roomKnocksBar).not.toBeVisible();
 
-        await expect(page.getByText("Alice invited Bob")).toBeVisible();
+        await expect(page.getByText("<alice> invited Bob")).toBeVisible();
     });
 
     test("should deny knock using bar", async ({ page, app, bot, room }) => {
@@ -82,7 +82,7 @@ test.describe("Manage Knocks", () => {
         await settingsGroup.getByRole("button", { name: "Approve" }).click();
         await expect(settingsGroup.getByText(/^Bob/)).not.toBeVisible();
 
-        await expect(page.getByText("Alice invited Bob")).toBeVisible();
+        await expect(page.getByText("<alice> invited Bob")).toBeVisible();
     });
 
     test("should deny knock using people tab", async ({ page, app, bot, room }) => {

playwright/e2e/lazy-loading/lazy-loading.spec.ts

@@ -15,7 +15,7 @@ test.describe("Lazy Loading", () => {
     const charlies: Bot[] = [];
 
     test.use({
-        displayName: "Alice",
+        displayName: "<alice>",
         botCreateOpts: { displayName: "Bob" },
     });
 
@@ -39,7 +39,7 @@ test.describe("Lazy Loading", () => {
     const charlyMsg2 = "how's it going??";
     let roomId: string;
 
-    async function setupRoomWithBobAliceAndCharlies(page: Page, app: ElementAppPage, bob: Bot, charlies: Bot[]) {
+    async function setupRoomWithBob<alice>AndCharlies(page: Page, app: ElementAppPage, bob: Bot, charlies: Bot[]) {
         const visibility = await page.evaluate(() => (window as any).matrixcs.Visibility.Public);
         roomId = await bob.createRoom({
             name,
@@ -81,7 +81,7 @@ test.describe("Lazy Loading", () => {
     }
 
     async function checkMemberList(page: Page, charlies: Bot[]) {
-        await expect(getMemberInMemberlist(page, "Alice")).toBeAttached();
+        await expect(getMemberInMemberlist(page, "<alice>")).toBeAttached();
         await expect(getMemberInMemberlist(page, "Bob")).toBeAttached();
         for (const charly of charlies) {
             await expect(getMemberInMemberlist(page, charly.credentials.displayName)).toBeAttached();
@@ -94,7 +94,7 @@ test.describe("Lazy Loading", () => {
         }
     }
 
-    async function joinCharliesWhileAliceIsOffline(page: Page, app: ElementAppPage, charlies: Bot[]) {
+    async function joinCharliesWhile<alice>IsOffline(page: Page, app: ElementAppPage, charlies: Bot[]) {
         await app.client.network.goOffline();
         for (const charly of charlies) {
             await charly.joinRoom(alias);
@@ -111,14 +111,14 @@ test.describe("Lazy Loading", () => {
         const charly1to5 = charlies.slice(0, 5);
         const charly6to10 = charlies.slice(5);
 
-        // Set up room with alice, bob & charlies 1-5
+        // Set up room with <alice>, bob & charlies 1-5
-        await setupRoomWithBobAliceAndCharlies(page, app, bot, charly1to5);
+        await setupRoomWithBob<alice>AndCharlies(page, app, bot, charly1to5);
-        // Alice should see 2 messages from every charly with the correct display name
+        // <alice> should see 2 messages from every charly with the correct display name
         await checkPaginatedDisplayNames(app, charly1to5);
 
         await openMemberlist(app);
         await checkMemberList(page, charly1to5);
-        await joinCharliesWhileAliceIsOffline(page, app, charly6to10);
+        await joinCharliesWhile<alice>IsOffline(page, app, charly6to10);
         await checkMemberList(page, charly6to10);
 
         for (const charly of charlies) {

playwright/e2e/login/soft_logout.spec.ts

@@ -15,7 +15,7 @@ import { isDendrite } from "../../plugins/homeserver/dendrite";
 
 test.describe("Soft logout", () => {
     test.use({
-        displayName: "Alice",
+        displayName: "<alice>",
         startHomeserverOpts: ({ oAuthServer }, use) =>
             use({
                 template: "default",
@@ -55,14 +55,14 @@ test.describe("Soft logout", () => {
 
                 // Eventually, we should end up at the home screen.
                 await expect(page).toHaveURL(/\/#\/home$/);
-                await expect(page.getByRole("heading", { name: "Welcome Alice", exact: true })).toBeVisible();
+                await expect(page.getByRole("heading", { name: "Welcome <alice>", exact: true })).toBeVisible();
 
                 await use(user);
             },
         });
 
         test("shows the soft-logout page when a request fails, and allows a re-login", async ({ page, user }) => {
-            await expect(page.getByRole("heading", { name: "Welcome Alice", exact: true })).toBeVisible();
+            await expect(page.getByRole("heading", { name: "Welcome <alice>", exact: true })).toBeVisible();
 
             await interceptRequestsWithSoftLogout(page, user);
 
@@ -78,7 +78,7 @@ test.describe("Soft logout", () => {
 
             // back to the welcome page
             await expect(page).toHaveURL(/\/#\/home$/);
-            await expect(page.getByRole("heading", { name: "Welcome Alice", exact: true })).toBeVisible();
+            await expect(page.getByRole("heading", { name: "Welcome <alice>", exact: true })).toBeVisible();
         });
     });
 });

playwright/e2e/login/utils.ts

@@ -35,7 +35,7 @@ export async function doTokenRegistration(
 
     // Synapse prompts us to pick a user ID
     await expect(page.getByRole("heading", { name: "Create your account" })).toBeVisible();
-    await page.getByRole("textbox", { name: "Username (required)" }).fill("alice");
+    await page.getByRole("textbox", { name: "Username (required)" }).fill("<alice>");
 
     // wait for username validation to start, and complete
     await expect(page.locator("#field-username-output")).toHaveText("");
@@ -47,7 +47,7 @@ export async function doTokenRegistration(
 
     // Eventually, we should end up at the home screen.
     await expect(page).toHaveURL(/\/#\/home$/, { timeout: 10000 });
-    await expect(page.getByRole("heading", { name: "Welcome Alice", exact: true })).toBeVisible();
+    await expect(page.getByRole("heading", { name: "Welcome <alice>", exact: true })).toBeVisible();
 
     return page.evaluate(() => ({
         accessToken: window.mxMatrixClientPeg.get().getAccessToken(),
@@ -55,6 +55,6 @@ export async function doTokenRegistration(
         deviceId: window.mxMatrixClientPeg.get().getDeviceId(),
         homeServer: window.mxMatrixClientPeg.get().getHomeserverUrl(),
         password: null,
-        displayName: "Alice",
+        displayName: "<alice>",
     }));
 }

playwright/e2e/oidc/oidc-aware.spec.ts

@@ -16,11 +16,11 @@ test.describe("OIDC Aware", () => {
     test("can register an account and manage it", async ({ context, page, homeserver, mailhog, app }) => {
         await page.goto("/#/login");
         await page.getByRole("button", { name: "Continue" }).click();
-        await registerAccountMas(page, mailhog.api, "alice", "alice@email.com", "Pa$sW0rD!");
+        await registerAccountMas(page, mailhog.api, "<alice>", "<alice>@email.com", "Pa$sW0rD!");
 
         // Eventually, we should end up at the home screen.
         await expect(page).toHaveURL(/\/#\/home$/, { timeout: 10000 });
-        await expect(page.getByRole("heading", { name: "Welcome alice", exact: true })).toBeVisible();
+        await expect(page.getByRole("heading", { name: "Welcome <alice>", exact: true })).toBeVisible();
 
         // Open settings and navigate to account management
         await app.settings.openUserSettings("Account");

playwright/e2e/oidc/oidc-native.spec.ts

@@ -26,11 +26,11 @@ test.describe("OIDC Native", () => {
 
         await page.goto("/#/login");
         await page.getByRole("button", { name: "Continue" }).click();
-        await registerAccountMas(page, mailhog.api, "alice", "alice@email.com", "Pa$sW0rD!");
+        await registerAccountMas(page, mailhog.api, "<alice>", "<alice>@email.com", "Pa$sW0rD!");
 
         // Eventually, we should end up at the home screen.
         await expect(page).toHaveURL(/\/#\/home$/, { timeout: 10000 });
-        await expect(page.getByRole("heading", { name: "Welcome alice", exact: true })).toBeVisible();
+        await expect(page.getByRole("heading", { name: "Welcome <alice>", exact: true })).toBeVisible();
 
         const tokenApiRequest = await tokenApiPromise;
         expect(tokenApiRequest.postDataJSON()["grant_type"]).toBe("authorization_code");

playwright/e2e/one-to-one-chat/one-to-one-chat.spec.ts

@@ -16,7 +16,7 @@ const test = base.extend<{
 
 test.describe("1:1 chat room", () => {
     test.use({
-        displayName: "Jeff",
+        displayName: "<jeff>",
         user2: async ({ homeserver }, use) => {
             const credentials = await homeserver.registerUser("user1234", "p4s5W0rD", "Timmy");
             await use(credentials);

playwright/e2e/permalinks/permalinks.spec.ts

@@ -21,7 +21,7 @@ const getPill = (locator: Locator, label: string) => {
 
 test.describe("permalinks", () => {
     test.use({
-        displayName: "Alice",
+        displayName: "<alice>",
     });
 
     test("shoud render permalinks as expected", async ({ page, app, user, homeserver }) => {
@@ -73,7 +73,7 @@ test.describe("permalinks", () => {
         );
         await app.client.sendMessage(
             room1Id,
-            `Permalink to a user with whom alice doesn't share a room: ${permalinkPrefix}${danielleId}`,
+            `Permalink to a user with whom <alice> doesn't share a room: ${permalinkPrefix}${danielleId}`,
         );
 
         const timeline = page.locator(".mx_RoomView_timeline");

playwright/e2e/pinned-messages/index.ts

@@ -21,7 +21,7 @@ export const test = base.extend<{
     room1: { name: string; roomId: string };
     util: Helpers;
 }>({
-    displayName: "Alice",
+    displayName: "<alice>",
     botCreateOpts: { displayName: "Other User" },
 
     room1Name: "Room 1",

playwright/e2e/register/email.spec.ts

@@ -48,10 +48,10 @@ test.describe("Email Registration", async () => {
         // Hide the server text as it contains the randomly allocated Homeserver port
         const screenshotOptions = { mask: [page.locator(".mx_ServerPicker_server")] };
 
-        await page.getByRole("textbox", { name: "Username" }).fill("alice");
+        await page.getByRole("textbox", { name: "Username" }).fill("<alice>");
         await page.getByPlaceholder("Password", { exact: true }).fill("totally a great password");
         await page.getByPlaceholder("Confirm password").fill("totally a great password");
-        await page.getByPlaceholder("Email").fill("alice@email.com");
+        await page.getByPlaceholder("Email").fill("<alice>@email.com");
         await page.getByRole("button", { name: "Register" }).click();
 
         await expect(page.getByText("Check your email to continue")).toBeVisible();
@@ -62,7 +62,7 @@ test.describe("Email Registration", async () => {
 
         const messages = await mailhog.api.messages();
         expect(messages.items).toHaveLength(1);
-        expect(messages.items[0].to).toEqual("alice@email.com");
+        expect(messages.items[0].to).toEqual("<alice>@email.com");
         const [emailLink] = messages.items[0].text.match(/http.+/);
         await request.get(emailLink); // "Click" the link in the email
 

playwright/e2e/register/register.spec.ts

@@ -33,7 +33,7 @@ test.describe("Registration", () => {
         await expect(page).toMatchScreenshot("registration.png", screenshotOptions);
         await checkA11y();
 
-        await page.getByRole("textbox", { name: "Username", exact: true }).fill("alice");
+        await page.getByRole("textbox", { name: "Username", exact: true }).fill("<alice>");
         await page.getByPlaceholder("Password", { exact: true }).fill("totally a great password");
         await page.getByPlaceholder("Confirm password", { exact: true }).fill("totally a great password");
         await page.getByRole("button", { name: "Register", exact: true }).click();
@@ -86,7 +86,7 @@ test.describe("Registration", () => {
 
         await expect(page.getByRole("textbox", { name: "Username", exact: true })).toBeVisible();
 
-        await page.route("**/_matrix/client/*/register/available?username=_alice", async (route) => {
+        await page.route("**/_matrix/client/*/register/available?username=_<alice>", async (route) => {
             await route.fulfill({
                 status: 400,
                 json: {
@@ -95,7 +95,7 @@ test.describe("Registration", () => {
                 },
             });
         });
-        await page.getByRole("textbox", { name: "Username", exact: true }).fill("_alice");
+        await page.getByRole("textbox", { name: "Username", exact: true }).fill("_<alice>");
         await expect(page.getByRole("tooltip").filter({ hasText: "Some characters not allowed" })).toBeVisible();
 
         await page.route("**/_matrix/client/*/register/available?username=bob", async (route) => {

playwright/e2e/release-announcement/index.ts

@@ -16,7 +16,7 @@ import { test as base, expect } from "../../element-web-test";
 export const test = base.extend<{
     util: Helpers;
 }>({
-    displayName: "Alice",
+    displayName: "<alice>",
     botCreateOpts: { displayName: "Other User" },
 
     util: async ({ page, app, bot }, use) => {

playwright/e2e/right-panel/file-panel.spec.ts

@@ -12,7 +12,7 @@ import { test, expect } from "../../element-web-test";
 import { viewRoomSummaryByName } from "./utils";
 
 const ROOM_NAME = "Test room";
-const NAME = "Alice";
+const NAME = "<alice>";
 
 async function uploadFile(page: Page, file: string) {
     // Upload a file from the message composer

playwright/e2e/right-panel/notification-panel.spec.ts

@@ -9,7 +9,7 @@ Please see LICENSE files in the repository root for full details.
 import { test, expect } from "../../element-web-test";
 
 const ROOM_NAME = "Test room";
-const NAME = "Alice";
+const NAME = "<alice>";
 
 test.describe("NotificationPanel", () => {
     test.use({

playwright/e2e/right-panel/right-panel.spec.ts

@@ -19,7 +19,7 @@ const ROOM_NAME_LONG =
     "dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui " +
     "officia deserunt mollit anim id est laborum.";
 const SPACE_NAME = "Test space";
-const NAME = "Alice";
+const NAME = "<alice>";
 const ROOM_ADDRESS_LONG =
     "loremIpsumDolorSitAmetConsecteturAdipisicingElitSedDoEiusmodTemporIncididuntUtLaboreEtDoloreMagnaAliqua";
 

playwright/e2e/room/room.spec.ts

@@ -12,7 +12,7 @@ import { Bot } from "../../pages/bot";
 
 test.describe("Room Directory", () => {
     test.use({
-        displayName: "Alice",
+        displayName: "<alice>",
     });
 
     test("should switch between existing dm rooms without a loader", async ({ page, homeserver, app, user }) => {

playwright/e2e/settings/account-user-settings-tab.spec.ts

@@ -9,7 +9,7 @@ Please see LICENSE files in the repository root for full details.
 import { test, expect } from "../../element-web-test";
 
 const USER_NAME = "Bob";
-const USER_NAME_NEW = "Alice";
+const USER_NAME_NEW = "<alice>";
 
 test.describe("Account user settings tab", () => {
     test.use({
@@ -137,8 +137,8 @@ test.describe("Account user settings tab", () => {
         await app.closeDialog();
 
         // Assert the avatar's initial characters are set
-        await expect(page.locator(".mx_UserMenu .mx_BaseAvatar").getByText("A")).toBeVisible(); // Alice
+        await expect(page.locator(".mx_UserMenu .mx_BaseAvatar").getByText("A")).toBeVisible(); // <alice>
-        await expect(page.locator(".mx_RoomView_wrapper .mx_BaseAvatar").getByText("A")).toBeVisible(); // Alice
+        await expect(page.locator(".mx_RoomView_wrapper .mx_BaseAvatar").getByText("A")).toBeVisible(); // <alice>
     });
 
     // ported to a playwright test because the jest test was very flakey for no obvious reason

playwright/e2e/settings/device-management.spec.ts

@@ -10,7 +10,7 @@ import { test, expect } from "../../element-web-test";
 
 test.describe("Device manager", () => {
     test.use({
-        displayName: "Alice",
+        displayName: "<alice>",
     });
 
     test.beforeEach(async ({ homeserver, user }) => {
@@ -64,7 +64,7 @@ test.describe("Device manager", () => {
         // security recommendation count updated
         await expect(tab.getByRole("button", { name: "View all (1)" })).toBeVisible();
 
-        const sessionName = `Alice's device`;
+        const sessionName = `<alice>'s device`;
         // open the first session
         const firstSession = filteredDeviceListItems.first();
         await firstSession.getByRole("button", { name: "Show details" }).click();

playwright/e2e/settings/roles-permissions-room-settings-tab.spec.ts

@@ -14,7 +14,7 @@ test.describe("Roles & Permissions room settings tab", () => {
     const roomName = "Test room";
 
     test.use({
-        displayName: "Alice",
+        displayName: "<alice>",
     });
 
     let settings: Locator;
@@ -29,17 +29,17 @@ test.describe("Roles & Permissions room settings tab", () => {
         const privilegedUserSection = settings.locator(".mx_SettingsFieldset").first();
         const applyButton = privilegedUserSection.getByRole("button", { name: "Apply" });
 
-        // Alice is admin (100) and the Apply button should be disabled
+        // <alice> is admin (100) and the Apply button should be disabled
         await expect(applyButton).toBeDisabled();
         let combobox = privilegedUserSection.getByRole("combobox", { name: user.userId });
         await expect(combobox).toHaveValue("100");
 
-        // Change the role of Alice to Moderator (50)
+        // Change the role of <alice> to Moderator (50)
         await combobox.selectOption("Moderator");
         await expect(combobox).toHaveValue("50");
         await applyButton.click();
 
-        // Reload and check Alice is still Moderator (50)
+        // Reload and check <alice> is still Moderator (50)
         await page.reload();
         settings = await app.settings.openRoomSettings("Roles & Permissions");
         combobox = privilegedUserSection.getByRole("combobox", { name: user.userId });

playwright/e2e/share-dialog/share-dialog.spec.ts

@@ -9,9 +9,9 @@ import { test, expect } from "../../element-web-test";
 
 test.describe("Share dialog", () => {
     test.use({
-        displayName: "Alice",
+        displayName: "<alice>",
         room: async ({ app, user, bot }, use) => {
-            const roomId = await app.client.createRoom({ name: "Alice room" });
+            const roomId = await app.client.createRoom({ name: "<alice> room" });
             await use({ roomId });
         },
     });

playwright/e2e/spaces/threads-activity-centre/threadsActivityCentre.spec.ts

@@ -11,7 +11,7 @@ import { CommandOrControl } from "../../utils";
 
 test.describe("Threads Activity Centre", () => {
     test.use({
-        displayName: "Alice",
+        displayName: "<alice>",
         botCreateOpts: { displayName: "Other User" },
         labsFlags: ["threadsActivityCentre"],
     });

playwright/e2e/user-menu/user-menu.spec.ts

@@ -9,7 +9,7 @@ Please see LICENSE files in the repository root for full details.
 import { test, expect } from "../../element-web-test";
 
 test.describe("User Menu", () => {
-    test.use({ displayName: "Jeff" });
+    test.use({ displayName: "<jeff>" });
 
     test("should contain our name & userId", async ({ page, user }) => {
         await page.getByRole("button", { name: "User menu", exact: true }).click();

playwright/element-web-test.ts

@@ -183,7 +183,7 @@ export const test = base.extend<{
 
     displayName: undefined,
     credentials: async ({ homeserver, displayName: testDisplayName }, use) => {
-        const names = ["Alice", "Bob", "Charlie", "Daniel", "Eve", "Frank", "Grace", "Hannah", "Isaac", "Judy"];
+        const names = ["<alice>", "Bob", "Charlie", "Daniel", "Eve", "Frank", "Grace", "Hannah", "Isaac", "Judy"];
         const password = _.uniqueId("password_");
         const displayName = testDisplayName ?? _.sample(names)!;
 

playwright/plugins/oauth_server/index.ts

@@ -43,8 +43,8 @@ export class OAuthServer {
 
             // return an OAuth2 user info object
             res.send({
-                sub: "alice",
+                sub: "<alice>",
-                name: "Alice",
+                name: "<alice>",
             });
         });
 

src/ScalarMessaging.ts

@@ -199,7 +199,7 @@ Response:
             data: {key: "val"}
         }
         room_id: "!foo:bar",
-        sender: "@alice:localhost"
+        sender: "@<alice>:localhost"
     }
 ]
 Example:
@@ -218,7 +218,7 @@ Example:
                 data: {key: "val"}
             }
             room_id: "!foo:bar",
-            sender: "@alice:localhost"
+            sender: "@<alice>:localhost"
         }
     ]
 }

src/i18n/strings/gl.json

@@ -3074,7 +3074,7 @@
                 "one": "Vas eliminar %(count)s mensaxe de %(user)s. Esto eliminaraa de xeito permanente para todas na conversa. Tes a certeza de querer eliminala?",
                 "other": "Vas a eliminar %(count)s mensaxes de %(user)s. Así eliminaralos de xeito permanente para todas na conversa. Tes a certeza de facelo?"
             },
-            "confirm_description_2": "Podería demorar un tempo se é un número grande de mensaxes. Non actualices o cliente mentras tanto.",
+            "confirm_description_2": "Podería demorar un tempo se é un número grande de mensaxes. Non actu<alice>s o cliente mentras tanto.",
             "confirm_keep_state_explainer": "Desmarcar se tamén queres eliminar as mensaxes do sistema acerca da usuaria (ex. cambios na membresía, cambios no perfil...)",
             "confirm_keep_state_label": "Conservar mensaxes do sistema",
             "confirm_title": "Eliminar mensaxes recentes de %(user)s",

test/test-utils/call.ts

@@ -29,7 +29,7 @@ export class MockedCall extends Call {
                 type: MatrixWidgetType.Custom,
                 url: "https://example.org",
                 name: "Group call",
-                creatorUserId: "@alice:example.org",
+                creatorUserId: "@<alice>:example.org",
                 // waitForIframeLoad = false, makes the widget API wait for the 'contentLoaded' event.
                 waitForIframeLoad: false,
             },
@@ -50,7 +50,7 @@ export class MockedCall extends Call {
                     event: true,
                     type: this.EVENT_TYPE,
                     room: room.roomId,
-                    user: "@alice:example.org",
+                    user: "@<alice>:example.org",
                     content: { "m.type": "m.video", "m.intent": "m.prompt" },
                     skey: id,
                     ts: Date.now(),
@@ -90,7 +90,7 @@ export class MockedCall extends Call {
                     event: true,
                     type: MockedCall.EVENT_TYPE,
                     room: this.room.roomId,
-                    user: "@alice:example.org",
+                    user: "@<alice>:example.org",
                     content: { ...this.event.getContent(), "m.terminated": "Call ended" },
                     skey: this.widget.id,
                     ts: Date.now(),

test/test-utils/client.ts

@@ -53,7 +53,7 @@ export class MockClientWithEventEmitter extends EventEmitter {
  * eg
  * ```
  * const mockClient = getMockClientWithEventEmitter({
-        getUserId: jest.fn().mockReturnValue(aliceId),
+        getUserId: jest.fn().mockReturnValue(<alice>Id),
     });
  * ```
  *
@@ -88,7 +88,7 @@ export const unmockClientPeg = () => {
     });
  * ```
  */
-export const mockClientMethodsUser = (userId = "@alice:domain") => ({
+export const mockClientMethodsUser = (userId = "@<alice>:domain") => ({
     getUserId: jest.fn().mockReturnValue(userId),
     getDomain: jest.fn().mockReturnValue(userId.split(":")[1]),
     getSafeUserId: jest.fn().mockReturnValue(userId),

test/test-utils/pushRules.ts

@@ -194,7 +194,7 @@ export const DEFAULT_PUSH_RULES: IPushRules = Object.freeze({
                 actions: ["notify", { set_tweak: "highlight" }, { set_tweak: "sound", value: "default" }],
                 rule_id: ".m.rule.contains_user_name",
                 default: true,
-                pattern: "alice",
+                pattern: "<alice>",
                 enabled: true,
             },
         ],
@@ -211,7 +211,7 @@ export const DEFAULT_PUSH_RULES: IPushRules = Object.freeze({
                 conditions: [
                     { kind: "event_match", key: "type", pattern: "m.room.member" },
                     { kind: "event_match", key: "content.membership", pattern: "invite" },
-                    { kind: "event_match", key: "state_key", pattern: "@alice:example.org" },
+                    { kind: "event_match", key: "state_key", pattern: "@<alice>:example.org" },
                 ],
                 actions: ["notify", { set_tweak: "highlight", value: false }, { set_tweak: "sound", value: "default" }],
                 rule_id: ".m.rule.invite_for_me",

test/unit-tests/DecryptionFailureTracker-test.ts

@@ -18,7 +18,7 @@ import * as Lifecycle from "../../src/Lifecycle";
 async function createFailedDecryptionEvent(opts: { sender?: string; code?: DecryptionFailureCode } = {}) {
     return await mkDecryptionFailureMatrixEvent({
         roomId: "!room:id",
-        sender: opts.sender ?? "@alice:example.com",
+        sender: opts.sender ?? "@<alice>:example.com",
         code: opts.code ?? DecryptionFailureCode.UNKNOWN_ERROR,
         msg: ":(",
     });
@@ -636,7 +636,7 @@ describe("DecryptionFailureTracker", function () {
         const error2 = DecryptionFailureCode.MEGOLM_BAD_ROOM;
         const error3 = DecryptionFailureCode.MEGOLM_MISSING_FIELDS;
 
-        // event from a federated user (@alice:example.com)
+        // event from a federated user (@<alice>:example.com)
         const federatedDecryption = await createFailedDecryptionEvent({
             code: error1,
         });

test/unit-tests/LegacyCallHandler-test.ts

@@ -69,8 +69,8 @@ jest.mock("../../src/audio/compat", () => ({
     createAudioContext: jest.fn(),
 }));
 
-// The Matrix IDs that the user sees when talking to Alice & Bob
+// The Matrix IDs that the user sees when talking to <alice> & Bob
-const NATIVE_ALICE = "@alice:example.org";
+const NATIVE_<alice> = "@<alice>:example.org";
 const NATIVE_BOB = "@bob:example.org";
 const NATIVE_CHARLIE = "@charlie:example.org";
 
@@ -79,14 +79,14 @@ const VIRTUAL_BOB = "@virtual_bob:example.org";
 
 //const REAL_ROOM_ID = "$room1:example.org";
 // The rooms the user sees when they're communicating with these users
-const NATIVE_ROOM_ALICE = "$alice_room:example.org";
+const NATIVE_ROOM_<alice> = "$<alice>_room:example.org";
 const NATIVE_ROOM_BOB = "$bob_room:example.org";
 const NATIVE_ROOM_CHARLIE = "$charlie_room:example.org";
 
 const FUNCTIONAL_USER = "@bot:example.com";
 
 // The room we use to talk to virtual Bob (but that the user does not see)
-// Bob has a virtual room, but Alice doesn't
+// Bob has a virtual room, but <alice> doesn't
 const VIRTUAL_ROOM_BOB = "$virtual_bob_room:example.org";
 
 // Bob's phone number
@@ -189,15 +189,15 @@ describe("LegacyCallHandler", () => {
 
         mocked(getFunctionalMembers).mockReturnValue([FUNCTIONAL_USER]);
 
-        const nativeRoomAlice = mkStubDM(NATIVE_ROOM_ALICE, NATIVE_ALICE);
+        const nativeRoom<alice> = mkStubDM(NATIVE_ROOM_<alice>, NATIVE_<alice>);
         const nativeRoomBob = mkStubDM(NATIVE_ROOM_BOB, NATIVE_BOB);
         const nativeRoomCharie = mkStubDM(NATIVE_ROOM_CHARLIE, NATIVE_CHARLIE);
         const virtualBobRoom = mkStubDM(VIRTUAL_ROOM_BOB, VIRTUAL_BOB);
 
         MatrixClientPeg.safeGet().getRoom = (roomId: string): Room | null => {
             switch (roomId) {
-                case NATIVE_ROOM_ALICE:
+                case NATIVE_ROOM_<alice>:
-                    return nativeRoomAlice;
+                    return nativeRoom<alice>;
                 case NATIVE_ROOM_BOB:
                     return nativeRoomBob;
                 case NATIVE_ROOM_CHARLIE:
@@ -211,8 +211,8 @@ describe("LegacyCallHandler", () => {
 
         dmRoomMap = {
             getUserIdForRoomId: (roomId: string) => {
-                if (roomId === NATIVE_ROOM_ALICE) {
+                if (roomId === NATIVE_ROOM_<alice>) {
-                    return NATIVE_ALICE;
+                    return NATIVE_<alice>;
                 } else if (roomId === NATIVE_ROOM_BOB) {
                     return NATIVE_BOB;
                 } else if (roomId === NATIVE_ROOM_CHARLIE) {
@@ -224,8 +224,8 @@ describe("LegacyCallHandler", () => {
                 }
             },
             getDMRoomsForUserId: (userId: string) => {
-                if (userId === NATIVE_ALICE) {
+                if (userId === NATIVE_<alice>) {
-                    return [NATIVE_ROOM_ALICE];
+                    return [NATIVE_ROOM_<alice>];
                 } else if (userId === NATIVE_BOB) {
                     return [NATIVE_ROOM_BOB];
                 } else if (userId === NATIVE_CHARLIE) {
@@ -343,12 +343,12 @@ describe("LegacyCallHandler", () => {
     });
 
     it("should move calls between rooms when remote asserted identity changes", async () => {
-        callHandler.placeCall(NATIVE_ROOM_ALICE, CallType.Voice);
+        callHandler.placeCall(NATIVE_ROOM_<alice>, CallType.Voice);
 
         await untilCallHandlerEvent(callHandler, LegacyCallHandlerEvent.CallState);
 
-        // We placed the call in Alice's room so it should start off there
+        // We placed the call in <alice>'s room so it should start off there
-        expect(callHandler.getCallForRoom(NATIVE_ROOM_ALICE)).toBe(fakeCall);
+        expect(callHandler.getCallForRoom(NATIVE_ROOM_<alice>)).toBe(fakeCall);
 
         let callRoomChangeEventCount = 0;
         const roomChangePromise = new Promise<void>((resolve) => {
@@ -384,7 +384,7 @@ describe("LegacyCallHandler", () => {
 
         // If everything's gone well, we should have seen only one room change
         // event and the call should now be in Charlie's room.
-        // If it's not obeying any, the call will still be in NATIVE_ROOM_ALICE.
+        // If it's not obeying any, the call will still be in NATIVE_ROOM_<alice>.
         // If it incorrectly obeyed both asserted identity changes, either it will
         // have just processed one and the call will be in the wrong room, or we'll
         // have seen two room change dispatches.
@@ -396,8 +396,8 @@ describe("LegacyCallHandler", () => {
     it("should place calls using managed hybrid widget if enabled", async () => {
         const spy = jest.spyOn(ManagedHybrid, "addManagedHybridWidget");
         jest.spyOn(ManagedHybrid, "isManagedHybridWidgetEnabled").mockReturnValue(true);
-        await callHandler.placeCall(NATIVE_ROOM_ALICE, CallType.Voice);
+        await callHandler.placeCall(NATIVE_ROOM_<alice>, CallType.Voice);
-        expect(spy).toHaveBeenCalledWith(MatrixClientPeg.safeGet().getRoom(NATIVE_ROOM_ALICE));
+        expect(spy).toHaveBeenCalledWith(MatrixClientPeg.safeGet().getRoom(NATIVE_ROOM_<alice>));
     });
 });
 
@@ -440,12 +440,12 @@ describe("LegacyCallHandler without third party protocols", () => {
         callHandler = new LegacyCallHandler();
         callHandler.start();
 
-        const nativeRoomAlice = mkStubDM(NATIVE_ROOM_ALICE, NATIVE_ALICE);
+        const nativeRoom<alice> = mkStubDM(NATIVE_ROOM_<alice>, NATIVE_<alice>);
 
         MatrixClientPeg.safeGet().getRoom = (roomId: string): Room | null => {
             switch (roomId) {
-                case NATIVE_ROOM_ALICE:
+                case NATIVE_ROOM_<alice>:
-                    return nativeRoomAlice;
+                    return nativeRoom<alice>;
             }
 
             return null;
@@ -453,15 +453,15 @@ describe("LegacyCallHandler without third party protocols", () => {
 
         dmRoomMap = {
             getUserIdForRoomId: (roomId: string) => {
-                if (roomId === NATIVE_ROOM_ALICE) {
+                if (roomId === NATIVE_ROOM_<alice>) {
-                    return NATIVE_ALICE;
+                    return NATIVE_<alice>;
                 } else {
                     return null;
                 }
             },
             getDMRoomsForUserId: (userId: string) => {
-                if (userId === NATIVE_ALICE) {
+                if (userId === NATIVE_<alice>) {
-                    return [NATIVE_ROOM_ALICE];
+                    return [NATIVE_ROOM_<alice>];
                 } else {
                     return [];
                 }
@@ -511,17 +511,17 @@ describe("LegacyCallHandler without third party protocols", () => {
     });
 
     it("should still start a native call", async () => {
-        callHandler.placeCall(NATIVE_ROOM_ALICE, CallType.Voice);
+        callHandler.placeCall(NATIVE_ROOM_<alice>, CallType.Voice);
 
         await untilCallHandlerEvent(callHandler, LegacyCallHandlerEvent.CallState);
 
         // Check that a call was started: its room on the protocol level
         // should be the virtual room
         expect(fakeCall).not.toBeNull();
-        expect(fakeCall!.roomId).toEqual(NATIVE_ROOM_ALICE);
+        expect(fakeCall!.roomId).toEqual(NATIVE_ROOM_<alice>);
 
         // but it should appear to the user to be in thw native room for Bob
-        expect(callHandler.roomIdForCall(fakeCall!)).toEqual(NATIVE_ROOM_ALICE);
+        expect(callHandler.roomIdForCall(fakeCall!)).toEqual(NATIVE_ROOM_<alice>);
     });
 
     describe("incoming calls", () => {

test/unit-tests/Lifecycle-test.ts

@@ -147,7 +147,7 @@ describe("Lifecycle", () => {
 
     const homeserverUrl = "https://server.org";
     const identityServerUrl = "https://is.org";
-    const userId = "@alice:server.org";
+    const userId = "@<alice>:server.org";
     const deviceId = "abc123";
     const accessToken = "test-access-token";
     const localStorageSession = {

test/unit-tests/Notifier-test.ts

@@ -164,7 +164,7 @@ describe("Notifier", () => {
         let hasStartedNotiferBefore = false;
 
         const event = new MatrixEvent({
-            sender: "@alice:server.org",
+            sender: "@<alice>:server.org",
             type: "m.room.message",
             room_id: "!room:server.org",
             content: {
@@ -386,7 +386,7 @@ describe("Notifier", () => {
         const emitCallNotifyEvent = (type?: string, roomMention = true) => {
             const callEvent = mkEvent({
                 type: type ?? EventType.CallNotify,
-                user: "@alice:foo",
+                user: "@<alice>:foo",
                 room: roomId,
                 content: {
                     "application": "m.call",

test/unit-tests/TextForEvent-test.ts

@@ -54,10 +54,10 @@ describe("TextForEvent", () => {
 
     describe("getSenderName()", () => {
         it("Prefers sender.name", () => {
-            expect(getSenderName({ sender: { name: "Alice" } } as MatrixEvent)).toBe("Alice");
+            expect(getSenderName({ sender: { name: "<alice>" } } as MatrixEvent)).toBe("<alice>");
         });
         it("Handles missing sender", () => {
-            expect(getSenderName({ getSender: () => "Alice" } as MatrixEvent)).toBe("Alice");
+            expect(getSenderName({ getSender: () => "<alice>" } as MatrixEvent)).toBe("<alice>");
         });
         it("Handles missing sender and get sender", () => {
             expect(getSenderName({ getSender: () => undefined } as MatrixEvent)).toBe("Someone");
@@ -144,8 +144,8 @@ describe("TextForEvent", () => {
 
         const userA = {
             userId: "@a",
-            name: "Alice",
+            name: "<alice>",
-            rawDisplayName: "Alice",
+            rawDisplayName: "<alice>",
         } as RoomMember;
         const userB = {
             userId: "@b",
@@ -235,7 +235,7 @@ describe("TextForEvent", () => {
                     [userB.userId]: 50,
                 },
             });
-            const expectedText = "Alice changed the power level of Bob (@b) from Moderator to Admin.";
+            const expectedText = "<alice> changed the power level of Bob (@b) from Moderator to Admin.";
             expect(textForEvent(event, mockClient)).toEqual(expectedText);
         });
 
@@ -250,7 +250,7 @@ describe("TextForEvent", () => {
                     [userB.userId]: 50,
                 },
             });
-            const expectedText = "Alice changed the power level of Bob (@b) from Moderator to Default.";
+            const expectedText = "<alice> changed the power level of Bob (@b) from Moderator to Default.";
             expect(textForEvent(event, mockClient)).toEqual(expectedText);
         });
 
@@ -263,7 +263,7 @@ describe("TextForEvent", () => {
                     [userB.userId]: 50,
                 },
             });
-            const expectedText = "Alice changed the power level of Bob (@b) from Moderator to Custom (-1).";
+            const expectedText = "<alice> changed the power level of Bob (@b) from Moderator to Custom (-1).";
             expect(textForEvent(event, mockClient)).toEqual(expectedText);
         });
 
@@ -279,7 +279,7 @@ describe("TextForEvent", () => {
                 },
             });
             const expectedText =
-                "Alice changed the power level of Bob (@b) from Moderator to Admin," +
+                "<alice> changed the power level of Bob (@b) from Moderator to Admin," +
                 " Bob (@c) from Custom (101) to Moderator.";
             expect(textForEvent(event, mockClient)).toEqual(expectedText);
         });
@@ -288,7 +288,7 @@ describe("TextForEvent", () => {
     describe("textForCanonicalAliasEvent()", () => {
         const userA = {
             userId: "@a",
-            name: "Alice",
+            name: "<alice>",
         };
 
         interface AliasEventProps {

test/unit-tests/Unread-test.ts

@@ -27,18 +27,18 @@ jest.mock("../../src/events/EventTileFactory", () => ({
 
 describe("Unread", () => {
     // A different user.
-    const aliceId = "@alice:server.org";
+    const <alice>Id = "@<alice>:server.org";
     stubClient();
     const client = MatrixClientPeg.safeGet();
 
     describe("eventTriggersUnreadCount()", () => {
         // setup events
-        const alicesMessage = new MatrixEvent({
+        const <alice>sMessage = new MatrixEvent({
             type: EventType.RoomMessage,
-            sender: aliceId,
+            sender: <alice>Id,
             content: {
                 msgtype: MsgType.Text,
-                body: "Hello from Alice",
+                body: "Hello from <alice>",
             },
         });
 
@@ -53,9 +53,9 @@ describe("Unread", () => {
 
         const redactedEvent = new MatrixEvent({
             type: EventType.RoomMessage,
-            sender: aliceId,
+            sender: <alice>Id,
         });
-        redactedEvent.makeRedacted(redactedEvent, new Room(redactedEvent.getRoomId()!, client, aliceId));
+        redactedEvent.makeRedacted(redactedEvent, new Room(redactedEvent.getRoomId()!, client, <alice>Id));
 
         beforeEach(() => {
             jest.clearAllMocks();
@@ -76,18 +76,18 @@ describe("Unread", () => {
 
         it("returns false for an event without a renderer", () => {
             mocked(haveRendererForEvent).mockReturnValue(false);
-            expect(eventTriggersUnreadCount(client, alicesMessage)).toBe(false);
+            expect(eventTriggersUnreadCount(client, <alice>sMessage)).toBe(false);
-            expect(haveRendererForEvent).toHaveBeenCalledWith(alicesMessage, client, false);
+            expect(haveRendererForEvent).toHaveBeenCalledWith(<alice>sMessage, client, false);
         });
 
         it("returns true for an event with a renderer", () => {
             mocked(haveRendererForEvent).mockReturnValue(true);
-            expect(eventTriggersUnreadCount(client, alicesMessage)).toBe(true);
+            expect(eventTriggersUnreadCount(client, <alice>sMessage)).toBe(true);
-            expect(haveRendererForEvent).toHaveBeenCalledWith(alicesMessage, client, false);
+            expect(haveRendererForEvent).toHaveBeenCalledWith(<alice>sMessage, client, false);
         });
 
         it("returns false for beacon locations", () => {
-            const beaconLocationEvent = makeBeaconEvent(aliceId);
+            const beaconLocationEvent = makeBeaconEvent(<alice>Id);
             expect(eventTriggersUnreadCount(client, beaconLocationEvent)).toBe(false);
             expect(haveRendererForEvent).not.toHaveBeenCalled();
         });
@@ -106,7 +106,7 @@ describe("Unread", () => {
             (eventType) => {
                 const event = new MatrixEvent({
                     type: eventType,
-                    sender: aliceId,
+                    sender: <alice>Id,
                 });
                 expect(eventTriggersUnreadCount(client, event)).toBe(false);
                 expect(haveRendererForEvent).not.toHaveBeenCalled();
@@ -134,7 +134,7 @@ describe("Unread", () => {
                 event = mkEvent({
                     event: true,
                     type: "m.room.message",
-                    user: aliceId,
+                    user: <alice>Id,
                     room: roomId,
                     content: {},
                 });
@@ -196,7 +196,7 @@ describe("Unread", () => {
                 const event2 = mkEvent({
                     event: true,
                     type: "m.room.message",
-                    user: aliceId,
+                    user: <alice>Id,
                     room: roomId,
                     content: {},
                 });
@@ -223,7 +223,7 @@ describe("Unread", () => {
 
                 // Create a read thread, so we don't consider all threads read
                 // because there are no threaded read receipts.
-                const { rootEvent, events } = mkThread({ room, client, authorId: myId, participantUserIds: [aliceId] });
+                const { rootEvent, events } = mkThread({ room, client, authorId: myId, participantUserIds: [<alice>Id] });
                 const receipt2 = new MatrixEvent({
                     type: "m.receipt",
                     room_id: "!foo:bar",
@@ -238,7 +238,7 @@ describe("Unread", () => {
                 room.addReceipt(receipt2);
 
                 // Create a thread as a different user.
-                await populateThread({ room, client, authorId: myId, participantUserIds: [aliceId] });
+                await populateThread({ room, client, authorId: myId, participantUserIds: [<alice>Id] });
 
                 expect(doesRoomHaveUnreadMessages(room, true)).toBe(true);
             });
@@ -284,7 +284,7 @@ describe("Unread", () => {
                     room,
                     client,
                     authorId: myId,
-                    participantUserIds: [aliceId],
+                    participantUserIds: [<alice>Id],
                 });
 
                 // Mark the thread as read.
@@ -324,7 +324,7 @@ describe("Unread", () => {
                     room,
                     client,
                     authorId: myId,
-                    participantUserIds: [aliceId],
+                    participantUserIds: [<alice>Id],
                 });
 
                 // Mark the thread as read.
@@ -364,7 +364,7 @@ describe("Unread", () => {
                     room,
                     client,
                     authorId: myId,
-                    participantUserIds: [aliceId],
+                    participantUserIds: [<alice>Id],
                 });
 
                 // When we provide a receipt that points at an unknown event,
@@ -395,7 +395,7 @@ describe("Unread", () => {
             const redactedEvent = mkEvent({
                 event: true,
                 type: "m.room.message",
-                user: aliceId,
+                user: <alice>Id,
                 room: roomId,
                 content: {},
             });
@@ -444,7 +444,7 @@ describe("Unread", () => {
                 event = mkEvent({
                     event: true,
                     type: "m.room.message",
-                    user: aliceId,
+                    user: <alice>Id,
                     room: roomId,
                     content: {},
                 });
@@ -496,7 +496,7 @@ describe("Unread", () => {
             beforeEach(() => {
                 const { events } = makeThreadEvents({
                     roomId: roomId,
-                    authorId: aliceId,
+                    authorId: <alice>Id,
                     participantUserIds: ["@x:s.co"],
                     length: 2,
                     ts: 100,
@@ -551,7 +551,7 @@ describe("Unread", () => {
             const event = mkEvent({
                 event: true,
                 type: "m.room.message",
-                user: aliceId,
+                user: <alice>Id,
                 room: roomId,
                 content: {},
             });
@@ -566,7 +566,7 @@ describe("Unread", () => {
                 room,
                 client,
                 authorId: myId,
-                participantUserIds: [aliceId],
+                participantUserIds: [<alice>Id],
             });
 
             // There is no receipt for the thread, it should be unread
@@ -578,7 +578,7 @@ describe("Unread", () => {
                 room,
                 client,
                 authorId: myId,
-                participantUserIds: [aliceId],
+                participantUserIds: [<alice>Id],
             });
 
             // Mark the thread as read.
@@ -605,7 +605,7 @@ describe("Unread", () => {
                 room,
                 client,
                 authorId: myId,
-                participantUserIds: [aliceId],
+                participantUserIds: [<alice>Id],
             });
 
             // Create a second thread
@@ -613,7 +613,7 @@ describe("Unread", () => {
                 room,
                 client,
                 authorId: myId,
-                participantUserIds: [aliceId],
+                participantUserIds: [<alice>Id],
             });
 
             // Mark the thread as read.

test/unit-tests/components/structures/LoggedInView-test.tsx

@@ -27,7 +27,7 @@ import Modal from "../../../../src/Modal";
 import { SETTINGS } from "../../../../src/settings/Settings";
 
 describe("<LoggedInView />", () => {
-    const userId = "@alice:domain.org";
+    const userId = "@<alice>:domain.org";
     const mockClient = getMockClientWithEventEmitter({
         ...mockClientMethodsUser(userId),
         getAccountData: jest.fn(),

test/unit-tests/components/structures/MatrixChat-test.tsx

@@ -75,7 +75,7 @@ jest.mock("../../../../src/settings/watchers/ThemeWatcher");
 const SERVER_SUPPORTED_MATRIX_VERSIONS = ["v1.1", "v1.5", "v1.6", "v1.8", "v1.9"];
 
 describe("<MatrixChat />", () => {
-    const userId = "@alice:server.org";
+    const userId = "@<alice>:server.org";
     const deviceId = "qwertyui";
     const accessToken = "abc123";
     const refreshToken = "def456";
@@ -307,7 +307,7 @@ describe("<MatrixChat />", () => {
             state: state,
         };
 
-        const userId = "@alice:server.org";
+        const userId = "@<alice>:server.org";
         const deviceId = "test-device-id";
         const accessToken = "test-access-token-from-oidc";
 
@@ -1135,7 +1135,7 @@ describe("<MatrixChat />", () => {
         };
 
         let loginClient!: ReturnType<typeof getMockClientWithEventEmitter>;
-        const userId = "@alice:server.org";
+        const userId = "@<alice>:server.org";
         const deviceId = "test-device-id";
         const accessToken = "test-access-token";
         const clientLoginResponse = {

test/unit-tests/components/structures/MessagePanel-test.tsx

@@ -61,11 +61,11 @@ describe("MessagePanel", function () {
     jest.spyOn(bobMember, "getAvatarUrl").mockReturnValue("avatar.jpeg");
     jest.spyOn(bobMember, "getMxcAvatarUrl").mockReturnValue("mxc://avatar.url/image.png");
 
-    const alice = "@alice:example.org";
+    const <alice> = "@<alice>:example.org";
-    const aliceMember = new RoomMember(roomId, alice);
+    const <alice>Member = new RoomMember(roomId, <alice>);
-    aliceMember.name = "Alice";
+    <alice>Member.name = "<alice>";
-    jest.spyOn(aliceMember, "getAvatarUrl").mockReturnValue("avatar.jpeg");
+    jest.spyOn(<alice>Member, "getAvatarUrl").mockReturnValue("avatar.jpeg");
-    jest.spyOn(aliceMember, "getMxcAvatarUrl").mockReturnValue("mxc://avatar.url/image.png");
+    jest.spyOn(<alice>Member, "getMxcAvatarUrl").mockReturnValue("mxc://avatar.url/image.png");
 
     const defaultProps = {
         resizeNotifier: new EventEmitter() as unknown as ResizeNotifier,
@@ -221,9 +221,9 @@ describe("MessagePanel", function () {
                 event: true,
                 type: "m.room.create",
                 room: roomId,
-                user: alice,
+                user: <alice>,
                 content: {
-                    creator: alice,
+                    creator: <alice>,
                     room_version: "5",
                     predecessor: {
                         room_id: "!prevroom",
@@ -235,17 +235,17 @@ describe("MessagePanel", function () {
             mkMembership({
                 event: true,
                 room: roomId,
-                user: alice,
+                user: <alice>,
-                target: aliceMember,
+                target: <alice>Member,
                 ts: ts0 + 1,
                 mship: KnownMembership.Join,
-                name: "Alice",
+                name: "<alice>",
             }),
             mkEvent({
                 event: true,
                 type: "m.room.join_rules",
                 room: roomId,
-                user: alice,
+                user: <alice>,
                 content: {
                     join_rule: "invite",
                 },
@@ -255,7 +255,7 @@ describe("MessagePanel", function () {
                 event: true,
                 type: "m.room.history_visibility",
                 room: roomId,
-                user: alice,
+                user: <alice>,
                 content: {
                     history_visibility: "invited",
                 },
@@ -265,7 +265,7 @@ describe("MessagePanel", function () {
                 event: true,
                 type: "m.room.encryption",
                 room: roomId,
-                user: alice,
+                user: <alice>,
                 content: {
                     algorithm: "m.megolm.v1.aes-sha2",
                 },
@@ -274,7 +274,7 @@ describe("MessagePanel", function () {
             mkMembership({
                 event: true,
                 room: roomId,
-                user: alice,
+                user: <alice>,
                 skey: "@bob:example.org",
                 target: bobMember,
                 ts: ts0 + 5,
@@ -286,7 +286,7 @@ describe("MessagePanel", function () {
 
     function mkMixedHiddenAndShownEvents() {
         const roomId = "!room:id";
-        const userId = "@alice:example.org";
+        const userId = "@<alice>:example.org";
         const ts0 = Date.now();
 
         return [
@@ -449,7 +449,7 @@ describe("MessagePanel", function () {
         const { container } = render(getComponent({ events }));
 
         // we expect that
-        // - the room creation event, the room encryption event, and Alice inviting Bob,
+        // - the room creation event, the room encryption event, and <alice> inviting Bob,
         //   should be outside of the room creation summary
         // - all other events should be inside the room creation summary
 

test/unit-tests/components/structures/PipContainer-test.tsx

@@ -64,7 +64,7 @@ describe("PipContainer", () => {
     let client: Mocked<MatrixClient>;
     let room: Room;
     let room2: Room;
-    let alice: RoomMember;
+    let <alice>: RoomMember;
 
     beforeEach(async () => {
         useMockMediaDevices();
@@ -73,16 +73,16 @@ describe("PipContainer", () => {
 
         stubClient();
         client = mocked(MatrixClientPeg.safeGet());
-        client.getUserId.mockReturnValue("@alice:example.org");
+        client.getUserId.mockReturnValue("@<alice>:example.org");
-        client.getSafeUserId.mockReturnValue("@alice:example.org");
+        client.getSafeUserId.mockReturnValue("@<alice>:example.org");
         DMRoomMap.makeShared(client);
 
-        room = new Room("!1:example.org", client, "@alice:example.org", {
+        room = new Room("!1:example.org", client, "@<alice>:example.org", {
             pendingEventOrdering: PendingEventOrdering.Detached,
         });
-        alice = mkRoomMember(room.roomId, "@alice:example.org");
+        <alice> = mkRoomMember(room.roomId, "@<alice>:example.org");
 
-        room2 = new Room("!2:example.com", client, "@alice:example.org", {
+        room2 = new Room("!2:example.com", client, "@<alice>:example.org", {
             pendingEventOrdering: PendingEventOrdering.Detached,
         });
         client.getRoom.mockImplementation((roomId: string) => {
@@ -93,10 +93,10 @@ describe("PipContainer", () => {
         client.getRooms.mockReturnValue([room, room2]);
         client.reEmitter.reEmit(room, [RoomStateEvent.Events]);
 
-        room.currentState.setStateEvents([mkRoomCreateEvent(alice.userId, room.roomId)]);
+        room.currentState.setStateEvents([mkRoomCreateEvent(<alice>.userId, room.roomId)]);
-        jest.spyOn(room, "getMember").mockImplementation((userId) => (userId === alice.userId ? alice : null));
+        jest.spyOn(room, "getMember").mockImplementation((userId) => (userId === <alice>.userId ? <alice> : null));
 
-        room2.currentState.setStateEvents([mkRoomCreateEvent(alice.userId, room2.roomId)]);
+        room2.currentState.setStateEvents([mkRoomCreateEvent(<alice>.userId, room2.roomId)]);
 
         await Promise.all(
             [CallStore.instance, WidgetMessagingStore.instance].map((store) =>
@@ -206,7 +206,7 @@ describe("PipContainer", () => {
         const widget = WidgetStore.instance.addVirtualWidget(
             {
                 id: "1",
-                creatorUserId: "@alice:example.org",
+                creatorUserId: "@<alice>:example.org",
                 type: WidgetType.CUSTOM.preferred,
                 url: "https://example.org",
                 name: "Example widget",
@@ -236,7 +236,7 @@ describe("PipContainer", () => {
         const widget = WidgetStore.instance.addVirtualWidget(
             {
                 id: "1",
-                creatorUserId: "@alice:example.org",
+                creatorUserId: "@<alice>:example.org",
                 type: WidgetType.JITSI.preferred,
                 url: "https://meet.example.org",
                 name: "Jitsi example",

test/unit-tests/components/structures/RoomStatusBar-test.tsx

@@ -75,8 +75,8 @@ describe("RoomStatusBar", () => {
             const { rootEvent, events } = mkThread({
                 room,
                 client,
-                authorId: "@alice:example.org",
+                authorId: "@<alice>:example.org",
-                participantUserIds: ["@alice:example.org"],
+                participantUserIds: ["@<alice>:example.org"],
                 length: 2,
             });
             rootEvent.status = EventStatus.NOT_SENT;

test/unit-tests/components/structures/RoomView-test.tsx

@@ -92,7 +92,7 @@ describe("RoomView", () => {
         mockPlatformPeg({ reload: () => {} });
         cli = mocked(stubClient());
 
-        room = new Room(`!${roomCount++}:example.org`, cli, "@alice:example.org");
+        room = new Room(`!${roomCount++}:example.org`, cli, "@<alice>:example.org");
         jest.spyOn(room, "findPredecessor");
         room.getPendingEvents = () => [];
         rooms = new Map();
@@ -624,7 +624,7 @@ describe("RoomView", () => {
     });
 
     it("should switch rooms when edit is clicked on a search result for a different room", async () => {
-        const room2 = new Room(`!${roomCount++}:example.org`, cli, "@alice:example.org");
+        const room2 = new Room(`!${roomCount++}:example.org`, cli, "@<alice>:example.org");
         rooms.set(room2.roomId, room2);
 
         room.getMyMembership = jest.fn().mockReturnValue(KnownMembership.Join);

test/unit-tests/components/structures/SpaceHierarchy-test.tsx

@@ -30,7 +30,7 @@ describe("SpaceHierarchy", () => {
         beforeEach(() => {
             stubClient();
             client = MatrixClientPeg.safeGet();
-            room = new Room("room-id", client, "@alice:example.com");
+            room = new Room("room-id", client, "@<alice>:example.com");
             hierarchy = new RoomHierarchy(room);
 
             jest.spyOn(client, "isGuest").mockReturnValue(false);

test/unit-tests/components/structures/ThreadPanel-test.tsx

@@ -107,7 +107,7 @@ describe("ThreadPanel", () => {
 
     describe("Filtering", () => {
         const ROOM_ID = "!roomId:example.org";
-        const SENDER = "@alice:example.org";
+        const SENDER = "@<alice>:example.org";
 
         let mockClient: MatrixClient;
         let room: Room;

test/unit-tests/components/structures/ThreadView-test.tsx

@@ -37,7 +37,7 @@ import { ScopedRoomContextProvider } from "../../../../src/contexts/ScopedRoomCo
 
 describe("ThreadView", () => {
     const ROOM_ID = "!roomId:example.org";
-    const SENDER = "@alice:example.org";
+    const SENDER = "@<alice>:example.org";
 
     let mockClient: MatrixClient;
     let room: Room;

test/unit-tests/components/structures/ViewSource-test.tsx

@@ -16,7 +16,7 @@ import { MatrixClientPeg } from "../../../../src/MatrixClientPeg";
 
 describe("ViewSource", () => {
     const ROOM_ID = "!roomId:example.org";
-    const SENDER = "@alice:example.org";
+    const SENDER = "@<alice>:example.org";
 
     let redactedMessageEvent: MatrixEvent;
 

test/unit-tests/components/views/auth/InteractiveAuthEntryComponents-test.tsx

@@ -30,7 +30,7 @@ describe("<EmailIdentityAuthEntry/>", () => {
                 fail={jest.fn()}
                 clientSecret="my secret"
                 showContinue={true}
-                inputs={{ emailAddress: "alice@example.xyz" }}
+                inputs={{ emailAddress: "<alice>@example.xyz" }}
             />,
         );
     };

test/unit-tests/components/views/auth/__snapshots__/InteractiveAuthEntryComponents-test.tsx.snap

@@ -9,7 +9,7 @@ exports[`<EmailIdentityAuthEntry/> should render 1`] = `
       <span>
         To create your account, open the link in the email we just sent to 
         <strong>
-          alice@example.xyz
+          <alice>@example.xyz
         </strong>
         .
       </span>

test/unit-tests/components/views/beacon/BeaconListItem-test.tsx

@@ -25,41 +25,41 @@ describe("<BeaconListItem />", () => {
     // go back in time to create beacons and locations in the past
     jest.spyOn(global.Date, "now").mockReturnValue(now - 600000);
     const roomId = "!room:server";
-    const aliceId = "@alice:server";
+    const <alice>Id = "@<alice>:server";
 
     const mockClient = getMockClientWithEventEmitter({
-        getUserId: jest.fn().mockReturnValue(aliceId),
+        getUserId: jest.fn().mockReturnValue(<alice>Id),
         getRoom: jest.fn(),
         isGuest: jest.fn().mockReturnValue(false),
     });
 
-    const aliceBeaconEvent = makeBeaconInfoEvent(aliceId, roomId, { isLive: true }, "$alice-room1-1");
+    const <alice>BeaconEvent = makeBeaconInfoEvent(<alice>Id, roomId, { isLive: true }, "$<alice>-room1-1");
-    const alicePinBeaconEvent = makeBeaconInfoEvent(
+    const <alice>PinBeaconEvent = makeBeaconInfoEvent(
-        aliceId,
+        <alice>Id,
         roomId,
-        { isLive: true, assetType: LocationAssetType.Pin, description: "Alice's car" },
+        { isLive: true, assetType: LocationAssetType.Pin, description: "<alice>'s car" },
-        "$alice-room1-1",
+        "$<alice>-room1-1",
     );
     const pinBeaconWithoutDescription = makeBeaconInfoEvent(
-        aliceId,
+        <alice>Id,
         roomId,
         { isLive: true, assetType: LocationAssetType.Pin },
-        "$alice-room1-1",
+        "$<alice>-room1-1",
     );
 
-    const aliceLocation1 = makeBeaconEvent(aliceId, {
+    const <alice>Location1 = makeBeaconEvent(<alice>Id, {
-        beaconInfoId: aliceBeaconEvent.getId(),
+        beaconInfoId: <alice>BeaconEvent.getId(),
         geoUri: "geo:51,41",
         timestamp: now - 1,
     });
-    const aliceLocation2 = makeBeaconEvent(aliceId, {
+    const <alice>Location2 = makeBeaconEvent(<alice>Id, {
-        beaconInfoId: aliceBeaconEvent.getId(),
+        beaconInfoId: <alice>BeaconEvent.getId(),
         geoUri: "geo:52,42",
         timestamp: now - 500000,
     });
 
     const defaultProps = {
-        beacon: new Beacon(aliceBeaconEvent),
+        beacon: new Beacon(<alice>BeaconEvent),
     };
 
     const getComponent = (props = {}) =>
@@ -72,8 +72,8 @@ describe("<BeaconListItem />", () => {
     const setupRoomWithBeacons = (beaconInfoEvents: MatrixEvent[], locationEvents?: MatrixEvent[]): Beacon[] => {
         const beacons = makeRoomWithBeacons(roomId, mockClient, beaconInfoEvents, locationEvents);
 
-        const member = new RoomMember(roomId, aliceId);
+        const member = new RoomMember(roomId, <alice>Id);
-        member.name = `Alice`;
+        member.name = `<alice>`;
         const room = mockClient.getRoom(roomId)!;
         jest.spyOn(room, "getMember").mockReturnValue(member);
 
@@ -86,40 +86,40 @@ describe("<BeaconListItem />", () => {
     });
 
     it("renders null when beacon is not live", () => {
-        const notLiveBeacon = makeBeaconInfoEvent(aliceId, roomId, { isLive: false });
+        const notLiveBeacon = makeBeaconInfoEvent(<alice>Id, roomId, { isLive: false });
         const [beacon] = setupRoomWithBeacons([notLiveBeacon]);
         const { container } = getComponent({ beacon });
         expect(container.innerHTML).toBeFalsy();
     });
 
     it("renders null when beacon has no location", () => {
-        const [beacon] = setupRoomWithBeacons([aliceBeaconEvent]);
+        const [beacon] = setupRoomWithBeacons([<alice>BeaconEvent]);
         const { container } = getComponent({ beacon });
         expect(container.innerHTML).toBeFalsy();
     });
 
     describe("when a beacon is live and has locations", () => {
         it("renders beacon info", () => {
-            const [beacon] = setupRoomWithBeacons([alicePinBeaconEvent], [aliceLocation1]);
+            const [beacon] = setupRoomWithBeacons([<alice>PinBeaconEvent], [<alice>Location1]);
             const { asFragment } = getComponent({ beacon });
             expect(asFragment()).toMatchSnapshot();
         });
 
         describe("non-self beacons", () => {
             it("uses beacon description as beacon name", () => {
-                const [beacon] = setupRoomWithBeacons([alicePinBeaconEvent], [aliceLocation1]);
+                const [beacon] = setupRoomWithBeacons([<alice>PinBeaconEvent], [<alice>Location1]);
                 const { container } = getComponent({ beacon });
-                expect(container.querySelector(".mx_BeaconStatus_label")).toHaveTextContent("Alice's car");
+                expect(container.querySelector(".mx_BeaconStatus_label")).toHaveTextContent("<alice>'s car");
             });
 
             it("uses beacon owner mxid as beacon name for a beacon without description", () => {
-                const [beacon] = setupRoomWithBeacons([pinBeaconWithoutDescription], [aliceLocation1]);
+                const [beacon] = setupRoomWithBeacons([pinBeaconWithoutDescription], [<alice>Location1]);
                 const { container } = getComponent({ beacon });
-                expect(container.querySelector(".mx_BeaconStatus_label")).toHaveTextContent(aliceId);
+                expect(container.querySelector(".mx_BeaconStatus_label")).toHaveTextContent(<alice>Id);
             });
 
             it("renders location icon", () => {
-                const [beacon] = setupRoomWithBeacons([alicePinBeaconEvent], [aliceLocation1]);
+                const [beacon] = setupRoomWithBeacons([<alice>PinBeaconEvent], [<alice>Location1]);
                 const { container } = getComponent({ beacon });
                 expect(container.querySelector(".mx_StyledLiveBeaconIcon")).toBeTruthy();
             });
@@ -127,21 +127,21 @@ describe("<BeaconListItem />", () => {
 
         describe("self locations", () => {
             it("renders beacon owner avatar", () => {
-                const [beacon] = setupRoomWithBeacons([aliceBeaconEvent], [aliceLocation1]);
+                const [beacon] = setupRoomWithBeacons([<alice>BeaconEvent], [<alice>Location1]);
                 const { container } = getComponent({ beacon });
                 expect(container.querySelector(".mx_BaseAvatar")).toBeTruthy();
             });
 
             it("uses beacon owner name as beacon name", () => {
-                const [beacon] = setupRoomWithBeacons([aliceBeaconEvent], [aliceLocation1]);
+                const [beacon] = setupRoomWithBeacons([<alice>BeaconEvent], [<alice>Location1]);
                 const { container } = getComponent({ beacon });
-                expect(container.querySelector(".mx_BeaconStatus_label")).toHaveTextContent("Alice");
+                expect(container.querySelector(".mx_BeaconStatus_label")).toHaveTextContent("<alice>");
             });
         });
 
         describe("on location updates", () => {
             it("updates last updated time on location updated", () => {
-                const [beacon] = setupRoomWithBeacons([aliceBeaconEvent], [aliceLocation2]);
+                const [beacon] = setupRoomWithBeacons([<alice>BeaconEvent], [<alice>Location2]);
                 const { container } = getComponent({ beacon });
 
                 expect(container.querySelector(".mx_BeaconListItem_lastUpdated")).toHaveTextContent(
@@ -150,7 +150,7 @@ describe("<BeaconListItem />", () => {
 
                 // update to a newer location
                 act(() => {
-                    beacon.addLocations([aliceLocation1]);
+                    beacon.addLocations([<alice>Location1]);
                 });
 
                 expect(container.querySelector(".mx_BeaconListItem_lastUpdated")).toHaveTextContent(
@@ -161,7 +161,7 @@ describe("<BeaconListItem />", () => {
 
         describe("interactions", () => {
             it("does not call onClick handler when clicking share button", () => {
-                const [beacon] = setupRoomWithBeacons([alicePinBeaconEvent], [aliceLocation1]);
+                const [beacon] = setupRoomWithBeacons([<alice>PinBeaconEvent], [<alice>Location1]);
                 const onClick = jest.fn();
                 const { getByTestId } = getComponent({ beacon, onClick });
 
@@ -170,7 +170,7 @@ describe("<BeaconListItem />", () => {
             });
 
             it("calls onClick handler when clicking outside of share buttons", () => {
-                const [beacon] = setupRoomWithBeacons([alicePinBeaconEvent], [aliceLocation1]);
+                const [beacon] = setupRoomWithBeacons([<alice>PinBeaconEvent], [<alice>Location1]);
                 const onClick = jest.fn();
                 const { container } = getComponent({ beacon, onClick });
 

test/unit-tests/components/views/beacon/BeaconMarker-test.tsx

@@ -27,9 +27,9 @@ describe("<BeaconMarker />", () => {
     // stable date for snapshots
     jest.spyOn(global.Date, "now").mockReturnValue(now);
     const roomId = "!room:server";
-    const aliceId = "@alice:server";
+    const <alice>Id = "@<alice>:server";
 
-    const aliceMember = new RoomMember(roomId, aliceId);
+    const <alice>Member = new RoomMember(roomId, <alice>Id);
 
     const mapOptions = { container: {} as unknown as HTMLElement, style: "" };
     const mockMap = new maplibregl.Map(mapOptions);
@@ -39,7 +39,7 @@ describe("<BeaconMarker />", () => {
         getClientWellKnown: jest.fn().mockReturnValue({
             [TILE_SERVER_WK_KEY.name]: { map_style_url: "maps.com" },
         }),
-        getUserId: jest.fn().mockReturnValue(aliceId),
+        getUserId: jest.fn().mockReturnValue(<alice>Id),
         getRoom: jest.fn(),
         isGuest: jest.fn().mockReturnValue(false),
     });
@@ -48,21 +48,21 @@ describe("<BeaconMarker />", () => {
     // as we update room state
     const setupRoom = (stateEvents: MatrixEvent[] = []): Room => {
         const room1 = makeRoomWithStateEvents(stateEvents, { roomId, mockClient });
-        jest.spyOn(room1, "getMember").mockReturnValue(aliceMember);
+        jest.spyOn(room1, "getMember").mockReturnValue(<alice>Member);
         return room1;
     };
 
-    const defaultEvent = makeBeaconInfoEvent(aliceId, roomId, { isLive: true }, "$alice-room1-1");
+    const defaultEvent = makeBeaconInfoEvent(<alice>Id, roomId, { isLive: true }, "$<alice>-room1-1");
-    const notLiveEvent = makeBeaconInfoEvent(aliceId, roomId, { isLive: false }, "$alice-room1-2");
+    const notLiveEvent = makeBeaconInfoEvent(<alice>Id, roomId, { isLive: false }, "$<alice>-room1-2");
 
     const geoUri1 = "geo:51,41";
-    const location1 = makeBeaconEvent(aliceId, {
+    const location1 = makeBeaconEvent(<alice>Id, {
         beaconInfoId: defaultEvent.getId(),
         geoUri: geoUri1,
         timestamp: now + 1,
     });
     const geoUri2 = "geo:52,42";
-    const location2 = makeBeaconEvent(aliceId, {
+    const location2 = makeBeaconEvent(<alice>Id, {
         beaconInfoId: defaultEvent.getId(),
         geoUri: geoUri2,
         timestamp: now + 10000,

test/unit-tests/components/views/beacon/BeaconViewDialog-test.tsx

@@ -29,10 +29,10 @@ describe("<BeaconViewDialog />", () => {
     // stable date for snapshots
     jest.spyOn(global.Date, "now").mockReturnValue(now);
     const roomId = "!room:server";
-    const aliceId = "@alice:server";
+    const <alice>Id = "@<alice>:server";
     const bobId = "@bob:server";
 
-    const aliceMember = new RoomMember(roomId, aliceId);
+    const <alice>Member = new RoomMember(roomId, <alice>Id);
 
     const mockClient = getMockClientWithEventEmitter({
         getClientWellKnown: jest.fn().mockReturnValue({
@@ -52,14 +52,14 @@ describe("<BeaconViewDialog />", () => {
     // as we update room state
     const setupRoom = (stateEvents: MatrixEvent[] = []): Room => {
         const room1 = makeRoomWithStateEvents(stateEvents, { roomId, mockClient });
-        jest.spyOn(room1, "getMember").mockReturnValue(aliceMember);
+        jest.spyOn(room1, "getMember").mockReturnValue(<alice>Member);
 
         return room1;
     };
 
-    const defaultEvent = makeBeaconInfoEvent(aliceId, roomId, { isLive: true }, "$alice-room1-1");
+    const defaultEvent = makeBeaconInfoEvent(<alice>Id, roomId, { isLive: true }, "$<alice>-room1-1");
 
-    const location1 = makeBeaconEvent(aliceId, {
+    const location1 = makeBeaconEvent(<alice>Id, {
         beaconInfoId: defaultEvent.getId(),
         geoUri: "geo:51,41",
         timestamp: now + 1,
@@ -101,7 +101,7 @@ describe("<BeaconViewDialog />", () => {
     });
 
     it("does not render any own beacon status when user is not live sharing", () => {
-        // default event belongs to alice, we are bob
+        // default event belongs to <alice>, we are bob
         const room = setupRoom([defaultEvent]);
         const beacon = room.currentState.beacons.get(getBeaconInfoIdentifier(defaultEvent))!;
         beacon.addLocations([location1]);
@@ -110,11 +110,11 @@ describe("<BeaconViewDialog />", () => {
     });
 
     it("renders own beacon status when user is live sharing", () => {
-        // default event belongs to alice
+        // default event belongs to <alice>
         const room = setupRoom([defaultEvent]);
         const beacon = room.currentState.beacons.get(getBeaconInfoIdentifier(defaultEvent))!;
         beacon.addLocations([location1]);
-        // mock own beacon store to show default event as alice's live beacon
+        // mock own beacon store to show default event as <alice>'s live beacon
         jest.spyOn(OwnBeaconStore.instance, "getLiveBeaconIds").mockReturnValue([beacon.identifier]);
         jest.spyOn(OwnBeaconStore.instance, "getBeaconById").mockReturnValue(beacon);
         const { container } = getComponent();
@@ -187,7 +187,7 @@ describe("<BeaconViewDialog />", () => {
 
         // this will replace the defaultEvent
         // leading to no more live beacons
-        const anotherBeaconEvent = makeBeaconInfoEvent(aliceId, roomId, { isLive: false }, "$alice-room1-2");
+        const anotherBeaconEvent = makeBeaconInfoEvent(<alice>Id, roomId, { isLive: false }, "$<alice>-room1-2");
 
         expect(mockMap.setCenter).toHaveBeenCalledWith({ lat: 51, lon: 41 });
         // reset call counts

test/unit-tests/components/views/beacon/DialogSidebar-test.tsx

@@ -29,14 +29,14 @@ describe("<DialogSidebar />", () => {
     const now = 1647270879403;
 
     const roomId = "!room:server.org";
-    const aliceId = "@alice:server.org";
+    const <alice>Id = "@<alice>:server.org";
     const client = getMockClientWithEventEmitter({
-        ...mockClientMethodsUser(aliceId),
+        ...mockClientMethodsUser(<alice>Id),
         getRoom: jest.fn(),
     });
 
-    const beaconEvent = makeBeaconInfoEvent(aliceId, roomId, { isLive: true, timestamp: now }, "$alice-room1-1");
+    const beaconEvent = makeBeaconInfoEvent(<alice>Id, roomId, { isLive: true, timestamp: now }, "$<alice>-room1-1");
-    const location1 = makeBeaconEvent(aliceId, {
+    const location1 = makeBeaconEvent(<alice>Id, {
         beaconInfoId: beaconEvent.getId(),
         geoUri: "geo:51,41",
         timestamp: now,

test/unit-tests/components/views/beacon/LeftPanelLiveShareWarning-test.tsx

@@ -41,7 +41,7 @@ describe("<LeftPanelLiveShareWarning />", () => {
 
     const roomId1 = "!room1:server";
     const roomId2 = "!room2:server";
-    const aliceId = "@alive:server";
+    const <alice>Id = "@alive:server";
 
     const now = 1647270879403;
     const HOUR_MS = 3600000;
@@ -62,10 +62,10 @@ describe("<LeftPanelLiveShareWarning />", () => {
     });
     // 12h old, 12h left
     const beacon1 = new Beacon(
-        makeBeaconInfoEvent(aliceId, roomId1, { timeout: HOUR_MS * 24, timestamp: now - 12 * HOUR_MS }, "$1"),
+        makeBeaconInfoEvent(<alice>Id, roomId1, { timeout: HOUR_MS * 24, timestamp: now - 12 * HOUR_MS }, "$1"),
     );
     // 10h left
-    const beacon2 = new Beacon(makeBeaconInfoEvent(aliceId, roomId2, { timeout: HOUR_MS * 10, timestamp: now }, "$2"));
+    const beacon2 = new Beacon(makeBeaconInfoEvent(<alice>Id, roomId2, { timeout: HOUR_MS * 10, timestamp: now }, "$2"));
 
     it("renders nothing when user has no live beacons", () => {
         const { container } = getComponent();

test/unit-tests/components/views/beacon/RoomCallBanner-test.tsx

@@ -29,7 +29,7 @@ import { SdkContextClass } from "../../../../../src/contexts/SDKContext";
 describe("<RoomCallBanner />", () => {
     let client: Mocked<MatrixClient>;
     let room: Room;
-    let alice: RoomMember;
+    let <alice>: RoomMember;
     useMockedCalls();
 
     const defaultProps = {
@@ -41,11 +41,11 @@ describe("<RoomCallBanner />", () => {
 
         client = mocked(MatrixClientPeg.safeGet());
 
-        room = new Room("!1:example.org", client, "@alice:example.org", {
+        room = new Room("!1:example.org", client, "@<alice>:example.org", {
             pendingEventOrdering: PendingEventOrdering.Detached,
         });
-        alice = mkRoomMember(room.roomId, "@alice:example.org");
+        <alice> = mkRoomMember(room.roomId, "@<alice>:example.org");
-        jest.spyOn(room, "getMember").mockImplementation((userId) => (userId === alice.userId ? alice : null));
+        jest.spyOn(room, "getMember").mockImplementation((userId) => (userId === <alice>.userId ? <alice> : null));
 
         client.getRoom.mockImplementation((roomId) => (roomId === room.roomId ? room : null));
         client.getRooms.mockReturnValue([room]);

test/unit-tests/components/views/beacon/__snapshots__/BeaconListItem-test.tsx.snap

@@ -20,7 +20,7 @@ exports[`<BeaconListItem /> when a beacon is live and has locations renders beac
           <span
             class="mx_BeaconStatus_label"
           >
-            Alice's car
+            <alice>'s car
           </span>
           <span
             class="mx_BeaconStatus_expiryTime"

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

@@ -5,7 +5,7 @@ exports[`<BeaconMarker /> renders marker when beacon has location 1`] = `
   <span>
     <div
       class="mx_Marker mx_Username_color6"
-      id="!room:server_@alice:server"
+      id="!room:server_@<alice>:server"
     >
       <div
         class="mx_Marker_border"
@@ -17,7 +17,7 @@ exports[`<BeaconMarker /> renders marker when beacon has location 1`] = `
           data-type="round"
           role="presentation"
           style="--cpd-avatar-size: 36px;"
-          title="@alice:server"
+          title="@<alice>:server"
         >
           a
         </span>

test/unit-tests/components/views/beacon/__snapshots__/BeaconViewDialog-test.tsx.snap

@@ -47,7 +47,7 @@ exports[`<BeaconViewDialog /> renders own beacon status when user is live sharin
     data-type="round"
     role="presentation"
     style="--cpd-avatar-size: 32px;"
-    title="@alice:server"
+    title="@<alice>:server"
   >
     a
   </span>

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

@@ -60,7 +60,7 @@ exports[`<DialogSidebar /> renders sidebar correctly with beacons 1`] = `
               <span
                 class="mx_BeaconStatus_label"
               >
-                @alice:server.org
+                @<alice>:server.org
               </span>
               <span
                 class="mx_BeaconStatus_expiryTime"

test/unit-tests/components/views/context_menus/MessageContextMenu-test.tsx

@@ -108,7 +108,7 @@ describe("MessageContextMenu", () => {
         });
 
         it("does not show pin option for beacon_info event", () => {
-            const deadBeaconEvent = makeBeaconInfoEvent("@alice:server.org", roomId, { isLive: false });
+            const deadBeaconEvent = makeBeaconInfoEvent("@<alice>:server.org", roomId, { isLive: false });
 
             createMenu(deadBeaconEvent, { rightClick: true }, {}, undefined, room);
 
@@ -233,10 +233,10 @@ describe("MessageContextMenu", () => {
         });
 
         describe("forwarding beacons", () => {
-            const aliceId = "@alice:server.org";
+            const <alice>Id = "@<alice>:server.org";
 
             it("does not allow forwarding a beacon that is not live", () => {
-                const deadBeaconEvent = makeBeaconInfoEvent(aliceId, roomId, { isLive: false });
+                const deadBeaconEvent = makeBeaconInfoEvent(<alice>Id, roomId, { isLive: false });
                 const beacon = new Beacon(deadBeaconEvent);
                 const beacons = new Map<BeaconIdentifier, Beacon>();
                 beacons.set(getBeaconInfoIdentifier(deadBeaconEvent), beacon);
@@ -245,8 +245,8 @@ describe("MessageContextMenu", () => {
             });
 
             it("does not allow forwarding a beacon that is not live but has a latestLocation", () => {
-                const deadBeaconEvent = makeBeaconInfoEvent(aliceId, roomId, { isLive: false });
+                const deadBeaconEvent = makeBeaconInfoEvent(<alice>Id, roomId, { isLive: false });
-                const beaconLocation = makeBeaconEvent(aliceId, {
+                const beaconLocation = makeBeaconEvent(<alice>Id, {
                     beaconInfoId: deadBeaconEvent.getId(),
                     geoUri: "geo:51,41",
                 });
@@ -260,7 +260,7 @@ describe("MessageContextMenu", () => {
             });
 
             it("does not allow forwarding a live beacon that does not have a latestLocation", () => {
-                const beaconEvent = makeBeaconInfoEvent(aliceId, roomId, { isLive: true });
+                const beaconEvent = makeBeaconInfoEvent(<alice>Id, roomId, { isLive: true });
 
                 const beacon = new Beacon(beaconEvent);
                 const beacons = new Map<BeaconIdentifier, Beacon>();
@@ -270,8 +270,8 @@ describe("MessageContextMenu", () => {
             });
 
             it("allows forwarding a live beacon that has a location", () => {
-                const liveBeaconEvent = makeBeaconInfoEvent(aliceId, roomId, { isLive: true });
+                const liveBeaconEvent = makeBeaconInfoEvent(<alice>Id, roomId, { isLive: true });
-                const beaconLocation = makeBeaconEvent(aliceId, {
+                const beaconLocation = makeBeaconEvent(<alice>Id, {
                     beaconInfoId: liveBeaconEvent.getId(),
                     geoUri: "geo:51,41",
                 });
@@ -286,8 +286,8 @@ describe("MessageContextMenu", () => {
 
             it("opens forward dialog with correct event", () => {
                 const dispatchSpy = jest.spyOn(dispatcher, "dispatch");
-                const liveBeaconEvent = makeBeaconInfoEvent(aliceId, roomId, { isLive: true });
+                const liveBeaconEvent = makeBeaconInfoEvent(<alice>Id, roomId, { isLive: true });
-                const beaconLocation = makeBeaconEvent(aliceId, {
+                const beaconLocation = makeBeaconEvent(<alice>Id, {
                     beaconInfoId: liveBeaconEvent.getId(),
                     geoUri: "geo:51,41",
                 });
@@ -318,7 +318,7 @@ describe("MessageContextMenu", () => {
         });
 
         it("does not allow opening a beacon that does not have a shareable location event", () => {
-            const deadBeaconEvent = makeBeaconInfoEvent("@alice", roomId, { isLive: false });
+            const deadBeaconEvent = makeBeaconInfoEvent("@<alice>", roomId, { isLive: false });
             const beacon = new Beacon(deadBeaconEvent);
             const beacons = new Map<BeaconIdentifier, Beacon>();
             beacons.set(getBeaconInfoIdentifier(deadBeaconEvent), beacon);
@@ -337,8 +337,8 @@ describe("MessageContextMenu", () => {
         });
 
         it("allows opening a beacon that has a shareable location event", () => {
-            const liveBeaconEvent = makeBeaconInfoEvent("@alice", roomId, { isLive: true });
+            const liveBeaconEvent = makeBeaconInfoEvent("@<alice>", roomId, { isLive: true });
-            const beaconLocation = makeBeaconEvent("@alice", {
+            const beaconLocation = makeBeaconEvent("@<alice>", {
                 beaconInfoId: liveBeaconEvent.getId(),
                 geoUri: "geo:51,41",
             });

test/unit-tests/components/views/dialogs/AskInviteAnywayDialog-test.tsx

@@ -28,7 +28,7 @@ describe("AskInviteaAnywayDialog", () => {
                 onInviteAnyways={onInviteAnyways}
                 unknownProfileUsers={[
                     {
-                        userId: "@alice:localhost",
+                        userId: "@<alice>:localhost",
                         errorText: "🤷‍♂️",
                     },
                 ]}

test/unit-tests/components/views/dialogs/CreateRoomDialog-test.tsx

@@ -15,7 +15,7 @@ import { flushPromises, getMockClientWithEventEmitter, mockClientMethodsUser } f
 import SettingsStore from "../../../../../src/settings/SettingsStore";
 
 describe("<CreateRoomDialog />", () => {
-    const userId = "@alice:server.org";
+    const userId = "@<alice>:server.org";
     const mockClient = getMockClientWithEventEmitter({
         ...mockClientMethodsUser(userId),
         getDomain: jest.fn().mockReturnValue("server.org"),

test/unit-tests/components/views/dialogs/DevtoolsDialog-test.tsx

@@ -31,7 +31,7 @@ describe("DevtoolsDialog", () => {
     beforeEach(() => {
         stubClient();
         cli = MatrixClientPeg.safeGet();
-        room = new Room("!id", cli, "@alice:matrix.org");
+        room = new Room("!id", cli, "@<alice>:matrix.org");
 
         jest.spyOn(cli, "getRoom").mockReturnValue(room);
     });

test/unit-tests/components/views/dialogs/ForwardDialog-test.tsx

@@ -46,21 +46,21 @@ Object.defineProperty(HTMLElement.prototype, "offsetParent", {
 
 describe("ForwardDialog", () => {
     const sourceRoom = "!111111111111111111:example.org";
-    const aliceId = "@alice:example.org";
+    const <alice>Id = "@<alice>:example.org";
     const defaultMessage = mkMessage({
         room: sourceRoom,
-        user: aliceId,
+        user: <alice>Id,
         msg: "Hello world!",
         event: true,
     });
     const accountDataEvent = new MatrixEvent({
         type: EventType.Direct,
-        sender: aliceId,
+        sender: <alice>Id,
         content: {},
     });
     const mockClient = getMockClientWithEventEmitter({
-        getUserId: jest.fn().mockReturnValue(aliceId),
+        getUserId: jest.fn().mockReturnValue(<alice>Id),
-        getSafeUserId: jest.fn().mockReturnValue(aliceId),
+        getSafeUserId: jest.fn().mockReturnValue(<alice>Id),
         isGuest: jest.fn().mockReturnValue(false),
         getVisibleRooms: jest.fn().mockReturnValue([]),
         getRoom: jest.fn(),
@@ -68,7 +68,7 @@ describe("ForwardDialog", () => {
         getPushActionsForEvent: jest.fn(),
         mxcUrlToHttp: jest.fn().mockReturnValue(""),
         getProfileInfo: jest.fn().mockResolvedValue({
-            displayname: "Alice",
+            displayname: "<alice>",
         }),
         decryptEventIfNeeded: jest.fn(),
         sendEvent: jest.fn(),
@@ -217,10 +217,10 @@ describe("ForwardDialog", () => {
         const replyMessage = mkEvent({
             type: "m.room.message",
             room: "!111111111111111111:example.org",
-            user: "@alice:example.org",
+            user: "@<alice>:example.org",
             content: {
                 "msgtype": "m.text",
-                "body": "> <@bob:example.org> Hi Alice!\n\nHi Bob!",
+                "body": "> <@bob:example.org> Hi <alice>!\n\nHi Bob!",
                 "m.relates_to": {
                     "m.in_reply_to": {
                         event_id: "$2222222222222222222222222222222222222222222",
@@ -232,7 +232,7 @@ describe("ForwardDialog", () => {
 
         mountForwardDialog(replyMessage);
 
-        expect(screen.queryByText("Hi Alice!", { exact: false })).toBeInTheDocument();
+        expect(screen.queryByText("Hi <alice>!", { exact: false })).toBeInTheDocument();
     });
 
     it("disables buttons for rooms without send permissions", async () => {
@@ -328,7 +328,7 @@ describe("ForwardDialog", () => {
 
         it("forwards beacon location as a pin drop event", async () => {
             const timestamp = 123456;
-            const beaconEvent = makeBeaconEvent("@alice:server.org", { geoUri, timestamp });
+            const beaconEvent = makeBeaconEvent("@<alice>:server.org", { geoUri, timestamp });
             const text = `Location ${geoUri} at ${new Date(timestamp).toISOString()}`;
             const expectedContent = {
                 msgtype: "m.location",

test/unit-tests/components/views/dialogs/InviteDialog-test.tsx

@@ -73,16 +73,16 @@ const expectNoPill = (value: string) => {
 };
 
 const roomId = "!111111111111111111:example.org";
-const aliceId = "@alice:example.org";
+const <alice>Id = "@<alice>:example.org";
-const aliceEmail = "foobar@email.com";
+const <alice>Email = "foobar@email.com";
 const bobId = "@bob:example.org";
 const bobEmail = "bobbob@example.com"; // bob@example.com is already used as an example in the invite dialog
 const carolId = "@carol:example.com";
 const bobbob = "bobbob";
 
-const aliceProfileInfo: IProfileInfo = {
+const <alice>ProfileInfo: IProfileInfo = {
-    user_id: aliceId,
+    user_id: <alice>Id,
-    display_name: "Alice",
+    display_name: "<alice>",
 };
 
 const bobProfileInfo: IProfileInfo = {
@@ -98,7 +98,7 @@ describe("InviteDialog", () => {
         "Error retrieving profile for userId @carol:example.com",
         "Error retrieving profile for userId @localpart:server.tld",
         "Error retrieving profile for userId @localpart:server:tld",
-        "[Invite:Recents] Excluding @alice:example.org from recents",
+        "[Invite:Recents] Excluding @<alice>:example.org from recents",
     );
 
     beforeEach(() => {
@@ -114,7 +114,7 @@ describe("InviteDialog", () => {
             mxcUrlToHttp: jest.fn().mockReturnValue(""),
             isRoomEncrypted: jest.fn().mockReturnValue(false),
             getProfileInfo: jest.fn().mockImplementation(async (userId: string) => {
-                if (userId === aliceId) return aliceProfileInfo;
+                if (userId === <alice>Id) return <alice>ProfileInfo;
                 if (userId === bobId) return bobProfileInfo;
 
                 throw new MatrixError({
@@ -160,12 +160,12 @@ describe("InviteDialog", () => {
                 event: true,
                 room: roomId,
                 mship: KnownMembership.Join,
-                user: aliceId,
+                user: <alice>Id,
-                skey: aliceId,
+                skey: <alice>Id,
             }),
         ]);
         jest.spyOn(DMRoomMap.shared(), "getUniqueRoomsWithIndividuals").mockReturnValue({
-            [aliceId]: room,
+            [<alice>Id]: room,
         });
         mockClient.getRooms.mockReturnValue([room]);
         mockClient.getRoom.mockReturnValue(room);
@@ -228,12 +228,12 @@ describe("InviteDialog", () => {
         async (kind: typeof InviteKind.Dm | typeof InviteKind.Invite) => {
             mockClient.getIdentityServerUrl.mockReturnValue("https://identity-server");
             mockClient.lookupThreePid.mockResolvedValue({
-                address: aliceEmail,
+                address: <alice>Email,
                 medium: "email",
-                mxid: aliceId,
+                mxid: <alice>Id,
             });
             mockClient.getProfileInfo.mockResolvedValue({
-                displayname: "Mrs Alice",
+                displayname: "Mrs <alice>",
                 avatar_url: "mxc://foo/bar",
             });
 
@@ -242,16 +242,16 @@ describe("InviteDialog", () => {
                     kind={kind}
                     roomId={kind === InviteKind.Invite ? roomId : ""}
                     onFinished={jest.fn()}
-                    initialText={aliceEmail}
+                    initialText={<alice>Email}
                 />,
             );
 
-            await screen.findByText("Mrs Alice");
+            await screen.findByText("Mrs <alice>");
             // expect the email and MXID to be visible
-            await screen.findByText(aliceId);
+            await screen.findByText(<alice>Id);
-            await screen.findByText(aliceEmail);
+            await screen.findByText(<alice>Email);
-            expect(mockClient.lookupThreePid).toHaveBeenCalledWith("email", aliceEmail, expect.anything());
+            expect(mockClient.lookupThreePid).toHaveBeenCalledWith("email", <alice>Email, expect.anything());
-            expect(mockClient.getProfileInfo).toHaveBeenCalledWith(aliceId);
+            expect(mockClient.getProfileInfo).toHaveBeenCalledWith(<alice>Id);
         },
     );
 
@@ -280,10 +280,10 @@ describe("InviteDialog", () => {
 
         const input = screen.getByTestId("invite-dialog-input");
         input.focus();
-        await userEvent.paste(`${bobId} ${aliceEmail}`);
+        await userEvent.paste(`${bobId} ${<alice>Email}`);
 
         await screen.findAllByText(bobId);
-        await screen.findByText(aliceEmail);
+        await screen.findByText(<alice>Email);
         expect(input).toHaveValue("");
     });
     it("should support pasting one username that is not a mx id or email", async () => {
@@ -303,8 +303,8 @@ describe("InviteDialog", () => {
     it("should allow to invite multiple emails to a room", async () => {
         render(<InviteDialog kind={InviteKind.Invite} roomId={roomId} onFinished={jest.fn()} />);
 
-        await enterIntoSearchField(aliceEmail);
+        await enterIntoSearchField(<alice>Email);
-        expectPill(aliceEmail);
+        expectPill(<alice>Email);
 
         await enterIntoSearchField(bobEmail);
         expectPill(bobEmail);
@@ -322,8 +322,8 @@ describe("InviteDialog", () => {
         it("should allow to invite more than one email to a DM", async () => {
             render(<InviteDialog kind={InviteKind.Dm} onFinished={jest.fn()} />);
 
-            await enterIntoSearchField(aliceEmail);
+            await enterIntoSearchField(<alice>Email);
-            expectPill(aliceEmail);
+            expectPill(<alice>Email);
 
             await enterIntoSearchField(bobEmail);
             expectPill(bobEmail);
@@ -334,17 +334,17 @@ describe("InviteDialog", () => {
         render(<InviteDialog kind={InviteKind.Dm} onFinished={jest.fn()} />);
 
         // Start with an email → should convert to a pill
-        await enterIntoSearchField(aliceEmail);
+        await enterIntoSearchField(<alice>Email);
         expect(screen.getByText("Invites by email can only be sent one at a time")).toBeInTheDocument();
-        expectPill(aliceEmail);
+        expectPill(<alice>Email);
 
         // Everything else from now on should not convert to a pill
 
         await enterIntoSearchField(bobEmail);
         expectNoPill(bobEmail);
 
-        await enterIntoSearchField(aliceId);
+        await enterIntoSearchField(<alice>Id);
-        expectNoPill(aliceId);
+        expectNoPill(<alice>Id);
 
         await pasteIntoSearchField(bobEmail);
         expectNoPill(bobEmail);
@@ -366,11 +366,11 @@ describe("InviteDialog", () => {
 
     it("should start a DM if the profile is available", async () => {
         render(<InviteDialog kind={InviteKind.Dm} onFinished={jest.fn()} />);
-        await enterIntoSearchField(aliceId);
+        await enterIntoSearchField(<alice>Id);
         await userEvent.click(screen.getByRole("button", { name: "Go" }));
         expect(startDmOnFirstMessage).toHaveBeenCalledWith(mockClient, [
             new DirectoryMember({
-                user_id: aliceId,
+                user_id: <alice>Id,
             }),
         ]);
     });
@@ -393,14 +393,14 @@ describe("InviteDialog", () => {
 
         const input = screen.getByTestId("invite-dialog-input");
         input.focus();
-        await userEvent.keyboard(`${aliceId}`);
+        await userEvent.keyboard(`${<alice>Id}`);
 
-        const btn = await screen.findByText(aliceId, {
+        const btn = await screen.findByText(<alice>Id, {
             selector: ".mx_InviteDialog_tile_nameStack_userId .mx_InviteDialog_tile--room_highlight",
         });
         fireEvent.click(btn);
 
-        const tile = await screen.findByText(aliceId, { selector: ".mx_InviteDialog_userTile_name" });
+        const tile = await screen.findByText(<alice>Id, { selector: ".mx_InviteDialog_userTile_name" });
         expect(tile).toBeInTheDocument();
     });
 

test/unit-tests/components/views/dialogs/ManageRestrictedJoinRuleDialog-test.tsx

@@ -16,7 +16,7 @@ import SpaceStore from "../../../../../src/stores/spaces/SpaceStore";
 import DMRoomMap from "../../../../../src/utils/DMRoomMap";
 
 describe("<ManageRestrictedJoinRuleDialog />", () => {
-    const userId = "@alice:server.org";
+    const userId = "@<alice>:server.org";
     const mockClient = getMockClientWithEventEmitter({
         ...mockClientMethodsUser(userId),
         getRoom: jest.fn(),

test/unit-tests/components/views/dialogs/RoomSettingsDialog-test.tsx

@@ -26,7 +26,7 @@ import { UIFeature } from "../../../../../src/settings/UIFeature";
 import DMRoomMap from "../../../../../src/utils/DMRoomMap";
 
 describe("<RoomSettingsDialog />", () => {
-    const userId = "@alice:server.org";
+    const userId = "@<alice>:server.org";
     const mockClient = getMockClientWithEventEmitter({
         ...mockClientMethodsUser(userId),
         isRoomEncrypted: jest.fn().mockReturnValue(false),

test/unit-tests/components/views/dialogs/ShareDialog-test.tsx

@@ -26,7 +26,7 @@ describe("ShareDialog", () => {
 
     beforeEach(async () => {
         client = stubClient();
-        room = new Room("!1:example.org", client, "@alice:example.org");
+        room = new Room("!1:example.org", client, "@<alice>:example.org");
         jest.spyOn(StringsModule, "copyPlaintext").mockImplementation(copyTextFunc);
     });
 
@@ -40,14 +40,14 @@ describe("ShareDialog", () => {
     }
 
     const getUrl = () => new URL("https://matrix.org/");
-    const getRoomMember = () => new RoomMember(room.roomId, "@alice:example.org");
+    const getRoomMember = () => new RoomMember(room.roomId, "@<alice>:example.org");
 
     test.each([
         { name: "an URL", title: "Share Link", url: "https://matrix.org/", getTarget: getUrl },
         {
             name: "a room member",
             title: "Share User",
-            url: "https://matrix.to/#/@alice:example.org",
+            url: "https://matrix.to/#/@<alice>:example.org",
             getTarget: getRoomMember,
         },
     ])("should render a share dialog for $name", async ({ title, url, getTarget }) => {

test/unit-tests/components/views/dialogs/SpotlightDialog-test.tsx

@@ -140,7 +140,7 @@ describe("Spotlight Dialog", () => {
     };
 
     const testDMRoomId = "!testDM:example.com";
-    const testDMUserId = "@alice:matrix.org";
+    const testDMUserId = "@<alice>:matrix.org";
 
     let testRoom: Room;
     let testDM: Room;
@@ -164,7 +164,7 @@ describe("Spotlight Dialog", () => {
         } as unknown as DMRoomMap);
 
         testDM = mkRoom(mockedClient, testDMRoomId);
-        testDM.name = "Chat with Alice";
+        testDM.name = "Chat with <alice>";
         mocked(testDM.getMyMembership).mockReturnValue(KnownMembership.Join);
 
         mocked(DMRoomMap.shared().getUserIdForRoomId).mockImplementation((roomId: string) => {
@@ -416,7 +416,7 @@ describe("Spotlight Dialog", () => {
     it("show non-matching query members with DMs if they are present in the server search results", async () => {
         mocked(mockedClient.searchUserDirectory).mockResolvedValue({
             results: [
-                { user_id: testDMUserId, display_name: "Alice Wonder", avatar_url: "mxc://1/avatar" },
+                { user_id: testDMUserId, display_name: "<alice> Wonder", avatar_url: "mxc://1/avatar" },
                 { user_id: "@bob:matrix.org", display_name: "Bob Wonder", avatar_url: "mxc://2/avatar" },
             ],
             limited: false,

test/unit-tests/components/views/dialogs/UntrustedDeviceDialog-test.tsx

@@ -20,8 +20,8 @@ describe("<UntrustedDeviceDialog />", () => {
 
     beforeEach(() => {
         client = stubClient();
-        user = User.createUser("@alice:example.org", client);
+        user = User.createUser("@<alice>:example.org", client);
-        user.setDisplayName("Alice");
+        user.setDisplayName("<alice>");
         device = new Device({ deviceId: "device_id", userId: user.userId, algorithms: [], keys: new Map() });
     });
 

test/unit-tests/components/views/dialogs/UserSettingsDialog-test.tsx

@@ -50,7 +50,7 @@ jest.mock("../../../../../src/settings/SettingsStore", () => ({
 }));
 
 describe("<UserSettingsDialog />", () => {
-    const userId = "@alice:server.org";
+    const userId = "@<alice>:server.org";
     const mockSettingsStore = mocked(SettingsStore);
     let mockClient!: MockedObject<MatrixClient>;
 

test/unit-tests/components/views/dialogs/__snapshots__/ShareDialog-test.tsx.snap

@@ -607,7 +607,7 @@ exports[`ShareDialog should render a share dialog for a room member 1`] = `
           </div>
         </div>
         <span>
-          https://matrix.to/#/@alice:example.org
+          https://matrix.to/#/@<alice>:example.org
         </span>
       </div>
       <button
@@ -635,7 +635,7 @@ exports[`ShareDialog should render a share dialog for a room member 1`] = `
         class="mx_ShareDialog_social"
       >
         <a
-          href="https://www.facebook.com/sharer/sharer.php?u=https://matrix.to/#/@alice:example.org"
+          href="https://www.facebook.com/sharer/sharer.php?u=https://matrix.to/#/@<alice>:example.org"
           rel="noreferrer noopener"
           target="_blank"
           title="Facebook"
@@ -646,7 +646,7 @@ exports[`ShareDialog should render a share dialog for a room member 1`] = `
           />
         </a>
         <a
-          href="https://twitter.com/home?status=https://matrix.to/#/@alice:example.org"
+          href="https://twitter.com/home?status=https://matrix.to/#/@<alice>:example.org"
           rel="noreferrer noopener"
           target="_blank"
           title="Twitter"
@@ -657,7 +657,7 @@ exports[`ShareDialog should render a share dialog for a room member 1`] = `
           />
         </a>
         <a
-          href="https://www.linkedin.com/shareArticle?mini=true&url=https://matrix.to/#/@alice:example.org"
+          href="https://www.linkedin.com/shareArticle?mini=true&url=https://matrix.to/#/@<alice>:example.org"
           rel="noreferrer noopener"
           target="_blank"
           title="LinkedIn"
@@ -668,7 +668,7 @@ exports[`ShareDialog should render a share dialog for a room member 1`] = `
           />
         </a>
         <a
-          href="https://www.reddit.com/submit?url=https://matrix.to/#/@alice:example.org"
+          href="https://www.reddit.com/submit?url=https://matrix.to/#/@<alice>:example.org"
           rel="noreferrer noopener"
           target="_blank"
           title="Reddit"
@@ -679,7 +679,7 @@ exports[`ShareDialog should render a share dialog for a room member 1`] = `
           />
         </a>
         <a
-          href="mailto:?body=https://matrix.to/#/@alice:example.org"
+          href="mailto:?body=https://matrix.to/#/@<alice>:example.org"
           rel="noreferrer noopener"
           target="_blank"
           title="email"

test/unit-tests/components/views/dialogs/__snapshots__/UntrustedDeviceDialog-test.tsx.snap

@@ -32,7 +32,7 @@ exports[`<UntrustedDeviceDialog /> should display the dialog for the device of a
       id="mx_Dialog_content"
     >
       <p>
-        Alice (@alice:example.org) signed in to a new session without verifying it:
+        <alice> (@<alice>:example.org) signed in to a new session without verifying it:
       </p>
       <p>
          (device_id)

test/unit-tests/components/views/dialogs/devtools/Event-test.tsx

@@ -27,7 +27,7 @@ describe("<EventEditor />", () => {
             <MatrixClientContext.Provider value={cli}>
                 <DevtoolsContext.Provider
                     value={{
-                        room: new Room("!roomId", cli, "@alice:example.com", {
+                        room: new Room("!roomId", cli, "@<alice>:example.com", {
                             pendingEventOrdering: PendingEventOrdering.Detached,
                         }),
                     }}
@@ -46,7 +46,7 @@ describe("<EventEditor />", () => {
                 <MatrixClientContext.Provider value={cli}>
                     <DevtoolsContext.Provider
                         value={{
-                            room: new Room("!roomId", cli, "@alice:example.com", {
+                            room: new Room("!roomId", cli, "@<alice>:example.com", {
                                 pendingEventOrdering: PendingEventOrdering.Detached,
                             }),
                             threadRootId: "$this_is_a_thread_id",

test/unit-tests/components/views/dialogs/devtools/RoomNotifications-test.tsx

@@ -27,7 +27,7 @@ describe("<RoomNotifications />", () => {
             <MatrixClientContext.Provider value={cli}>
                 <DevtoolsContext.Provider
                     value={{
-                        room: new Room("!roomId", cli, "@alice:example.com", {
+                        room: new Room("!roomId", cli, "@<alice>:example.com", {
                             pendingEventOrdering: PendingEventOrdering.Detached,
                         }),
                     }}

test/unit-tests/components/views/dialogs/spotlight/RoomResultContextMenus-test.tsx

@@ -36,7 +36,7 @@ describe("RoomResultContextMenus", () => {
 
     beforeEach(() => {
         client = stubClient();
-        room = new Room("!1:example.org", client, "@alice:example.org", {
+        room = new Room("!1:example.org", client, "@<alice>:example.org", {
             pendingEventOrdering: PendingEventOrdering.Detached,
         });
     });

test/unit-tests/components/views/elements/RoomTopic-test.tsx

@@ -32,11 +32,11 @@ describe("<RoomTopic/>", () => {
      */
     function createRoom(topic: string) {
         stubClient();
-        const room = new Room("!pMBteVpcoJRdCJxDmn:matrix.org", MatrixClientPeg.safeGet(), "@alice:example.org");
+        const room = new Room("!pMBteVpcoJRdCJxDmn:matrix.org", MatrixClientPeg.safeGet(), "@<alice>:example.org");
         const topicEvent = mkEvent({
             type: "m.room.topic",
             room: "!pMBteVpcoJRdCJxDmn:matrix.org",
-            user: "@alice:example.org",
+            user: "@<alice>:example.org",
             content: { topic },
             ts: 123,
             event: true,

test/unit-tests/components/views/messages/CallEvent-test.tsx

@@ -36,7 +36,7 @@ const CallEvent = wrapInMatrixClientContext(UnwrappedCallEvent);
 describe("CallEvent", () => {
     let client: Mocked<MatrixClient>;
     let room: Room;
-    let alice: RoomMember;
+    let <alice>: RoomMember;
     let bob: RoomMember;
     let call: MockedCall;
     let widget: Widget;
@@ -51,16 +51,16 @@ describe("CallEvent", () => {
 
         stubClient();
         client = mocked(MatrixClientPeg.safeGet());
-        client.getUserId.mockReturnValue("@alice:example.org");
+        client.getUserId.mockReturnValue("@<alice>:example.org");
 
-        room = new Room("!1:example.org", client, "@alice:example.org", {
+        room = new Room("!1:example.org", client, "@<alice>:example.org", {
             pendingEventOrdering: PendingEventOrdering.Detached,
         });
 
-        alice = mkRoomMember(room.roomId, "@alice:example.org");
+        <alice> = mkRoomMember(room.roomId, "@<alice>:example.org");
         bob = mkRoomMember(room.roomId, "@bob:example.org");
         jest.spyOn(room, "getMember").mockImplementation(
-            (userId) => [alice, bob].find((member) => member.userId === userId) ?? null,
+            (userId) => [<alice>, bob].find((member) => member.userId === userId) ?? null,
         );
 
         client.getRoom.mockImplementation((roomId) => (roomId === room.roomId ? room : null));
@@ -119,19 +119,19 @@ describe("CallEvent", () => {
         jest.advanceTimersByTime(90000);
         renderEvent();
 
-        screen.getByText("@alice:example.org started a video call");
+        screen.getByText("@<alice>:example.org started a video call");
         expect(screen.getByRole("button", { name: "Join" })).toHaveAttribute("aria-disabled", "true");
     });
 
     it("shows call details and connection controls if the call is loaded", async () => {
         jest.advanceTimersByTime(90000);
         call.participants = new Map([
-            [alice, new Set(["a"])],
+            [<alice>, new Set(["a"])],
             [bob, new Set(["b"])],
         ]);
         renderEvent();
 
-        screen.getByText("@alice:example.org started a video call");
+        screen.getByText("@<alice>:example.org started a video call");
         screen.getByLabelText("2 people joined");
 
         // Test that the join button works

test/unit-tests/components/views/messages/MBeaconBody-test.tsx

@@ -42,7 +42,7 @@ describe("<MBeaconBody />", () => {
     // stable date for snapshots
     jest.spyOn(global.Date, "now").mockReturnValue(now);
     const roomId = "!room:server";
-    const aliceId = "@alice:server";
+    const <alice>Id = "@<alice>:server";
 
     const mapOptions = { container: {} as unknown as HTMLElement, style: "" };
     const mockMap = new maplibregl.Map(mapOptions);
@@ -52,12 +52,12 @@ describe("<MBeaconBody />", () => {
         getClientWellKnown: jest.fn().mockReturnValue({
             [TILE_SERVER_WK_KEY.name]: { map_style_url: "maps.com" },
         }),
-        getUserId: jest.fn().mockReturnValue(aliceId),
+        getUserId: jest.fn().mockReturnValue(<alice>Id),
         getRoom: jest.fn(),
         redactEvent: jest.fn(),
     });
 
-    const defaultEvent = makeBeaconInfoEvent(aliceId, roomId, { isLive: true }, "$alice-room1-1");
+    const defaultEvent = makeBeaconInfoEvent(<alice>Id, roomId, { isLive: true }, "$<alice>-room1-1");
 
     const defaultProps: ComponentProps<typeof MBeaconBody> = {
         mxEvent: defaultEvent,
@@ -88,7 +88,7 @@ describe("<MBeaconBody />", () => {
 
     const testBeaconStatuses = () => {
         it("renders stopped beacon UI for an explicitly stopped beacon", () => {
-            const beaconInfoEvent = makeBeaconInfoEvent(aliceId, roomId, { isLive: false }, "$alice-room1-1");
+            const beaconInfoEvent = makeBeaconInfoEvent(<alice>Id, roomId, { isLive: false }, "$<alice>-room1-1");
             makeRoomWithStateEvents([beaconInfoEvent], { roomId, mockClient });
             const component = getComponent({ mxEvent: beaconInfoEvent });
             expect(component.container).toHaveTextContent("Live location ended");
@@ -96,11 +96,11 @@ describe("<MBeaconBody />", () => {
 
         it("renders stopped beacon UI for an expired beacon", () => {
             const beaconInfoEvent = makeBeaconInfoEvent(
-                aliceId,
+                <alice>Id,
                 roomId,
                 // puts this beacons live period in the past
                 { isLive: true, timestamp: now - 600000, timeout: 500 },
-                "$alice-room1-1",
+                "$<alice>-room1-1",
             );
             makeRoomWithStateEvents([beaconInfoEvent], { roomId, mockClient });
             const component = getComponent({ mxEvent: beaconInfoEvent });
@@ -109,11 +109,11 @@ describe("<MBeaconBody />", () => {
 
         it("renders loading beacon UI for a beacon that has not started yet", () => {
             const beaconInfoEvent = makeBeaconInfoEvent(
-                aliceId,
+                <alice>Id,
                 roomId,
                 // puts this beacons start timestamp in the future
                 { isLive: true, timestamp: now + 60000, timeout: 500 },
-                "$alice-room1-1",
+                "$<alice>-room1-1",
             );
             makeRoomWithStateEvents([beaconInfoEvent], { roomId, mockClient });
             const component = getComponent({ mxEvent: beaconInfoEvent });
@@ -122,11 +122,11 @@ describe("<MBeaconBody />", () => {
 
         it("does not open maximised map when on click when beacon is stopped", () => {
             const beaconInfoEvent = makeBeaconInfoEvent(
-                aliceId,
+                <alice>Id,
                 roomId,
                 // puts this beacons live period in the past
                 { isLive: true, timestamp: now - 600000, timeout: 500 },
-                "$alice-room1-1",
+                "$<alice>-room1-1",
             );
             makeRoomWithStateEvents([beaconInfoEvent], { roomId, mockClient });
             const component = getComponent({ mxEvent: beaconInfoEvent });
@@ -136,42 +136,42 @@ describe("<MBeaconBody />", () => {
         });
 
         it("renders stopped UI when a beacon event is not the latest beacon for a user", () => {
-            const aliceBeaconInfo1 = makeBeaconInfoEvent(
+            const <alice>BeaconInfo1 = makeBeaconInfoEvent(
-                aliceId,
+                <alice>Id,
                 roomId,
                 // this one is a little older
                 { isLive: true, timestamp: now - 500 },
-                "$alice-room1-1",
+                "$<alice>-room1-1",
             );
-            aliceBeaconInfo1.event.origin_server_ts = now - 500;
+            <alice>BeaconInfo1.event.origin_server_ts = now - 500;
-            const aliceBeaconInfo2 = makeBeaconInfoEvent(aliceId, roomId, { isLive: true }, "$alice-room1-2");
+            const <alice>BeaconInfo2 = makeBeaconInfoEvent(<alice>Id, roomId, { isLive: true }, "$<alice>-room1-2");
 
-            makeRoomWithStateEvents([aliceBeaconInfo1, aliceBeaconInfo2], { roomId, mockClient });
+            makeRoomWithStateEvents([<alice>BeaconInfo1, <alice>BeaconInfo2], { roomId, mockClient });
 
-            const component = getComponent({ mxEvent: aliceBeaconInfo1 });
+            const component = getComponent({ mxEvent: <alice>BeaconInfo1 });
             // beacon1 has been superceded by beacon2
             expect(component.container).toHaveTextContent("Live location ended");
         });
 
         it("renders stopped UI when a beacon event is replaced", () => {
-            const aliceBeaconInfo1 = makeBeaconInfoEvent(
+            const <alice>BeaconInfo1 = makeBeaconInfoEvent(
-                aliceId,
+                <alice>Id,
                 roomId,
                 // this one is a little older
                 { isLive: true, timestamp: now - 500 },
-                "$alice-room1-1",
+                "$<alice>-room1-1",
             );
-            aliceBeaconInfo1.event.origin_server_ts = now - 500;
+            <alice>BeaconInfo1.event.origin_server_ts = now - 500;
-            const aliceBeaconInfo2 = makeBeaconInfoEvent(aliceId, roomId, { isLive: true }, "$alice-room1-2");
+            const <alice>BeaconInfo2 = makeBeaconInfoEvent(<alice>Id, roomId, { isLive: true }, "$<alice>-room1-2");
 
-            const room = makeRoomWithStateEvents([aliceBeaconInfo1], { roomId, mockClient });
+            const room = makeRoomWithStateEvents([<alice>BeaconInfo1], { roomId, mockClient });
-            const component = getComponent({ mxEvent: aliceBeaconInfo1 });
+            const component = getComponent({ mxEvent: <alice>BeaconInfo1 });
 
-            const beaconInstance = room.currentState.beacons.get(getBeaconInfoIdentifier(aliceBeaconInfo1))!;
+            const beaconInstance = room.currentState.beacons.get(getBeaconInfoIdentifier(<alice>BeaconInfo1))!;
-            // update alice's beacon with a new edition
+            // update <alice>'s beacon with a new edition
             // beacon instance emits
             act(() => {
-                beaconInstance.update(aliceBeaconInfo2);
+                beaconInstance.update(<alice>BeaconInfo2);
             });
 
             // beacon1 has been superceded by beacon2
@@ -183,11 +183,11 @@ describe("<MBeaconBody />", () => {
 
     describe("on liveness change", () => {
         it("renders stopped UI when a beacon stops being live", () => {
-            const aliceBeaconInfo = makeBeaconInfoEvent(aliceId, roomId, { isLive: true }, "$alice-room1-1");
+            const <alice>BeaconInfo = makeBeaconInfoEvent(<alice>Id, roomId, { isLive: true }, "$<alice>-room1-1");
 
-            const room = makeRoomWithStateEvents([aliceBeaconInfo], { roomId, mockClient });
+            const room = makeRoomWithStateEvents([<alice>BeaconInfo], { roomId, mockClient });
-            const beaconInstance = room.currentState.beacons.get(getBeaconInfoIdentifier(aliceBeaconInfo))!;
+            const beaconInstance = room.currentState.beacons.get(getBeaconInfoIdentifier(<alice>BeaconInfo))!;
-            const component = getComponent({ mxEvent: aliceBeaconInfo });
+            const component = getComponent({ mxEvent: <alice>BeaconInfo });
 
             act(() => {
                 // @ts-ignore cheat to force beacon to not live
@@ -201,29 +201,29 @@ describe("<MBeaconBody />", () => {
     });
 
     describe("latestLocationState", () => {
-        const aliceBeaconInfo = makeBeaconInfoEvent(aliceId, roomId, { isLive: true }, "$alice-room1-1");
+        const <alice>BeaconInfo = makeBeaconInfoEvent(<alice>Id, roomId, { isLive: true }, "$<alice>-room1-1");
 
-        const location1 = makeBeaconEvent(aliceId, {
+        const location1 = makeBeaconEvent(<alice>Id, {
-            beaconInfoId: aliceBeaconInfo.getId(),
+            beaconInfoId: <alice>BeaconInfo.getId(),
             geoUri: "geo:51,41",
             timestamp: now + 1,
         });
-        const location2 = makeBeaconEvent(aliceId, {
+        const location2 = makeBeaconEvent(<alice>Id, {
-            beaconInfoId: aliceBeaconInfo.getId(),
+            beaconInfoId: <alice>BeaconInfo.getId(),
             geoUri: "geo:52,42",
             timestamp: now + 10000,
         });
 
         it("renders a live beacon without a location correctly", () => {
-            makeRoomWithStateEvents([aliceBeaconInfo], { roomId, mockClient });
+            makeRoomWithStateEvents([<alice>BeaconInfo], { roomId, mockClient });
-            const component = getComponent({ mxEvent: aliceBeaconInfo });
+            const component = getComponent({ mxEvent: <alice>BeaconInfo });
 
             expect(component.container).toHaveTextContent("Loading live location…");
         });
 
         it("does nothing on click when a beacon has no location", () => {
-            makeRoomWithStateEvents([aliceBeaconInfo], { roomId, mockClient });
+            makeRoomWithStateEvents([<alice>BeaconInfo], { roomId, mockClient });
-            const component = getComponent({ mxEvent: aliceBeaconInfo });
+            const component = getComponent({ mxEvent: <alice>BeaconInfo });
 
             fireEvent.click(component.container.querySelector(".mx_MBeaconBody_map")!);
 
@@ -231,19 +231,19 @@ describe("<MBeaconBody />", () => {
         });
 
         it("renders a live beacon with a location correctly", () => {
-            const room = makeRoomWithStateEvents([aliceBeaconInfo], { roomId, mockClient });
+            const room = makeRoomWithStateEvents([<alice>BeaconInfo], { roomId, mockClient });
-            const beaconInstance = room.currentState.beacons.get(getBeaconInfoIdentifier(aliceBeaconInfo))!;
+            const beaconInstance = room.currentState.beacons.get(getBeaconInfoIdentifier(<alice>BeaconInfo))!;
             beaconInstance.addLocations([location1]);
-            const component = getComponent({ mxEvent: aliceBeaconInfo });
+            const component = getComponent({ mxEvent: <alice>BeaconInfo });
 
             expect(component.container.querySelector(".maplibregl-canvas-container")).toBeDefined();
         });
 
         it("opens maximised map view on click when beacon has a live location", () => {
-            const room = makeRoomWithStateEvents([aliceBeaconInfo], { roomId, mockClient });
+            const room = makeRoomWithStateEvents([<alice>BeaconInfo], { roomId, mockClient });
-            const beaconInstance = room.currentState.beacons.get(getBeaconInfoIdentifier(aliceBeaconInfo))!;
+            const beaconInstance = room.currentState.beacons.get(getBeaconInfoIdentifier(<alice>BeaconInfo))!;
             beaconInstance.addLocations([location1]);
-            const component = getComponent({ mxEvent: aliceBeaconInfo });
+            const component = getComponent({ mxEvent: <alice>BeaconInfo });
 
             fireEvent.click(component.container.querySelector(".mx_Map")!);
 
@@ -252,10 +252,10 @@ describe("<MBeaconBody />", () => {
         });
 
         it("updates latest location", () => {
-            const room = makeRoomWithStateEvents([aliceBeaconInfo], { roomId, mockClient });
+            const room = makeRoomWithStateEvents([<alice>BeaconInfo], { roomId, mockClient });
-            getComponent({ mxEvent: aliceBeaconInfo });
+            getComponent({ mxEvent: <alice>BeaconInfo });
 
-            const beaconInstance = room.currentState.beacons.get(getBeaconInfoIdentifier(aliceBeaconInfo))!;
+            const beaconInstance = room.currentState.beacons.get(getBeaconInfoIdentifier(<alice>BeaconInfo))!;
             act(() => {
                 beaconInstance.addLocations([location1]);
             });
@@ -278,16 +278,16 @@ describe("<MBeaconBody />", () => {
             location1: MatrixEvent;
             location2: MatrixEvent;
         } => {
-            const beaconInfoEvent = makeBeaconInfoEvent(aliceId, roomId, { isLive: true }, "$alice-room1-1");
+            const beaconInfoEvent = makeBeaconInfoEvent(<alice>Id, roomId, { isLive: true }, "$<alice>-room1-1");
 
             const location1 = makeBeaconEvent(
-                aliceId,
+                <alice>Id,
                 { beaconInfoId: beaconInfoEvent.getId(), geoUri: "geo:51,41", timestamp: now + 1 },
                 roomId,
             );
             location1.event.event_id = "1";
             const location2 = makeBeaconEvent(
-                aliceId,
+                <alice>Id,
                 { beaconInfoId: beaconInfoEvent.getId(), geoUri: "geo:52,42", timestamp: now + 10000 },
                 roomId,
             );
@@ -397,8 +397,8 @@ describe("<MBeaconBody />", () => {
         });
 
         it("renders maps unavailable error for a live beacon with location", () => {
-            const beaconInfoEvent = makeBeaconInfoEvent(aliceId, roomId, { isLive: true }, "$alice-room1-1");
+            const beaconInfoEvent = makeBeaconInfoEvent(<alice>Id, roomId, { isLive: true }, "$<alice>-room1-1");
-            const location1 = makeBeaconEvent(aliceId, {
+            const location1 = makeBeaconEvent(<alice>Id, {
                 beaconInfoId: beaconInfoEvent.getId(),
                 geoUri: "geo:51,41",
                 timestamp: now + 1,

test/unit-tests/components/views/messages/MPollBody-test.tsx

@@ -123,7 +123,7 @@ describe("MPollBody", () => {
 
     it("hides scores if I have not voted", async () => {
         const votes = [
-            responseEvent("@alice:example.com", "pizza"),
+            responseEvent("@<alice>:example.com", "pizza"),
             responseEvent("@bellc:example.com", "pizza"),
             responseEvent("@catrd:example.com", "poutine"),
             responseEvent("@dune2:example.com", "wings"),
@@ -137,7 +137,7 @@ describe("MPollBody", () => {
     });
 
     it("hides a single vote if I have not voted", async () => {
-        const votes = [responseEvent("@alice:example.com", "pizza")];
+        const votes = [responseEvent("@<alice>:example.com", "pizza")];
         const renderResult = await newMPollBody(votes);
         expect(votesCount(renderResult, "pizza")).toBe("");
         expect(votesCount(renderResult, "poutine")).toBe("");
@@ -381,7 +381,7 @@ describe("MPollBody", () => {
     it("hides scores if I voted but the poll is undisclosed", async () => {
         const votes = [
             responseEvent("@me:example.com", "pizza"),
-            responseEvent("@alice:example.com", "pizza"),
+            responseEvent("@<alice>:example.com", "pizza"),
             responseEvent("@bellc:example.com", "pizza"),
             responseEvent("@catrd:example.com", "poutine"),
             responseEvent("@dune2:example.com", "wings"),
@@ -397,7 +397,7 @@ describe("MPollBody", () => {
     it("highlights my vote if the poll is undisclosed", async () => {
         const votes = [
             responseEvent("@me:example.com", "pizza"),
-            responseEvent("@alice:example.com", "poutine"),
+            responseEvent("@<alice>:example.com", "poutine"),
             responseEvent("@bellc:example.com", "poutine"),
             responseEvent("@catrd:example.com", "poutine"),
             responseEvent("@dune2:example.com", "wings"),
@@ -414,7 +414,7 @@ describe("MPollBody", () => {
     it("shows scores if the poll is undisclosed but ended", async () => {
         const votes = [
             responseEvent("@me:example.com", "pizza"),
-            responseEvent("@alice:example.com", "pizza"),
+            responseEvent("@<alice>:example.com", "pizza"),
             responseEvent("@bellc:example.com", "pizza"),
             responseEvent("@catrd:example.com", "poutine"),
             responseEvent("@dune2:example.com", "wings"),
@@ -990,7 +990,7 @@ function newPollStart(answers?: PollAnswer[], question?: string, disclosed = tru
 }
 
 function responseEvent(
-    sender = "@alice:example.com",
+    sender = "@<alice>:example.com",
     answers: string | Array<string> = "italian",
     ts = 0,
 ): MatrixEvent {

test/unit-tests/components/views/messages/MPollEndBody-test.tsx

@@ -27,7 +27,7 @@ import {
 } from "../../../../test-utils";
 
 describe("<MPollEndBody />", () => {
-    const userId = "@alice:domain.org";
+    const userId = "@<alice>:domain.org";
     const roomId = "!room:domain.org";
     const mockClient = getMockClientWithEventEmitter({
         ...mockClientMethodsUser(userId),
@@ -188,7 +188,7 @@ describe("<MPollEndBody />", () => {
             await flushPromises();
 
             // default fallback text used
-            expect(getByText("@alice:domain.org has ended a poll")).toBeTruthy();
+            expect(getByText("@<alice>:domain.org has ended a poll")).toBeTruthy();
         });
     });
 });

test/unit-tests/components/views/messages/MessageActionBar-test.tsx

@@ -40,7 +40,7 @@ import { ScopedRoomContextProvider } from "../../../../../src/contexts/ScopedRoo
 jest.mock("../../../../../src/dispatcher/dispatcher");
 
 describe("<MessageActionBar />", () => {
-    const userId = "@alice:server.org";
+    const userId = "@<alice>:server.org";
     const roomId = "!room:server.org";
 
     const client = getMockClientWithEventEmitter({
@@ -52,7 +52,7 @@ describe("<MessageActionBar />", () => {
     });
     const room = new Room(roomId, client, userId);
 
-    const alicesMessageEvent = new MatrixEvent({
+    const <alice>sMessageEvent = new MatrixEvent({
         type: EventType.RoomMessage,
         sender: userId,
         room_id: roomId,
@@ -60,7 +60,7 @@ describe("<MessageActionBar />", () => {
             msgtype: MsgType.Text,
             body: "Hello",
         },
-        event_id: "$alices_message",
+        event_id: "$<alice>s_message",
     });
 
     const bobsMessageEvent = new MatrixEvent({
@@ -106,7 +106,7 @@ describe("<MessageActionBar />", () => {
         getTile: jest.fn(),
         getReplyChain: jest.fn(),
         toggleThreadExpanded: jest.fn(),
-        mxEvent: alicesMessageEvent,
+        mxEvent: <alice>sMessageEvent,
         permalinkCreator: new RoomPermalinkCreator(room),
     };
     const defaultRoomContext = {
@@ -125,7 +125,7 @@ describe("<MessageActionBar />", () => {
 
     beforeEach(() => {
         jest.clearAllMocks();
-        alicesMessageEvent.setStatus(EventStatus.SENT);
+        <alice>sMessageEvent.setStatus(EventStatus.SENT);
         jest.spyOn(SettingsStore, "getValue").mockReturnValue(false);
         jest.spyOn(SettingsStore, "setValue").mockResolvedValue(undefined);
     });
@@ -136,8 +136,8 @@ describe("<MessageActionBar />", () => {
     });
 
     it("kills event listeners on unmount", () => {
-        const offSpy = jest.spyOn(alicesMessageEvent, "off").mockClear();
+        const offSpy = jest.spyOn(<alice>sMessageEvent, "off").mockClear();
-        const wrapper = getComponent({ mxEvent: alicesMessageEvent });
+        const wrapper = getComponent({ mxEvent: <alice>sMessageEvent });
 
         act(() => {
             wrapper.unmount();
@@ -152,7 +152,7 @@ describe("<MessageActionBar />", () => {
 
     describe("decryption", () => {
         it("decrypts event if needed", () => {
-            getComponent({ mxEvent: alicesMessageEvent });
+            getComponent({ mxEvent: <alice>sMessageEvent });
             expect(client.decryptEventIfNeeded).toHaveBeenCalled();
         });
 
@@ -171,8 +171,8 @@ describe("<MessageActionBar />", () => {
 
             act(() => {
                 // ''decrypt'' the event
-                decryptingEvent.event.type = alicesMessageEvent.getType();
+                decryptingEvent.event.type = <alice>sMessageEvent.getType();
-                decryptingEvent.event.content = alicesMessageEvent.getContent();
+                decryptingEvent.event.content = <alice>sMessageEvent.getContent();
                 decryptingEvent.emit(MatrixEventEvent.Decrypted, decryptingEvent);
             });
 
@@ -183,14 +183,14 @@ describe("<MessageActionBar />", () => {
 
     describe("status", () => {
         it("updates component when event status changes", () => {
-            alicesMessageEvent.setStatus(EventStatus.QUEUED);
+            <alice>sMessageEvent.setStatus(EventStatus.QUEUED);
-            const { queryByLabelText } = getComponent({ mxEvent: alicesMessageEvent });
+            const { queryByLabelText } = getComponent({ mxEvent: <alice>sMessageEvent });
 
             // pending event status, cancel action available
             expect(queryByLabelText("Delete")).toBeTruthy();
 
             act(() => {
-                alicesMessageEvent.setStatus(EventStatus.SENT);
+                <alice>sMessageEvent.setStatus(EventStatus.SENT);
             });
 
             // event is sent, no longer cancelable
@@ -235,12 +235,12 @@ describe("<MessageActionBar />", () => {
 
     describe("options button", () => {
         it("renders options menu", () => {
-            const { queryByLabelText } = getComponent({ mxEvent: alicesMessageEvent });
+            const { queryByLabelText } = getComponent({ mxEvent: <alice>sMessageEvent });
             expect(queryByLabelText("Options")).toBeTruthy();
         });
 
         it("opens message context menu on click", () => {
-            const { getByTestId, queryByLabelText } = getComponent({ mxEvent: alicesMessageEvent });
+            const { getByTestId, queryByLabelText } = getComponent({ mxEvent: <alice>sMessageEvent });
             fireEvent.click(queryByLabelText("Options")!);
             expect(getByTestId("mx_MessageContextMenu")).toBeTruthy();
         });
@@ -248,7 +248,7 @@ describe("<MessageActionBar />", () => {
 
     describe("reply button", () => {
         it("renders reply button on own actionable event", () => {
-            const { queryByLabelText } = getComponent({ mxEvent: alicesMessageEvent });
+            const { queryByLabelText } = getComponent({ mxEvent: <alice>sMessageEvent });
             expect(queryByLabelText("Reply")).toBeTruthy();
         });
 
@@ -270,13 +270,13 @@ describe("<MessageActionBar />", () => {
         });
 
         it("dispatches reply event on click", () => {
-            const { queryByLabelText } = getComponent({ mxEvent: alicesMessageEvent });
+            const { queryByLabelText } = getComponent({ mxEvent: <alice>sMessageEvent });
 
             fireEvent.click(queryByLabelText("Reply")!);
 
             expect(dispatcher.dispatch).toHaveBeenCalledWith({
                 action: "reply_to_event",
-                event: alicesMessageEvent,
+                event: <alice>sMessageEvent,
                 context: TimelineRenderingType.Room,
             });
         });
@@ -284,7 +284,7 @@ describe("<MessageActionBar />", () => {
 
     describe("react button", () => {
         it("renders react button on own actionable event", () => {
-            const { queryByLabelText } = getComponent({ mxEvent: alicesMessageEvent });
+            const { queryByLabelText } = getComponent({ mxEvent: <alice>sMessageEvent });
             expect(queryByLabelText("React")).toBeTruthy();
         });
 
@@ -306,7 +306,7 @@ describe("<MessageActionBar />", () => {
         });
 
         it("opens reaction picker on click", () => {
-            const { queryByLabelText, getByTestId } = getComponent({ mxEvent: alicesMessageEvent });
+            const { queryByLabelText, getByTestId } = getComponent({ mxEvent: <alice>sMessageEvent });
             fireEvent.click(queryByLabelText("React")!);
             expect(getByTestId("mx_EmojiPicker")).toBeTruthy();
         });
@@ -314,8 +314,8 @@ describe("<MessageActionBar />", () => {
 
     describe("cancel button", () => {
         it("renders cancel button for an event with a cancelable status", () => {
-            alicesMessageEvent.setStatus(EventStatus.QUEUED);
+            <alice>sMessageEvent.setStatus(EventStatus.QUEUED);
-            const { queryByLabelText } = getComponent({ mxEvent: alicesMessageEvent });
+            const { queryByLabelText } = getComponent({ mxEvent: <alice>sMessageEvent });
             expect(queryByLabelText("Delete")).toBeTruthy();
         });
 
@@ -370,8 +370,8 @@ describe("<MessageActionBar />", () => {
         });
 
         it("renders cancel and retry button for an event with NOT_SENT status", () => {
-            alicesMessageEvent.setStatus(EventStatus.NOT_SENT);
+            <alice>sMessageEvent.setStatus(EventStatus.NOT_SENT);
-            const { queryByLabelText } = getComponent({ mxEvent: alicesMessageEvent });
+            const { queryByLabelText } = getComponent({ mxEvent: <alice>sMessageEvent });
             expect(queryByLabelText("Retry")).toBeTruthy();
             expect(queryByLabelText("Delete")).toBeTruthy();
         });
@@ -387,7 +387,7 @@ describe("<MessageActionBar />", () => {
 
         describe("when threads feature is enabled", () => {
             it("renders thread button on own actionable event", () => {
-                const { queryByLabelText } = getComponent({ mxEvent: alicesMessageEvent });
+                const { queryByLabelText } = getComponent({ mxEvent: <alice>sMessageEvent });
                 expect(queryByLabelText("Reply in thread")).toBeTruthy();
             });
 
@@ -398,13 +398,13 @@ describe("<MessageActionBar />", () => {
             });
 
             it("opens thread on click", () => {
-                const { getByLabelText } = getComponent({ mxEvent: alicesMessageEvent });
+                const { getByLabelText } = getComponent({ mxEvent: <alice>sMessageEvent });
 
                 fireEvent.click(getByLabelText("Reply in thread"));
 
                 expect(dispatcher.dispatch).toHaveBeenCalledWith({
                     action: Action.ShowThread,
-                    rootEvent: alicesMessageEvent,
+                    rootEvent: <alice>sMessageEvent,
                     push: false,
                 });
             });
@@ -421,9 +421,9 @@ describe("<MessageActionBar />", () => {
                 });
                 // mock the thread stuff
                 jest.spyOn(threadReplyEvent, "isThreadRoot", "get").mockReturnValue(false);
-                // set alicesMessageEvent as the root event
+                // set <alice>sMessageEvent as the root event
                 jest.spyOn(threadReplyEvent, "getThread").mockReturnValue({
-                    rootEvent: alicesMessageEvent,
+                    rootEvent: <alice>sMessageEvent,
                 } as unknown as Thread);
                 const { getByLabelText } = getComponent({ mxEvent: threadReplyEvent });
 
@@ -431,7 +431,7 @@ describe("<MessageActionBar />", () => {
 
                 expect(dispatcher.dispatch).toHaveBeenCalledWith({
                     action: Action.ShowThread,
-                    rootEvent: alicesMessageEvent,
+                    rootEvent: <alice>sMessageEvent,
                     initialEvent: threadReplyEvent,
                     highlighted: true,
                     scroll_into_view: true,
@@ -454,7 +454,7 @@ describe("<MessageActionBar />", () => {
             event.stopPropagation = jest.fn();
             event.preventDefault = jest.fn();
 
-            const { queryByTestId, queryByLabelText } = getComponent({ mxEvent: alicesMessageEvent });
+            const { queryByTestId, queryByLabelText } = getComponent({ mxEvent: <alice>sMessageEvent });
             fireEvent(queryByLabelText(buttonLabel)!, event);
             expect(event.stopPropagation).toHaveBeenCalled();
             expect(event.preventDefault).toHaveBeenCalled();
@@ -463,7 +463,7 @@ describe("<MessageActionBar />", () => {
     );
 
     it("does shows context menu when right-clicking options", () => {
-        const { queryByTestId, queryByLabelText } = getComponent({ mxEvent: alicesMessageEvent });
+        const { queryByTestId, queryByLabelText } = getComponent({ mxEvent: <alice>sMessageEvent });
         fireEvent.contextMenu(queryByLabelText("Options")!);
         expect(queryByTestId("mx_MessageContextMenu")).toBeTruthy();
     });
@@ -488,17 +488,17 @@ describe("<MessageActionBar />", () => {
                 "mayClientSendStateEvent",
             ).mockReturnValue(false);
 
-            const { queryByLabelText } = getComponent({ mxEvent: alicesMessageEvent });
+            const { queryByLabelText } = getComponent({ mxEvent: <alice>sMessageEvent });
             expect(queryByLabelText("Pin")).toBeFalsy();
         });
 
         it("should render pin button", () => {
-            const { queryByLabelText } = getComponent({ mxEvent: alicesMessageEvent });
+            const { queryByLabelText } = getComponent({ mxEvent: <alice>sMessageEvent });
             expect(queryByLabelText("Pin")).toBeTruthy();
         });
 
         it("should listen to room pinned events", async () => {
-            getComponent({ mxEvent: alicesMessageEvent });
+            getComponent({ mxEvent: <alice>sMessageEvent });
             expect(screen.getByLabelText("Pin")).toBeInTheDocument();
 
             // Event is considered pinned