added tests for the new vue components

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

@@ -0,0 +1,24 @@
+import { mount } from '@vue/test-utils';
+import ChatMessageDisplay from './ChatMessageDisplay.vue';
+
+describe('ChatMessageDisplayVue', () => {
+  it('renders valid message', () => {
+    const message = {
+      sender: 'John',
+      message: 'Hello, world!',
+      UTC_timestamp: '2022-03-17T12:00:00Z',
+    };
+    const wrapper = mount(ChatMessageDisplay, {
+      props: { message },
+    });
+
+    expect(wrapper.find('.message-container').exists()).toBe(true);
+    expect(wrapper.find('.sender-name').text()).toBe(message.sender);
+    expect(wrapper.find('.message-content').text()).toBe(message.message);
+    expect(wrapper.find('.timestamp').text()).toBe(message.UTC_timestamp);
+  });
+
+
+  // Add more test cases for other error scenarios...
+
+});

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

@@ -1,8 +1,45 @@
+import { mount, shallowMount } from '@vue/test-utils';
+import ChatMessagesContainer from './ChatMessagesContainer.vue';
+import { ChatMessage } from '@models/ChatMessage';
 
+describe('ChatMessagesContainer', () => {
+  it('renders all messages', () => {
+    // Mock messages
+    const messages: ChatMessage[] = [{
+        sender:"System",
+        message:"Hello user, this is default message!",
+        UTC_timestamp: "2021-3-5"
+    },
+    {
+        sender:"User",
+        message:"Hello system, this is nice!",
+        UTC_timestamp: "2021-3-5"
+    },
+    {
+        sender:"Buddy",
+        message:"Let's play football!",
+        UTC_timestamp: "2021-3-5"
+    }
+];
 
-describe("ChatContainer", () => {
+    // Mount the component with props
+    const wrapper = mount(ChatMessagesContainer, {
+      props: {
+        messageListProp: messages,
+      },
+    });
 
-    it("Contains chat messages",()=>{
-
-    })
-})
+    // Assert that all messages are rendered
+    const messageComponents = wrapper.findAllComponents({ name: 'ChatMessageDisplay' });
+    expect(messageComponents.length).toBe(messages.length);
+
+    expect(messageComponents.forEach(com => {
+        expect(com.text()).toContain(com.props().message.sender)
+        expect(com.text()).toContain(com.props().message.message)
+        expect(com.text()).toContain(com.props().message.UTC_timestamp)
+    }))
+
+
+
+  });
+});

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

@@ -1,15 +1,15 @@
 <script setup lang="ts">
 
 import { ChatMessage } from '@models/ChatMessage';
-import ChatMessageDisplayVue from '../ChatMessageDisplay/ChatMessageDisplay.vue';
+import ChatMessageDisplay from '../ChatMessageDisplay/ChatMessageDisplay.vue';
 defineProps<{messageListProp: ChatMessage[]}>()
 
 
 </script>
 
 <template>
   <div class="container">
-   <ChatMessageDisplayVue
+   <ChatMessageDisplay
   v-for="(item, index) in messageListProp"
   :message="item"
   :index="index"

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

@@ -0,0 +1,50 @@
+// ChatSender.spec.ts
+import { 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:""
+           }
+        }
+    });
+  });
+
+  afterEach(() => {
+    wrapper.unmount();
+  });
+
+  it('renders input field and send button', () => {
+    const input = wrapper.find('input[type="text"]');
+    const button = wrapper.find('button');
+
+    expect(input.exists()).toBe(true);
+    expect(button.exists()).toBe(true);
+  });
+
+  it('emits "messageSend" event with current message when Send button is clicked', async () => {
+    const message = 'Hello, world!';
+    const input = wrapper.find('input[type="text"]');
+    await input.setValue(message);
+
+    const button = wrapper.find('button');
+    await button.trigger('click');
+
+    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),
+    });
+  });
+
+
+
+});