Merge branch 'main' into fix/og-bypass-cache

Author: Kokila-chandrakar

components/Leaderboard.massive-scaling.test.tsx

@@ -0,0 +1,136 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render } from '@testing-library/react';
+import React from 'react';
+import Leaderboard, { Contributor } from './Leaderboard';
+
+// Mock Next.js Image
+vi.mock('next/image', () => ({
+  default: (props: React.ImgHTMLAttributes<HTMLImageElement>) => <img alt="mock" {...props} />,
+}));
+
+// Mock Framer Motion
+vi.mock('framer-motion', async () => {
+  const actual = await vi.importActual('framer-motion');
+  return {
+    ...actual,
+    motion: {
+      div: ({
+        children,
+        className,
+        onClick,
+        style,
+      }: {
+        children?: React.ReactNode;
+        className?: string;
+        onClick?: React.MouseEventHandler<HTMLDivElement>;
+        style?: React.CSSProperties;
+      }) => (
+        <div className={className} onClick={onClick} style={style} data-testid="motion-div">
+          {children}
+        </div>
+      ),
+    },
+  };
+});
+
+// IntersectionObserver mock
+beforeEach(() => {
+  const mockIntersectionObserver = vi.fn();
+  mockIntersectionObserver.mockReturnValue({
+    observe: () => null,
+    unobserve: () => null,
+    disconnect: () => null,
+  });
+  window.IntersectionObserver =
+    mockIntersectionObserver as unknown as typeof window.IntersectionObserver;
+});
+
+describe('Leaderboard - Massive Scaling & High Bounds (Issue #2754 Equivalent)', () => {
+  it('Massive Array Population (Render Bounds): handles processing arrays of 1000+ contributors cleanly without crashing', () => {
+    const massiveContributors = Array.from({ length: 1005 }).map((_, i) => ({
+      id: i,
+      login: `user${i}`,
+      avatar_url: `https://avatars.githubusercontent.com/u/${i}?v=4`,
+      contributions: 100 - i, // fake sort
+      html_url: `https://github.com/user${i}`,
+    }));
+
+    const start = performance.now();
+    const { container } = render(<Leaderboard contributors={massiveContributors} />);
+    const end = performance.now();
+
+    // Verify it extracts podium and leaves 1002 in the list
+    const listEntries = container.querySelectorAll('.flex.items-center.justify-between.p-4');
+    expect(listEntries.length).toBe(1002);
+
+    // Performance bounds check (bumped to 5000ms to account for slower CI runners)
+    expect(end - start).toBeLessThan(5000);
+  });
+
+  it('Extreme High Contribution Metric Bounds: safely renders millions of commits without integer layout overflow', () => {
+    const highMetricData: Contributor[] = [
+      { id: 1, login: 'whale', avatar_url: '', html_url: '', contributions: 999999999 },
+      { id: 2, login: 'shark', avatar_url: '', html_url: '', contributions: 888888888 },
+      { id: 3, login: 'dolphin', avatar_url: '', html_url: '', contributions: 777777777 },
+      { id: 4, login: 'fish', avatar_url: '', html_url: '', contributions: 666666666 },
+    ];
+
+    const { getByText } = render(<Leaderboard contributors={highMetricData} />);
+
+    // Podium text
+    expect(getByText('999999999')).toBeTruthy();
+    expect(getByText('888888888')).toBeTruthy();
+    expect(getByText('777777777')).toBeTruthy();
+
+    // List text
+    expect(getByText('666666666')).toBeTruthy();
+  });
+
+  it('Rank Formatting Overflow Prevention: ensures extremely high index numbers do not break grid bounds', () => {
+    // Check rank #1000+ string bounds
+    const highRankData = Array.from({ length: 1500 }).map((_, i) => ({
+      id: i,
+      login: `user${i}`,
+      avatar_url: '',
+      contributions: 10,
+      html_url: '',
+    }));
+
+    const { getByText } = render(<Leaderboard contributors={highRankData} />);
+
+    // Verify #1000 renders cleanly inside the bounding flex box
+    const highRankItem = getByText('#1000');
+    expect(highRankItem).toBeTruthy();
+    expect(highRankItem.className).toContain('font-mono');
+  });
+
+  it('Podium Extraction Memory Allocation: strictly segments exactly the top 3 nodes regardless of massive data input sizes', () => {
+    const massiveData = Array.from({ length: 500 }).map((_, i) => ({
+      id: i,
+      login: `user${i}`,
+      avatar_url: '',
+      contributions: 10,
+      html_url: '',
+    }));
+
+    const { container } = render(<Leaderboard contributors={massiveData} />);
+
+    // Check that we only rendered 3 PodiumItems (Rank 1, 2, 3)
+    const crowns = container.querySelectorAll('.absolute.-top-8.z-30'); // Crown icons exist in podiums only
+    expect(crowns.length).toBe(3);
+  });
+
+  it('Structural Text Wrapping Safety: extreme long usernames truncate without clipping or blowing out DOM boundaries', () => {
+    const extremeNameData: Contributor[] = [
+      { id: 1, login: 'a'.repeat(500), avatar_url: '', html_url: '', contributions: 100 },
+      { id: 2, login: 'b'.repeat(500), avatar_url: '', html_url: '', contributions: 90 },
+      { id: 3, login: 'c'.repeat(500), avatar_url: '', html_url: '', contributions: 80 },
+    ];
+
+    const { getByText } = render(<Leaderboard contributors={extremeNameData} />);
+
+    const longNameUser = getByText('a'.repeat(500));
+    // Verify it uses truncate to stop boundary breakages
+    expect(longNameUser.className).toContain('truncate');
+  });
+});

