From 1ad8cb8e7862caa072745f78144674c33a849b63 Mon Sep 17 00:00:00 2001
From: k-dgier <kitten.diger@gmail.com>
Date: Sun, 22 Dec 2024 20:27:04 +0900
Subject: [PATCH] FE: Added test code for changing default value notation of
 ConsumerGroups component

---
 .../ConsumerGroups/__test__/List.spec.tsx     | 56 +++++++++++++++++++
 1 file changed, 56 insertions(+)
 create mode 100644 frontend/src/components/ConsumerGroups/__test__/List.spec.tsx

diff --git a/frontend/src/components/ConsumerGroups/__test__/List.spec.tsx b/frontend/src/components/ConsumerGroups/__test__/List.spec.tsx
new file mode 100644
index 000000000..f9d50ecef
--- /dev/null
+++ b/frontend/src/components/ConsumerGroups/__test__/List.spec.tsx
@@ -0,0 +1,56 @@
+import React from 'react';
+import { screen } from '@testing-library/react';
+import { render } from 'lib/testHelpers';
+import { useConsumerGroups } from 'lib/hooks/api/consumers';
+
+import List from 'components/ConsumerGroups/List';
+
+// Mock hooks
+jest.mock('lib/hooks/api/consumers', () => ({
+  useConsumerGroups: jest.fn(),
+}));
+
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useSearchParams: () => [new URLSearchParams(), jest.fn()],
+  useNavigate: () => jest.fn(),
+}));
+
+const mockUseConsumerGroups = useConsumerGroups as jest.Mock;
+
+describe('ConsumerGroups List', () => {
+  beforeEach(() => {
+    mockUseConsumerGroups.mockImplementation(() => ({
+      data: {
+        consumerGroups: [
+          {
+            groupId: 'group1',
+            consumerLag: 0,
+            members: 1,
+            topics: 1,
+            coordinator: { id: 1 },
+            state: 'STABLE',
+          },
+          {
+            groupId: 'group2',
+            consumerLag: null,
+            members: 1,
+            topics: 1,
+            coordinator: { id: 2 },
+            state: 'STABLE',
+          },
+        ],
+        pageCount: 1,
+      },
+      isSuccess: true,
+      isFetching: false,
+    }));
+  });
+
+  it('renders consumer lag values correctly', () => {
+    render(<List />);
+    const tableRows = screen.getAllByRole('row');
+    expect(tableRows[1]).toHaveTextContent('0');
+    expect(tableRows[2]).toHaveTextContent('N/A');
+  });
+});