feat: wrote new tests and implemented functionality for handling keyb…

…oard enter in ChatSender component

roomchat-frontend/src/components/Chat/ChatMessagesContainer/ChatMessagesContainer.test.ts

@@ -1,4 +1,4 @@
-import { mount, shallowMount } from '@vue/test-utils';
+import { mount } from '@vue/test-utils';
 import ChatMessagesContainer from './ChatMessagesContainer.vue';
 import { ChatMessage } from '@models/ChatMessage';
 

roomchat-frontend/src/components/Chat/ChatSender/ChatSender.test.ts

@@ -1,18 +1,13 @@
 // ChatSender.spec.ts
-import { VueWrapper, mount } from '@vue/test-utils';
+import { DOMWrapper, VueWrapper, mount } from '@vue/test-utils';
 import ChatSender from './ChatSender.vue';
 
+
 describe('ChatSender', () => {
   let wrapper:  VueWrapper<InstanceType<typeof ChatSender>>;
 
   beforeEach(() => {
-    wrapper = mount(ChatSender,{
-        data(){
-           return{
-            currentMessage:""
-           }
-        }
-    });
+    wrapper = mount(ChatSender);
   });
 
   afterEach(() => {
@@ -46,5 +41,42 @@ describe('ChatSender', () => {
   });
 
 
+  it('emits "messageSend" event with current message when user presses enter on keyboard', async () => {
+    const message = 'Hello, world!';
+   const input: DOMWrapper<HTMLInputElement> = wrapper.find('input[type="text"]') as DOMWrapper<HTMLInputElement> 
+    await input.setValue(message);
+
+    await input.trigger('keydown.enter')
+
+    expect(wrapper.emitted('messageSend')).toBeTruthy();
+      const eventData : any  = wrapper.emitted('messageSend');
+      expect(eventData).toBeTruthy();
+    expect(eventData[0][0]).toEqual({
+      sender: 'default',
+      message,
+      UTC_timestamp: expect.any(String),
+    });
+  });
+
+
+
+
+  it('clears input field after sending message', async () => {
+
+
+    const input: DOMWrapper<HTMLInputElement> = wrapper.find('input') as DOMWrapper<HTMLInputElement> 
+
+    await input.setValue('Test Message');
 
+
+    const button = wrapper.find('button');
+    await button.trigger('click');
+
+    expect(wrapper.emitted('messageSend')).toBeTruthy();
+
+
+    expect(input.element.value).not.toContain('Test Message');
+    expect(input.element.value).toBe('')
+
+  });
 });

roomchat-frontend/src/components/Chat/ChatSender/ChatSender.vue

@@ -3,34 +3,37 @@ import { ref } from 'vue';
 import { ChatMessage } from '@models/ChatMessage';
 
 
-
-const currentMessage = ref("")
 const emit = defineEmits<{
-  messageSend: [message : ChatMessage]
+  messageSend: [message : ChatMessage],
+  
 }>()
 
-const TriggerSendMessage = ()=>{
-    
+const currentMessage = ref("")
 
+const TriggerSendMessage = (event: Event) =>{
+   event.preventDefault()
+    
+  if (currentMessage.value == "") return;
 
     const msg : ChatMessage = {
         sender:"default",
-        message:currentMessage.value,
+        message: currentMessage.value,
         UTC_timestamp: new Date().toUTCString()
 
         
     }
 
-    emit("messageSend",msg)
    
+    emit("messageSend",msg)
+    currentMessage.value = ""
 }
 </script>
 
 <template>
-    <div class="send-controls-container">
-        <input type="text" v-model.trim="currentMessage">
+    <form class="send-controls-container">
+        <input type="text" v-model="currentMessage" @keydown.enter="TriggerSendMessage" >
         <button @click="TriggerSendMessage">Send</button>
-    </div>
+    </form>
 </template>
 
 <style scoped>