diff options
author | marco <marcoambrosini@pm.me> | 2022-03-18 16:23:43 +0300 |
---|---|---|
committer | marco <marcoambrosini@pm.me> | 2022-03-24 16:01:45 +0300 |
commit | 65d4ee154acde0c59d1c723643b1fc75e20c83cb (patch) | |
tree | bce7235efcefc77a0a92ddf25f0b843bfab78d64 /src/components/MessagesList/MessagesGroup/Message | |
parent | 9822c9fb1c216e8e5071d256b06c71ff0cfb986f (diff) |
Add tests for reactions in the message component
Signed-off-by: marco <marcoambrosini@pm.me>
Diffstat (limited to 'src/components/MessagesList/MessagesGroup/Message')
-rw-r--r-- | src/components/MessagesList/MessagesGroup/Message/Message.spec.js | 126 |
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, + }) + + }) + }) }) |