DEV: fix flaky specs for user status tooltip (#22435)

A follow-up to 585a2e4e. A couple of tests with the new rich tooltip were flaky. 
We suppose the reason is some problem related to widgets lifecycle. This PR 
doesn't fix the issue, but isolates testing of the tooltip related logic related 
inside its own test, which should make it not flaky.

This is a temporal solution, we're going to move all these code to using 
glimmer components.

app/assets/javascripts/discourse/tests/acceptance/post-inline-mentions-test.js

@@ -5,7 +5,7 @@ import {
   query,
 } from "discourse/tests/helpers/qunit-helpers";
 import { triggerEvent, visit } from "@ember/test-helpers";
-import { skip, test } from "qunit";
+import { test } from "qunit";
 import { cloneJSON } from "discourse-common/lib/object";
 import topicFixtures from "../fixtures/topic";
 import pretender, { response } from "discourse/tests/helpers/create-pretender";
@@ -32,14 +32,6 @@ function topicWithUserStatus(topicId, mentionedUserId, status) {
   return topic;
 }
 
-async function mouseenter() {
-  await triggerEvent(query(".user-status-message"), "mouseenter");
-}
-
-async function mouseleave() {
-  await triggerEvent(query(".user-status-message"), "mouseleave");
-}
-
 acceptance("Post inline mentions", function (needs) {
   needs.user();
 
@@ -51,7 +43,7 @@ acceptance("Post inline mentions", function (needs) {
     ends_at: null,
   };
 
-  skip("shows user status on inline mentions", async function (assert) {
+  test("shows user status on inline mentions", async function (assert) {
     pretender.get(`/t/${topicId}.json`, () => {
       return response(topicWithUserStatus(topicId, mentionedUserId, status));
     });
@@ -62,7 +54,6 @@ acceptance("Post inline mentions", function (needs) {
       exists(".topic-post .cooked .mention .user-status-message"),
       "user status is shown"
     );
-
     const statusElement = query(
       ".topic-post .cooked .mention .user-status-message img"
     );
@@ -70,20 +61,9 @@ acceptance("Post inline mentions", function (needs) {
       statusElement.src.includes(status.emoji),
       "status emoji is correct"
     );
-
-    await mouseenter();
-    const statusTooltipDescription = document.querySelector(
-      ".user-status-message-tooltip .user-status-tooltip-description"
-    );
-
-    assert.equal(
-      statusTooltipDescription.innerText,
-      status.description,
-      "status description is correct"
-    );
   });
 
-  skip("inserts user status on message bus message", async function (assert) {
+  test("inserts user status on message bus message", async function (assert) {
     pretender.get(`/t/${topicId}.json`, () => {
       return response(topicWithoutUserStatus(topicId, mentionedUserId));
     });
@@ -105,7 +85,6 @@ acceptance("Post inline mentions", function (needs) {
       exists(".topic-post .cooked .mention .user-status-message"),
       "user status is shown"
     );
-
     const statusElement = query(
       ".topic-post .cooked .mention .user-status-message img"
     );
@@ -113,19 +92,6 @@ acceptance("Post inline mentions", function (needs) {
       statusElement.src.includes(status.emoji),
       "status emoji is correct"
     );
-
-    await mouseenter();
-    const statusTooltipDescription = document.querySelector(
-      ".user-status-message-tooltip .user-status-tooltip-description"
-    );
-    assert.equal(
-      statusTooltipDescription.innerText,
-      status.description,
-      "status description is correct"
-    );
-
-    // Needed to remove the tooltip in between tests
-    await mouseleave();
   });
 
   test("updates user status on message bus message", async function (assert) {
@@ -150,13 +116,10 @@ acceptance("Post inline mentions", function (needs) {
       },
     });
 
-    await mouseenter();
-
     assert.ok(
       exists(".topic-post .cooked .mention .user-status-message"),
       "updated user status is shown"
     );
-
     const statusElement = query(
       ".topic-post .cooked .mention .user-status-message img"
     );
@@ -164,18 +127,6 @@ acceptance("Post inline mentions", function (needs) {
       statusElement.src.includes(newStatus.emoji),
       "updated status emoji is correct"
     );
-
-    const statusTooltipDescription = document.querySelector(
-      ".user-status-message-tooltip .user-status-tooltip-description"
-    );
-    assert.equal(
-      statusTooltipDescription.innerText,
-      newStatus.description,
-      "updated status description is correct"
-    );
-
-    // Needed to remove the tooltip in between tests
-    await mouseleave();
   });
 
   test("removes user status on message bus message", async function (assert) {
@@ -200,6 +151,49 @@ acceptance("Post inline mentions", function (needs) {
   });
 });
 
+acceptance("Post inline mentions – user status tooltip", function (needs) {
+  needs.user();
+
+  const topicId = 130;
+  const mentionedUserId = 1;
+  const status = {
+    description: "Surfing",
+    emoji: "surfing_man",
+    ends_at: null,
+  };
+
+  async function mouseEnter(selector) {
+    await triggerEvent(query(selector), "mouseenter");
+  }
+
+  test("shows user status tooltip", async function (assert) {
+    pretender.get(`/t/${topicId}.json`, () => {
+      return response(topicWithUserStatus(topicId, mentionedUserId, status));
+    });
+
+    await visit(`/t/lorem-ipsum-dolor-sit-amet/${topicId}`);
+    assert.ok(
+      exists(".topic-post .cooked .mention .user-status-message"),
+      "user status is shown"
+    );
+
+    await mouseEnter(".user-status-message");
+    const statusTooltip = document.querySelector(
+      ".user-status-message-tooltip"
+    );
+    assert.ok(statusTooltip, "status tooltip is shown");
+    assert.ok(
+      statusTooltip.querySelector("img").src.includes(status.emoji),
+      "emoji is correct"
+    );
+    assert.equal(
+      statusTooltip.querySelector(".user-status-tooltip-description").innerText,
+      status.description,
+      "status description is correct"
+    );
+  });
+});
+
 acceptance("Post inline mentions as an anonymous user", function () {
   const topicId = 130;
   const mentionedUserId = 1;