test(dashboard): add LanguageChart gradient tests

Author: sanzzzz-g

components/dashboard/LanguageChart.test.tsx

@@ -2,6 +2,7 @@
 import { render, screen } from '@testing-library/react';
 import { describe, expect, it, vi } from 'vitest';
 import LanguageChart from './LanguageChart';
+import { buildGradientStops } from './LanguageChart';
 
 vi.mock('framer-motion', () => ({
   motion: {
@@ -44,3 +45,51 @@ describe('LanguageChart', () => {
     expect(screen.getByText('JavaScript')).toBeDefined();
   });
 });
+
+describe('buildGradientStops', () => {
+  it('builds gradient for one language', () => {
+    const result = buildGradientStops([
+      {
+        name: 'TypeScript',
+        percentage: 100,
+        color: '#3178c6',
+      },
+    ]);
+
+    expect(result).toBe('#3178c6 0% 100%');
+  });
+
+  it('builds gradient for two languages', () => {
+    const result = buildGradientStops([
+      {
+        name: 'TypeScript',
+        percentage: 60,
+        color: '#3178c6',
+      },
+      {
+        name: 'JavaScript',
+        percentage: 40,
+        color: '#f7df1e',
+      },
+    ]);
+
+    expect(result).toBe('#3178c6 0% 60%, #f7df1e 60% 100%');
+  });
+
+  it('handles decimal percentages correctly', () => {
+    const result = buildGradientStops([
+      {
+        name: 'TS',
+        percentage: 33.3,
+        color: '#3178c6',
+      },
+      {
+        name: 'JS',
+        percentage: 66.7,
+        color: '#f7df1e',
+      },
+    ]);
+
+    expect(result).toBe('#3178c6 0% 33.3%, #f7df1e 33.3% 100%');
+  });
+});

components/dashboard/LanguageChart.tsx

@@ -3,6 +3,23 @@
 import { motion } from 'framer-motion';
 import { LanguageData } from '@/types/dashboard';
 
+export function buildGradientStops(languages: LanguageData[]): string {
+  return languages
+    .reduce<{ stops: string[]; current: number }>(
+      (acc, lang) => {
+        const next = acc.current + lang.percentage;
+
+        acc.stops.push(`${lang.color} ${acc.current}% ${next}%`);
+
+        return {
+          stops: acc.stops,
+          current: next,
+        };
+      },
+      { stops: [], current: 0 }
+    )
+    .stops.join(', ');
+}
 export default function LanguageChart({ languages }: { languages: LanguageData[] }) {
   if (languages.length === 0) {
     return (
@@ -24,16 +41,7 @@ export default function LanguageChart({ languages }: { languages: LanguageData[]
     );
   }
 
-  const gradientStops = languages
-    .reduce<{ stops: string[]; current: number }>(
-      (acc, lang) => {
-        const next = acc.current + lang.percentage;
-        acc.stops.push(`${lang.color} ${acc.current}% ${next}%`);
-        return { stops: acc.stops, current: next };
-      },
-      { stops: [], current: 0 }
-    )
-    .stops.join(', ');
+  const gradientStops = buildGradientStops(languages);
 
   return (
     <motion.div