From d698eccb4accfb809440eb4d0fa63a3dc36a0fdb Mon Sep 17 00:00:00 2001
From: Jaanus Sellin <sellinjaanus@gmail.com>
Date: Mon, 6 May 2024 13:24:52 +0300
Subject: [PATCH] fix: badge should render children 0 value (#6981)

When passing 0 in as child, the 0 was not rendred. Fixed the badge
component and added tests.


![image](https://github.com/Unleash/unleash/assets/964450/d681b70c-5d55-4818-86ea-7d05fa86c7b3)
---
 .../src/component/common/Badge/Badge.test.tsx   | 17 +++++++++++++++++
 frontend/src/component/common/Badge/Badge.tsx   |  6 +++++-
 2 files changed, 22 insertions(+), 1 deletion(-)
 create mode 100644 frontend/src/component/common/Badge/Badge.test.tsx

diff --git a/frontend/src/component/common/Badge/Badge.test.tsx b/frontend/src/component/common/Badge/Badge.test.tsx
new file mode 100644
index 0000000000..3616c44d30
--- /dev/null
+++ b/frontend/src/component/common/Badge/Badge.test.tsx
@@ -0,0 +1,17 @@
+import { screen } from '@testing-library/react';
+import { Badge } from './Badge';
+import { render } from '../../../utils/testRenderer';
+
+test('Badge should render text', async () => {
+    render(<Badge color='success'>Predefined</Badge>);
+
+    const result = await screen.findByText('Predefined');
+    expect(result).toBeInTheDocument();
+});
+
+test('Badge should children number 0', async () => {
+    render(<Badge color='success'>{0}</Badge>);
+
+    const result = await screen.findByText('0');
+    expect(result).toBeInTheDocument();
+});
diff --git a/frontend/src/component/common/Badge/Badge.tsx b/frontend/src/component/common/Badge/Badge.tsx
index 2eb3dc1b19..81652c652c 100644
--- a/frontend/src/component/common/Badge/Badge.tsx
+++ b/frontend/src/component/common/Badge/Badge.tsx
@@ -113,7 +113,11 @@ export const Badge: FC<IBadgeProps> = forwardRef(
                 show={BadgeIcon(color, icon!)}
             />
             <ConditionallyRender
-                condition={Boolean(children)}
+                condition={
+                    children !== null &&
+                    children !== undefined &&
+                    children !== ''
+                }
                 show={<div>{children}</div>}
             />
             <ConditionallyRender