components/Leaderboard.mouse-interactivity.test.tsx

@@ -0,0 +1,106 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render, fireEvent } from '@testing-library/react';
+import React from 'react';
+import Leaderboard, { Contributor } from './Leaderboard';
+
+// Mock Next.js Image
+vi.mock('next/image', () => ({
+  default: (props: React.ImgHTMLAttributes<HTMLImageElement>) => <img alt="mock" {...props} />,
+}));
+
+// Mock framer-motion to render children with classes and event handlers
+vi.mock('framer-motion', async () => {
+  const actual = await vi.importActual('framer-motion');
+  return {
+    ...actual,
+    motion: {
+      div: ({
+        children,
+        className,
+        onClick,
+        style,
+      }: {
+        children?: React.ReactNode;
+        className?: string;
+        onClick?: React.MouseEventHandler<HTMLDivElement>;
+        style?: React.CSSProperties;
+      }) => (
+        <div className={className} onClick={onClick} style={style} data-testid="motion-div">
+          {children}
+        </div>
+      ),
+    },
+  };
+});
+
+describe('Leaderboard - Mouse Interactivity & Touch Events (Issue #2757 Equivalent)', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  const mockData: Contributor[] = [
+    { id: 1, login: 'user1', avatar_url: '', html_url: '', contributions: 100 },
+    { id: 2, login: 'user2', avatar_url: '', html_url: '', contributions: 90 },
+    { id: 3, login: 'user3', avatar_url: '', html_url: '', contributions: 80 },
+    { id: 4, login: 'user4', avatar_url: '', html_url: '', contributions: 70 },
+  ];
+
+  it('Interactive Pointer Detection (Cursor Hovers Equivalent): applies explicit cursor-pointer classes on interactive elements', () => {
+    const { container } = render(<Leaderboard contributors={mockData} />);
+
+    // Check podiums
+    const podiums = container.querySelectorAll('.w-28.sm\\:w-36.cursor-pointer');
+    expect(podiums.length).toBeGreaterThan(0);
+
+    // Check list entries
+    const listEntries = container.querySelectorAll(
+      '.flex.items-center.justify-between.p-4.cursor-pointer'
+    );
+    expect(listEntries.length).toBe(1); // user4
+  });
+
+  it('Event Propagation to DOM Targets (Touch Propagation Equivalent): fires document scroll bounds safely on click', () => {
+    const scrollIntoViewMock = vi.fn();
+    document.getElementById = vi.fn().mockReturnValue({
+      scrollIntoView: scrollIntoViewMock,
+    });
+
+    const { container } = render(<Leaderboard contributors={mockData} />);
+
+    const listItem = container.querySelector(
+      '.flex.items-center.justify-between.p-4.cursor-pointer'
+    ) as HTMLElement;
+    fireEvent.click(listItem);
+
+    // Verifies the target scroll view was intercepted and fired
+    expect(document.getElementById).toHaveBeenCalledWith('contributors');
+    expect(scrollIntoViewMock).toHaveBeenCalledWith({ behavior: 'smooth' });
+  });
+
+  it('Hover State Visibility (Tooltips Equivalent): transitions text and background colors via group-hover structurally', () => {
+    const { container } = render(<Leaderboard contributors={mockData} />);
+
+    const listItem = container.querySelector(
+      '.flex.items-center.justify-between.p-4.cursor-pointer'
+    );
+    // Ensure the Tailwind structural classes that handle the state change are natively present
+    expect(listItem?.className).toContain('hover:bg-black/[0.06]');
+    expect(listItem?.className).toContain('group');
+  });
+
+  it('Mouse Leave Recovery (Hiding Overlay visuals Equivalent): ensures transition duration limits are bounded safely', () => {
+    const { container } = render(<Leaderboard contributors={mockData} />);
+
+    const listItems = container.querySelectorAll('.transition-all.duration-300');
+    // Validates the recovery speeds don't trap the user in floating states
+    expect(listItems.length).toBeGreaterThan(0);
+  });
+
+  it('Nested Interactive Scopes: validates avatar glow triggers specifically isolate under parental group hover boundaries', () => {
+    const { container } = render(<Leaderboard contributors={mockData} />);
+
+    // Verify the avatar borders only activate under group-hover targeting
+    const listAvatar = container.querySelector('.group-hover\\:border-cyan-400\\/40');
+    expect(listAvatar).toBeTruthy();
+  });
+});

