Fixed the Unit test of new group dialog

Signed-off-by: DorraJaouad <dorra.jaoued7@gmail.com>

3 files changed, 36 insertions, 29 deletions

diff --git a/src/components/LeftSidebar/LeftSidebar.spec.js b/src/components/LeftSidebar/LeftSidebar.spec.js
index d86b90838..cddc71fe3 100644
--- a/src/components/LeftSidebar/LeftSidebar.spec.js
+++ b/src/components/LeftSidebar/LeftSidebar.spec.js
@@ -7,6 +7,8 @@ import Vuex from 'vuex'
 import { subscribe, unsubscribe } from '@nextcloud/event-bus'
 import { loadState } from '@nextcloud/initial-state'
 
+import NcModal from '@nextcloud/vue/dist/Components/NcModal.js'
+
 import LeftSidebar from './LeftSidebar.vue'
 
 import router from '../../__mocks__/router.js'
@@ -47,8 +49,8 @@ describe('LeftSidebar.vue', () => {
 				// to prevent user status fetching
 				NcAvatar: true,
 				// to prevent complex dialog logic
-				NewGroupConversation: true,
 				NcActions: true,
+				NcModal: true,
 			},
 		})
 	}
@@ -612,9 +614,6 @@ describe('LeftSidebar.vue', () => {
 			})
 
 			test('shows group conversation dialog when clicking search result', async () => {
-				const eventHandler = jest.fn()
-				EventBus.$once('new-group-conversation-dialog', eventHandler)
-
 				const wrapper = await testSearch(SEARCH_TERM, [...groupsResults], [])
 
 				const resultsListItems = findNcListItems(wrapper, groupsResults.map(item => item.label))
@@ -622,7 +621,13 @@ describe('LeftSidebar.vue', () => {
 				expect(resultsListItems).toHaveLength(groupsResults.length)
 
 				await resultsListItems.at(1).findAll('a').trigger('click')
-				expect(eventHandler).toHaveBeenCalledWith(groupsResults[1])
+				// Wait for the component to render
+				await wrapper.vm.$nextTick()
+				const ncModalComponent = wrapper.findComponent(NcModal)
+				expect(ncModalComponent.exists()).toBeTruthy()
+
+				const input = ncModalComponent.find('input[placeholder="Enter a name for this conversation"]')
+				expect(input.element.value).toBe(groupsResults[1].label)
 
 				// nothing created yet
 				expect(createOneToOneConversationAction).not.toHaveBeenCalled()
@@ -630,8 +635,6 @@ describe('LeftSidebar.vue', () => {
 			})
 
 			test('shows circles conversation dialog when clicking search result', async () => {
-				const eventHandler = jest.fn()
-				EventBus.$once('new-group-conversation-dialog', eventHandler)
 
 				const wrapper = await testSearch(SEARCH_TERM, [...circlesResults], [])
 
@@ -640,7 +643,14 @@ describe('LeftSidebar.vue', () => {
 				expect(resultsListItems).toHaveLength(circlesResults.length)
 
 				await resultsListItems.at(1).findAll('a').trigger('click')
-				expect(eventHandler).toHaveBeenCalledWith(circlesResults[1])
+
+				// Wait for the component to render
+				await wrapper.vm.$nextTick()
+				const ncModalComponent = wrapper.findComponent(NcModal)
+				expect(ncModalComponent.exists()).toBeTruthy()
+
+				const input = ncModalComponent.find('input[placeholder="Enter a name for this conversation"]')
+				expect(input.element.value).toBe(circlesResults[1].label)
 
 				// nothing created yet
 				expect(createOneToOneConversationAction).not.toHaveBeenCalled()
@@ -704,6 +714,7 @@ describe('LeftSidebar.vue', () => {
 			const wrapper = mountComponent()
 			const buttonEl = findNcActionButton(wrapper, 'Create a new conversation')
 			expect(buttonEl.exists()).toBeTruthy()
+
 		})
 		test('does not show new conversation button if user cannot start conversations', () => {
 			loadStateSettings.start_conversations = false
diff --git a/src/components/LeftSidebar/LeftSidebar.vue b/src/components/LeftSidebar/LeftSidebar.vue
index 7a6d7ec17..2eb9a233b 100644
--- a/src/components/LeftSidebar/LeftSidebar.vue
+++ b/src/components/LeftSidebar/LeftSidebar.vue
@@ -33,13 +33,15 @@
 
 			<!-- Options -->
 			<NcActions>
-				<NcActionButton close-after-click
-					@click="insertValue(t('spreed','is:unread'))">
+				<NcActionButton v-if="canStartConversations"
+					close-after-click
+					@click="toggleNewGroupConversation(true)">
 					<template #icon>
-						<MessageBadge :size="20" />
+						<PlusIcon :size="20" />
 					</template>
-					{{ t('spreed','Filter unread messages') }}
+					{{ t('spreed','Create a new conversation') }}
 				</NcActionButton>
+
 				<NcActionButton close-after-click
 					@click="insertValue(t('spreed','is:mentioned'))">
 					<template #icon>
@@ -47,18 +49,19 @@
 					</template>
 					{{ t('spreed','Filter unread mentions') }}
 				</NcActionButton>
-				<NcActionButton v-if="canStartConversations"
-					close-after-click
-					@click="toggleNewGroupConversation(true)">
+
+				<NcActionButton close-after-click
+					@click="insertValue(t('spreed','is:unread'))">
 					<template #icon>
-						<PlusIcon :size="20" />
+						<MessageBadge :size="20" />
 					</template>
-					{{ t('spreed','Create a new conversation') }}
+					{{ t('spreed','Filter unread messages') }}
 				</NcActionButton>
 			</NcActions>
 
 			<!-- New Conversation -->
-			<NewGroupConversation :show-modal="isNewGroupConversationOpen"
+			<NewGroupConversation ref="newGroupConversation"
+				:show-modal="isNewGroupConversationOpen"
 				@open-modal="toggleNewGroupConversation(true)"
 				@close-modal="toggleNewGroupConversation(false)" />
 		</div>
@@ -471,8 +474,9 @@ export default {
 					params: { token: conversation.token },
 				}).catch(err => console.debug(`Error while pushing the new conversation's route: ${err}`))
 			} else {
-				// For other types we start the conversation creation dialog
-				EventBus.$emit('new-group-conversation-dialog', item)
+				// For other types, show the modal directly
+				this.$refs.newGroupConversation.showModalForItem(item)
+				this.toggleNewGroupConversation(true)
 			}
 		},
 
diff --git a/src/components/LeftSidebar/NewGroupConversation/NewGroupConversation.vue b/src/components/LeftSidebar/NewGroupConversation/NewGroupConversation.vue
index 6701a5533..3a5a02958 100644
--- a/src/components/LeftSidebar/NewGroupConversation/NewGroupConversation.vue
+++ b/src/components/LeftSidebar/NewGroupConversation/NewGroupConversation.vue
@@ -192,7 +192,6 @@ import {
 	createPrivateConversation,
 	setConversationPassword,
 } from '../../../services/conversationsService.js'
-import { EventBus } from '../../../services/EventBus.js'
 import { addParticipant } from '../../../services/participantsService.js'
 import { copyConversationLinkToClipboard } from '../../../services/urlService.js'
 
@@ -306,14 +305,7 @@ export default {
 			})
 		},
 	},
-
-	mounted() {
-		EventBus.$on('new-group-conversation-dialog', this.showModalForItem)
-	},
-
-	destroyed() {
-		EventBus.$off('new-group-conversation-dialog', this.showModalForItem)
-	},
+	expose: ['showModalForItem'],
 
 	methods: {
 		showModal() {