From a9dfda2d667fce82fc84ad552e3c5c1a3d7143df Mon Sep 17 00:00:00 2001 From: Andrei Prigorshnev Date: Wed, 5 Jul 2023 16:46:09 +0400 Subject: [PATCH] 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. --- .../acceptance/post-inline-mentions-test.js | 98 +++++++++---------- 1 file changed, 46 insertions(+), 52 deletions(-) diff --git a/app/assets/javascripts/discourse/tests/acceptance/post-inline-mentions-test.js b/app/assets/javascripts/discourse/tests/acceptance/post-inline-mentions-test.js index 94e9ff85025..fb854f4cee5 100644 --- a/app/assets/javascripts/discourse/tests/acceptance/post-inline-mentions-test.js +++ b/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;