Merge branch 'main' into test-contributors-empty-fallback

Author: Vishvadharman

app/components/Icons.accessibility.test.tsx

@@ -0,0 +1,44 @@
+import { render } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+
+import { BoxIcon, CheckIcon, CloseIcon, CopyIcon, ZapIcon } from './Icons';
+
+describe('Icons accessibility behavior', () => {
+  it('renders CopyIcon as decorative with aria-hidden="true"', () => {
+    const { container } = render(<CopyIcon />);
+    const svg = container.querySelector('svg');
+    expect(svg?.getAttribute('aria-hidden')).toBe('true');
+  });
+
+  it('renders ZapIcon as decorative with aria-hidden="true"', () => {
+    const { container } = render(<ZapIcon />);
+    const svg = container.querySelector('svg');
+    expect(svg?.getAttribute('aria-hidden')).toBe('true');
+  });
+
+  it('renders BoxIcon as decorative with aria-hidden="true"', () => {
+    const { container } = render(<BoxIcon />);
+    const svg = container.querySelector('svg');
+    expect(svg?.getAttribute('aria-hidden')).toBe('true');
+  });
+
+  it('renders CheckIcon as decorative with aria-hidden="true"', () => {
+    const { container } = render(<CheckIcon />);
+    const svg = container.querySelector('svg');
+    expect(svg?.getAttribute('aria-hidden')).toBe('true');
+  });
+
+  it('renders CloseIcon as decorative with aria-hidden="true"', () => {
+    const { container } = render(<CloseIcon />);
+    const svg = container.querySelector('svg');
+    expect(svg?.getAttribute('aria-hidden')).toBe('true');
+  });
+
+  it('includes basic structural roles on SVG elements', () => {
+    const { container } = render(<CopyIcon />);
+    const svg = container.querySelector('svg');
+    // Lucide components use standard svg elements which imply a graphics role,
+    // and setting aria-hidden="true" makes it decorative.
+    expect(svg?.tagName.toLowerCase()).toBe('svg');
+  });
+});

app/components/Icons.mouse-interactivity.test.tsx

@@ -0,0 +1,79 @@
+import { fireEvent, render } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+
+import { BoxIcon, CheckIcon, CloseIcon, CopyIcon, ZapIcon } from './Icons';
+
+describe('Icons mouse interactivity & event propagation', () => {
+  it('allows mouse event propagation when CopyIcon is clicked', () => {
+    const handleClick = vi.fn();
+    const { container } = render(
+      <button onClick={handleClick}>
+        <CopyIcon />
+      </button>
+    );
+
+    const svg = container.querySelector('svg');
+    if (svg) {
+      fireEvent.click(svg);
+    }
+
+    // Verifies that clicks on the SVG propagate up to interactive parent elements
+    expect(handleClick).toHaveBeenCalledTimes(1);
+  });
+
+  it('allows mouse event propagation when ZapIcon is clicked', () => {
+    const handleClick = vi.fn();
+    const { container } = render(
+      <button onClick={handleClick}>
+        <ZapIcon />
+      </button>
+    );
+
+    const svg = container.querySelector('svg');
+    if (svg) fireEvent.click(svg);
+
+    expect(handleClick).toHaveBeenCalledTimes(1);
+  });
+
+  it('allows mouse event propagation when BoxIcon is clicked', () => {
+    const handleClick = vi.fn();
+    const { container } = render(
+      <div onClick={handleClick}>
+        <BoxIcon />
+      </div>
+    );
+
+    const svg = container.querySelector('svg');
+    if (svg) fireEvent.click(svg);
+
+    expect(handleClick).toHaveBeenCalledTimes(1);
+  });
+
+  it('allows mouse event propagation when CheckIcon is clicked', () => {
+    const handleClick = vi.fn();
+    const { container } = render(
+      <button onClick={handleClick}>
+        <CheckIcon />
+      </button>
+    );
+
+    const svg = container.querySelector('svg');
+    if (svg) fireEvent.click(svg);
+
+    expect(handleClick).toHaveBeenCalledTimes(1);
+  });
+
+  it('allows mouse event propagation when CloseIcon is clicked', () => {
+    const handleClick = vi.fn();
+    const { container } = render(
+      <button onClick={handleClick}>
+        <CloseIcon />
+      </button>
+    );
+
+    const svg = container.querySelector('svg');
+    if (svg) fireEvent.click(svg);
+
+    expect(handleClick).toHaveBeenCalledTimes(1);
+  });
+});

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

