Merge branch 'main' into fix/distributed-cache-stampede

Author: JhaSourav07

app/api/notify/route.test.ts

@@ -1,6 +1,7 @@
 import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
 import { NextRequest } from 'next/server';
 import { GET, POST } from './route';
+import dbConnect from '@/lib/mongodb';
 
 // Mock dependencies
 vi.mock('@/lib/mongodb', () => ({ default: vi.fn() }));
@@ -88,6 +89,7 @@ describe('POST /api/notify', () => {
     expect(res.status).toBe(400);
     const data = await res.json();
     expect(data.message).toContain('Malformed JSON');
+    expect(dbConnect).not.toHaveBeenCalled();
   });
 
   // ── Rate limiting ────────────────────────────────────────────────────────

app/api/streak/route.test.ts

@@ -103,6 +103,18 @@ describe('GET /api/streak', () => {
   });
 
   describe('parameter validation', () => {
+    it('returns 400 when grace=-1 is provided', async () => {
+      const response = await GET(
+        makeRequest({
+          user: 'octocat',
+          grace: '-1',
+        })
+      );
+      expect(response.status).toBe(400);
+      const body = await response.json();
+      expect(body.details.fieldErrors.grace[0]).toBe('grace must be an integer between 0 and 7');
+    });
+
     it('returns 400 Bad Request when ?layout= is set to an unsupported format', async () => {
       const response = await GET(
         makeRequest({
@@ -305,18 +317,15 @@ describe('GET /api/streak', () => {
       expect(fetchGitHubContributions).toHaveBeenCalled();
     });
 
-    it('returns valid SVG when grace exceeds max value', async () => {
+    it('returns 400 when grace exceeds max value', async () => {
       const response = await GET(
         makeRequest({
           user: 'octocat',
           grace: '999',
         })
       );
 
-      expect(response.status).toBe(200);
-
-      const body = await response.text();
-      expect(body).toContain('<svg');
+      expect(response.status).toBe(400);
     });
 
     it('embeds the username (uppercased) in the SVG title', async () => {

app/customize/components/ControlsPanel.tsx

@@ -277,14 +277,35 @@ export function ControlsPanel({
 
         <ControlRow label="Font">
           <div className="relative">
-            <StyledSelect id="font-select" value={font} onChange={(v) => onFontChange(v as Font)}>
+            <StyledSelect
+              id="font-select"
+              value={FONTS.some((f) => f.value === font) ? font : 'custom'}
+              onChange={(v) => {
+                if (v === 'custom') {
+                  onFontChange('' as Font);
+                } else {
+                  onFontChange(v as Font);
+                }
+              }}
+            >
               {FONTS.map((fontOption) => (
                 <option key={fontOption.value} value={fontOption.value}>
                   {fontOption.label}
                 </option>
               ))}
+              <option value="custom">Custom Google Font...</option>
             </StyledSelect>
           </div>
+          {!FONTS.some((f) => f.value === font) && (
+            <input
+              id="font-custom-input"
+              type="text"
+              value={font}
+              onChange={(e) => onFontChange(e.target.value as Font)}
+              placeholder="e.g. Orbitron, Space Mono, Inter"
+              className="w-full bg-gray-100/80 backdrop-blur-md border border-black/10 dark:bg-white/[0.03] dark:border-white/10 rounded-xl px-4 py-2.5 text-sm font-mono text-black dark:text-emerald-300 placeholder:text-gray-400 dark:placeholder:text-white/60 outline-none focus:border-emerald-500/50 transition-colors mt-2"
+            />
+          )}
         </ControlRow>
 
         <ControlRow label="Border Radius">

app/customize/components/ThemeQuickPresets.css

@@ -92,3 +92,28 @@
   border-radius: 50%;
   background: rgba(255, 255, 255, 0.85);
 }
+.theme-quick-presets {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  width: 100%;
+  max-width: 100%;
+}
+
+@media (max-width: 640px) {
+  .theme-quick-presets {
+    flex-wrap: nowrap;
+    overflow-x: auto;
+    overflow-y: hidden;
+    width: 100%;
+    max-width: calc(100vw - 96px);
+    padding-bottom: 8px;
+    scroll-snap-type: x proximity;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  .theme-quick-presets .tqp-btn {
+    flex: 0 0 auto;
+    scroll-snap-align: start;
+  }
+}

app/customize/components/ThemeQuickPresets.test.tsx

@@ -86,31 +86,76 @@ describe('ThemeQuickPresets', () => {
   });
 });
 
-describe('ThemeQuickPresets responsive rendering', () => {
+describe('ThemeQuickPresets responsive rendering & high-contrast', () => {
   const onThemeChange = vi.fn();
 
   beforeEach(() => {
     onThemeChange.mockClear();
   });
 
-  it('renders every preset with accessible labels, high-contrast styling, and wrap layout', () => {
+  it('checks rendering of preset buttons on sm and lg viewports', () => {
+    window.innerWidth = 375;
+    window.dispatchEvent(new Event('resize'));
+
+    const { rerender } = render(<ThemeQuickPresets theme="dark" onThemeChange={onThemeChange} />);
+
+    expect(screen.getAllByRole('button', { name: /apply .+ theme/i })).toHaveLength(
+      validKeys.length
+    );
+
+    window.innerWidth = 1280;
+    window.dispatchEvent(new Event('resize'));
+
+    rerender(<ThemeQuickPresets theme="dark" onThemeChange={onThemeChange} />);
+
+    expect(screen.getAllByRole('button', { name: /apply .+ theme/i })).toHaveLength(
+      validKeys.length
+    );
+  });
+
+  it('checks rendering of all preset buttons with accessible labels', () => {
     render(<ThemeQuickPresets theme="dark" onThemeChange={onThemeChange} />);
 
     const presetButtons = screen.getAllByRole('button', { name: /apply .+ theme/i });
     expect(presetButtons).toHaveLength(validKeys.length);
+  });
 
+  it('active preset is announced to screen readers via aria-pressed', () => {
+    render(<ThemeQuickPresets theme="dark" onThemeChange={onThemeChange} />);
     expect(
       screen.getByRole('button', { name: /apply dark theme/i }).getAttribute('aria-pressed')
     ).toBe('true');
+  });
 
-    const highContrastButton = screen.getByRole('button', { name: /apply highcontrast theme/i });
-    expect(highContrastButton).toBeDefined();
-    expect(highContrastButton.getAttribute('title')).toBe('Highcontrast');
-    expect(highContrastButton.getAttribute('style')).toContain('rgb(10, 10, 10)');
+  it('check if wrapper div uses flex and wrap so buttons reflow on narrow viewports', () => {
+    render(<ThemeQuickPresets theme="dark" onThemeChange={onThemeChange} />);
+    const buttons = screen.getAllByRole('button');
+    const grid = buttons.at(0)?.parentElement;
 
-    const grid = highContrastButton.closest('div');
     expect(grid).not.toBeNull();
-    expect(grid?.style.display).toBe('flex');
-    expect(grid?.style.flexWrap).toBe('wrap');
+    expect(grid?.className).toContain('theme-quick-presets');
+  });
+
+  it('check if each preset button has theme bg colour(inline)', () => {
+    render(<ThemeQuickPresets theme="dark" onThemeChange={onThemeChange} />);
+    const buttons = screen.getAllByRole('button');
+
+    buttons.forEach((btn) => {
+      expect(btn.getAttribute('style')).not.toBeNull();
+      expect(btn.getAttribute('style')).toMatch(/background/i);
+    });
+  });
+
+  it('checking if highcontrast is inactive when different theme is active', () => {
+    render(<ThemeQuickPresets theme="dark" onThemeChange={onThemeChange} />);
+    const hcBtn = screen.getByRole('button', { name: /apply highcontrast theme/i });
+
+    expect(hcBtn.getAttribute('aria-pressed')).toBe('false');
+  });
+
+  it('check if highcontrast button becomes active when selected', () => {
+    render(<ThemeQuickPresets theme="highcontrast" onThemeChange={onThemeChange} />);
+    const hcBtn = screen.getByRole('button', { name: /apply highcontrast theme/i });
+    expect(hcBtn.getAttribute('aria-pressed')).toBe('true');
   });
 });

app/customize/components/ThemeQuickPresets.tsx

@@ -519,7 +519,7 @@ const ICON_MAP: Record<string, (c: IC) => ReactElement> = {
 export function ThemeQuickPresets({ theme, onThemeChange }: ThemeQuickPresetsProps): ReactElement {
   return (
     <>
-      <div style={{ display: 'flex', flexWrap: 'wrap', gap: '6px' }}>
+      <div className="theme-quick-presets">
         {THEME_KEYS.filter((key) => key !== 'auto' && key !== 'random').map((key) => {
           const t = themes[key as ThemeKey];
           if (!t) return null;

app/customize/types.ts

@@ -34,7 +34,7 @@ export const FONTS = [
   { value: 'roboto', label: 'Roboto' },
 ] as const satisfies readonly { value: string; label: string }[];
 
-export type Font = (typeof FONTS)[number]['value'];
+export type Font = (typeof FONTS)[number]['value'] | string;
 
 export const VIEW_MODES = [
   { value: 'default', label: 'Default' },

app/layout.tsx

@@ -66,8 +66,26 @@ export const metadata: Metadata = {
 
 export default function RootLayout({ children }: { children: React.ReactNode }) {
   return (
-    <html lang="en">
-      <body className={`${inter.className} bg-black`}>
+    <html lang="en" suppressHydrationWarning>
+      <head>
+        <script
+          dangerouslySetInnerHTML={{
+            __html: `
+              try {
+                const storedTheme = window.localStorage.getItem('theme');
+                if (storedTheme === 'light') {
+                  document.documentElement.classList.remove('dark');
+                  document.documentElement.style.colorScheme = 'light';
+                } else {
+                  document.documentElement.classList.add('dark');
+                  document.documentElement.style.colorScheme = 'dark';
+                }
+              } catch (_) {}
+            `,
+          }}
+        />
+      </head>
+      <body className={inter.className}>
         <ScrollRestoration />
         <BrandParticles />
         <Navbar />

components/dashboard/RadarChart.test.tsx

@@ -77,6 +77,17 @@ describe('RadarChart', () => {
     expect(screen.getAllByText('Python')).toBeDefined();
   });
 
+  it('deduplicates shared languages so TypeScript appears as a single axis label', () => {
+    const langsA = [{ name: 'TypeScript', percentage: 70, color: '#3178c6' }];
+    const langsB = [{ name: 'TypeScript', percentage: 50, color: '#3178c6' }];
+
+    render(<RadarChart languagesA={langsA} languagesB={langsB} labelA="User A" labelB="User B" />);
+
+    // TypeScript should appear exactly once as an axis label (SVG <text>) and once
+    // in the bottom stats table — 2 total, not 4 (which would indicate two separate axes)
+    expect(screen.getAllByText('TypeScript')).toHaveLength(2);
+  });
+
   it('scales axis points dynamically based on max score in data', () => {
     const highScoreLangs = [
       { name: 'TypeScript', percentage: 100, color: '#3178c6' },

lib/cache.test.ts

@@ -447,6 +447,51 @@ describe('TTLCache', () => {
       cache.destroy();
     });
 
+    it('preserves Date instance with current timestamp (new Date())', () => {
+      const cache = new TTLCache<Date>();
+
+      const now = new Date();
+
+      cache.set('current-date', now, 60_000);
+
+      const cached = cache.get('current-date');
+
+      expect(cached).toBeInstanceOf(Date);
+      expect(cached?.getTime()).toBe(now.getTime());
+      expect(cached?.toISOString()).toBe(now.toISOString());
+
+      cache.destroy();
+    });
+
+    it('preserves Date instance nested in object with mixed types', () => {
+      const cache = new TTLCache<{
+        id: number;
+        name: string;
+        created: Date;
+        isActive: boolean;
+      }>();
+
+      const created = new Date('2024-03-15T10:30:45.123Z');
+      const data = {
+        id: 42,
+        name: 'Test Event',
+        created: created,
+        isActive: true,
+      };
+
+      cache.set('event', data, 60_000);
+
+      const cached = cache.get('event');
+
+      expect(cached?.id).toBe(42);
+      expect(cached?.name).toBe('Test Event');
+      expect(cached?.isActive).toBe(true);
+      expect(cached?.created).toBeInstanceOf(Date);
+      expect(cached?.created.toISOString()).toBe(created.toISOString());
+
+      cache.destroy();
+    });
+
     it('stores and retrieves nested object values', () => {
       const cache = new TTLCache<{
         user: { id: number; name: string };
@@ -504,6 +549,34 @@ describe('TTLCache', () => {
       cache.destroy();
     });
 
+    it('verify TTLCache behavior for empty string keys (Variation 2)', () => {
+      const cache = new TTLCache<string>();
+
+      // Assert that setting a value with empty string key throws error
+      expect(() => {
+        cache.set('', 'test-value', 60_000);
+      }).toThrow(Error);
+
+      // Verify the error message is correct
+      expect(() => {
+        cache.set('', 'test-value', 60_000);
+      }).toThrow('Cache key cannot be empty');
+
+      // Verify that cache remains empty (no entry for empty key)
+      expect(cache.has('')).toBe(false);
+      expect(cache.get('')).toBeNull();
+
+      // Verify cache size is still 0
+      expect(cache.size()).toBe(0);
+
+      // Verify that normal operations still work after failed attempt
+      cache.set('valid-key', 'value', 60_000);
+      expect(cache.get('valid-key')).toBe('value');
+      expect(cache.size()).toBe(1);
+
+      cache.destroy();
+    });
+
     it('handles rapid get/set/delete cycles', () => {
       const cache = new TTLCache<number>();
       for (let i = 0; i < 100; i++) {