From de8bb760656b1067dd3abf9482b4ad70b637b9da Mon Sep 17 00:00:00 2001
From: Andrei Prigorshnev <a.prigorshnev@gmail.com>
Date: Fri, 6 Oct 2023 16:51:31 +0400
Subject: [PATCH] DEV: Increase tests' stability by testing tooltips separately
 (#23516)

We noticed some of these tests were flaky, sometimes they fail on assertions
related to testing tooltips. Tooltips are generally hard to test, and it's not
necessary to test tooltips in every test case. This PR isolates tooltip testing
in a dedicated test case.

Note we already did the same thing for another spec in a9dfda2 and that
seems to worked well.
---
 .../components/chat-channel-test.js           | 88 ++++++-------------
 1 file changed, 28 insertions(+), 60 deletions(-)

diff --git a/plugins/chat/test/javascripts/components/chat-channel-test.js b/plugins/chat/test/javascripts/components/chat-channel-test.js
index 522f5004e00..02dc1bbc9c9 100644
--- a/plugins/chat/test/javascripts/components/chat-channel-test.js
+++ b/plugins/chat/test/javascripts/components/chat-channel-test.js
@@ -61,26 +61,17 @@ module(
     });
 
     test("it shows status on mentions", async function (assert) {
-      await render(
-        hbs`<ChatChannel @channel={{this.channel}} /><DInlineTooltip />`
-      );
+      await render(hbs`<ChatChannel @channel={{this.channel}} />`);
 
       assertStatusIsRendered(
         assert,
         statusSelector(mentionedUser.username),
         mentionedUser.status
       );
-      await assertStatusTooltipIsRendered(
-        assert,
-        statusSelector(mentionedUser.username),
-        mentionedUser.status
-      );
     });
 
     test("it updates status on mentions", async function (assert) {
-      await render(
-        hbs`<ChatChannel @channel={{this.channel}} /><DInlineTooltip />`
-      );
+      await render(hbs`<ChatChannel @channel={{this.channel}} />`);
 
       const newStatus = {
         description: "off to dentist",
@@ -99,18 +90,10 @@ module(
         statusSelector(mentionedUser.username),
         newStatus
       );
-
-      await assertStatusTooltipIsRendered(
-        assert,
-        statusSelector(mentionedUser.username),
-        newStatus
-      );
     });
 
     test("it deletes status on mentions", async function (assert) {
-      await render(
-        hbs`<ChatChannel @channel={{this.channel}} /><DInlineTooltip />`
-      );
+      await render(hbs`<ChatChannel @channel={{this.channel}} />`);
 
       this.appEvents.trigger("user-status:changed", {
         [mentionedUser.id]: null,
@@ -122,9 +105,7 @@ module(
     });
 
     test("it shows status on mentions on messages that came from Message Bus", async function (assert) {
-      await render(
-        hbs`<ChatChannel @channel={{this.channel}} /><DInlineTooltip />`
-      );
+      await render(hbs`<ChatChannel @channel={{this.channel}} />`);
 
       await receiveChatMessageViaMessageBus();
 
@@ -133,17 +114,10 @@ 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) {
-      await render(
-        hbs`<ChatChannel @channel={{this.channel}} /><DInlineTooltip />`
-      );
+      await render(hbs`<ChatChannel @channel={{this.channel}} />`);
       await receiveChatMessageViaMessageBus();
 
       const newStatus = {
@@ -161,17 +135,10 @@ 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) {
-      await render(
-        hbs`<ChatChannel @channel={{this.channel}} /><DInlineTooltip />`
-      );
+      await render(hbs`<ChatChannel @channel={{this.channel}} />`);
       await receiveChatMessageViaMessageBus();
 
       this.appEvents.trigger("user-status:changed", {
@@ -183,6 +150,28 @@ module(
       assert.dom(selector).doesNotExist("status is deleted");
     });
 
+    test("it shows status tooltip", async function (assert) {
+      await render(
+        hbs`<ChatChannel @channel={{this.channel}} /><DInlineTooltip />`
+      );
+      await triggerEvent(statusSelector(mentionedUser.username), "mousemove");
+
+      assert.equal(
+        document
+          .querySelector(".user-status-tooltip-description")
+          .textContent.trim(),
+        mentionedUser.status.description,
+        "status description is correct"
+      );
+
+      assert.ok(
+        document.querySelector(
+          `.user-status-message-tooltip img[alt='${mentionedUser.status.emoji}']`
+        ),
+        "status emoji is correct"
+      );
+    });
+
     function assertStatusIsRendered(assert, selector, status) {
       assert
         .dom(selector)
@@ -194,27 +183,6 @@ module(
         );
     }
 
-    async function assertStatusTooltipIsRendered(assert, selector, status) {
-      await triggerEvent(selector, "mousemove");
-
-      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: {