@@ -0,0 +1,39 @@
+import { render } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+
+import { BoxIcon, CheckIcon, CloseIcon, CopyIcon, ZapIcon } from './Icons';
+
+describe('Icons theme contrast behavior', () => {
+  it('renders CheckIcon with fixed semantic color for success state', () => {
+    const { container } = render(<CheckIcon />);
+    const svg = container.querySelector('svg');
+    // Verifies the icon maintains visual cohesion by using a fixed color
+    // that works well in both light and dark modes
+    expect(svg?.getAttribute('stroke')).toBe('#10b981');
+  });
+
+  it('renders CopyIcon with inherited color for theme adaptability', () => {
+    const { container } = render(<CopyIcon />);
+    const svg = container.querySelector('svg');
+    // Verifies the icon uses currentColor to adapt to parent theme context
+    expect(svg?.getAttribute('stroke')).toBe('currentColor');
+  });
+
+  it('renders ZapIcon with inherited color for theme adaptability', () => {
+    const { container } = render(<ZapIcon />);
+    const svg = container.querySelector('svg');
+    expect(svg?.getAttribute('stroke')).toBe('currentColor');
+  });
+
+  it('renders BoxIcon with inherited color for theme adaptability', () => {
+    const { container } = render(<BoxIcon />);
+    const svg = container.querySelector('svg');
+    expect(svg?.getAttribute('stroke')).toBe('currentColor');
+  });
+
+  it('renders CloseIcon with inherited color for theme adaptability', () => {
+    const { container } = render(<CloseIcon />);
+    const svg = container.querySelector('svg');
+    expect(svg?.getAttribute('stroke')).toBe('currentColor');
+  });
+});

app/components/Icons.type-compiler.test.tsx

@@ -0,0 +1,45 @@
+import { describe, expectTypeOf, it } from 'vitest';
+import { CopyIcon, ZapIcon, BoxIcon, CheckIcon, CloseIcon } from './Icons';
+
+describe('Icons Type Compiler Validation', () => {
+  it('exports icon components as functions', () => {
+    expectTypeOf(CopyIcon).toBeFunction();
+    expectTypeOf(ZapIcon).toBeFunction();
+    expectTypeOf(BoxIcon).toBeFunction();
+    expectTypeOf(CheckIcon).toBeFunction();
+    expectTypeOf(CloseIcon).toBeFunction();
+  });
+
+  it('accepts no parameters for icon components', () => {
+    expectTypeOf(CopyIcon).parameters.toEqualTypeOf<[]>();
+    expectTypeOf(ZapIcon).parameters.toEqualTypeOf<[]>();
+    expectTypeOf(BoxIcon).parameters.toEqualTypeOf<[]>();
+    expectTypeOf(CheckIcon).parameters.toEqualTypeOf<[]>();
+    expectTypeOf(CloseIcon).parameters.toEqualTypeOf<[]>();
+  });
+
+  it('all icon components return compatible types', () => {
+    expectTypeOf<ReturnType<typeof CopyIcon>>().toEqualTypeOf<ReturnType<typeof ZapIcon>>();
+
+    expectTypeOf<ReturnType<typeof ZapIcon>>().toEqualTypeOf<ReturnType<typeof BoxIcon>>();
+
+    expectTypeOf<ReturnType<typeof BoxIcon>>().toEqualTypeOf<ReturnType<typeof CheckIcon>>();
+
+    expectTypeOf<ReturnType<typeof CheckIcon>>().toEqualTypeOf<ReturnType<typeof CloseIcon>>();
+  });
+
+  it('maintains compatible return types across icons', () => {
+    expectTypeOf<ReturnType<typeof CopyIcon>>().toEqualTypeOf<ReturnType<typeof ZapIcon>>();
+
+    expectTypeOf<ReturnType<typeof BoxIcon>>().toEqualTypeOf<ReturnType<typeof CheckIcon>>();
+
+    expectTypeOf<ReturnType<typeof CheckIcon>>().toEqualTypeOf<ReturnType<typeof CloseIcon>>();
+  });
+
+  it('all icon components share the same callable signature', () => {
+    expectTypeOf(CopyIcon).toEqualTypeOf<typeof ZapIcon>();
+    expectTypeOf(ZapIcon).toEqualTypeOf<typeof BoxIcon>();
+    expectTypeOf(BoxIcon).toEqualTypeOf<typeof CheckIcon>();
+    expectTypeOf(CheckIcon).toEqualTypeOf<typeof CloseIcon>();
+  });
+});

