From 8a09f28de8c94080df8dc3487ebc815a3143cc08 Mon Sep 17 00:00:00 2001
From: Shivam Mishra <scm.mymail@gmail.com>
Date: Mon, 17 Mar 2025 18:07:42 +0530
Subject: [PATCH] test: Typing Indicator component

---
 .../Chips/specs/TypingIndicator.spec.js       | 75 +++++++++++++++++++
 1 file changed, 75 insertions(+)
 create mode 100644 app/javascript/dashboard/components-next/Conversation/Chips/specs/TypingIndicator.spec.js

diff --git a/app/javascript/dashboard/components-next/Conversation/Chips/specs/TypingIndicator.spec.js b/app/javascript/dashboard/components-next/Conversation/Chips/specs/TypingIndicator.spec.js
new file mode 100644
index 000000000..d775bc84e
--- /dev/null
+++ b/app/javascript/dashboard/components-next/Conversation/Chips/specs/TypingIndicator.spec.js
@@ -0,0 +1,75 @@
+import { mount } from '@vue/test-utils';
+import { createStore } from 'vuex';
+import { nextTick } from 'vue';
+import TypingIndicator from '../TypingIndicator.vue';
+
+const createComponent = ({ typingUsers = [] } = {}) => {
+  const store = createStore({
+    modules: {
+      conversations: {
+        getters: {
+          getSelectedChat: () => ({ id: 1 }),
+        },
+      },
+      conversationTypingStatus: {
+        namespaced: true,
+        getters: {
+          getUserList: () => chatId => {
+            // Ensure we're returning the typing users for the correct chat
+            if (chatId === 1) {
+              return typingUsers;
+            }
+            return [];
+          },
+        },
+      },
+    },
+  });
+
+  return mount(TypingIndicator, {
+    global: {
+      plugins: [store],
+    },
+  });
+};
+
+describe('TypingIndicator', () => {
+  it('should not be visible when no one is typing', () => {
+    const wrapper = createComponent();
+    expect(wrapper.isVisible()).toBe(false);
+  });
+
+  it('should display the correct message when one user is typing', async () => {
+    const wrapper = createComponent({
+      typingUsers: [{ id: 1, name: 'John' }],
+    });
+    await nextTick();
+    expect(wrapper.isVisible()).toBe(true);
+    expect(wrapper.text()).toContain('John is typing');
+  });
+
+  it('should display the correct message when two users are typing', async () => {
+    const wrapper = createComponent({
+      typingUsers: [
+        { id: 1, name: 'John' },
+        { id: 2, name: 'Jane' },
+      ],
+    });
+    await nextTick();
+    expect(wrapper.isVisible()).toBe(true);
+    expect(wrapper.text()).toContain('John and Jane are typing');
+  });
+
+  it('should display the correct message when more than two users are typing', async () => {
+    const wrapper = createComponent({
+      typingUsers: [
+        { id: 1, name: 'John' },
+        { id: 2, name: 'Jane' },
+        { id: 3, name: 'Bob' },
+      ],
+    });
+    await nextTick();
+    expect(wrapper.isVisible()).toBe(true);
+    expect(wrapper.text()).toContain('John and 2 others are typing');
+  });
+});