test(dashboard): add responsive ComparisonStatsCard coverag

Author: vaibhav051422-collab

components/dashboard/ComparisonStatsCard.test.tsx

@@ -1,3 +1,4 @@
+/* @vitest-environment jsdom */
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { render, screen } from '@testing-library/react';
 import { describe, expect, it, vi } from 'vitest';
@@ -22,9 +23,9 @@ vi.mock('framer-motion', () => ({
   },
 }));
 
-describe('ComparisonStatsCard', () => {
-  it('renders correctly with title, labels and values', () => {
-    render(
+describe('ComparisonStatsCard responsive breakpoints', () => {
+  it('renders the expected card structure and positive growth indicators', () => {
+    const { container } = render(
       <ComparisonStatsCard
         title="Developer Score"
         valueA={85}
@@ -40,132 +41,25 @@ describe('ComparisonStatsCard', () => {
     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.getByText('Winner')).toBeDefined();
 
-    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 card = container.firstElementChild;
+    const header = container.querySelector('.flex.justify-between.items-center.mb-6');
+    const comparisonGrid = container.querySelector(
+      '.grid.grid-cols-2.gap-4.items-center.mb-6.relative'
     );
-
-    const fallbackBar = container.querySelector('.bg-gray-700\\/50');
-
-    expect(fallbackBar).toBeDefined();
+    const progressBar = container.querySelector('.w-full.h-2.bg-gray-100');
+    const divider = container.querySelector('.hidden.md\\:block');
+
+    expect(card?.tagName).toBe('DIV');
+    expect(header?.tagName).toBe('DIV');
+    expect(comparisonGrid?.tagName).toBe('DIV');
+    expect(progressBar?.tagName).toBe('DIV');
+    expect(divider?.tagName).toBe('DIV');
   });
 
-  it('renders both progress bar segments when total is greater than zero', () => {
+  it('keeps the divider responsive and preserves the negative growth state', () => {
     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}
@@ -175,29 +69,26 @@ describe('ComparisonStatsCard responsive rendering and growth trends (Variation
         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();
+    const divider = container.querySelector('.hidden.md\\:block');
+    const winnerBadges = screen.getAllByText('Winner');
+
+    expect(divider).toBeDefined();
+    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();
+
+    const winnerText = winnerBadges[0].textContent;
+    expect(winnerText).toBe('Winner');
+    expect(screen.getByText('20').className).not.toMatch(/emerald/);
   });
 
-  it('renders zero values without crashing', () => {
-    render(
+  it('renders a neutral fallback progress bar when both values are zero', () => {
+    const { container } = render(
       <ComparisonStatsCard
         title="Commits"
         valueA={0}
@@ -207,21 +98,12 @@ describe('ComparisonStatsCard responsive rendering and growth trends (Variation
         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();
+    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');
+    expect(screen.queryByText('Winner')).toBeNull();
   });
 });