From 91f95f6ccaff3640dd6b444b44f7fa6c74fb3c62 Mon Sep 17 00:00:00 2001
From: DoHyeon Kim <kitten.diger@gmail.com>
Date: Mon, 6 Jan 2025 20:50:42 +0900
Subject: [PATCH] FE: Consumers: Fix lag is displayed as 'N/A' in case of null
 value (#720)

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

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';
         },
       },
       {
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');
+  });
+});