discourse/plugins/chat/test/javascripts/components/chat-message-info-test.js
Joffrey JAFFEUX cbb9396353
REFACTOR: <ChatMessage> component (#22172)
- Moves `<ChatMessageInfo />` to `<Chat::Message::Info />`
- Moves `<ChatMessageAvatar />` to `<Chat::Message::Avatar />`
- Moves `<ChatMessageLeftGutter />` to `<Chat::Message::LeftGutter />`, adds tests
- Creates `<Chat::Message::Error />`
- Creates `<Chat::Message::MentionWarning />`, adds tests and a styleguide
- Creates a model for ChatMessageMentionWarning, adds fabricator for it
- Keeps the enter/leave viewport logic inside the `<ChatMessage />` component instead of bubbling it to the channel and thread components
- Adds a scale animation when clicking a reaction
- Creates `chat/later-fn` modifier which accepts a function and a delay. It allows to call a function Xms after a component has been inserted, it's useful for animations.
- Moves css code out of chat-message into relevant files
- Deletes unused code

<!-- NOTE: All pull requests should have tests (rspec in Ruby, qunit in JavaScript). If your code does not include test coverage, please include an explanation of why it was omitted. -->
2023-06-19 09:50:54 +02:00

157 lines
4.5 KiB
JavaScript

import Bookmark from "discourse/models/bookmark";
import { setupRenderingTest } from "discourse/tests/helpers/component-test";
import hbs from "htmlbars-inline-precompile";
import { exists, query } from "discourse/tests/helpers/qunit-helpers";
import I18n from "I18n";
import { module, test } from "qunit";
import { render } from "@ember/test-helpers";
import ChatMessage from "discourse/plugins/chat/discourse/models/chat-message";
import fabricators from "discourse/plugins/chat/discourse/lib/fabricators";
module("Discourse Chat | Component | chat-message-info", function (hooks) {
setupRenderingTest(hooks);
const template = hbs`
<Chat::Message::Info @message={{this.message}} @show={{true}} />
`;
test("chat_webhook_event", async function (assert) {
this.message = fabricators.message({
chat_webhook_event: { username: "discobot" },
});
await render(template);
assert.strictEqual(
query(".chat-message-info__username").innerText.trim(),
this.message.chatWebhookEvent.username
);
assert.strictEqual(
query(".chat-message-info__bot-indicator").textContent.trim(),
I18n.t("chat.bot")
);
});
test("user", async function (assert) {
this.message = fabricators.message({
user: { username: "discobot" },
});
await render(template);
assert.strictEqual(
query(".chat-message-info__username").innerText.trim(),
this.message.user.username
);
});
test("date", async function (assert) {
this.message = fabricators.message({
user: { username: "discobot" },
created_at: moment(),
});
await render(template);
assert.true(exists(".chat-message-info__date"));
});
test("bookmark (with reminder)", async function (assert) {
this.message = fabricators.message({
user: { username: "discobot" },
bookmark: Bookmark.create({
reminder_at: moment(),
name: "some name",
}),
});
await render(template);
assert.true(
exists(".chat-message-info__bookmark .d-icon-discourse-bookmark-clock")
);
});
test("bookmark (no reminder)", async function (assert) {
this.message = ChatMessage.create(fabricators.channel(), {
user: { username: "discobot" },
bookmark: Bookmark.create({
name: "some name",
}),
});
await render(template);
assert.true(exists(".chat-message-info__bookmark .d-icon-bookmark"));
});
test("user status", async function (assert) {
const status = { description: "off to dentist", emoji: "tooth" };
this.message = fabricators.message({ user: { status } });
await render(template);
assert.true(exists(".chat-message-info__status .user-status-message"));
});
test("flag status", async function (assert) {
this.message = fabricators.message({
user: { username: "discobot" },
user_flag_status: 0,
});
await render(template);
assert
.dom(".chat-message-info__flag > .svg-icon-title")
.hasAttribute("title", I18n.t("chat.you_flagged"));
});
test("reviewable", async function (assert) {
this.message = fabricators.message({
user: { username: "discobot" },
user_flag_status: 0,
});
await render(template);
assert
.dom(".chat-message-info__flag > .svg-icon-title")
.hasAttribute("title", I18n.t("chat.you_flagged"));
});
test("with username classes", async function (assert) {
this.message = fabricators.message({
user: {
username: "discobot",
admin: true,
moderator: true,
new_user: true,
primary_group_name: "foo",
},
});
await render(template);
assert.dom(".chat-message-info__username.is-staff").exists();
assert.dom(".chat-message-info__username.is-admin").exists();
assert.dom(".chat-message-info__username.is-moderator").exists();
assert.dom(".chat-message-info__username.is-new-user").exists();
assert.dom(".chat-message-info__username.group--foo").exists();
});
test("without username classes", async function (assert) {
this.message = fabricators.message({
user: { username: "discobot" },
});
await render(template);
assert.dom(".chat-message-info__username.is-staff").doesNotExist();
assert.dom(".chat-message-info__username.is-admin").doesNotExist();
assert.dom(".chat-message-info__username.is-moderator").doesNotExist();
assert.dom(".chat-message-info__username.is-new-user").doesNotExist();
assert.dom(".chat-message-info__username.group--foo").doesNotExist();
});
});