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

Author: Kokila-chandrakar

app/compare/page.theme-contrast.test.tsx

@@ -0,0 +1,102 @@
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom/vitest';
+import { describe, it, expect, vi } from 'vitest';
+import CompareClient from './CompareClient';
+import React, { type ReactNode } from 'react';
+
+vi.mock('next/navigation', () => ({
+  useRouter: () => ({
+    replace: vi.fn(),
+  }),
+  useSearchParams: () => ({
+    get: vi.fn(() => null),
+  }),
+}));
+
+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}</>,
+}));
+
+vi.mock('recharts', () => ({
+  ResponsiveContainer: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
+  RadarChart: () => <div data-testid="radar-chart" />,
+  Radar: () => <div />,
+  PolarGrid: () => <div />,
+  PolarAngleAxis: () => <div />,
+  PolarRadiusAxis: () => <div />,
+  Tooltip: () => <div />,
+}));
+
+describe('ComparePage Theme Contrast (Variation 3)', () => {
+  it('renders heading with dark and light text contrast classes', () => {
+    render(<CompareClient />);
+
+    const heading = screen.getByRole('heading', {
+      name: /compare developers/i,
+    });
+
+    expect(heading).toHaveClass('text-gray-900');
+    expect(heading).toHaveClass('dark:text-white');
+  });
+
+  it('renders username input fields with dark and light theme styling', () => {
+    render(<CompareClient />);
+
+    const user1 = screen.getByPlaceholderText(/github username #1/i);
+    const user2 = screen.getByPlaceholderText(/github username #2/i);
+
+    expect(user1).toHaveClass('bg-white');
+    expect(user1).toHaveClass('dark:bg-[#0a0a0a]');
+    expect(user1).toHaveClass('text-gray-900');
+    expect(user1).toHaveClass('dark:text-white');
+
+    expect(user2).toHaveClass('bg-white');
+    expect(user2).toHaveClass('dark:bg-[#0a0a0a]');
+    expect(user2).toHaveClass('text-gray-900');
+    expect(user2).toHaveClass('dark:text-white');
+  });
+
+  it('renders compare button with proper contrast classes for both themes', () => {
+    render(<CompareClient />);
+
+    const compareButton = screen.getByRole('button', {
+      name: /compare/i,
+    });
+
+    expect(compareButton).toHaveClass('bg-black');
+    expect(compareButton).toHaveClass('dark:bg-white');
+    expect(compareButton).toHaveClass('text-white');
+    expect(compareButton).toHaveClass('dark:text-black');
+  });
+
+  it('applies border contrast styling to form controls', () => {
+    render(<CompareClient />);
+
+    const user1 = screen.getByPlaceholderText(/github username #1/i);
+
+    expect(user1).toHaveClass('border-black/10');
+    expect(user1).toHaveClass('dark:border-[rgba(255,255,255,0.1)]');
+  });
+
+  it('renders decorative badge with theme-aware background styling', () => {
+    render(<CompareClient />);
+
+    const badge = screen.getByText(/developer showdown/i);
+
+    const container = badge.parentElement;
+
+    expect(container).toHaveClass('bg-gray-100');
+    expect(container).toHaveClass('dark:bg-[#111]');
+    expect(container).toHaveClass('border-black/10');
+    expect(container).toHaveClass('dark:border-[rgba(255,255,255,0.1)]');
+  });
+});

app/components/Icons.responsive-breakpoints.test.tsx

@@ -0,0 +1,80 @@
+import { render } from '@testing-library/react';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { BoxIcon, CheckIcon, CloseIcon, CopyIcon, ZapIcon } from './Icons';
+
+afterEach(() => {
+  vi.unstubAllGlobals();
+});
+
+describe('Icons — responsive breakpoints', () => {
+  it('icon dimensions are bounded values that will not cause horizontal overflow on a 375 px mobile viewport', () => {
+    const { container: c1 } = render(<CopyIcon />);
+    const { container: c2 } = render(<ZapIcon />);
+    const { container: c3 } = render(<BoxIcon />);
+    const { container: c4 } = render(<CheckIcon />);
+    const { container: c5 } = render(<CloseIcon />);
+
+    const MOBILE_WIDTH = 375;
+    for (const container of [c1, c2, c3, c4, c5]) {
+      const svg = container.querySelector('svg');
+      expect(svg).not.toBeNull();
+      const widthAttr = svg!.getAttribute('width');
+      expect(widthAttr).not.toBeNull();
+      const width = Number(widthAttr);
+      expect(Number.isFinite(width)).toBe(true);
+      expect(width).toBeGreaterThan(0);
+      expect(width).toBeLessThanOrEqual(MOBILE_WIDTH);
+    }
+  });
+
+  it('all icons use explicit numeric width and height attributes — no percentage or auto values that could cause layout instability', () => {
+    const icons = [
+      render(<CopyIcon />),
+      render(<ZapIcon />),
+      render(<BoxIcon />),
+      render(<CheckIcon />),
+      render(<CloseIcon />),
+    ];
+
+    for (const { container } of icons) {
+      const svg = container.querySelector('svg');
+      const width = svg?.getAttribute('width');
+      const height = svg?.getAttribute('height');
+      expect(Number(width)).toBeGreaterThan(0);
+      expect(Number(height)).toBeGreaterThan(0);
+    }
+  });
+
+  it('CopyIcon and CheckIcon use compact 20 px sizing appropriate for inline/mobile use', () => {
+    const { container: copyContainer } = render(<CopyIcon />);
+    const { container: checkContainer } = render(<CheckIcon />);
+
+    expect(Number(copyContainer.querySelector('svg')?.getAttribute('width'))).toBe(20);
+    expect(Number(copyContainer.querySelector('svg')?.getAttribute('height'))).toBe(20);
+    expect(Number(checkContainer.querySelector('svg')?.getAttribute('width'))).toBe(20);
+    expect(Number(checkContainer.querySelector('svg')?.getAttribute('height'))).toBe(20);
+  });
+
+  it('CloseIcon uses a smaller 18 px footprint suitable for dismissal controls on narrow viewports', () => {
+    const { container } = render(<CloseIcon />);
+    const svg = container.querySelector('svg');
+
+    expect(Number(svg?.getAttribute('width'))).toBe(18);
+    expect(Number(svg?.getAttribute('height'))).toBe(18);
+  });
+
+  it('ZapIcon and BoxIcon use 24 px sizing that stays within standard mobile touch-target bounds', () => {
+    const { container: zapContainer } = render(<ZapIcon />);
+    const { container: boxContainer } = render(<BoxIcon />);
+
+    const TOUCH_TARGET = 48;
+    for (const container of [zapContainer, boxContainer]) {
+      const width = Number(container.querySelector('svg')?.getAttribute('width'));
+      const height = Number(container.querySelector('svg')?.getAttribute('height'));
+      expect(width).toBe(24);
+      expect(height).toBe(24);
+      expect(width).toBeLessThanOrEqual(TOUCH_TARGET);
+      expect(height).toBeLessThanOrEqual(TOUCH_TARGET);
+    }
+  });
+});

app/template.responsive-breakpoints.test.tsx

@@ -0,0 +1,173 @@
+import React, { forwardRef } from 'react';
+import { cleanup, render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { afterAll, beforeAll, afterEach, describe, expect, it, vi } from 'vitest';
+import Template from './template';
+
+// Use forwardRef to ensure we properly handle components that expect refs,
+// preventing warnings or breaks when animation libraries are mocked out.
+type MotionDivProps = React.HTMLAttributes<HTMLDivElement> & {
+  children?: React.ReactNode;
+};
+
+vi.mock('framer-motion', () => {
+  const MockDiv = forwardRef<HTMLDivElement, MotionDivProps>(({ children, ...props }, ref) => (
+    <div ref={ref} {...props}>
+      {children}
+    </div>
+  ));
+  MockDiv.displayName = 'MotionDiv';
+  return {
+    motion: {
+      div: MockDiv,
+    },
+  };
+});
+
+// Store original window globals so we can cleanly restore them between tests.
+const originalMatchMedia = window.matchMedia;
+const originalInnerWidth = window.innerWidth;
+
+beforeAll(() => {
+  // Override matchMedia to support dynamic queries based on the simulated window width.
+  Object.defineProperty(window, 'matchMedia', {
+    writable: true,
+    configurable: true,
+    value: vi.fn().mockImplementation((query) => {
+      const match = query.match(/max-width:\s*(\d+)px/);
+      let matches = false;
+      if (match) {
+        matches = window.innerWidth <= parseInt(match[1], 10);
+      }
+      return {
+        matches,
+        media: query,
+        onchange: null,
+        addListener: vi.fn(),
+        removeListener: vi.fn(),
+        addEventListener: vi.fn(),
+        removeEventListener: vi.fn(),
+        dispatchEvent: vi.fn(),
+      };
+    }),
+  });
+});
+
+afterAll(() => {
+  Object.defineProperty(window, 'matchMedia', {
+    writable: true,
+    configurable: true,
+    value: originalMatchMedia,
+  });
+});
+
+afterEach(() => {
+  cleanup();
+  vi.restoreAllMocks();
+  Object.defineProperty(window, 'innerWidth', {
+    writable: true,
+    configurable: true,
+    value: originalInnerWidth,
+  });
+});
+
+// A standard responsive fixture layout wrapped inside the Template
+function ResponsiveFixture() {
+  const [menuOpen, setMenuOpen] = React.useState(false);
+
+  return (
+    <Template>
+      <div className="w-full max-w-full overflow-hidden" data-testid="app-container">
+        <nav className="flex flex-wrap items-center justify-between p-4" data-testid="navigation">
+          <div className="text-lg font-bold">Logo</div>
+
+          {/* Mobile Toggle State */}
+          <button
+            className="block p-2 md:hidden"
+            data-testid="mobile-toggle"
+            onClick={() => setMenuOpen(!menuOpen)}
+            aria-expanded={menuOpen}
+          >
+            Menu
+          </button>
+
+          {/* Nav Links */}
+          <ul
+            data-testid="nav-links"
+            className={`${menuOpen ? 'flex' : 'hidden'} w-full flex-col md:flex md:w-auto md:flex-row`}
+          >
+            <li>Link 1</li>
+            <li>Link 2</li>
+          </ul>
+        </nav>
+
+        {/* Columns that reflow on mobile */}
+        <main className="flex w-full flex-col gap-4 md:flex-row" data-testid="content-columns">
+          <section className="w-full flex-1" data-testid="column-1">
+            Column 1
+          </section>
+          <section className="w-full flex-1" data-testid="column-2">
+            Column 2
+          </section>
+        </main>
+      </div>
+    </Template>
+  );
+}
+
+describe('AppTemplate Responsive Breakpoints (Variation 7)', () => {
+  // Since JSDOM doesn't natively compute CSS media queries to reflow layout,
+  // we validate the "Responsive Class Contract" applied to our elements.
+  it('Case 1: Verifies the presence of responsive flex-col and md:flex-row classes for column reflow', () => {
+    render(<ResponsiveFixture />);
+    const columnsContainer = screen.getByTestId('content-columns');
+
+    // Validates the component applies the correct responsive variants
+    expect(columnsContainer.className).toContain('flex-col');
+    expect(columnsContainer.className).toContain('md:flex-row');
+  });
+
+  it('Case 2: Prevents absolute widths that cause horizontal scrollbars', () => {
+    render(<ResponsiveFixture />);
+    const container = screen.getByTestId('app-container');
+
+    // Expect responsive fluid classes, reject hardcoded pixel widths
+    expect(container.className).toContain('w-full');
+    expect(container.className).toContain('max-w-full');
+    expect(container.className).not.toMatch(/w-\[\d+px\]/);
+  });
+
+  it('Case 3: Scales navigation components gracefully on smaller viewports', () => {
+    render(<ResponsiveFixture />);
+    const nav = screen.getByTestId('navigation');
+
+    expect(nav.className).toContain('flex-wrap');
+    expect(nav.className).toContain('justify-between');
+  });
+
+  it('Case 4: Asserts mobile-specific toggle states respond cleanly', async () => {
+    // using userEvent for realistic interaction simulation
+    const user = userEvent.setup();
+    render(<ResponsiveFixture />);
+    const toggle = screen.getByTestId('mobile-toggle');
+    const navLinks = screen.getByTestId('nav-links');
+
+    // Default mobile state (closed)
+    expect(toggle.getAttribute('aria-expanded')).toBe('false');
+    expect(navLinks.className).toContain('hidden');
+
+    // Toggle mobile menu (open)
+    await user.click(toggle);
+    expect(toggle.getAttribute('aria-expanded')).toBe('true');
+    expect(navLinks.className).toContain('flex');
+    expect(navLinks.className).not.toContain('hidden');
+  });
+
+  it('Case 5: Verifies the desktop layout responsive variant is present', () => {
+    render(<ResponsiveFixture />);
+    const columnsContainer = screen.getByTestId('content-columns');
+
+    // Asserts that the desktop override class is available to the browser engine
+    expect(columnsContainer.className).toContain('md:flex-row');
+  });
+});