IntenseWebs/discourse
3
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2026-08-03 09:53:24 -05:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
- 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
This commit is contained in:
Jan Cernik
2023-07-03 11:09:41 -03:00
committed by GitHub
parent 5034eda386
commit 585a2e4e77
23 changed files with 398 additions and 134 deletions
Download Patch File Download Diff File Expand all files Collapse all files
plugins/chat/test/javascripts/acceptance/user-status-on-mentions-test.js
+46 -6
View File
@@ -102,6 +102,11 @@ acceptance("Chat | User status on mentions", function (needs) {
statusSelector(mentionedUser2.username),
mentionedUser2.status
);
await assertStatusTooltipIsRendered(
assert,
statusSelector(mentionedUser2.username),
mentionedUser2.status
);
});
skip("just posted messages | it updates status on mentions", async function (assert) {
@@ -115,6 +120,7 @@ acceptance("Chat | User status on mentions", function (needs) {
const selector = statusSelector(mentionedUser2.username);
await waitFor(selector);
assertStatusIsRendered(assert, selector, newStatus);
await assertStatusTooltipIsRendered(assert, selector, newStatus);
});
skip("just posted messages | it deletes status on mentions", async function (assert) {
@@ -144,6 +150,11 @@ acceptance("Chat | User status on mentions", function (needs) {
statusSelector(mentionedUser3.username),
mentionedUser3.status
);
await assertStatusTooltipIsRendered(
assert,
statusSelector(mentionedUser3.username),
mentionedUser3.status
);
});
skip("edited messages | it updates status on mentions", async function (assert) {
@@ -160,6 +171,7 @@ acceptance("Chat | User status on mentions", function (needs) {
const selector = statusSelector(mentionedUser3.username);
await waitFor(selector);
assertStatusIsRendered(assert, selector, newStatus);
await assertStatusTooltipIsRendered(assert, selector, newStatus);
});
skip("edited messages | it deletes status on mentions", async function (assert) {
@@ -190,6 +202,11 @@ acceptance("Chat | User status on mentions", function (needs) {
statusSelector(mentionedUser1.username),
mentionedUser1.status
);
await assertStatusTooltipIsRendered(
assert,
statusSelector(mentionedUser1.username),
mentionedUser1.status
);
});
test("deleted messages | it updates status on mentions", async function (assert) {
@@ -205,6 +222,7 @@ acceptance("Chat | User status on mentions", function (needs) {
const selector = statusSelector(mentionedUser1.username);
await waitFor(selector);
assertStatusIsRendered(assert, selector, newStatus);
await assertStatusTooltipIsRendered(assert, selector, newStatus);
});
test("deleted messages | it deletes status on mentions", async function (assert) {
@@ -233,6 +251,11 @@ acceptance("Chat | User status on mentions", function (needs) {
statusSelector(mentionedUser1.username),
mentionedUser1.status
);
await assertStatusTooltipIsRendered(
assert,
statusSelector(mentionedUser1.username),
mentionedUser1.status
);
});
test("restored messages | it updates status on mentions", async function (assert) {
@@ -248,6 +271,7 @@ acceptance("Chat | User status on mentions", function (needs) {
const selector = statusSelector(mentionedUser1.username);
await waitFor(selector);
assertStatusIsRendered(assert, selector, newStatus);
await assertStatusTooltipIsRendered(assert, selector, newStatus);
});
test("restored messages | it deletes status on mentions", async function (assert) {
@@ -269,11 +293,6 @@ acceptance("Chat | User status on mentions", function (needs) {
assert
.dom(selector)
.exists("status is rendered")
.hasAttribute(
"title",
status.description,
"status description is updated"
)
.hasAttribute(
"src",
new RegExp(`${status.emoji}.png`),
@@ -281,6 +300,27 @@ acceptance("Chat | User status on mentions", function (needs) {
);
}
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 deleteMessage(messageSelector) {
await triggerEvent(query(messageSelector), "mouseenter");
await click(".more-buttons .select-kit-header-wrapper");
@@ -340,6 +380,6 @@ acceptance("Chat | User status on mentions", function (needs) {
}
function statusSelector(username) {
return `.mention[href='/u/${username}'] .user-status`;
return `.mention[href='/u/${username}'] .user-status-message img`;
}
});
plugins/chat/test/javascripts/components/chat-channel-test.js
+43 -7
View File
@@ -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`;
}
}
);