Merge branch 'main' into test/contributors-accessibility

Author: chavanGaneshDatta

app/(root)/dashboard/[username]/page.test.tsx

@@ -93,6 +93,7 @@ describe('DashboardPage', () => {
       currentStreak: 5,
       peakStreak: 15,
       totalContributions: 500,
+      codingHabit: 'Night Owl',
     },
     languages: [{ name: 'TypeScript', percentage: 100, color: '#3178c6' }],
     activity: [],

app/compare/CompareClient.tsx

@@ -16,6 +16,9 @@ import {
   Calendar,
   Trophy,
   Loader2,
+  Moon,
+  Sun,
+  Coffee,
 } from 'lucide-react';
 
 /* ── types ────────────────────────────────────────────────────────────── */
@@ -41,6 +44,7 @@ interface UserStats {
   currentStreak: number;
   peakStreak: number;
   totalContributions: number;
+  codingHabit?: string;
 }
 
 interface LanguageData {
@@ -389,6 +393,111 @@ function CompareSkeleton() {
   );
 }
 
+/* ── helper: coding habit showdown ────────────────────────────────────── */
+
+function CodingHabitCard({
+  username,
+  habit,
+  side,
+}: {
+  username: string;
+  habit?: string;
+  side: 'left' | 'right';
+}) {
+  const isNight = habit === 'Night Owl';
+  const isEarly = habit === 'Early Bird';
+
+  const icon = isNight ? (
+    <Moon size={24} className="text-purple-400" />
+  ) : isEarly ? (
+    <Sun size={24} className="text-amber-400" />
+  ) : (
+    <Coffee size={24} className="text-teal-400" />
+  );
+  const bgClass = isNight
+    ? 'bg-gradient-to-br from-indigo-950 to-purple-950 border-purple-500/30'
+    : isEarly
+      ? 'bg-gradient-to-br from-amber-900/40 to-orange-900/40 border-orange-500/30'
+      : 'bg-gradient-to-br from-teal-900/40 to-emerald-900/40 border-teal-500/30';
+
+  const glowClass = isNight
+    ? 'shadow-[0_0_15px_rgba(168,85,247,0.15)]'
+    : isEarly
+      ? 'shadow-[0_0_15px_rgba(245,158,11,0.15)]'
+      : 'shadow-[0_0_15px_rgba(20,184,166,0.15)]';
+
+  return (
+    <motion.div
+      initial={{ opacity: 0, x: side === 'left' ? -20 : 20 }}
+      whileInView={{ opacity: 1, x: 0 }}
+      viewport={{ once: true }}
+      whileHover={{ scale: 1.02 }}
+      className={`relative overflow-hidden p-6 rounded-2xl border ${bgClass} ${glowClass} transition-all duration-300 flex flex-col items-center justify-center text-center h-full min-h-[140px]`}
+    >
+      <motion.div
+        animate={{ y: [0, -5, 0] }}
+        transition={{ duration: 4, repeat: Infinity, ease: 'easeInOut' }}
+        className="mb-3 z-10"
+      >
+        {icon}
+      </motion.div>
+      <h4 className="text-xs font-bold uppercase tracking-widest text-white/70 mb-1 z-10">
+        @{username}
+      </h4>
+      <h3 className="text-xl font-black tracking-tight text-white z-10">{habit || 'Unknown'}</h3>
+
+      {/* Decorative background elements */}
+      {isNight && (
+        <motion.div
+          animate={{ opacity: [0.3, 0.7, 0.3] }}
+          transition={{ duration: 3, repeat: Infinity }}
+          className="absolute top-4 right-6 text-purple-300/20 text-xs"
+        >
+          ★
+        </motion.div>
+      )}
+      {isEarly && (
+        <motion.div
+          animate={{ rotate: 360 }}
+          transition={{ duration: 20, repeat: Infinity, ease: 'linear' }}
+          className="absolute -bottom-6 -right-6 text-amber-500/10"
+        >
+          <Sun size={80} />
+        </motion.div>
+      )}
+    </motion.div>
+  );
+}
+
+function CodingHabitShowdown({ user1, user2 }: { user1: CompareUserData; user2: CompareUserData }) {
+  return (
+    <div>
+      <h2 className="text-xs text-[#A1A1AA] uppercase tracking-widest font-medium mb-4">
+        Coding Habits
+      </h2>
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-6 relative">
+        <CodingHabitCard
+          username={user1.profile.username}
+          habit={user1.stats.codingHabit}
+          side="left"
+        />
+
+        <div className="hidden md:flex absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 z-10">
+          <div className="w-8 h-8 rounded-full bg-white dark:bg-[#0a0a0a] border-2 border-black/10 dark:border-[rgba(255,255,255,0.08)] flex items-center justify-center shadow-xl">
+            <span className="text-[10px] font-bold text-[#A1A1AA] tracking-wider">VS</span>
+          </div>
+        </div>
+
+        <CodingHabitCard
+          username={user2.profile.username}
+          habit={user2.stats.codingHabit}
+          side="right"
+        />
+      </div>
+    </div>
+  );
+}
+
 /* ── main component ───────────────────────────────────────────────────── */
 
 export default function CompareClient() {
@@ -662,6 +771,9 @@ export default function CompareClient() {
                 </div>
               </div>
 
+              {/* Coding Habits Showdown */}
+              <CodingHabitShowdown user1={d1} user2={d2} />
+
               {/* Language Comparison */}
               <LanguageComparison
                 langsA={d1.languages}

app/components/CopyRepoButton.accessibility.test.tsx

@@ -0,0 +1,55 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+
+import CopyRepoButton from './CopyRepoButton';
+
+vi.mock('lucide-react', () => ({
+  Copy: () => <svg aria-hidden="true" data-testid="copy-icon" />,
+}));
+
+Object.assign(navigator, {
+  clipboard: {
+    writeText: vi.fn().mockResolvedValue(undefined),
+  },
+});
+
+describe('CopyRepoButton accessibility behavior', () => {
+  it('renders as an accessible button with visible label', () => {
+    render(<CopyRepoButton />);
+
+    expect(screen.getByRole('button', { name: /copy url/i })).toBeDefined();
+  });
+
+  it('keeps decorative copy icon hidden from assistive technology', () => {
+    render(<CopyRepoButton />);
+
+    expect(screen.getByTestId('copy-icon').getAttribute('aria-hidden')).toBe('true');
+  });
+
+  it('is keyboard focusable through the native button element', () => {
+    render(<CopyRepoButton />);
+
+    const button = screen.getByRole('button', { name: /copy url/i });
+    button.focus();
+
+    expect(document.activeElement).toBe(button);
+  });
+
+  it('updates accessible button name after successful copy action', async () => {
+    render(<CopyRepoButton />);
+
+    const button = screen.getByRole('button', { name: /copy url/i });
+    fireEvent.click(button);
+
+    expect(await screen.findByRole('button', { name: /copied/i })).toBeDefined();
+  });
+
+  it('preserves semantic button role after interaction', async () => {
+    render(<CopyRepoButton />);
+
+    fireEvent.click(screen.getByRole('button', { name: /copy url/i }));
+
+    expect(await screen.findByRole('button', { name: /copied/i })).toBeDefined();
+    expect(screen.getAllByRole('button')).toHaveLength(1);
+  });
+});

app/components/CopyRepoButton.error-resilience.test.tsx

@@ -0,0 +1,88 @@
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { describe, expect, it, vi, beforeEach } from 'vitest';
+
+import CopyRepoButton from './CopyRepoButton';
+
+vi.mock('lucide-react', () => ({
+  Copy: () => <svg data-testid="copy-icon" />,
+}));
+
+describe('CopyRepoButton error resilience', () => {
+  beforeEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  it('renders successfully during initial mount', () => {
+    render(<CopyRepoButton />);
+
+    expect(screen.getByRole('button', { name: /copy url/i })).toBeDefined();
+  });
+
+  it('does not crash when clipboard write rejects', async () => {
+    Object.assign(navigator, {
+      clipboard: {
+        writeText: vi.fn().mockRejectedValue(new Error('Clipboard failed')),
+      },
+    });
+
+    render(<CopyRepoButton />);
+
+    fireEvent.click(screen.getByRole('button'));
+
+    await waitFor(() => {
+      expect(screen.getByRole('button')).toBeDefined();
+    });
+  });
+
+  it('keeps original label visible after clipboard failure', async () => {
+    Object.assign(navigator, {
+      clipboard: {
+        writeText: vi.fn().mockRejectedValue(new Error('Clipboard failed')),
+      },
+    });
+
+    render(<CopyRepoButton />);
+
+    fireEvent.click(screen.getByRole('button'));
+
+    await waitFor(() => {
+      expect(screen.getByText(/copy url/i)).toBeDefined();
+    });
+  });
+
+  it('renders icon even when copy action fails', async () => {
+    Object.assign(navigator, {
+      clipboard: {
+        writeText: vi.fn().mockRejectedValue(new Error('Clipboard failed')),
+      },
+    });
+
+    render(<CopyRepoButton />);
+
+    fireEvent.click(screen.getByRole('button'));
+
+    await waitFor(() => {
+      expect(screen.getByTestId('copy-icon')).toBeDefined();
+    });
+  });
+
+  it('allows repeated failed copy attempts without crashing', async () => {
+    Object.assign(navigator, {
+      clipboard: {
+        writeText: vi.fn().mockRejectedValue(new Error('Clipboard failed')),
+      },
+    });
+
+    render(<CopyRepoButton />);
+
+    const button = screen.getByRole('button');
+
+    fireEvent.click(button);
+    fireEvent.click(button);
+    fireEvent.click(button);
+
+    await waitFor(() => {
+      expect(screen.getByRole('button')).toBeDefined();
+    });
+  });
+});

app/components/CopyRepoButton.theme-contrast.test.tsx

@@ -0,0 +1,55 @@
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+
+import CopyRepoButton from './CopyRepoButton';
+
+vi.mock('lucide-react', () => ({
+  Copy: () => <svg data-testid="copy-icon" />,
+}));
+
+describe('CopyRepoButton theme contrast behavior', () => {
+  it('includes light mode background and border contrast classes', () => {
+    render(<CopyRepoButton />);
+
+    const button = screen.getByRole('button', { name: /copy url/i });
+
+    expect(button.className).toContain('bg-white/60');
+    expect(button.className).toContain('border-black/10');
+  });
+
+  it('includes dark mode background and border contrast classes', () => {
+    render(<CopyRepoButton />);
+
+    const button = screen.getByRole('button', { name: /copy url/i });
+
+    expect(button.className).toContain('dark:bg-white/5');
+    expect(button.className).toContain('dark:border-white/10');
+  });
+
+  it('keeps readable font weight for button text', () => {
+    render(<CopyRepoButton />);
+
+    expect(screen.getByRole('button').className).toContain('font-semibold');
+  });
+
+  it('preserves spacing classes so icon and text do not overlap', () => {
+    render(<CopyRepoButton />);
+
+    const button = screen.getByRole('button');
+
+    expect(button.className).toContain('inline-flex');
+    expect(button.className).toContain('items-center');
+    expect(button.className).toContain('gap-2');
+  });
+
+  it('keeps transition and hover classes without removing contrast styling', () => {
+    render(<CopyRepoButton />);
+
+    const button = screen.getByRole('button');
+
+    expect(button.className).toContain('transition-all');
+    expect(button.className).toContain('hover:scale-105');
+    expect(button.className).toContain('bg-white/60');
+    expect(button.className).toContain('dark:bg-white/5');
+  });
+});

app/components/Icons.empty-fallback.test.tsx

@@ -0,0 +1,43 @@
+import { render } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+
+import { BoxIcon, CheckIcon, CloseIcon, CopyIcon, ZapIcon } from './Icons';
+
+type IconProps = React.SVGProps<SVGSVGElement>;
+
+vi.mock('lucide-react', () => ({
+  Copy: (props: IconProps) => <svg data-testid="copy-icon" {...props} />,
+  Zap: (props: IconProps) => <svg data-testid="zap-icon" {...props} />,
+  Box: (props: IconProps) => <svg data-testid="box-icon" {...props} />,
+  Check: (props: IconProps) => <svg data-testid="check-icon" {...props} />,
+  X: (props: IconProps) => <svg data-testid="close-icon" {...props} />,
+}));
+
+describe('Icons empty fallback behavior', () => {
+  it('renders CopyIcon without crashing', () => {
+    const { getByTestId } = render(<CopyIcon />);
+    expect(getByTestId('copy-icon')).toBeDefined();
+  });
+
+  it('renders ZapIcon without crashing', () => {
+    const { getByTestId } = render(<ZapIcon />);
+    expect(getByTestId('zap-icon')).toBeDefined();
+  });
+
+  it('renders BoxIcon without crashing', () => {
+    const { getByTestId } = render(<BoxIcon />);
+    expect(getByTestId('box-icon')).toBeDefined();
+  });
+
+  it('renders CheckIcon with fallback styling', () => {
+    const { getByTestId } = render(<CheckIcon />);
+    const icon = getByTestId('check-icon');
+
+    expect(icon.getAttribute('stroke')).toBe('#10b981');
+  });
+
+  it('renders CloseIcon without runtime errors', () => {
+    const { getByTestId } = render(<CloseIcon />);
+    expect(getByTestId('close-icon')).toBeDefined();
+  });
+});