Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Enh(Message): Component splitting and store migration (Reactions only) #11261

Merged
merged 18 commits into from
Jan 3, 2024
Merged

Enh(Message): Component splitting and store migration (Reactions only) #11261

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
18 commits
Select commit Hold shift + click to select a range
f91d794
Enh(Message): Move reactions to an independent component
DorraJaouad Dec 18, 2023
4618bef
Improve wording
DorraJaouad Dec 19, 2023
864771e
Fix(reactions): Migrate to Pinia
DorraJaouad Dec 19, 2023
7750dbb
fix(reactions): refetch reactions when receiving reaction system message
DorraJaouad Dec 20, 2023
72d9804
Fix(reactions): depend only on the store when it comes to reactions list
DorraJaouad Dec 21, 2023
1680fc7
fix(reactions): patch the store when the current user reacts
DorraJaouad Dec 21, 2023
ab86a78
fix(Message): Keep hovering styles when emoji picker is open
DorraJaouad Dec 21, 2023
c84eec2
Remove extra parameter
DorraJaouad Dec 26, 2023
bb03d89
Reaction store fixes to reduce fetching of details
DorraJaouad Dec 27, 2023
c6b094a
Add tests for reactions store
DorraJaouad Dec 27, 2023
3d1eb23
Move reaction tests to its corresponsing components tests suite
DorraJaouad Dec 27, 2023
fe2005f
Purge reactions store when chat history is deleted or conversation is…
DorraJaouad Dec 28, 2023
136ab08
Adjust messagesStore tests
DorraJaouad Dec 28, 2023
3c158dd
Add loading state for reactions details
DorraJaouad Dec 28, 2023
0fe30c7
Move reaction actions to reactionsStore
DorraJaouad Dec 28, 2023
23a8cf0
Improve Reactions.vue coverage
DorraJaouad Dec 29, 2023
db9faf0
Some fixes
DorraJaouad Dec 31, 2023
4b29193
Fix(Reactions): add dynamic order by count
DorraJaouad Dec 31, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
164 changes: 0 additions & 164 deletions src/components/MessagesList/MessagesGroup/Message/Message.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,6 @@ import CheckAll from 'vue-material-design-icons/CheckAll.vue'

import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
import NcEmojiPicker from '@nextcloud/vue/dist/Components/NcEmojiPicker.js'

import Message from './Message.vue'
import MessageButtonsBar from './MessageButtonsBar/MessageButtonsBar.vue'
Expand Down Expand Up @@ -39,10 +38,6 @@ const RichTextStub = {
template: '<div/>',
}

const NcPopoverStub = {
template: '<slot name="trigger" /><slot/>',
}

describe('Message.vue', () => {
const TOKEN = 'XXTOKENXX'
let localVue
Expand Down Expand Up @@ -756,163 +751,4 @@ describe('Message.vue', () => {
expect(wrapper.findComponent(CheckAll).exists()).toBe(false)
})
})

