diff --git a/src/components/MessagesList/MessagesGroup/Message/Message.spec.js b/src/components/MessagesList/MessagesGroup/Message/Message.spec.js index 8d485922498..0d85477593b 100644 --- a/src/components/MessagesList/MessagesGroup/Message/Message.spec.js +++ b/src/components/MessagesList/MessagesGroup/Message/Message.spec.js @@ -424,6 +424,7 @@ describe('Message.vue', () => { test('displays unread message marker that marks the message seen when visible', () => { messageProps.lastReadMessageId = 123 + messageProps.nextMessageId = 333 const observeVisibility = jest.fn() const wrapper = shallowMount(Message, { @@ -453,6 +454,24 @@ describe('Message.vue', () => { directiveValue.value(false) expect(wrapper.vm.seen).toEqual(true) }) + + test('does not display read marker on the very last message', () => { + messageProps.lastReadMessageId = 123 + messageProps.nextMessageId = null // last message + const observeVisibility = jest.fn() + + const wrapper = shallowMount(Message, { + localVue, + store, + directives: { + observeVisibility, + }, + propsData: messageProps, + }) + + const marker = wrapper.find('.new-message-marker') + expect(marker.exists()).toBe(false) + }) }) describe('author rendering', () => { diff --git a/src/components/MessagesList/MessagesGroup/Message/Message.vue b/src/components/MessagesList/MessagesGroup/Message/Message.vue index d21344f7582..43f6de57e8d 100644 --- a/src/components/MessagesList/MessagesGroup/Message/Message.vue +++ b/src/components/MessagesList/MessagesGroup/Message/Message.vue @@ -402,6 +402,10 @@ export default { computed: { isLastReadMessage() { + if (!this.nextMessageId) { + // never display indicator on the very last message + return false + } // note: not reading lastReadMessage from the conversation as we want to define it externally // to have closer control on marker's visibility behavior return this.id === this.lastReadMessageId