From f03f496c7d525cfc815a48cc4d72a1e15406bcb9 Mon Sep 17 00:00:00 2001
From: DoHyeon Kim <kitten.diger@gmail.com>
Date: Fri, 20 Dec 2024 14:03:08 +0900
Subject: [PATCH 1/2] FE: Fix Default Consumer's Lag Value with nullish
 coalescing

---
 frontend/src/components/ConsumerGroups/List.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/components/ConsumerGroups/List.tsx b/frontend/src/components/ConsumerGroups/List.tsx
index 54d3ebf4b..683f8b27b 100644
--- a/frontend/src/components/ConsumerGroups/List.tsx
+++ b/frontend/src/components/ConsumerGroups/List.tsx
@@ -62,7 +62,7 @@ const List = () => {
         header: 'Consumer Lag',
         accessorKey: 'consumerLag',
         cell: (args) => {
-          return args.getValue() || 'N/A';
+          return args.getValue() ?? 'N/A';
         },
       },
       {

From a4c3eca504b8c5b100247b025755c8c7985b39b4 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 2/2] FE: Added test code for changing default value notation
 of ConsumerGroups component

---
 .../ConsumerGroups/__test__/List.spec.tsx     | 55 +++++++++++++++++++
 1 file changed, 55 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..ad79c05f2
--- /dev/null
+++ b/frontend/src/components/ConsumerGroups/__test__/List.spec.tsx
@@ -0,0 +1,55 @@
+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');
+  });
+});