describe('reactions', () => {
beforeEach(() => {
messageProps.reactions = { '❤️': 1, '👍': 7 }
messageProps.reactionsSelf = ['👍']
store = new Store(testStoreConfig)
})

test('shows reaction buttons with count and emoji picker', () => {
// Arrange
const wrapper = shallowMount(Message, {
localVue,
store,
propsData: messageProps,
provide: injected,
stubs: {
NcPopover: NcPopoverStub,
},
})

// Assert
const reactionButtons = wrapper.findAllComponents({ name: 'NcButton' })
expect(reactionButtons).toHaveLength(3) // 2 for reactions and 1 for emoji picker
expect(reactionButtons.at(0).text()).toBe('❤️ 1')
expect(reactionButtons.at(1).text()).toBe('👍 7')
})

test('shows reaction buttons with count but without emoji picker when no chat permission', () => {
// Arrange
const conversationProps = {
token: TOKEN,
lastCommonReadMessage: 0,
type: CONVERSATION.TYPE.GROUP,
readOnly: CONVERSATION.STATE.READ_WRITE,
permissions: PARTICIPANT.PERMISSIONS.MAX_DEFAULT - PARTICIPANT.PERMISSIONS.CHAT,
}
testStoreConfig.modules.conversationsStore.getters.conversation
= jest.fn().mockReturnValue((token) => conversationProps)
store = new Store(testStoreConfig)

const wrapper = shallowMount(Message, {
localVue,
store,
propsData: messageProps,
provide: injected,
stubs: {
NcPopover: NcPopoverStub,
},
})

// Assert
const reactionButtons = wrapper.findAllComponents({ name: 'NcButton' })
expect(reactionButtons).toHaveLength(2) // 2 for reactions
expect(reactionButtons.at(0).text()).toBe('❤️ 1')
expect(reactionButtons.at(1).text()).toBe('👍 7')
})

test('doesn\'t mount emoji picker when there are no reactions', () => {
// Arrange
messageProps.reactions = { }
const wrapper = shallowMount(Message, {
localVue,
store,
propsData: messageProps,
provide: injected,
stubs: {
NcEmojiPicker,
},
})

// Assert
const reactionButtons = wrapper.findAllComponents({ name: 'NcButton' })
expect(reactionButtons).toHaveLength(0)
const emojiPicker = wrapper.findComponent(NcEmojiPicker)
expect(emojiPicker.exists()).toBeFalsy()
expect(emojiPicker.vm).toBeUndefined()
})

test('dispatches store actions upon picking an emoji from the emojipicker', () => {
// Arrange
const addReactionToMessageAction = jest.fn()
const removeReactionFromMessageAction = jest.fn()
testStoreConfig.modules.messagesStore.actions.addReactionToMessage = addReactionToMessageAction
testStoreConfig.modules.messagesStore.actions.removeReactionFromMessage = removeReactionFromMessageAction
store = new Store(testStoreConfig)

const wrapper = shallowMount(Message, {
localVue,
store,
propsData: messageProps,
provide: injected,
stubs: {
NcEmojiPicker,
},
computed: {
showMessageButtonsBar: () => {
return true
},
},
})

// Act
const emojiPicker = wrapper.findComponent(NcEmojiPicker)
emojiPicker.vm.$emit('select', '❤️')
emojiPicker.vm.$emit('select', '👍')

// Assert
expect(addReactionToMessageAction).toHaveBeenCalledWith(expect.anything(), {
token: messageProps.token,
messageId: messageProps.id,
selectedEmoji: '❤️',
actorId: messageProps.actorId,
})
expect(removeReactionFromMessageAction).toHaveBeenCalledWith(expect.anything(), {
token: messageProps.token,
messageId: messageProps.id,
selectedEmoji: '👍',
actorId: messageProps.actorId,
})
})

test('dispatches store actions upon clicking a reaction buttons', () => {
// Arrange
const addReactionToMessageAction = jest.fn()
const removeReactionFromMessageAction = jest.fn()
testStoreConfig.modules.messagesStore.actions.addReactionToMessage = addReactionToMessageAction
testStoreConfig.modules.messagesStore.actions.removeReactionFromMessage = removeReactionFromMessageAction
store = new Store(testStoreConfig)

const wrapper = shallowMount(Message, {
localVue,
store,
propsData: messageProps,
provide: injected,
stubs: {
NcPopover: NcPopoverStub,
},
})

// Act
const reactionButtons = wrapper.findAllComponents({ name: 'NcButton' })
reactionButtons.at(0).vm.$emit('click') // ❤️
reactionButtons.at(1).vm.$emit('click') // 👍

// Assert
expect(addReactionToMessageAction).toHaveBeenCalledWith(expect.anything(), {
token: messageProps.token,
messageId: messageProps.id,
selectedEmoji: '❤️',
actorId: messageProps.actorId,
})
expect(removeReactionFromMessageAction).toHaveBeenCalledWith(expect.anything(), {
token: messageProps.token,
messageId: messageProps.id,
selectedEmoji: '👍',
actorId: messageProps.actorId,
})
})
})
})
Loading
Loading