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

Author: Kokila-chandrakar

app/compare/CompareClient.accessibility.test.tsx

@@ -0,0 +1,108 @@
+import { describe, it, expect, vi } from 'vitest';
+import React, { type ReactNode } from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom/vitest';
+
+vi.mock('next/navigation', () => ({
+  useRouter: () => ({
+    push: vi.fn(),
+    replace: vi.fn(),
+    prefetch: vi.fn(),
+  }),
+  useSearchParams: () => ({
+    get: vi.fn(() => null),
+  }),
+  usePathname: () => '',
+}));
+
+vi.mock('framer-motion', () => ({
+  motion: new Proxy(
+    {},
+    {
+      get: (_, tag) => {
+        return ({ children, ...props }: { children?: ReactNode; [key: string]: unknown }) =>
+          React.createElement(tag as string, props, children);
+      },
+    }
+  ),
+  AnimatePresence: ({ children }: { children?: ReactNode }) => <>{children}</>,
+}));
+
+// This uses a dynamic import to completely bypass module hoisting safely without using require()
+const { default: CompareClient } = await import('./CompareClient');
+
+describe('CompareClient Accessibility Standards', () => {
+  it('ensures inputs and controls have accessible names', () => {
+    render(<CompareClient />);
+
+    const input1 = screen.getByPlaceholderText(/github username #1/i);
+    const input2 = screen.getByPlaceholderText(/github username #2/i);
+
+    expect(input1).toHaveAttribute('placeholder');
+    expect(input2).toHaveAttribute('placeholder');
+  });
+
+  it('keeps primary actions keyboard focusable with visible outline', () => {
+    render(<CompareClient />);
+
+    const button = screen.getByRole('button', { name: /compare/i });
+
+    button.focus();
+
+    expect(document.activeElement).toBe(button);
+    expect(button).toBeVisible();
+  });
+
+  it('associates tooltip content using aria-describedby', () => {
+    render(<CompareClient />);
+
+    const tooltipTrigger = screen.queryByRole('button', {
+      name: /tooltip|info|help/i,
+    });
+
+    if (tooltipTrigger) {
+      const describedBy = tooltipTrigger.getAttribute('aria-describedby');
+      expect(describedBy).toBeTruthy();
+
+      const tooltip = describedBy ? document.getElementById(describedBy) : null;
+
+      if (tooltip) {
+        expect(tooltip.textContent?.length).toBeGreaterThan(0);
+      }
+    } else {
+      expect(true).toBe(true);
+    }
+  });
+
+  it('maintains logical keyboard tab order for interactive elements', () => {
+    render(<CompareClient />);
+
+    const focusables = document.querySelectorAll(
+      'a[href], button:not([disabled]), input, select, textarea, [tabindex]:not([tabindex="-1"])'
+    );
+
+    expect(focusables.length).toBeGreaterThan(0);
+
+    focusables.forEach((el) => {
+      const tabIndex = el.getAttribute('tabindex');
+      expect(tabIndex).not.toBe('-1');
+    });
+  });
+
+  it('renders proper heading hierarchy without skipping levels', () => {
+    render(<CompareClient />);
+
+    const headings = screen.getAllByRole('heading');
+
+    expect(headings.length).toBeGreaterThan(0);
+
+    const levels = headings.map((h) => {
+      const tag = h.tagName;
+      return Number(tag.replace('H', ''));
+    });
+
+    for (let i = 1; i < levels.length; i++) {
+      expect(levels[i] - levels[i - 1]).toBeLessThanOrEqual(1);
+    }
+  });
+});

app/components/CopyRepoButton.timezone-boundaries.test.tsx

@@ -0,0 +1,89 @@
+import { cleanup, render, screen, fireEvent, act } from '@testing-library/react';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import CopyRepoButton, { REPO_URL } from './CopyRepoButton';
+
+beforeEach(() => {
+  vi.stubGlobal('navigator', {
+    ...navigator,
+    clipboard: { writeText: vi.fn() },
+  });
+});
+
+afterEach(() => {
+  vi.clearAllTimers();
+  vi.useRealTimers();
+  vi.unstubAllGlobals();
+  vi.restoreAllMocks();
+  cleanup();
+});
+
+describe('CopyRepoButton', () => {
+  it('renders with the default "Copy URL" label on mount', () => {
+    render(<CopyRepoButton />);
+    expect(screen.getByRole('button').textContent).toContain('Copy URL');
+  });
+
+  it('transitions to "Copied!" immediately after a successful clipboard write', async () => {
+    vi.useFakeTimers();
+    vi.mocked(navigator.clipboard.writeText).mockResolvedValue(undefined);
+    render(<CopyRepoButton />);
+
+    await act(async () => {
+      fireEvent.click(screen.getByRole('button'));
+    });
+
+    expect(screen.getByRole('button').textContent).toContain('Copied!');
+  });
+
+  it('resets to "Copy URL" exactly after the 2000 ms timeout boundary', async () => {
+    vi.useFakeTimers();
+    vi.mocked(navigator.clipboard.writeText).mockResolvedValue(undefined);
+    render(<CopyRepoButton />);
+
+    await act(async () => {
+      fireEvent.click(screen.getByRole('button'));
+    });
+
+    expect(screen.getByRole('button').textContent).toContain('Copied!');
+
+    await act(async () => {
+      vi.advanceTimersByTime(1999);
+    });
+    expect(screen.getByRole('button').textContent).toContain('Copied!');
+
+    await act(async () => {
+      vi.advanceTimersByTime(1);
+    });
+    expect(screen.getByRole('button').textContent).toContain('Copy URL');
+  });
+
+  it('shows "Copy failed" and resets after 2000 ms when the clipboard API rejects', async () => {
+    vi.useFakeTimers();
+    vi.mocked(navigator.clipboard.writeText).mockRejectedValue(new Error('Not allowed'));
+    render(<CopyRepoButton />);
+
+    await act(async () => {
+      fireEvent.click(screen.getByRole('button'));
+    });
+
+    expect(screen.getByRole('button').textContent).toContain('Copy failed');
+
+    await act(async () => {
+      vi.advanceTimersByTime(2000);
+    });
+    expect(screen.getByRole('button').textContent).toContain('Copy URL');
+  });
+
+  it('writes the exact repo URL exported from the component to the clipboard', async () => {
+    vi.useFakeTimers();
+    vi.mocked(navigator.clipboard.writeText).mockResolvedValue(undefined);
+    render(<CopyRepoButton />);
+
+    await act(async () => {
+      fireEvent.click(screen.getByRole('button'));
+    });
+
+    expect(navigator.clipboard.writeText).toHaveBeenCalledOnce();
+    expect(navigator.clipboard.writeText).toHaveBeenCalledWith(REPO_URL);
+  });
+});

app/components/CopyRepoButton.tsx

@@ -3,14 +3,14 @@
 import { useState } from 'react';
 import { Copy } from 'lucide-react';
 
+export const REPO_URL = 'https://github.com/JhaSourav07/commitpulse';
+
 export default function CopyRepoButton() {
   const [copyState, setCopyState] = useState<'idle' | 'copied' | 'error'>('idle');
 
-  const repoUrl = 'https://github.com/JhaSourav07/commitpulse';
-
   const handleCopy = async () => {
     try {
-      await navigator.clipboard.writeText(repoUrl);
+      await navigator.clipboard.writeText(REPO_URL);
       setCopyState('copied');
     } catch {
       setCopyState('error');