Merge branch 'main' into test-validation-timezone-boundary

Author: Vishvadharman

app/api/streak/route.test.ts

@@ -235,6 +235,8 @@ describe('GET /api/streak', () => {
       const body = await response.text();
 
       expect(body).toContain('<svg');
+      expect(body).toContain('viewBox');
+      expect(body).toContain('xmlns="http://www.w3.org/2000/svg"');
       expect(body).toContain('</svg>');
     });
 
@@ -558,10 +560,10 @@ describe('GET /api/streak', () => {
       expect(body.details.fieldErrors.year[0]).toContain('GitHub was founded in 2008');
     });
 
-    it('returns 200 for unknown ?date= parameter (not part of schema)', async () => {
-      const response = await GET(makeRequest({ user: 'octocat', date: '2026-15-40' }));
-      expect(response.status).toBe(200);
-    });
+    // it('returns 200 for unknown ?date= parameter (not part of schema)', async () => {
+    //   const response = await GET(makeRequest({ user: 'octocat', date: '2026-15-40' }));
+    //   expect(response.status).toBe(200);
+    // });
 
     it('returns 400 for malformed numeric year', async () => {
       const response = await GET(makeRequest({ user: 'octocat', year: '100000' }));
@@ -611,6 +613,16 @@ describe('GET /api/streak', () => {
 
       expect(response.status).toBe(200);
     });
+
+    describe('date parameter', () => {
+      it('returns 400 when an invalid ISO8601 calendar date format like "2026-15-40" is supplied', async () => {
+        const response = await GET(makeRequest({ user: 'octocat', date: '2026-15-40' }));
+        const body = await response.json();
+
+        expect(response.status).toBe(400);
+        expect(body.details.fieldErrors.date[0]).toContain('Invalid "date" format');
+      });
+    });
   });
 
   describe('radius parameter', () => {
@@ -722,9 +734,15 @@ describe('GET /api/streak', () => {
 
       expect(response.status).toBe(400);
     });
+
     it('returns 400 when an invalid hex color is passed as accent', async () => {
-      // #ZZZZZZZ contains non-hex characters — schema must reject it with 400
-      const response = await GET(makeRequest({ user: 'octocat', accent: '#ZZZZZZZ' }));
+      // #ZZZZZZ contains non-hex characters — schema must reject it with 400
+      const response = await GET(makeRequest({ user: 'octocat', accent: '#ZZZZZZ' }));
+
+      expect(response.status).toBe(400);
+    });
+    it('returns 400 when another invalid hex color is passed as accent (Variation 4)', async () => {
+      const response = await GET(makeRequest({ user: 'octocat', accent: '#ZZZZZZ' }));
 
       expect(response.status).toBe(400);
     });

app/api/streak/route.ts

@@ -92,6 +92,7 @@ export async function GET(request: Request) {
       gradient,
       tz: tzParam,
       disable_particles,
+      glow,
     } = parseResult.data;
 
     const themeName = theme || 'dark';
@@ -160,6 +161,7 @@ export async function GET(request: Request) {
       shading,
       gradient,
       disable_particles,
+      glow,
     };
 
     let calendar;

app/components/Icons.tsx

@@ -1,94 +1,21 @@
+import { Copy, Zap, Box, Check, X } from 'lucide-react';
+
 export function CopyIcon() {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="20"
-      height="20"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    >
-      <rect width="14" height="14" x="8" y="8" rx="2" ry="2" />
-      <path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" />
-    </svg>
-  );
+  return <Copy width={20} height={20} strokeWidth={2} />;
 }
 
 export function ZapIcon() {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    >
-      <path d="M13 2 L3 14 L12 14 L11 22 L21 10 L12 10 L13 2 Z" />
-    </svg>
-  );
+  return <Zap width={24} height={24} strokeWidth={2} />;
 }
 
 export function BoxIcon() {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    >
-      <path d="M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z" />
-      <path d="m7.5 4.27 9 5.15" />
-      <path d="M3.29 7L12 12l8.71-5" />
-      <path d="M12 22V12" />
-    </svg>
-  );
+  return <Box width={24} height={24} strokeWidth={2} />;
 }
 
 export function CheckIcon() {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="20"
-      height="20"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="#10b981"
-      strokeWidth="3"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    >
-      <polyline points="20 6 9 17 4 12" />
-    </svg>
-  );
+  return <Check width={20} height={20} strokeWidth={3} stroke="#10b981" />;
 }
 
 export function CloseIcon() {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="18"
-      height="18"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="2.5"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    >
-      <line x1="18" y1="6" x2="6" y2="18" />
-      <line x1="6" y1="6" x2="18" y2="18" />
-    </svg>
-  );
+  return <X width={18} height={18} strokeWidth={2.5} />;
 }

