From 6ecdca177d1ea6ad15429b41d331baefe7d3ee45 Mon Sep 17 00:00:00 2001
From: Shreyas Sharma <shreyassharma9912@gmail.com>
Date: Mon, 3 Mar 2025 22:24:26 +0530
Subject: [PATCH] fix(task-widget): add-mocks-and-remote-ui-testing

---
 .../task/tests/CallControl/index.tsx           |  7 +++++++
 .../incoming-task.presentational.tsx           | 10 ++++++++--
 .../task/tests/IncomingTask/index.tsx          |  7 +++++++
 .../TaskList/task-list.presentational.tsx      | 18 ++++++++----------
 4 files changed, 30 insertions(+), 12 deletions(-)

diff --git a/packages/contact-center/task/tests/CallControl/index.tsx b/packages/contact-center/task/tests/CallControl/index.tsx
index 41f69170..797c89a4 100644
--- a/packages/contact-center/task/tests/CallControl/index.tsx
+++ b/packages/contact-center/task/tests/CallControl/index.tsx
@@ -6,6 +6,13 @@ import '@testing-library/jest-dom';
 
 jest.mock('@momentum-ui/react-collaboration', () => ({
   ButtonPill: () => <div data-testid="ButtonPill" />,
+  ListItemBase: () => <div data-testid="ListItemBase" />,
+  ListItemBaseSection: () => <div data-testid="ListItemBaseSection" />,
+  Text: () => <div data-testid="Text" />,
+}));
+
+jest.mock('@momentum-design/components/dist/react', () => ({
+  Avatar: () => <div data-testid="Avatar" />,
 }));
 
 // Mock the store
diff --git a/packages/contact-center/task/tests/IncomingTask/incoming-task.presentational.tsx b/packages/contact-center/task/tests/IncomingTask/incoming-task.presentational.tsx
index 11bf4c14..447ed3e0 100644
--- a/packages/contact-center/task/tests/IncomingTask/incoming-task.presentational.tsx
+++ b/packages/contact-center/task/tests/IncomingTask/incoming-task.presentational.tsx
@@ -5,6 +5,13 @@ import IncomingTaskPresentational from '../../src/IncomingTask/incoming-task.pre
 
 jest.mock('@momentum-ui/react-collaboration', () => ({
   ButtonPill: () => <div data-testid="ButtonPill" />,
+  ListItemBase: () => <div data-testid="ListItemBase" />,
+  ListItemBaseSection: () => <div data-testid="ListItemBaseSection" />,
+  Text: () => <div data-testid="Text" />,
+}));
+
+jest.mock('@momentum-design/components/dist/react', () => ({
+  Avatar: () => <div data-testid="Avatar" />,
 }));
 
 describe('IncomingTaskPresentational', () => {
@@ -35,7 +42,6 @@ describe('IncomingTaskPresentational', () => {
 
     render(<IncomingTaskPresentational {...props} />);
 
-    const callInfo = screen.getByTestId('incoming-task-ani');
-    expect(callInfo).toHaveTextContent('1234567890');
+    expect(screen.getAllByTestId('ListItemBase')).toHaveLength(1);
   });
 });
diff --git a/packages/contact-center/task/tests/IncomingTask/index.tsx b/packages/contact-center/task/tests/IncomingTask/index.tsx
index 706f8af2..2a3a523c 100644
--- a/packages/contact-center/task/tests/IncomingTask/index.tsx
+++ b/packages/contact-center/task/tests/IncomingTask/index.tsx
@@ -7,6 +7,13 @@ import '@testing-library/jest-dom';
 
 jest.mock('@momentum-ui/react-collaboration', () => ({
   ButtonPill: () => <div data-testid="ButtonPill" />,
+  ListItemBase: () => <div data-testid="ListItemBase" />,
+  ListItemBaseSection: () => <div data-testid="ListItemBaseSection" />,
+  Text: () => <div data-testid="Text" />,
+}));
+
+jest.mock('@momentum-design/components/dist/react', () => ({
+  Avatar: () => <div data-testid="Avatar" />,
 }));
 
 // Mock the store
diff --git a/packages/contact-center/task/tests/TaskList/task-list.presentational.tsx b/packages/contact-center/task/tests/TaskList/task-list.presentational.tsx
index 4b079a55..760da819 100644
--- a/packages/contact-center/task/tests/TaskList/task-list.presentational.tsx
+++ b/packages/contact-center/task/tests/TaskList/task-list.presentational.tsx
@@ -6,6 +6,13 @@ import {TaskListPresentationalProps} from '../../src/task.types';
 
 jest.mock('@momentum-ui/react-collaboration', () => ({
   ButtonPill: () => <div data-testid="ButtonPill" />,
+  ListItemBase: () => <div data-testid="ListItemBase" />,
+  ListItemBaseSection: () => <div data-testid="ListItemBaseSection" />,
+  Text: () => <div data-testid="Text" />,
+}));
+
+jest.mock('@momentum-design/components/dist/react', () => ({
+  Avatar: () => <div data-testid="Avatar" />,
 }));
 
 describe('TaskListPresentational Component', () => {
@@ -42,15 +49,6 @@ describe('TaskListPresentational Component', () => {
     };
 
     render(<TaskListPresentational {...props} />);
-
-    // Ensure the details for the first task are displayed correctly
-    expect(screen.getByText('1234567890')).toBeInTheDocument();
-    expect(screen.getByText('Sales Team')).toBeInTheDocument();
-    expect(screen.getByText('9876543210')).toBeInTheDocument();
-
-    // Ensure the details for the second task are displayed correctly
-    expect(screen.getByText('0987654321')).toBeInTheDocument();
-    expect(screen.getByText('Support Team')).toBeInTheDocument();
-    expect(screen.getByText('8765432109')).toBeInTheDocument();
+    expect(screen.getAllByTestId('ListItemBase')).toHaveLength(2);
   });
 });