app/components/ScrollRestoration.test.tsx

@@ -0,0 +1,83 @@
+import { render, cleanup } from '@testing-library/react';
+import '@testing-library/jest-dom/vitest';
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import ScrollRestoration from './ScrollRestoration';
+
+const mockUsePathname = vi.fn();
+
+vi.mock('next/navigation', () => ({
+  usePathname: () => mockUsePathname(),
+}));
+
+describe('ScrollRestoration', () => {
+  const scrollToMock = vi.fn();
+  const addEventListenerSpy = vi.spyOn(window, 'addEventListener');
+  const removeEventListenerSpy = vi.spyOn(window, 'removeEventListener');
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+
+    mockUsePathname.mockReturnValue('/dashboard');
+
+    Object.defineProperty(window, 'scrollTo', {
+      writable: true,
+      value: scrollToMock,
+    });
+
+    sessionStorage.clear();
+  });
+
+  afterEach(() => {
+    cleanup();
+  });
+
+  it('mounts cleanly without crashing', () => {
+    const { container } = render(<ScrollRestoration />);
+
+    expect(container).toBeDefined();
+  });
+
+  it('restores saved scroll position on mount', () => {
+    sessionStorage.setItem('scroll-position-/dashboard', '250');
+
+    render(<ScrollRestoration />);
+
+    expect(scrollToMock).toHaveBeenCalledWith(0, 250);
+  });
+
+  it('registers scroll listener and saves scroll position', () => {
+    render(<ScrollRestoration />);
+
+    expect(addEventListenerSpy).toHaveBeenCalledWith('scroll', expect.any(Function));
+
+    Object.defineProperty(window, 'scrollY', {
+      writable: true,
+      configurable: true,
+      value: 500,
+    });
+
+    const handler = addEventListenerSpy.mock.calls.find(
+      ([event]) => event === 'scroll'
+    )?.[1] as EventListener;
+
+    handler(new Event('scroll'));
+
+    expect(sessionStorage.getItem('scroll-position-/dashboard')).toBe('500');
+  });
+
+  it('does not scroll when no saved position exists', () => {
+    render(<ScrollRestoration />);
+
+    expect(scrollToMock).not.toHaveBeenCalled();
+  });
+
+  it('removes scroll listener on unmount', () => {
+    const { unmount } = render(<ScrollRestoration />);
+
+    const handler = addEventListenerSpy.mock.calls.find(([event]) => event === 'scroll')?.[1];
+
+    unmount();
+
+    expect(removeEventListenerSpy).toHaveBeenCalledWith('scroll', handler);
+  });
+});

app/contributors/loading.test.tsx

@@ -0,0 +1,48 @@
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom/vitest';
+import { describe, it, expect } from 'vitest';
+import Loading from './loading';
+
+describe('Contributors Loading', () => {
+  it('renders loading fallback component', () => {
+    render(<Loading />);
+
+    expect(screen.getByRole('status')).toBeInTheDocument();
+  });
+
+  it('renders loading messages correctly', () => {
+    render(<Loading />);
+
+    expect(screen.getByText(/loading the collective/i)).toBeInTheDocument();
+
+    expect(screen.getByText(/fetching contributor data from github/i)).toBeInTheDocument();
+  });
+
+  it('contains animated loader elements', () => {
+    const { container } = render(<Loading />);
+
+    expect(container.querySelector('.animate-spin')).toBeInTheDocument();
+
+    expect(container.querySelector('.animate-pulse')).toBeInTheDocument();
+  });
+
+  it('maintains centered flex layout and themed backdrop', () => {
+    const { container } = render(<Loading />);
+
+    const wrapper = container.firstChild as HTMLElement;
+
+    expect(wrapper).toHaveClass('flex');
+    expect(wrapper).toHaveClass('min-h-screen');
+    expect(wrapper).toHaveClass('items-center');
+    expect(wrapper).toHaveClass('justify-center');
+    expect(wrapper).toHaveClass('bg-[#050505]');
+  });
+
+  it('renders loader container with accessibility attributes', () => {
+    render(<Loading />);
+
+    const status = screen.getByRole('status');
+
+    expect(status).toHaveAttribute('aria-live', 'polite');
+  });
+});