mirror of
https://github.com/discourse/discourse.git
synced 2024-12-13 16:36:03 +08:00
10e1831139
This PR is introducing glimmer usage in the chat-live-pane, for components but also for models. RestModel usage has been dropped in favor of native classes. Other changes/additions in this PR: - sticky dates, scrolling will now keep the date separator of the current section at the top of the screen - better unread management, marking a channel as unread will correctly mark the correct message and not mark the whole channel as read. Tracking state will also now correctly return unread count and unread mentions. - adds an animation on bottom arrow - better scrolling behavior, we should now always correctly keep the scroll position while loading more - reactions are now more reactive, and will update their tooltip without needed to close/reopen it - skeleton has been improved with placeholder images and reactions - when making a reaction on the desktop message actions, the menu won't move anymore - simplify logic and stop maintaining a list of unloaded messages
109 lines
3.4 KiB
JavaScript
109 lines
3.4 KiB
JavaScript
import User from "discourse/models/user";
|
|
import { render } from "@ember/test-helpers";
|
|
import ChatMessage from "discourse/plugins/chat/discourse/models/chat-message";
|
|
import { exists } from "discourse/tests/helpers/qunit-helpers";
|
|
import { setupRenderingTest } from "discourse/tests/helpers/component-test";
|
|
import hbs from "htmlbars-inline-precompile";
|
|
import ChatChannel from "discourse/plugins/chat/discourse/models/chat-channel";
|
|
import { module, test } from "qunit";
|
|
|
|
module("Discourse Chat | Component | chat-message", function (hooks) {
|
|
setupRenderingTest(hooks);
|
|
|
|
function generateMessageProps(messageData = {}) {
|
|
const chatChannel = ChatChannel.create({
|
|
chatable: { id: 1 },
|
|
chatable_type: "Category",
|
|
id: 9,
|
|
title: "Site",
|
|
last_message_sent_at: "2021-11-08T21:26:05.710Z",
|
|
current_user_membership: {
|
|
unread_count: 0,
|
|
muted: false,
|
|
},
|
|
canInteractWithChat: true,
|
|
canDeleteSelf: true,
|
|
canDeleteOthers: true,
|
|
canFlag: true,
|
|
userSilenced: false,
|
|
canModerate: true,
|
|
});
|
|
return {
|
|
message: ChatMessage.create(
|
|
chatChannel,
|
|
Object.assign(
|
|
{
|
|
id: 178,
|
|
message: "from deleted user",
|
|
cooked: "<p>from deleted user</p>",
|
|
excerpt: "<p>from deleted user</p>",
|
|
created_at: "2021-07-22T08:14:16.950Z",
|
|
flag_count: 0,
|
|
user: User.create({ username: "someguy", id: 1424 }),
|
|
edited: false,
|
|
},
|
|
messageData
|
|
)
|
|
),
|
|
chatChannel,
|
|
setReplyTo: () => {},
|
|
replyMessageClicked: () => {},
|
|
editButtonClicked: () => {},
|
|
afterExpand: () => {},
|
|
selectingMessages: false,
|
|
onStartSelectingMessages: () => {},
|
|
onSelectMessage: () => {},
|
|
bulkSelectMessages: () => {},
|
|
onHoverMessage: () => {},
|
|
didShowMessage: () => {},
|
|
didHideMessage: () => {},
|
|
};
|
|
}
|
|
|
|
const template = hbs`
|
|
<ChatMessage
|
|
@message={{this.message}}
|
|
@canInteractWithChat={{this.canInteractWithChat}}
|
|
@channel={{this.chatChannel}}
|
|
@setReplyTo={{this.setReplyTo}}
|
|
@replyMessageClicked={{this.replyMessageClicked}}
|
|
@editButtonClicked={{this.editButtonClicked}}
|
|
@selectingMessages={{this.selectingMessages}}
|
|
@onStartSelectingMessages={{this.onStartSelectingMessages}}
|
|
@onSelectMessage={{this.onSelectMessage}}
|
|
@bulkSelectMessages={{this.bulkSelectMessages}}
|
|
@onHoverMessage={{this.onHoverMessage}}
|
|
@didShowMessage={{this.didShowMessage}}
|
|
@didHideMessage={{this.didHideMessage}}
|
|
/>
|
|
`;
|
|
|
|
test("Message with edits", async function (assert) {
|
|
this.setProperties(generateMessageProps({ edited: true }));
|
|
await render(template);
|
|
assert.true(
|
|
exists(".chat-message-edited"),
|
|
"has the correct edited css class"
|
|
);
|
|
});
|
|
|
|
test("Deleted message", async function (assert) {
|
|
this.setProperties(generateMessageProps({ deleted_at: moment() }));
|
|
await render(template);
|
|
|
|
assert.true(
|
|
exists(".chat-message-deleted .chat-message-expand"),
|
|
"has the correct deleted css class and expand button within"
|
|
);
|
|
});
|
|
|
|
test("Hidden message", async function (assert) {
|
|
this.setProperties(generateMessageProps({ hidden: true }));
|
|
await render(template);
|
|
assert.true(
|
|
exists(".chat-message-hidden .chat-message-expand"),
|
|
"has the correct hidden css class and expand button within"
|
|
);
|
|
});
|
|
});
|