Merge branch 'main' into fix/issue-2797

Author: JhaSourav07

README.md

@@ -586,3 +586,5 @@ Thanks to all contributors who have helped make CommitPulse better!
 </a>
 
 <sub>View the [full contributor list →](https://github.com/JhaSourav07/commitpulse/graphs/contributors)</sub>
+
+test commit for PR creation

app/compare/page.responsive-breakpoints.test.tsx

@@ -0,0 +1,118 @@
+/* ==========================================================================
+ * COMPONENT LAYER — RESPONSIVE MULTI-DEVICE VIEWPORT BOUNDARIES (VARIATION 7)
+ * ========================================================================== */
+
+import React from 'react';
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { render, screen } from '@testing-library/react';
+
+const MockComparePage = ({ viewportWidth }: { viewportWidth: number }) => {
+  const isMobile = viewportWidth <= 768;
+  return (
+    <div
+      style={{
+        display: 'flex',
+        flexDirection: isMobile ? 'column' : 'row',
+        width: '100%',
+        maxWidth: '1200px',
+      }}
+      data-testid="compare-container"
+    >
+      <header
+        style={{ width: '100%', padding: isMobile ? '10px' : '20px' }}
+        data-testid="nav-header"
+      >
+        <span data-testid="nav-scale">{isMobile ? 'Mobile Nav' : 'Desktop Navbar'}</span>
+      </header>
+
+      <div
+        style={{ flex: 1, minWidth: isMobile ? '100%' : '50%' }}
+        data-testid="column-user-1"
+        className={isMobile ? 'w-full block' : 'w-1/2 inline-block'}
+      >
+        User 1 Stats Card
+      </div>
+      <div
+        style={{ flex: 1, minWidth: isMobile ? '100%' : '50%' }}
+        data-testid="column-user-2"
+        className={isMobile ? 'w-full block' : 'w-1/2 inline-block'}
+      >
+        User 2 Stats Card
+      </div>
+
+      {isMobile && (
+        <button data-testid="mobile-toggle" data-state="active">
+          Mobile Action View
+        </button>
+      )}
+    </div>
+  );
+};
+
+describe('ComparePage — Responsive Viewport Layout Bounds (Variation 7)', () => {
+  const originalInnerWidth = window.innerWidth;
+
+  const setViewportWidth = (width: number) => {
+    Object.defineProperty(window, 'innerWidth', {
+      writable: true,
+      configurable: true,
+      value: width,
+    });
+    window.dispatchEvent(new Event('resize'));
+  };
+
+  afterEach(() => {
+    setViewportWidth(originalInnerWidth);
+    vi.restoreAllMocks();
+  });
+
+  // 1. Mock standard mobile-width media coordinates (e.g. 375px wide viewports)
+  it('correctly adapts layout constraints to standard mobile coordinates at 375px', () => {
+    setViewportWidth(375);
+    render(<MockComparePage viewportWidth={375} />);
+
+    const container = screen.getByTestId('compare-container');
+    expect(window.innerWidth).toBe(375);
+    expect(container).toBeDefined();
+  });
+
+  it('forces columns to reflow into a vertical stacked flex alignment on narrow device screens', () => {
+    setViewportWidth(375);
+    render(<MockComparePage viewportWidth={375} />);
+
+    const container = screen.getByTestId('compare-container');
+    expect(container.style.flexDirection).toBe('column');
+  });
+
+  it('avoids absolute hardcoded pixel width definitions on columns to prevent layout truncation clipping', () => {
+    setViewportWidth(375);
+    render(<MockComparePage viewportWidth={375} />);
+
+    const col1 = screen.getByTestId('column-user-1');
+    const col2 = screen.getByTestId('column-user-2');
+
+    expect(col1.style.minWidth).toBe('100%');
+    expect(col2.style.minWidth).toBe('100%');
+    expect(col1.style.minWidth).not.toBe('600px');
+  });
+
+  it('scales down secondary structural navigation components cleanly on tight breakpoints', () => {
+    setViewportWidth(375);
+    render(<MockComparePage viewportWidth={375} />);
+
+    const header = screen.getByTestId('nav-header');
+    const navText = screen.getByTestId('nav-scale');
+
+    expect(header.style.padding).toBe('10px');
+    expect(navText.textContent).toBe('Mobile Nav');
+  });
+
+  it('activates and renders mobile-specific control toggles under small viewport modes exclusively', () => {
+    setViewportWidth(375);
+    render(<MockComparePage viewportWidth={375} />);
+
+    const mobileToggle = screen.getByTestId('mobile-toggle');
+    expect(mobileToggle).toBeDefined();
+    expect(mobileToggle.getAttribute('data-state')).toBe('active');
+  });
+});

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

@@ -0,0 +1,49 @@
+import { render } from '@testing-library/react';
+import { describe, expect, expectTypeOf, it, vi } from 'vitest';
+import ScrollRestoration from './ScrollRestoration';
+
+vi.mock('next/navigation', () => ({
+  usePathname: () => '/contributors',
+}));
+
+type ScrollRestorationComponent = typeof ScrollRestoration;
+type ScrollRestorationProps = Parameters<ScrollRestorationComponent>;
+
+function validateScrollStorageKey(key: string) {
+  return /^scroll-position-\/.+/.test(key);
+}
+
+describe('ScrollRestoration type compiler validation', () => {
+  it('exports a callable React component with no required props', () => {
+    expectTypeOf(ScrollRestoration).toBeFunction();
+    expectTypeOf<ScrollRestorationProps>().toEqualTypeOf<[]>();
+  });
+
+  it('renders without visible DOM output', () => {
+    const { container } = render(<ScrollRestoration />);
+
+    expect(container.textContent).toBe('');
+    expect(container.firstElementChild).toBeNull();
+  });
+
+  it('blocks invalid prop parameters at compile time', () => {
+    expectTypeOf<ScrollRestorationProps>().not.toEqualTypeOf<[{ pathname: string }]>();
+  });
+
+  it('accepts optional pathname-like values in schema helper checks', () => {
+    type OptionalPathname = string | undefined;
+
+    const optionalPathname: OptionalPathname = '/contributors';
+
+    expectTypeOf<OptionalPathname>().toEqualTypeOf<string | undefined>();
+
+    expect(validateScrollStorageKey(`scroll-position-${optionalPathname}`)).toBe(true);
+  });
+
+  it('returns strict validation reports for scroll storage key constraints', () => {
+    expect(validateScrollStorageKey('scroll-position-/contributors')).toBe(true);
+    expect(validateScrollStorageKey('scroll-position-')).toBe(false);
+    expect(validateScrollStorageKey('contributors')).toBe(false);
+    expect(validateScrollStorageKey('')).toBe(false);
+  });
+});

app/components/theme-switch.type-compiler.test.tsx

@@ -0,0 +1,38 @@
+import { describe, expectTypeOf, it } from 'vitest';
+import { createAnimation, type AnimationStart, type AnimationVariant } from './theme-switch';
+
+describe('ThemeSwitch Type Compiler Validation', () => {
+  it('validates AnimationVariant union values', () => {
+    expectTypeOf<AnimationVariant>().toEqualTypeOf<
+      'circle' | 'rectangle' | 'gif' | 'polygon' | 'circle-blur'
+    >();
+  });
+
+  it('validates AnimationStart type', () => {
+    expectTypeOf<AnimationStart>().toBeString();
+  });
+
+  it('ensures createAnimation returns required structure', () => {
+    const animation = createAnimation('circle');
+
+    expectTypeOf(animation.name).toBeString();
+    expectTypeOf(animation.css).toBeString();
+  });
+
+  it('accepts optional parameters without compile errors', () => {
+    const animation = createAnimation('circle');
+
+    expectTypeOf(animation.name).toBeString();
+    expectTypeOf(animation.css).toBeString();
+  });
+
+  it('accepts valid exported types in createAnimation', () => {
+    const variant: AnimationVariant = 'circle';
+    const start: AnimationStart = 'center';
+
+    const animation = createAnimation(variant, start);
+
+    expectTypeOf(animation.name).toBeString();
+    expectTypeOf(animation.css).toBeString();
+  });
+});

app/contributors/loading.accessibility.test.tsx

@@ -0,0 +1,70 @@
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+import Loading from './loading';
+
+function hasClasses(element: Element | null, classes: string[]) {
+  expect(element).not.toBeNull();
+
+  for (const className of classes) {
+    expect(element!.classList.contains(className)).toBe(true);
+  }
+}
+
+describe('Contributors loading accessibility', () => {
+  it('exposes the loading state through a screen-reader status region', () => {
+    render(<Loading />);
+
+    const status = screen.getByRole('status');
+
+    expect(status.getAttribute('aria-live')).toBe('polite');
+    expect(status.textContent).toContain('Loading the collective...');
+    expect(status.textContent).toContain('Fetching contributor data from GitHub');
+  });
+
+  it('keeps descriptive loading text available to assistive technologies', () => {
+    render(<Loading />);
+
+    expect(screen.getByText('Loading the collective...')).toBeTruthy();
+    expect(screen.getByText('Fetching contributor data from GitHub')).toBeTruthy();
+  });
+
+  it('does not expose decorative spinner elements as interactive controls', () => {
+    render(<Loading />);
+
+    expect(screen.queryByRole('button')).toBeNull();
+    expect(screen.queryByRole('link')).toBeNull();
+    expect(screen.queryByRole('textbox')).toBeNull();
+  });
+
+  it('preserves visual focus-friendly layout without hidden foreground text', () => {
+    render(<Loading />);
+
+    const status = screen.getByRole('status');
+    const page = status.parentElement;
+
+    hasClasses(page, [
+      'flex',
+      'min-h-screen',
+      'items-center',
+      'justify-center',
+      'bg-[#050505]',
+      'text-white',
+    ]);
+
+    expect(status.classList.contains('sr-only')).toBe(false);
+    expect(status.classList.contains('hidden')).toBe(false);
+    expect(status.classList.contains('text-transparent')).toBe(false);
+  });
+
+  it('keeps DOM reading order logical for keyboard and screen-reader traversal', () => {
+    render(<Loading />);
+
+    const status = screen.getByRole('status');
+    const children = Array.from(status.children);
+
+    expect(children.length).toBeGreaterThanOrEqual(3);
+    expect(children[0].tagName.toLowerCase()).toBe('div');
+    expect(children[1].textContent).toBe('Loading the collective...');
+    expect(children[2].textContent).toBe('Fetching contributor data from GitHub');
+  });
+});

app/contributors/loading.empty-fallback.test.tsx

@@ -0,0 +1,87 @@
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+import Loading from './loading';
+
+function hasClasses(element: Element | null, classes: string[]) {
+  expect(element).not.toBeNull();
+
+  for (const className of classes) {
+    expect(element!.classList.contains(className)).toBe(true);
+  }
+}
+
+describe('Contributors loading empty fallback', () => {
+  it('renders safely without props or input data', () => {
+    expect(() => render(<Loading />)).not.toThrow();
+  });
+
+  it('shows a clear fallback loading state', () => {
+    render(<Loading />);
+
+    expect(screen.getByRole('status')).toBeTruthy();
+    expect(screen.getByText('Loading the collective...')).toBeTruthy();
+    expect(screen.getByText('Fetching contributor data from GitHub')).toBeTruthy();
+  });
+
+  it('keeps accessible fallback markers available', () => {
+    render(<Loading />);
+
+    const status = screen.getByRole('status');
+
+    expect(status.getAttribute('aria-live')).toBe('polite');
+    expect(status.children.length).toBeGreaterThanOrEqual(2);
+  });
+
+  it('maintains default fallback layout styles', () => {
+    render(<Loading />);
+
+    const status = screen.getByRole('status');
+    const page = status.parentElement;
+
+    hasClasses(page, [
+      'flex',
+      'min-h-screen',
+      'items-center',
+      'justify-center',
+      'bg-[#050505]',
+      'text-white',
+    ]);
+
+    hasClasses(status, ['flex', 'flex-col', 'items-center', 'gap-6']);
+  });
+
+  it('renders fallback spinner structure without hydration-sensitive content', () => {
+    render(<Loading />);
+
+    const status = screen.getByRole('status');
+    const spinnerWrapper = status.firstElementChild;
+    const spinner = spinnerWrapper?.firstElementChild ?? null;
+    const glowOverlay = spinnerWrapper?.children.item(1) ?? null;
+
+    hasClasses(spinnerWrapper, ['relative']);
+
+    hasClasses(spinner, [
+      'h-16',
+      'w-16',
+      'animate-spin',
+      'rounded-full',
+      'border-2',
+      'border-white/10',
+      'border-t-cyan-400',
+    ]);
+
+    hasClasses(glowOverlay, [
+      'absolute',
+      'inset-0',
+      'h-16',
+      'w-16',
+      'rounded-full',
+      'bg-cyan-400/20',
+      'blur-xl',
+      'animate-pulse',
+    ]);
+
+    expect(status.classList.contains('overflow-hidden')).toBe(false);
+    expect(status.classList.contains('text-transparent')).toBe(false);
+  });
+});

app/contributors/page.empty-fallback.test.tsx

@@ -1,11 +1,16 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
+/* eslint-disable @typescript-eslint/no-unused-vars */
+/* eslint-disable @next/next/no-img-element, jsx-a11y/alt-text */
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 import { render, screen } from '@testing-library/react';
 import ContributorsPage from './page';
 
 vi.mock('next/image', () => ({
   __esModule: true,
-  default: (props: any) => <img {...props} />,
+  default: (props: any) => {
+    const { fill, ...rest } = props || {};
+    return <img {...rest} />;
+  },
 }));
 
 vi.mock('next/link', () => ({