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.
This commit is contained in:
Andrei Prigorshnev 2023-10-06 16:51:31 +04:00 committed by GitHub
parent 3ea55cff16
commit de8bb76065
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -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: {