app/customize/components/ThemeSelector.test.tsx

@@ -137,65 +137,57 @@ describe('ThemeSelector - Custom Variations (Variation 4)', () => {
   });
 });
 
-describe('ThemeSelector - Custom Variations (Variation 4)', () => {
+describe('ThemeSelector responsive rendering', () => {
   const onThemeChange = vi.fn();
 
   afterEach(() => {
     vi.clearAllMocks();
   });
 
-  it('renders ThemeSelector successfully and layout structure exists', () => {
-    const { container } = render(<ThemeSelector theme="dark" onThemeChange={onThemeChange} />);
+  it('check if the root container holds its flex-col layout when switch from Dracula -> Neon', () => {
+    const { container, rerender } = render(
+      <ThemeSelector theme="dracula" onThemeChange={onThemeChange} />
+    );
+    const root = container.firstChild as HTMLElement;
+    expect(root.className).toContain('flex-col');
 
-    // ThemeSelector renders successfully
-    expect(screen.getByRole('combobox')).toBeTruthy();
-    expect(screen.getByText('Theme Preset')).toBeTruthy();
-
-    // Layout structure exists
-    const mainContainer = container.firstChild as HTMLElement;
-    expect(mainContainer).toBeTruthy();
-    expect(mainContainer.className).toContain('flex');
-    expect(mainContainer.className).toContain('flex-col');
-    expect(mainContainer.className).toContain('gap-1.5');
+    rerender(<ThemeSelector theme="neon" onThemeChange={onThemeChange} />);
+    expect(root.className).toContain('flex-col');
   });
 
-  it('verifies that selecting Dracula preset calls onThemeChange("dracula")', async () => {
-    const user = userEvent.setup();
-    render(<ThemeSelector theme="dark" onThemeChange={onThemeChange} />);
+  it('check if active preset button updates when switching from Dracula to Neon', () => {
+    const { rerender } = render(<ThemeSelector theme="dracula" onThemeChange={onThemeChange} />);
 
-    // Select Dracula preset via accessibility query
-    const draculaBtn = screen.getByRole('button', { name: /apply dracula theme/i });
-    expect(draculaBtn).toBeTruthy();
+    expect(
+      screen.getByRole('button', { name: /apply dracula theme/i }).getAttribute('aria-pressed')
+    ).toBe('true');
 
-    // Click it
-    await user.click(draculaBtn);
+    rerender(<ThemeSelector theme="neon" onThemeChange={onThemeChange} />);
 
-    // Verify onThemeChange was called with 'dracula'
-    expect(onThemeChange).toHaveBeenCalledWith('dracula');
+    expect(
+      screen.getByRole('button', { name: /apply neon theme/i }).getAttribute('aria-pressed')
+    ).toBe('true');
+    expect(
+      screen.getByRole('button', { name: /apply dracula theme/i }).getAttribute('aria-pressed')
+    ).toBe('false');
   });
 
-  it('verifies that selecting Neon preset calls onThemeChange("neon")', async () => {
-    const user = userEvent.setup();
-    render(<ThemeSelector theme="dark" onThemeChange={onThemeChange} />);
+  it('check if select value reflects the active theme after switch Dracula -> Neon', () => {
+    const { rerender } = render(<ThemeSelector theme="dracula" onThemeChange={onThemeChange} />);
+    const select = screen.getByRole('combobox') as HTMLSelectElement;
+    expect(select.value).toBe('dracula');
 
-    // Select Neon preset via accessibility query
-    const neonBtn = screen.getByRole('button', { name: /apply neon theme/i });
-    expect(neonBtn).toBeTruthy();
-
-    // Click it
-    await user.click(neonBtn);
-
-    // Verify onThemeChange was called with 'neon'
-    expect(onThemeChange).toHaveBeenCalledWith('neon');
+    rerender(<ThemeSelector theme="neon" onThemeChange={onThemeChange} />);
+    expect(select.value).toBe('neon');
   });
 
-  it('verifies the select dropdown calls onThemeChange with the selected theme', async () => {
-    const user = userEvent.setup();
-    render(<ThemeSelector theme="dark" onThemeChange={onThemeChange} />);
-
-    const select = screen.getByRole('combobox');
-    await user.selectOptions(select, 'sunset');
+  it('colour swatches update to the new theme after switching', () => {
+    const { rerender } = render(<ThemeSelector theme="dracula" onThemeChange={onThemeChange} />);
+    const draculaSwatches = screen.getAllByTitle(/^(bg|accent|text):/i);
+    expect(draculaSwatches.length).toBe(3);
 
-    expect(onThemeChange).toHaveBeenCalledWith('sunset');
+    rerender(<ThemeSelector theme="neon" onThemeChange={onThemeChange} />);
+    // swatches should still be 3, now reflecting neon's palette
+    expect(screen.getAllByTitle(/^(bg|accent|text):/i).length).toBe(3);
   });
 });

components/dashboard/ActivityLandscape.test.tsx

@@ -0,0 +1,62 @@
+import { it, expect, vi } from 'vitest';
+import { render, screen, fireEvent } from '@testing-library/react';
+import ActivityLandscape from './ActivityLandscape';
+
+vi.mock('framer-motion', async () => {
+  const actual = await vi.importActual<typeof import('framer-motion')>('framer-motion');
+
+  return {
+    ...actual,
+    motion: {
+      ...actual.motion,
+      div: ({ children, ...props }: React.ComponentProps<'div'>) => (
+        <div {...props}>{children}</div>
+      ),
+    },
+  };
+});
+const mockData = Array.from({ length: 100 }, (_, i) => ({
+  date: `2024-01-${String(i + 1).padStart(2, '0')}`,
+  count: i + 1,
+  intensity: (i % 5) as 0 | 1 | 2 | 3 | 4,
+}));
+it('renders Activity Landscape heading', () => {
+  render(<ActivityLandscape data={mockData} />);
+
+  expect(screen.getByText('Activity Landscape')).toBeTruthy();
+});
+it('renders all tab buttons', () => {
+  render(<ActivityLandscape data={mockData} />);
+
+  expect(screen.getByText('1W')).toBeTruthy();
+  expect(screen.getByText('1M')).toBeTruthy();
+  expect(screen.getByText('3M')).toBeTruthy();
+  expect(screen.getByText('1Y')).toBeTruthy();
+});
+it('has 3M active by default', () => {
+  render(<ActivityLandscape data={mockData} />);
+
+  const tab = screen.getByText('3M');
+
+  expect(tab.className).toContain('bg-black');
+});
+it('activates 1W tab when clicked', () => {
+  render(<ActivityLandscape data={mockData} />);
+
+  const tab = screen.getByText('1W');
+
+  fireEvent.click(tab);
+
+  expect(tab.className).toContain('bg-black');
+});
+it('renders activity chart', () => {
+  render(<ActivityLandscape data={mockData} />);
+
+  expect(screen.getByText('Activity Landscape')).toBeTruthy();
+  expect(screen.getByText('Commit frequency over time')).toBeTruthy();
+});
+it('renders with empty data without crashing', () => {
+  render(<ActivityLandscape data={[]} />);
+
+  expect(screen.getByText('Activity Landscape')).toBeTruthy();
+});