test(dashboard): restored previous tests

Author: vaibhav051422-collab

components/dashboard/ComparisonStatsCard.test.tsx

@@ -1,4 +1,3 @@
-/* @vitest-environment jsdom */
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { render, screen } from '@testing-library/react';
 import { describe, expect, it, vi } from 'vitest';
@@ -23,9 +22,9 @@ vi.mock('framer-motion', () => ({
   },
 }));
 
-describe('ComparisonStatsCard responsive breakpoints', () => {
-  it('renders the expected card structure and positive growth indicators', () => {
-    const { container } = render(
+describe('ComparisonStatsCard', () => {
+  it('renders correctly with title, labels and values', () => {
+    render(
       <ComparisonStatsCard
         title="Developer Score"
         valueA={85}
@@ -41,7 +40,204 @@ describe('ComparisonStatsCard responsive breakpoints', () => {
     expect(screen.getByText('User Two')).toBeDefined();
     expect(screen.getByText('85')).toBeDefined();
     expect(screen.getByText('72')).toBeDefined();
+  });
+
+  it('renders a Winner badge on User One when valueA is greater', () => {
+    render(
+      <ComparisonStatsCard
+        title="Developer Score"
+        valueA={100}
+        valueB={50}
+        labelA="User One"
+        labelB="User Two"
+        icon="Award"
+      />
+    );
+
+    const winnerBadges = screen.getAllByText('Winner');
+    expect(winnerBadges.length).toBe(1);
+    expect(screen.getByText('100').parentElement?.innerHTML).toContain('Winner');
+  });
+
+  it('renders a Winner badge on User Two when valueB is greater', () => {
+    render(
+      <ComparisonStatsCard
+        title="Developer Score"
+        valueA={30}
+        valueB={90}
+        labelA="User One"
+        labelB="User Two"
+        icon="Award"
+      />
+    );
+
+    const winnerBadges = screen.getAllByText('Winner');
+    expect(winnerBadges.length).toBe(1);
+    expect(screen.getByText('90').parentElement?.innerHTML).toContain('Winner');
+  });
+
+  it('does not render any Winner badge if values are equal', () => {
+    render(
+      <ComparisonStatsCard
+        title="Developer Score"
+        valueA={50}
+        valueB={50}
+        labelA="User One"
+        labelB="User Two"
+        icon="Award"
+      />
+    );
+
+    expect(screen.queryByText('Winner')).toBeNull();
+  });
+
+  it('renders neutral fallback progress bar when both values are zero', () => {
+    const { container } = render(
+      <ComparisonStatsCard
+        title="Developer Score"
+        valueA={0}
+        valueB={0}
+        labelA="User One"
+        labelB="User Two"
+        icon="Award"
+      />
+    );
+
+    const fallbackBar = container.querySelector('.bg-gray-700\\/50');
+    expect(fallbackBar).toBeDefined();
+  });
+
+  it('renders both progress bar segments when total is greater than zero', () => {
+    const { container } = render(
+      <ComparisonStatsCard
+        title="Developer Score"
+        valueA={75}
+        valueB={25}
+        labelA="User One"
+        labelB="User Two"
+        icon="Award"
+      />
+    );
+
+    const userOneSegment = container.querySelector('.bg-cyan-400');
+    const userTwoSegment = container.querySelector('.bg-purple-400');
+
+    expect(userOneSegment).toBeDefined();
+    expect(userTwoSegment).toBeDefined();
+  });
+
+  it('renders a balanced 50/50 split progress bar without any emerald color highlight when values are equal', () => {
+    const { container } = render(
+      <ComparisonStatsCard
+        title="Developer Score"
+        valueA={50}
+        valueB={50}
+        labelA="User One"
+        labelB="User Two"
+        icon="Award"
+      />
+    );
+
+    const emeraldElement =
+      container.querySelector('[className*="emerald"]') ||
+      container.querySelector('.text-emerald-400');
+
+    expect(emeraldElement).toBeNull();
+    expect(screen.queryByText('Winner')).toBeNull();
+  });
+});
+
+describe('ComparisonStatsCard responsive rendering and growth trends (Variation 3)', () => {
+  it('renders positive growth trend with winner badge for higher value', () => {
+    render(
+      <ComparisonStatsCard
+        title="Streak"
+        valueA={120}
+        valueB={40}
+        labelA="Alice"
+        labelB="Bob"
+        icon="Flame"
+      />
+    );
     expect(screen.getByText('Winner')).toBeDefined();
+    expect(screen.getByText('120')).toBeDefined();
+    expect(screen.getByText('40')).toBeDefined();
+  });
+
+  it('renders negative growth indicator — no winner badge for lower value', () => {
+    render(
+      <ComparisonStatsCard
+        title="Streak"
+        valueA={20}
+        valueB={80}
+        labelA="Alice"
+        labelB="Bob"
+        icon="Flame"
+      />
+    );
+    const winners = screen.getAllByText('Winner');
+    expect(winners.length).toBe(1);
+    expect(screen.getByText('20').className).not.toMatch(/emerald/);
+  });
+
+  it('renders title and icon correctly', () => {
+    render(
+      <ComparisonStatsCard
+        title="Pull Requests"
+        valueA={10}
+        valueB={5}
+        labelA="Dev A"
+        labelB="Dev B"
+        icon="GitBranch"
+      />
+    );
+    expect(screen.getByText(/Pull Requests/i)).toBeDefined();
+    expect(screen.getByText('Dev A')).toBeDefined();
+    expect(screen.getByText('Dev B')).toBeDefined();
+  });
+
+  it('renders zero values without crashing', () => {
+    render(
+      <ComparisonStatsCard
+        title="Commits"
+        valueA={0}
+        valueB={0}
+        labelA="Alice"
+        labelB="Bob"
+        icon="GitCommit"
+      />
+    );
+    expect(screen.queryByText('Winner')).toBeNull();
+  });
+
+  it('renders large values correctly', () => {
+    render(
+      <ComparisonStatsCard
+        title="Total Contributions"
+        valueA={9999}
+        valueB={1}
+        labelA="Alice"
+        labelB="Bob"
+        icon="TrendingUp"
+      />
+    );
+    expect(screen.getByText('9999')).toBeDefined();
+    expect(screen.getByText('Winner')).toBeDefined();
+  });
+});
+
+describe('ComparisonStatsCard responsive breakpoints', () => {
+  it('renders expected card structure with correct HTML nodes', () => {
+    const { container } = render(
+      <ComparisonStatsCard
+        title="Developer Score"
+        valueA={85}
+        valueB={72}
+        labelA="User One"
+        labelB="User Two"
+        icon="Award"
+      />
+    );
 
     const card = container.firstElementChild;
     const header = container.querySelector('.flex.justify-between.items-center.mb-6');
@@ -56,9 +252,13 @@ describe('ComparisonStatsCard responsive breakpoints', () => {
     expect(comparisonGrid?.tagName).toBe('DIV');
     expect(progressBar?.tagName).toBe('DIV');
     expect(divider?.tagName).toBe('DIV');
+
+    expect(screen.getByText('Winner')).toBeDefined();
+    expect(screen.getByText('85')).toBeDefined();
+    expect(screen.getByText('72')).toBeDefined();
   });
 
-  it('keeps the divider responsive and preserves the negative growth state', () => {
+  it('renders responsive divider and preserves winner badge for higher value', () => {
     const { container } = render(
       <ComparisonStatsCard
         title="Streak"
@@ -71,23 +271,19 @@ describe('ComparisonStatsCard responsive breakpoints', () => {
     );
 
     const divider = container.querySelector('.hidden.md\\:block');
-    const winnerBadges = screen.getAllByText('Winner');
+    expect(divider?.tagName).toBe('DIV');
 
-    expect(divider).toBeDefined();
+    const winnerBadges = screen.getAllByText('Winner');
     expect(winnerBadges.length).toBe(1);
-    expect(screen.getByText('Alice')).toBeDefined();
-    expect(screen.getByText('Bob')).toBeDefined();
-    expect(screen.getByText('20')).toBeDefined();
-    expect(screen.getByText('80')).toBeDefined();
-    expect(screen.getByTitle('Alice')).toBeDefined();
-    expect(screen.getByTitle('Bob')).toBeDefined();
+    expect(screen.getByText('80').parentElement?.textContent).toContain('Winner');
 
-    const winnerText = winnerBadges[0].textContent;
-    expect(winnerText).toBe('Winner');
     expect(screen.getByText('20').className).not.toMatch(/emerald/);
+
+    expect(screen.getByTitle('Alice')).toBeDefined();
+    expect(screen.getByTitle('Bob')).toBeDefined();
   });
 
-  it('renders a neutral fallback progress bar when both values are zero', () => {
+  it('renders neutral fallback progress bar and no winner badge when both values are zero', () => {
     const { container } = render(
       <ComparisonStatsCard
         title="Commits"
@@ -100,10 +296,11 @@ describe('ComparisonStatsCard responsive breakpoints', () => {
     );
 
     const progressBar = container.querySelector('.w-full.h-2.bg-gray-100');
-    const fallbackBar = container.querySelector('.w-full.h-full.bg-zinc-300');
-
     expect(progressBar?.tagName).toBe('DIV');
-    expect(fallbackBar?.tagName).toBe('DIV');
+
+    const fallbackBar = container.querySelector('.bg-gray-700\\/50');
+    expect(fallbackBar).toBeDefined();
+
     expect(screen.queryByText('Winner')).toBeNull();
   });
 });