discourse/plugins/chat/test/javascripts/components/chat-user-avatar-test.js
Joffrey JAFFEUX a39ff830e8
UX: makes avatar non interactive in thread participants list (#23847)
It was slightly surprising to have a user card show when click on a thread item list.

More over this commit does:
- moves chat/user-avatar to chat-user-avatar and converts it to gjs
- moves chat/thread/participants to chat-thread-participants
- rewrite the `toggleCheckIfPossible` modifier to only be applied when selecting messages, it prevents the click event to collide with the click of avatars in regular messages
2023-10-09 21:12:50 +02:00

66 lines
1.9 KiB
JavaScript

import { setupRenderingTest } from "discourse/tests/helpers/component-test";
import hbs from "htmlbars-inline-precompile";
import { module, test } from "qunit";
import { render } from "@ember/test-helpers";
import fabricators from "discourse/plugins/chat/discourse/lib/fabricators";
function containerSelector(user, options = {}) {
let onlineSelector = ":not(.is-online)";
if (options.online) {
onlineSelector = ".is-online";
}
return `.chat-user-avatar${onlineSelector} .chat-user-avatar__container[data-user-card=${user.username}] .avatar[title=${user.username}]`;
}
module("Discourse Chat | Component | <ChatUserAvatar />", function (hooks) {
setupRenderingTest(hooks);
test("when user is not online", async function (assert) {
this.user = fabricators.user();
this.chat = { presenceChannel: { users: [] } };
await render(
hbs`<ChatUserAvatar @chat={{this.chat}} @user={{this.user}} />`
);
assert.dom(containerSelector(this.user, { online: false })).exists();
});
test("user is online", async function (assert) {
this.user = fabricators.user();
this.chat = {
presenceChannel: { users: [{ id: this.user.id }] },
};
await render(
hbs`<ChatUserAvatar @chat={{this.chat}} @user={{this.user}} />`
);
assert.dom(containerSelector(this.user, { online: true })).exists();
});
test("@showPresence=false", async function (assert) {
this.user = fabricators.user();
this.chat = {
presenceChannel: { users: [{ id: this.user.id }] },
};
await render(
hbs`<ChatUserAvatar @showPresence={{false}} @chat={{this.chat}} @user={{this.user}} />`
);
assert.dom(containerSelector(this.user, { online: false })).exists();
});
test("@interactive=true", async function (assert) {
this.user = fabricators.user();
await render(
hbs`<ChatUserAvatar @interactive={{false}} @user={{this.user}} />`
);
assert.dom(".clickable").doesNotExist();
});
});