Add tests for reactions in the message component

Signed-off-by: marco <marcoambrosini@pm.me>

1 files changed, 125 insertions, 1 deletions

diff --git a/src/components/MessagesList/MessagesGroup/Message/Message.spec.js b/src/components/MessagesList/MessagesGroup/Message/Message.spec.js
index 608fe10a8..8f01a0884 100644
--- a/src/components/MessagesList/MessagesGroup/Message/Message.spec.js
+++ b/src/components/MessagesList/MessagesGroup/Message/Message.spec.js
@@ -4,6 +4,8 @@ import { cloneDeep } from 'lodash'
 import { EventBus } from '../../../../services/EventBus'
 import storeConfig from '../../../../store/storeConfig'
 import { CONVERSATION, ATTENDEE } from '../../../../constants'
+
+// Components
 import Check from 'vue-material-design-icons/Check'
 import CheckAll from 'vue-material-design-icons/CheckAll'
 import Quote from '../../../Quote'
@@ -13,9 +15,9 @@ import DeckCard from './MessagePart/DeckCard'
 import Location from './MessagePart/Location'
 import DefaultParameter from './MessagePart/DefaultParameter'
 import MessageButtonsBar from './MessageButtonsBar/MessageButtonsBar.vue'
-
 import Message from './Message'
 import ActionButton from '@nextcloud/vue/dist/Components/ActionButton'
+import EmojiPicker from '@nextcloud/vue/dist/Components/EmojiPicker'
 
 // needed because of https://github.com/vuejs/vue-test-utils/issues/1507
 const RichTextStub = {
@@ -751,4 +753,126 @@ describe('Message.vue', () => {
 			expect(wrapper.findComponent(CheckAll).exists()).toBe(false)
 		})
 	})
+
+	describe('reactions', () => {
+		beforeEach(() => {
+			testStoreConfig.modules.messagesStore.getters.message
+				= jest.fn().mockReturnValue(() => {
+					return {
+						reactions: {
+							'❤️': 1,
+							'👍': 7,
+						},
+						id: messageProps.id,
+					}
+				})
+			testStoreConfig.modules.messagesStore.getters.hasReactions
+				= jest.fn().mockReturnValue(() => {
+					return true
+				})
+			store = new Store(testStoreConfig)
+		})
+
+		test('properly shows reactions', () => {
+			const wrapper = shallowMount(Message, {
+				localVue,
+				store,
+				propsData: messageProps,
+			})
+
+			const reactionsBar = wrapper.find('.message-body__reactions')
+			expect(reactionsBar.isVisible()).toBe(true)
+
+		})
+
+		test('shows reaction buttons with the right emoji count', () => {
+			const wrapper = shallowMount(Message, {
+				localVue,
+				store,
+				propsData: messageProps,
+			})
+
+			const reactionsBar = wrapper.find('.message-body__reactions')
+
+			// Array of buttons
+			const reactionButtons = reactionsBar.findAll('.reaction-button')
+
+			// Number of buttons, 2 passed into the getter and 1 is the emoji
+			// picker
+			expect(reactionButtons.length).toBe(3)
+
+			// Text of the buttons
+			expect(reactionButtons.wrappers[0].text()).toBe('❤️   1')
+			expect(reactionButtons.wrappers[1].text()).toBe('👍   7')
+		})
+
+		test('dispatches store action upon picking an emoji from the emojipicker', () => {
+			const addReactionToMessageAction = jest.fn()
+			const userHasReactedGetter = jest.fn().mockReturnValue(() => false)
+			testStoreConfig.modules.quoteReplyStore.actions.addReactionToMessage = addReactionToMessageAction
+			testStoreConfig.modules.messagesStore.getters.userHasReacted = userHasReactedGetter
+
+			store = new Store(testStoreConfig)
+
+			const wrapper = shallowMount(Message, {
+				localVue,
+				store,
+				propsData: messageProps,
+				stubs: {
+					EmojiPicker,
+				},
+				data() {
+					return {
+						detailedReactionsRequested: true,
+					}
+				},
+			})
+
+			const emojiPicker = wrapper.findComponent(EmojiPicker)
+
+			emojiPicker.vm.$emit('select', '❤️')
+
+			expect(addReactionToMessageAction).toHaveBeenCalledWith(expect.anything(), {
+				token: messageProps.token,
+				messageId: messageProps.id,
+				selectedEmoji: '❤️',
+				actorId: messageProps.actorId,
+			})
+
+		})
+
+		test('dispatches store action to remove an emoji upon clicking reaction button', async () => {
+			const removeReactionFromMessageAction = jest.fn()
+			const userHasReactedGetter = jest.fn().mockReturnValue(() => true)
+			testStoreConfig.modules.quoteReplyStore.actions.removeReactionFromMessage = removeReactionFromMessageAction
+			testStoreConfig.modules.messagesStore.getters.userHasReacted = userHasReactedGetter
+
+			store = new Store(testStoreConfig)
+
+			const wrapper = shallowMount(Message, {
+				localVue,
+				store,
+				propsData: messageProps,
+				data() {
+					return {
+						detailedReactionsRequested: true,
+					}
+				},
+			})
+
+			// Click reaction button upon having already reacted
+			await wrapper.find('.reaction-button').trigger('click')
+
+			await wrapper.vm.$nextTick()
+			await wrapper.vm.$nextTick()
+
+			expect(removeReactionFromMessageAction).toHaveBeenCalledWith(expect.anything(), {
+				token: messageProps.token,
+				messageId: messageProps.id,
+				selectedEmoji: '❤️',
+				actorId: messageProps.actorId,
+			})
+
+		})
+	})
 })