Add tests and renaming

Signed-off-by: DorraJaouad <[email protected]>

src/components/ChatView.vue

@@ -23,7 +23,7 @@
 		@dragover.prevent="handleDragOver"
 		@dragleave.prevent="handleDragLeave"
 		@drop.prevent="handleDropFiles">
-		<GuestWelcomeWindow v-if="isGuestAndhasNotUsername" :token="token" />
+		<GuestWelcomeWindow v-if="isGuestWithoutDisplayName" :token="token" />
 		<TransitionWrapper name="slide-up" mode="out-in">
 			<div v-show="isDraggingOver"
 				class="dragover">
@@ -113,7 +113,7 @@ export default {
 			return this.$store.getters.getActorType() === 'guests'
 		},
 
-		isGuestAndhasNotUsername() {
+		isGuestWithoutDisplayName() {
 			const userName = this.$store.getters.getDisplayName()
 			return !userName && this.isGuest
 		},

src/components/GuestWelcomeWindow.vue

@@ -36,20 +36,20 @@
 				{{ conversationDescription }}
 			</p>
 
-			<p class="input-label">
-				{{ t('spreed', 'Enter your name') }}
-			</p>
-
-			<NcTextField :value.sync="guestUserName"
+			<label for="textField">{{ t('spreed', 'Enter your name') }}</label>
+			<NcTextField id="textField"
+				:value.sync="guestUserName"
 				:placeholder="t('spreed', 'Guest')"
 				class="username-form__input"
 				:show-trailing-button="false"
+				label-outside
 				@keydown.enter="handleChooseUserName" />
 
 			<NcButton class="submit-button"
 				type="primary"
+				:disabled="invalidGuestUsername"
 				@click="handleChooseUserName">
-				{{ submitMessage }}
+				{{ t('spreed', 'Submit name and join') }}
 				<template #icon>
 					<Check :size="20" />
 				</template>
@@ -115,14 +115,14 @@ export default {
 			return this.conversation?.description
 		},
 
-		submitMessage() {
-			return t('spreed', 'Submit name and join')
+		invalidGuestUsername() {
+			return this.guestUserName.trim() === ''
 		},
 	},
 
 	methods: {
 		handleChooseUserName() {
-			this.guestNameStore.submitUserName(this.token, this.guestUserName)
+			this.guestNameStore.submitGuestUsername(this.token, this.guestUserName)
 		},
 	},
 }

src/components/LobbyScreen.vue

@@ -20,7 +20,7 @@
 
 <template>
 	<div class="lobby">
-		<GuestWelcomeWindow v-if="isGuestAndhasNotUsername" :token="token" />
+		<GuestWelcomeWindow v-if="isGuestWithoutDisplayName" :token="token" />
 		<div class="lobby emptycontent">
 			<Lobby :size="64" />
 			<h2>{{ currentConversationName }}</h2>
@@ -111,7 +111,7 @@ export default {
 			return !this.$store.getters.getUserId()
 		},
 
-		isGuestAndhasNotUsername() {
+		isGuestWithoutDisplayName() {
 			const userName = this.$store.getters.getDisplayName()
 			return !userName && this.currentUserIsGuest
 		},

src/components/SetGuestUsername.vue

@@ -22,7 +22,7 @@
 <template>
 	<div class="username-form">
 		<!-- eslint-disable-next-line vue/no-v-html -->
-		<h3 class="display-name__label" v-html="displayNameLabel" />
+		<h3 v-html="displayNameLabel" />
 
 		<NcButton v-if="!isEditingUsername"
 			@click="handleEditUsername">
@@ -128,7 +128,7 @@ export default {
 
 	methods: {
 		handleChooseUserName() {
-			this.guestNameStore.submitUserName(this.token, this.guestUserName)
+			this.guestNameStore.submitGuestUsername(this.token, this.guestUserName)
 			this.isEditingUsername = false
 		},
 

src/stores/__tests__/guestName.spec.js

@@ -1,7 +1,14 @@
 import { createPinia, setActivePinia } from 'pinia'
 
+import { setGuestUserName } from '../../services/participantsService.js'
+import vuexStore from '../../store/index.js'
+import { generateOCSErrorResponse } from '../../test-helpers.js'
 import { useGuestNameStore } from '../guestName.js'
 
+jest.mock('../../services/participantsService', () => ({
+	setGuestUserName: jest.fn(),
+}))
+
 describe('guestNameStore', () => {
 	let store
 
@@ -135,4 +142,75 @@ describe('guestNameStore', () => {
 		expect(global.t).toHaveBeenCalledWith('spreed', 'Guest')
 	})
 
+	test('stores the display name when guest submits it', async () => {
+		// Arrange
+		const actor1 = {
+			token: 'token-1',
+			actorId: 'actor-id1',
+			actorDisplayName: t('spreed', 'Guest'),
+		}
+
+		vuexStore.dispatch('setCurrentUser', { uid: 'actor-id1' })
+
+		const newName = 'actor 1'
+
+		// Mock implementation of setGuestUserName
+		setGuestUserName.mockResolvedValue()
+
+		// Act
+		await store.submitGuestUsername(actor1.token, newName)
+
+		// Assert
+		expect(setGuestUserName).toHaveBeenCalledWith(actor1.token, newName)
+		expect(localStorage.setItem).toHaveBeenCalledWith('nick', newName)
+		expect(store.getGuestName('token-1', 'actor-id1')).toBe('actor 1')
+		expect(vuexStore.getters.getDisplayName()).toBe('actor 1')
+	})
+
+	test('removes display name from local storage when user sumbits an empty new name', async () => {
+		// Arrange
+		const actor1 = {
+			token: 'token-1',
+			actorId: 'actor-id1',
+			actorDisplayName: 'actor 1',
+		}
+		const newName = ''
+
+		vuexStore.dispatch('setCurrentUser', { uid: 'actor-id1' })
+
+		// Mock implementation of setGuestUserName
+		setGuestUserName.mockResolvedValue()
+
+		// Act
+		await store.submitGuestUsername(actor1.token, newName)
+
+		// Assert
+		expect(setGuestUserName).toHaveBeenCalledWith(actor1.token, newName)
+		expect(localStorage.removeItem).toHaveBeenCalledWith('nick')
+	})
+
+	test('resets to previous display name if there is an error in setting the new one', async () => {
+		// Arrange
+		const actor1 = {
+			token: 'token-1',
+			actorId: 'actor-id1',
+			actorDisplayName: 'old actor 1',
+		}
+
+		vuexStore.dispatch('setCurrentUser', { uid: 'actor-id1' })
+		store.addGuestName(actor1, { noUpdate: false })
+
+		const newName = 'actor 1'
+
+		// Mock implementation of setGuestUserName
+		const error = generateOCSErrorResponse({ payload: {}, status: 400 })
+		setGuestUserName.mockRejectedValue(error)
+
+		// Act
+		await store.submitGuestUsername(actor1.token, newName)
+
+		// Assert
+		expect(setGuestUserName).toHaveBeenCalledWith(actor1.token, newName)
+		expect(vuexStore.getters.getDisplayName()).toBe(actor1.actorDisplayName)
+	})
 })

src/stores/guestName.js

@@ -93,7 +93,7 @@ export const useGuestNameStore = defineStore('guestName', {
 		 * @param {string} token the token of the conversation
 		 * @param {string} name the new guest name
 		 */
-		async submitUserName(token, name) {
+		async submitGuestUsername(token, name) {
 			const actorId = store.getters.getActorId()
 			const previousName = this.getGuestName(token, actorId)