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;