Merge branch 'main' into resumesection

Author: kanishka-2007-tech

app/components/CopyRepoButton.accessibility.test.tsx

@@ -0,0 +1,55 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+
+import CopyRepoButton from './CopyRepoButton';
+
+vi.mock('lucide-react', () => ({
+  Copy: () => <svg aria-hidden="true" data-testid="copy-icon" />,
+}));
+
+Object.assign(navigator, {
+  clipboard: {
+    writeText: vi.fn().mockResolvedValue(undefined),
+  },
+});
+
+describe('CopyRepoButton accessibility behavior', () => {
+  it('renders as an accessible button with visible label', () => {
+    render(<CopyRepoButton />);
+
+    expect(screen.getByRole('button', { name: /copy url/i })).toBeDefined();
+  });
+
+  it('keeps decorative copy icon hidden from assistive technology', () => {
+    render(<CopyRepoButton />);
+
+    expect(screen.getByTestId('copy-icon').getAttribute('aria-hidden')).toBe('true');
+  });
+
+  it('is keyboard focusable through the native button element', () => {
+    render(<CopyRepoButton />);
+
+    const button = screen.getByRole('button', { name: /copy url/i });
+    button.focus();
+
+    expect(document.activeElement).toBe(button);
+  });
+
+  it('updates accessible button name after successful copy action', async () => {
+    render(<CopyRepoButton />);
+
+    const button = screen.getByRole('button', { name: /copy url/i });
+    fireEvent.click(button);
+
+    expect(await screen.findByRole('button', { name: /copied/i })).toBeDefined();
+  });
+
+  it('preserves semantic button role after interaction', async () => {
+    render(<CopyRepoButton />);
+
+    fireEvent.click(screen.getByRole('button', { name: /copy url/i }));
+
+    expect(await screen.findByRole('button', { name: /copied/i })).toBeDefined();
+    expect(screen.getAllByRole('button')).toHaveLength(1);
+  });
+});

app/contributors/page.type-compiler.test.tsx

@@ -0,0 +1,100 @@
+import { describe, it, expect, expectTypeOf } from 'vitest';
+import { z } from 'zod';
+
+// Type definitions used by the contributors page
+type ExpectedContributor = {
+  id: number;
+  username: string;
+  avatarUrl: string;
+  contributions: number;
+};
+
+type PageProps = {
+  contributors: ExpectedContributor[];
+  showAvatars?: boolean;
+  topN?: number;
+};
+
+describe('ContributorsPage type & schema compiler checks (Variation 10)', () => {
+  it('Case 1: Validate core property shapes match design boundaries', () => {
+    type Matching = {
+      id: number;
+      username: string;
+      avatarUrl: string;
+      contributions: number;
+    };
+
+    expectTypeOf<Matching>().toEqualTypeOf<ExpectedContributor>();
+  });
+
+  it('Case 2: Ensure invalid parameters are blocked via static assignability', () => {
+    type Invalid = {
+      id: string; // wrong type
+      username: number; // wrong type
+      contributions?: string; // wrong and optional
+    };
+
+    expectTypeOf<Invalid>().not.toMatchTypeOf<ExpectedContributor>();
+  });
+
+  it('Case 3: Optional fields accepted safely without compile-time warnings', () => {
+    const minimal: PageProps = {
+      contributors: [{ id: 1, username: 'bob', avatarUrl: '/img/bob.png', contributions: 3 }],
+    };
+
+    expect(minimal.contributors.length).toBe(1);
+    type MinimalType = typeof minimal;
+    expectTypeOf<MinimalType>().toMatchTypeOf<PageProps>();
+  });
+
+  it('Case 4: Zod runtime schema flags out-of-bound structural types with flat reports', () => {
+    const contributorSchema = z
+      .object({
+        id: z.number().int().positive(),
+        username: z.string().min(1),
+        avatarUrl: z.string().min(1),
+        contributions: z.number().int().nonnegative(),
+      })
+      .strict();
+
+    const bad = {
+      id: -5,
+      username: '',
+      avatarUrl: 12345,
+      contributions: -1,
+      extra: 'unexpected',
+    } as unknown;
+
+    try {
+      contributorSchema.parse(bad);
+      expect(false).toBe(true);
+    } catch (err) {
+      const zErr = err as z.ZodError;
+      expect(zErr.issues.length).toBeGreaterThan(0);
+      // flat validation: all issue paths are shallow (no deep nesting)
+      const allShallow = zErr.issues.every((i) => i.path.length <= 1);
+      expect(allShallow).toBe(true);
+    }
+  });
+
+  it('Case 5: Correct payloads safely clear validation limits', () => {
+    const contributorSchema = z.object({
+      id: z.number().int().positive(),
+      username: z.string().min(1),
+      avatarUrl: z.string().min(1),
+      contributions: z.number().int().nonnegative(),
+    });
+
+    const good = {
+      id: 2,
+      username: 'alice',
+      avatarUrl: 'https://cdn.test/a.png',
+      contributions: 10,
+    };
+
+    const parsed = contributorSchema.parse(good);
+    expect(parsed).toEqual(good);
+    type ParsedType = z.infer<typeof contributorSchema>;
+    expectTypeOf<ParsedType>().toEqualTypeOf<ExpectedContributor>();
+  });
+});

