github-mirror/discourse
github-mirror/discourse
2
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2025-03-27 09:45:43 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

FIX: correctly sets and uses has-reply class (#22153)

Browse Source 
The layout was broken for messages replying to another message in non threaded channels.

This commit also refactors the chat-message-test to use fabricators.
This commit is contained in:
Joffrey JAFFEUX 2023-06-16 14:04:11 +02:00 committed by GitHub
parent 54cae1299e
commit 7db6d27292
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 36 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
plugins/chat/assets/javascripts/discourse/components/chat-message.js
View File

@ -317,7 +317,7 @@ export default class ChatMessage extends Component {
}
get hasReply() {
return this.args.inReplyTo && !this.hideReplyToInfo;
return this.args.message.inReplyTo && !this.hideReplyToInfo;
}
get hideUserInfo() {

24
plugins/chat/assets/stylesheets/common/chat-message.scss
View File

@ -214,19 +214,21 @@
}
&.has-reply {
display: grid;
grid-template-columns: var(--message-left-width) 1fr;
grid-template-rows: 30px auto;
grid-template-areas:
"replyto replyto"
"avatar message";
.chat-message {
display: grid;
grid-template-columns: var(--message-left-width) 1fr;
grid-template-rows: 30px auto;
grid-template-areas:
"replyto replyto"
"avatar message";
.chat-user-avatar {
grid-area: avatar;
}
.chat-user-avatar {
grid-area: avatar;
}
.chat-message-content {
grid-area: message;
.chat-message-content {
grid-area: message;
}
}
}

76
plugins/chat/test/javascripts/components/chat-message-test.js
View File

@ -1,90 +1,58 @@
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";
import fabricators from "discourse/plugins/chat/discourse/lib/fabricators";
module("Discourse Chat | Component | chat-message", function (hooks) {
setupRenderingTest(hooks);
function generateMessageProps(messageData = {}) {
const channel = 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,
},
can_delete_self: true,
can_delete_others: true,
can_flag: true,
user_silenced: false,
can_moderate: true,
});
return {
message: ChatMessage.create(
channel,
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
)
),
channel,
messageDidEnterViewport: () => {},
messageDidLeaveViewport: () => {},
};
}
const template = hbs`
<ChatMessage
@message={{this.message}}
@messageDidEnterViewport={{this.messageDidEnterViewport}}
@messageDidLeaveViewport={{this.messageDidLeaveViewport}}
@messageDidEnterViewport={{fn (noop)}}
@messageDidLeaveViewport={{fn (noop)}}
/>
`;
test("Message with edits", async function (assert) {
this.setProperties(generateMessageProps({ edited: true }));
this.message = fabricators.message({ edited: true });
await render(template);
assert.true(
exists(".chat-message-edited"),
"has the correct edited css class"
);
assert.true(exists(".chat-message-edited"), "has the correct css class");
});
test("Deleted message", async function (assert) {
this.setProperties(generateMessageProps({ deleted_at: moment() }));
this.message = fabricators.message({
user: this.currentUser,
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"
"has the correct css class and expand button within"
);
});
test("Hidden message", async function (assert) {
this.setProperties(generateMessageProps({ hidden: true }));
this.message = fabricators.message({ hidden: true });
await render(template);
assert.true(
exists(".chat-message-hidden .chat-message-expand"),
"has the correct hidden css class and expand button within"
"has the correct css class and expand button within"
);
});
test("Message with reply", async function (assert) {
this.message = fabricators.message({ inReplyTo: fabricators.message() });
await render(template);
assert.true(
exists(".chat-message-container.has-reply"),
"has the correct css class"
);
});
});