lib/svg/glacier.test.ts

@@ -0,0 +1,124 @@
+import { describe, it, expect } from 'vitest';
+import { themes } from './themes';
+import { generateSVG } from './generator';
+import type { StreakStats, ContributionCalendar, BadgeParams } from '../../types/index';
+
+const mockStats: StreakStats = {
+  currentStreak: 5,
+  longestStreak: 10,
+  totalContributions: 120,
+  todayDate: '2024-06-01',
+};
+
+const mockCalendar: ContributionCalendar = {
+  totalContributions: 120,
+  weeks: [
+    {
+      contributionDays: [
+        { contributionCount: 3, date: '2024-05-26' },
+        { contributionCount: 0, date: '2024-05-27' },
+        { contributionCount: 5, date: '2024-05-28' },
+        { contributionCount: 2, date: '2024-05-29' },
+        { contributionCount: 4, date: '2024-05-30' },
+        { contributionCount: 1, date: '2024-05-31' },
+        { contributionCount: 6, date: '2024-06-01' },
+      ],
+    },
+  ],
+};
+
+const glacierAccent = Array.isArray(themes.glacier.accent)
+  ? themes.glacier.accent[0]
+  : themes.glacier.accent;
+
+const mockParams = {
+  user: 'octocat',
+  bg: themes.glacier.bg,
+  text: themes.glacier.text,
+  accent: glacierAccent,
+  size: 'medium',
+  scale: 'linear',
+  grace: 1,
+  refresh: false,
+  hide_title: false,
+  hide_background: false,
+  hide_stats: false,
+  lang: 'en',
+  view: 'default',
+  delta_format: 'percent',
+  mode: 'commits',
+  entrance: 'rise',
+  format: 'svg',
+  radius: 8,
+  speed: '8s',
+  opacity: 1.0,
+  labels: false,
+  shading: false,
+  gradient: false,
+  disable_particles: false,
+  glow: true,
+} as BadgeParams;
+
+const HEX_REGEX = /^[0-9a-fA-F]{3}$|^[0-9a-fA-F]{6}$/;
+
+function hexToRgb(hex: string): [number, number, number] {
+  const h = hex.replace('#', '');
+  const full =
+    h.length === 3
+      ? h
+          .split('')
+          .map((c) => c + c)
+          .join('')
+      : h;
+  const n = parseInt(full, 16);
+  return [(n >> 16) & 255, (n >> 8) & 255, n & 255];
+}
+
+function relativeLuminance(hex: string): number {
+  const [r, g, b] = hexToRgb(hex).map((c) => {
+    const s = c / 255;
+    return s <= 0.03928 ? s / 12.92 : Math.pow((s + 0.055) / 1.055, 2.4);
+  });
+  return 0.2126 * r + 0.7152 * g + 0.0722 * b;
+}
+
+function contrastRatio(hex1: string, hex2: string): number {
+  const l1 = relativeLuminance(hex1);
+  const l2 = relativeLuminance(hex2);
+  const lighter = Math.max(l1, l2);
+  const darker = Math.min(l1, l2);
+  return (lighter + 0.05) / (darker + 0.05);
+}
+
+describe('glacier theme', () => {
+  it('exists as a key in the themes object', () => {
+    expect(Object.hasOwn(themes, 'glacier')).toBe(true);
+  });
+
+  it('has valid hex color strings for bg, text, and accent', () => {
+    const { bg, text, accent } = themes.glacier;
+    const accentStr = Array.isArray(accent) ? accent[0] : accent;
+    expect(HEX_REGEX.test(bg)).toBe(true);
+    expect(HEX_REGEX.test(text)).toBe(true);
+    expect(HEX_REGEX.test(accentStr)).toBe(true);
+  });
+
+  it('has the correct specific color values', () => {
+    expect(themes.glacier.bg).toBe('e0f2fe');
+    expect(themes.glacier.text).toBe('0369a1');
+    expect(glacierAccent).toBe('06b6d4');
+  });
+
+  it('meets WCAG AA contrast ratio (≥ 4.5) between bg and text', () => {
+    const ratio = contrastRatio(themes.glacier.bg, themes.glacier.text);
+    expect(ratio).toBeGreaterThanOrEqual(4.5);
+  });
+
+  it('generates SVG output containing the glacier theme hex colors', () => {
+    const svg = generateSVG(mockStats, mockParams, mockCalendar);
+    expect(typeof svg).toBe('string');
+    expect(svg.length).toBeGreaterThan(100);
+    expect(svg).toMatch(new RegExp(`#?${glacierAccent}`, 'i'));
+    expect(svg).toContain('<svg');
+  });
+});