app/template.theme-contrast.test.tsx

@@ -0,0 +1,128 @@
+import React from 'react';
+import { render, screen, act } from '@testing-library/react';
+import { describe, it, expect } from 'vitest';
+import Template from './template';
+
+// Contrast utilities (sRGB luminance & ratio)
+function hexToRgb(hex: string) {
+  const sanitized = hex.replace('#', '');
+  const bigint = parseInt(
+    sanitized.length === 3
+      ? sanitized
+          .split('')
+          .map((c) => c + c)
+          .join('')
+      : sanitized,
+    16
+  );
+  return {
+    r: (bigint >> 16) & 255,
+    g: (bigint >> 8) & 255,
+    b: bigint & 255,
+  };
+}
+
+function linearizeChannel(channel: number) {
+  const srgb = channel / 255;
+  return srgb <= 0.03928 ? srgb / 12.92 : Math.pow((srgb + 0.055) / 1.055, 2.4);
+}
+
+function luminance(hex: string) {
+  const { r, g, b } = hexToRgb(hex);
+  return 0.2126 * linearizeChannel(r) + 0.7152 * linearizeChannel(g) + 0.0722 * linearizeChannel(b);
+}
+
+function contrastRatio(hex1: string, hex2: string) {
+  const L1 = luminance(hex1);
+  const L2 = luminance(hex2);
+  const lighter = Math.max(L1, L2);
+  const darker = Math.min(L1, L2);
+  return (lighter + 0.05) / (darker + 0.05);
+}
+
+describe('App Template theme contrast checks (Variation 3)', () => {
+  it('Case 1: Emulate a light preset and assert structural identifiers appear', () => {
+    // Simulate global light preset
+    document.documentElement.setAttribute('data-theme', 'light');
+
+    render(
+      <Template>
+        <div data-testid="child-light">Light mode content</div>
+      </Template>
+    );
+
+    expect(document.documentElement.getAttribute('data-theme')).toBe('light');
+    expect(screen.getByTestId('child-light')).toBeTruthy();
+  });
+
+  it('Case 2: Emulate a dark preset and verify class adaptations align', () => {
+    // Simulate dark preset via class
+    document.documentElement.classList.add('theme-dark');
+    render(
+      <Template>
+        <div data-testid="child-dark">Dark mode content</div>
+      </Template>
+    );
+
+    expect(document.documentElement.classList.contains('theme-dark')).toBe(true);
+    expect(screen.getByTestId('child-dark')).toBeTruthy();
+  });
+
+  it('Case 3: Style token strings contain premium color tokens meeting accessibility contrast', () => {
+    // Example tokens (background and foreground)
+    const bg = '#ffffff';
+    const fg = '#0f172a'; // Tailwind slate-900 similar
+
+    const ratio = contrastRatio(bg, fg);
+    // WCAG AA for normal text requires >= 4.5
+    expect(ratio).toBeGreaterThanOrEqual(4.5);
+  });
+
+  it('Case 4: Background overlays do not clip or hide text colors', () => {
+    const { container } = render(
+      <Template>
+        <div style={{ position: 'relative' }}>
+          <div
+            data-testid="overlay"
+            style={{ position: 'absolute', inset: 0, zIndex: 0, opacity: 0.6 }}
+          />
+          <div data-testid="text" style={{ position: 'relative', zIndex: 1 }}>
+            Visible text
+          </div>
+        </div>
+      </Template>
+    );
+
+    const overlay = screen.getByTestId('overlay');
+    const text = screen.getByTestId('text');
+
+    // Validate DOM stacking via zIndex values (overlay beneath text)
+    const overlayZ = (overlay as HTMLElement).style.zIndex || '0';
+    const textZ = (text as HTMLElement).style.zIndex || '0';
+    expect(Number(textZ)).toBeGreaterThanOrEqual(Number(overlayZ));
+
+    // Ensure text node remains in document and not occluded by being removed
+    expect(container.contains(text)).toBe(true);
+  });
+
+  it('Case 5: Custom style variables and class bindings remain active across transitions', () => {
+    // set custom variable
+    document.documentElement.style.setProperty('--brand', '#123456');
+    // Render template once
+    render(
+      <Template>
+        <div data-testid="brand">Brand</div>
+      </Template>
+    );
+
+    // Toggle theme attribute to simulate a global transition
+    act(() => {
+      document.documentElement.setAttribute('data-theme', 'dark');
+    });
+
+    const preserved = document.documentElement.style.getPropertyValue('--brand');
+    expect(preserved).toBe('#123456');
+    expect(document.documentElement.getAttribute('data-theme')).toBe('dark');
+    expect(screen.getByTestId('brand')).toBeTruthy();
+  });
+});