From 2609194e7b2926ad6b0fb7cb1b2e1579af8c5de7 Mon Sep 17 00:00:00 2001
From: Sujal Agarwal <sujalagarwal.nitdgp@gmail.com>
Date: Sun, 31 May 2026 11:34:19 +0530
Subject: [PATCH] tests added for rendering supported icons

---
 .../dashboard/ComparisonStatsCard.test.tsx    | 154 ++++++++++++++++++
 1 file changed, 154 insertions(+)

diff --git a/components/dashboard/ComparisonStatsCard.test.tsx b/components/dashboard/ComparisonStatsCard.test.tsx
index 601f6252..6931b59b 100644
--- a/components/dashboard/ComparisonStatsCard.test.tsx
+++ b/components/dashboard/ComparisonStatsCard.test.tsx
@@ -304,3 +304,157 @@ describe('ComparisonStatsCard responsive breakpoints', () => {
     expect(screen.queryByText('Winner')).toBeNull();
   });
 });
+
+describe('ComparisonStatsCard icon rendering', () => {
+  it('renders correctly with Flame icon', () => {
+    const { container } = render(
+      <ComparisonStatsCard
+        title="Test Title"
+        valueA={50}
+        valueB={50}
+        labelA="Label A"
+        labelB="Label B"
+        icon="Flame"
+      />
+    );
+
+    expect(screen.getByText('Test Title')).toBeDefined();
+    const iconContainer = container.querySelector('.rounded-lg.bg-gray-100');
+    expect(iconContainer).toBeDefined();
+    const icon = iconContainer?.querySelector('svg');
+    expect(icon).toBeDefined();
+  });
+
+  it('renders correctly with TrendingUp icon', () => {
+    const { container } = render(
+      <ComparisonStatsCard
+        title="Test Title"
+        valueA={50}
+        valueB={50}
+        labelA="Label A"
+        labelB="Label B"
+        icon="TrendingUp"
+      />
+    );
+
+    expect(screen.getByText('Test Title')).toBeDefined();
+    const iconContainer = container.querySelector('.rounded-lg.bg-gray-100');
+    expect(iconContainer).toBeDefined();
+    const icon = iconContainer?.querySelector('svg');
+    expect(icon).toBeDefined();
+  });
+
+  it('renders correctly with GitCommit icon', () => {
+    const { container } = render(
+      <ComparisonStatsCard
+        title="Test Title"
+        valueA={50}
+        valueB={50}
+        labelA="Label A"
+        labelB="Label B"
+        icon="GitCommit"
+      />
+    );
+
+    expect(screen.getByText('Test Title')).toBeDefined();
+    const iconContainer = container.querySelector('.rounded-lg.bg-gray-100');
+    expect(iconContainer).toBeDefined();
+    const icon = iconContainer?.querySelector('svg');
+    expect(icon).toBeDefined();
+  });
+
+  it('renders correctly with GitBranch icon', () => {
+    const { container } = render(
+      <ComparisonStatsCard
+        title="Test Title"
+        valueA={50}
+        valueB={50}
+        labelA="Label A"
+        labelB="Label B"
+        icon="GitBranch"
+      />
+    );
+
+    expect(screen.getByText('Test Title')).toBeDefined();
+    const iconContainer = container.querySelector('.rounded-lg.bg-gray-100');
+    expect(iconContainer).toBeDefined();
+    const icon = iconContainer?.querySelector('svg');
+    expect(icon).toBeDefined();
+  });
+
+  it('renders correctly with Users icon', () => {
+    const { container } = render(
+      <ComparisonStatsCard
+        title="Test Title"
+        valueA={50}
+        valueB={50}
+        labelA="Label A"
+        labelB="Label B"
+        icon="Users"
+      />
+    );
+
+    expect(screen.getByText('Test Title')).toBeDefined();
+    const iconContainer = container.querySelector('.rounded-lg.bg-gray-100');
+    expect(iconContainer).toBeDefined();
+    const icon = iconContainer?.querySelector('svg');
+    expect(icon).toBeDefined();
+  });
+
+  it('renders correctly with UserPlus icon', () => {
+    const { container } = render(
+      <ComparisonStatsCard
+        title="Test Title"
+        valueA={50}
+        valueB={50}
+        labelA="Label A"
+        labelB="Label B"
+        icon="UserPlus"
+      />
+    );
+
+    expect(screen.getByText('Test Title')).toBeDefined();
+    const iconContainer = container.querySelector('.rounded-lg.bg-gray-100');
+    expect(iconContainer).toBeDefined();
+    const icon = iconContainer?.querySelector('svg');
+    expect(icon).toBeDefined();
+  });
+
+  it('renders correctly with Award icon', () => {
+    const { container } = render(
+      <ComparisonStatsCard
+        title="Test Title"
+        valueA={50}
+        valueB={50}
+        labelA="Label A"
+        labelB="Label B"
+        icon="Award"
+      />
+    );
+
+    expect(screen.getByText('Test Title')).toBeDefined();
+    const iconContainer = container.querySelector('.rounded-lg.bg-gray-100');
+    expect(iconContainer).toBeDefined();
+    const icon = iconContainer?.querySelector('svg');
+    expect(icon).toBeDefined();
+  });
+
+  it('falls back to Award icon and renders correctly with unknown icon name', () => {
+    const { container } = render(
+      <ComparisonStatsCard
+        title="Test Title"
+        valueA={50}
+        valueB={50}
+        labelA="Label A"
+        labelB="Label B"
+        icon="UnknownIcon"
+      />
+    );
+
+    expect(screen.getByText('Test Title')).toBeDefined();
+    const iconContainer = container.querySelector('.rounded-lg.bg-gray-100');
+    expect(iconContainer).toBeDefined();
+    const icon = iconContainer?.querySelector('svg');
+    expect(icon).toBeDefined();
+  });
+});