test(MessagesList): add coverage for messages soft updatefix/noid/cleanup-chat

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>

1 files changed, 217 insertions, 0 deletions

diff --git a/src/components/MessagesList/MessagesList.spec.js b/src/components/MessagesList/MessagesList.spec.js
index 57520b3c7..99c793781 100644
--- a/src/components/MessagesList/MessagesList.spec.js
+++ b/src/components/MessagesList/MessagesList.spec.js
@@ -73,6 +73,21 @@ describe('MessagesList.vue', () => {
 		isReplyable: true,
 	}]
 
+	const messagesGroup1OldMessage = {
+		id: 90,
+		token: TOKEN,
+		actorId: 'alice',
+		actorDisplayName: 'Alice',
+		actorType: ATTENDEE.ACTOR_TYPE.USERS,
+		message: 'old hello',
+		messageType: 'comment',
+		messageParameters: {},
+		systemMessage: '',
+		timestamp: fakeTimestamp('2024-05-01T12:04:00'),
+		isReplyable: true,
+	}
+	const messagesGroup1WithOld = [messagesGroup1OldMessage].concat(messagesGroup1)
+
 	const messagesGroup2 = [{
 		id: 200,
 		token: TOKEN,
@@ -99,6 +114,21 @@ describe('MessagesList.vue', () => {
 		isReplyable: true,
 	}]
 
+	const messagesGroup2NewMessage = {
+		id: 220,
+		token: TOKEN,
+		actorId: 'bob',
+		actorDisplayName: 'Bob',
+		actorType: ATTENDEE.ACTOR_TYPE.USERS,
+		message: 'hello?',
+		messageType: 'comment',
+		messageParameters: {},
+		systemMessage: '',
+		timestamp: fakeTimestamp('2024-05-01T12:32:00'),
+		isReplyable: true,
+	}
+	const messagesGroup2WithNew = messagesGroup2.concat([messagesGroup2NewMessage])
+
 	const messagesGroup3 = [{
 		id: 'temp-300',
 		token: TOKEN,
@@ -385,4 +415,191 @@ describe('MessagesList.vue', () => {
 			expect(placeholder.exists()).toBe(true)
 		})
 	})
+
+	describe('message rendering', () => {
+		jest.useFakeTimers().setSystemTime(new Date('2024-05-01T17:00:00'))
+		/**
+		 *
+		 * @param {Array} messagesList initial messages list
+		 */
+		function renderMessagesList(messagesList) {
+			messagesList.forEach(message => store.commit('addMessage', { token: TOKEN, message }))
+			return shallowMount(MessagesList, {
+				localVue,
+				store,
+				propsData: {
+					token: TOKEN,
+					isChatScrolledToBottom: true,
+				},
+			})
+		}
+
+		test('renders initial group of messages', () => {
+			// Act
+			const wrapper = renderMessagesList(messagesGroup1)
+			const groups = wrapper.findAllComponents({ name: 'MessagesGroup' })
+
+			// Assert: groups are rendered
+			expect(groups.exists()).toBe(true)
+			expect(groups.at(0).props()).toMatchObject({
+				token: TOKEN,
+				messages: messagesGroup1,
+				previousMessageId: 0,
+				nextMessageId: 0,
+			})
+		})
+
+		test('updates rendered list of messages (add new group)', async () => {
+			// Arrange
+			const wrapper = renderMessagesList(messagesGroup1)
+
+			// Act: add new group to the store
+			messagesGroup2.forEach(message => store.commit('addMessage', { token: TOKEN, message }))
+			await wrapper.vm.$nextTick()
+			await wrapper.vm.$forceUpdate()
+
+			// Assert: old group nextMessageId is updated, new group is added
+			const groups = wrapper.findAllComponents({ name: 'MessagesGroup' })
+			expect(groups.at(0).props()).toMatchObject({
+				token: TOKEN,
+				messages: messagesGroup1,
+				previousMessageId: 0,
+				nextMessageId: 200,
+			})
+
+			expect(groups.at(1).props()).toMatchObject({
+				token: TOKEN,
+				messages: messagesGroup2,
+				previousMessageId: 110,
+				nextMessageId: 0,
+			})
+		})
+
+		test('updates rendered list of messages (add messages to existing groups)', async () => {
+			// Arrange
+			const wrapper = renderMessagesList([...messagesGroup1, ...messagesGroup2])
+
+			// Act: add new messages to the store
+			store.commit('addMessage', { token: TOKEN, message: messagesGroup1OldMessage })
+			store.commit('addMessage', { token: TOKEN, message: messagesGroup2NewMessage })
+			await wrapper.vm.$nextTick()
+			await wrapper.vm.$forceUpdate()
+
+			// Assert: both groups are updated
+			const groups = wrapper.findAllComponents({ name: 'MessagesGroup' })
+			expect(groups.exists()).toBe(true)
+			expect(groups.length).toBe(2)
+			expect(groups.at(0).props()).toMatchObject({
+				token: TOKEN,
+				messages: messagesGroup1WithOld,
+				previousMessageId: 0,
+				nextMessageId: 200,
+			})
+
+			expect(groups.at(1).props()).toMatchObject({
+				token: TOKEN,
+				messages: messagesGroup2WithNew,
+				previousMessageId: 110,
+				nextMessageId: 0,
+			})
+		})
+
+		test('updates rendered list of messages (replace temporary message)', async () => {
+			// Arrange
+			const wrapper = renderMessagesList([...messagesGroup1, ...messagesGroup3])
+
+			// Act: replace temporary message with returned from server
+			const message = {
+				...messagesGroup3[0],
+				id: 300,
+				timestamp: fakeTimestamp('2024-05-01T13:00:00'),
+			}
+			store.commit('deleteMessage', { token: TOKEN, id: messagesGroup3[0].id })
+			store.commit('addMessage', { token: TOKEN, message })
+			await wrapper.vm.$nextTick()
+			await wrapper.vm.$forceUpdate()
+
+			// Assert: old group nextMessageId is updated, new group is added
+			const groups = wrapper.findAllComponents({ name: 'MessagesGroup' })
+			expect(groups.exists()).toBe(true)
+			expect(groups.length).toBe(2)
+			expect(groups.at(0).props()).toMatchObject({
+				token: TOKEN,
+				messages: messagesGroup1,
+				previousMessageId: 0,
+				nextMessageId: 300,
+			})
+
+			expect(groups.at(1).props()).toMatchObject({
+				token: TOKEN,
+				messages: [message],
+				previousMessageId: 110,
+				nextMessageId: 0,
+			})
+		})
+
+		test('updates rendered list of messages (clear history)', async () => {
+			// Arrange
+			const wrapper = renderMessagesList([...messagesGroup1, ...messagesGroup2])
+
+			// Act: imitate clearing of history
+			const message = {
+				id: 400,
+				token: TOKEN,
+				actorId: 'alice',
+				actorDisplayName: 'Alice',
+				actorType: ATTENDEE.ACTOR_TYPE.USERS,
+				message: '{actor} cleared the history of the conversation',
+				messageType: 'system',
+				messageParameters: {},
+				systemMessage: 'history_cleared',
+				timestamp: fakeTimestamp('2024-05-01T13:00:00'),
+				isReplyable: false,
+			}
+			store.commit('purgeMessagesStore', TOKEN)
+			store.commit('addMessage', { token: TOKEN, message })
+			await wrapper.vm.$nextTick()
+			await wrapper.vm.$forceUpdate()
+
+			// Assert: old messages are removed, system message is added
+			const groups = wrapper.findAllComponents({ name: 'MessagesGroup' })
+			expect(groups.exists()).toBe(false)
+			const groupsSystem = wrapper.findAllComponents({ name: 'MessagesSystemGroup' })
+			expect(groupsSystem.length).toBe(1)
+			expect(groupsSystem.at(0).props()).toMatchObject({
+				token: TOKEN,
+				messages: [message],
+				previousMessageId: 0,
+				nextMessageId: 0,
+			})
+		})
+
+		test('updates rendered list of messages (remove messages from existing groups)', async () => {
+			// Arrange
+			const wrapper = renderMessagesList([...messagesGroup1WithOld, ...messagesGroup2WithNew])
+			// const wrapper = renderMessagesList([...messagesGroup1, ...messagesGroup2])
+
+			// Act: remove some messages from the store
+			store.commit('deleteMessage', { token: TOKEN, id: messagesGroup1OldMessage.id })
+			store.commit('deleteMessage', { token: TOKEN, id: messagesGroup2NewMessage.id })
+			await wrapper.vm.$nextTick()
+			await wrapper.vm.$forceUpdate()
+
+			const groups = wrapper.findAllComponents({ name: 'MessagesGroup' })
+			expect(groups.length).toBe(2)
+			expect(groups.at(0).props()).toMatchObject({
+				token: TOKEN,
+				messages: messagesGroup1,
+				previousMessageId: 0,
+				nextMessageId: 200,
+			})
+
+			expect(groups.at(1).props()).toMatchObject({
+				token: TOKEN,
+				messages: messagesGroup2,
+				previousMessageId: 110,
+				nextMessageId: 0,
+			})
+		})
+	})
 })