FEATURE: Use rich user status tooltip everywhere (#21125)

- Inline mentions on posts
- Inline mentions on chat messages
- The user autocomplete for the composer
- The user autocomplete for chat
- The chat section of the sidebar

plugins/chat/test/javascripts/components/chat-channel-test.js

@@ -1,7 +1,7 @@
 import { setupRenderingTest } from "discourse/tests/helpers/component-test";
 import hbs from "htmlbars-inline-precompile";
 import fabricators from "discourse/plugins/chat/discourse/lib/fabricators";
-import { render, waitFor } from "@ember/test-helpers";
+import { render, triggerEvent, waitFor } from "@ember/test-helpers";
 import { module, test } from "qunit";
 import pretender, { OK } from "discourse/tests/helpers/create-pretender";
 import { publishToMessageBus } from "discourse/tests/helpers/qunit-helpers";
@@ -76,6 +76,11 @@ module(
         statusSelector(mentionedUser.username),
         mentionedUser.status
       );
+      await assertStatusTooltipIsRendered(
+        assert,
+        statusSelector(mentionedUser.username),
+        mentionedUser.status
+      );
     });
 
     test("it updates status on mentions", async function (assert) {
@@ -97,6 +102,11 @@ module(
         statusSelector(mentionedUser.username),
         newStatus
       );
+      await assertStatusTooltipIsRendered(
+        assert,
+        statusSelector(mentionedUser.username),
+        newStatus
+      );
     });
 
     test("it deletes status on mentions", async function (assert) {
@@ -121,6 +131,11 @@ module(
         statusSelector(mentionedUser2.username),
         mentionedUser2.status
       );
+      await assertStatusTooltipIsRendered(
+        assert,
+        statusSelector(mentionedUser2.username),
+        mentionedUser2.status
+      );
     });
 
     test("it updates status on mentions on messages that came from Message Bus", async function (assert) {
@@ -142,6 +157,11 @@ module(
         statusSelector(mentionedUser2.username),
         newStatus
       );
+      await assertStatusTooltipIsRendered(
+        assert,
+        statusSelector(mentionedUser2.username),
+        newStatus
+      );
     });
 
     test("it deletes status on mentions on messages that came from Message Bus", async function (assert) {
@@ -161,11 +181,6 @@ module(
       assert
         .dom(selector)
         .exists("status is rendered")
-        .hasAttribute(
-          "title",
-          status.description,
-          "status description is updated"
-        )
         .hasAttribute(
           "src",
           new RegExp(`${status.emoji}.png`),
@@ -173,6 +188,27 @@ module(
         );
     }
 
+    async function assertStatusTooltipIsRendered(assert, selector, status) {
+      await triggerEvent(selector, "mouseenter");
+
+      assert.equal(
+        document
+          .querySelector(".user-status-tooltip-description")
+          .textContent.trim(),
+        status.description,
+        "status description is correct"
+      );
+
+      assert.ok(
+        document.querySelector(
+          `.user-status-message-tooltip img[alt='${status.emoji}']`
+        ),
+        "status emoji is correct"
+      );
+
+      await triggerEvent(selector, "mouseleave");
+    }
+
     async function receiveChatMessageViaMessageBus() {
       await publishToMessageBus(`/chat/${channelId}`, {
         chat_message: {
@@ -193,7 +229,7 @@ module(
     }
 
     function statusSelector(username) {
-      return `.mention[href='/u/${username}'] .user-status`;
+      return `.mention[href='/u/${username}'] .user-status-message img`;
     }
   }
 );