diff options
Diffstat (limited to 'src/components/MessagesList/MessagesGroup/Message')
-rw-r--r-- | src/components/MessagesList/MessagesGroup/Message/Message.spec.js | 28 | ||||
-rw-r--r-- | src/components/MessagesList/MessagesGroup/Message/Message.vue | 20 |
2 files changed, 23 insertions, 25 deletions
diff --git a/src/components/MessagesList/MessagesGroup/Message/Message.spec.js b/src/components/MessagesList/MessagesGroup/Message/Message.spec.js index 519eec383..b08ff8f71 100644 --- a/src/components/MessagesList/MessagesGroup/Message/Message.spec.js +++ b/src/components/MessagesList/MessagesGroup/Message/Message.spec.js @@ -563,7 +563,7 @@ describe('Message.vue', () => { expect(messageButtonsBar.exists()).toBe(false) }) - test('Buttons bar becomes visible on mouse over', async () => { + test('Buttons bar is rendered on mouse over', async () => { messageProps.sendingFailure = 'timeout' const wrapper = mount(Message, { localVue, @@ -571,26 +571,23 @@ describe('Message.vue', () => { propsData: messageProps, }) - await wrapper.vm.$nextTick() - - const messageButtonsBar = wrapper.findComponent(MessageButtonsBar) - + // Initial state expect(wrapper.vm.showMessageButtonsBar).toBe(false) - expect(messageButtonsBar.isVisible()).toBe(false) + expect(wrapper.findComponent(MessageButtonsBar).exists()).toBe(false) + // Mouseover await wrapper.find('.message').trigger('mouseover') - expect(wrapper.vm.showMessageButtonsBar).toBe(true) - expect(messageButtonsBar.isVisible()).toBe(true) - - await wrapper.find('.message').trigger('mouseleave') + expect(wrapper.findComponent(MessageButtonsBar).exists()).toBe(true) - expect(wrapper.vm.showMessageButtonsBar).toBe(false) - expect(messageButtonsBar.isVisible()).toBe(false) - - // actions are always present and rendered + // actions are present and rendered when the buttonsBar is renderend const actions = wrapper.findAllComponents({ name: 'Actions' }) expect(actions.length).toBe(2) + + // Mouseleave + await wrapper.find('.message').trigger('mouseleave') + expect(wrapper.vm.showMessageButtonsBar).toBe(false) + expect(wrapper.findComponent(MessageButtonsBar).exists()).toBe(false) }) }) @@ -616,6 +613,9 @@ describe('Message.vue', () => { propsData: messageProps, }) + // Hover the messages in order to render the MessageButtonsBar + // component + await wrapper.find('.message').trigger('mouseover') wrapper.find(MessageButtonsBar).vm.$emit('delete') expect(deleteMessage).toHaveBeenCalledWith(expect.anything(), { diff --git a/src/components/MessagesList/MessagesGroup/Message/Message.vue b/src/components/MessagesList/MessagesGroup/Message/Message.vue index ab3272a47..13fce0b84 100644 --- a/src/components/MessagesList/MessagesGroup/Message/Message.vue +++ b/src/components/MessagesList/MessagesGroup/Message/Message.vue @@ -147,8 +147,7 @@ the main body of the message as well as a quote. </div> <!-- Message actions --> - <MessageButtonsBar v-if="hasMessageButtonsBar" - v-show="showMessageButtonsBar || isActionMenuOpen || isEmojiPickerOpen" + <MessageButtonsBar v-if="showMessageButtonsBar" ref="messageButtonsBar" :is-action-menu-open.sync="isActionMenuOpen" :is-emoji-picker-open.sync="isEmojiPickerOpen" @@ -351,7 +350,7 @@ export default { data() { return { - showMessageButtonsBar: false, + isHovered: false, // Is tall enough for both actions and date upon hovering isTallEnough: false, showReloadButton: false, @@ -506,11 +505,11 @@ export default { return false } - return this.isSystemMessage || !this.showMessageButtonsBar || this.isTallEnough + return this.isSystemMessage || !this.isHovered || this.isTallEnough }, - hasMessageButtonsBar() { - return !this.isSystemMessage && !this.isTemporary + showMessageButtonsBar() { + return !this.isSystemMessage && !this.isTemporary && (this.isHovered || this.isActionMenuOpen || this.isEmojiPickerOpen) }, isTemporaryUpload() { @@ -620,8 +619,8 @@ export default { }, handleMouseover() { - if (!this.showMessageButtonsBar) { - this.showMessageButtonsBar = true + if (!this.isHovered) { + this.isHovered = true } }, @@ -632,9 +631,8 @@ export default { }, handleMouseleave() { - // We leave the buttonsbar visible if the actions menu is open - if (this.showMessageButtonsBar) { - this.showMessageButtonsBar = false + if (this.isHovered) { + this.isHovered = false } }, |