Merge branch 'main' into issue-resume-preview-error-resilience

Author: Tuba1809

components/WallOfLove.error-resilience.test.tsx

@@ -0,0 +1,130 @@
+import { expect, it, describe, vi, beforeEach, beforeAll } from 'vitest';
+import { render, screen, fireEvent } from '@testing-library/react';
+import React, { Component, ErrorInfo, ReactNode } from 'react';
+
+const mockTelemetry = {
+  trackException: vi.fn(),
+};
+
+vi.mock('../utils/telemetry', () => ({
+  telemetry: {
+    trackException: (...args: unknown[]) => mockTelemetry.trackException(...args),
+  },
+}));
+
+interface Props {
+  children: ReactNode;
+  forceError?: boolean;
+}
+
+interface State {
+  hasError: boolean;
+}
+
+class TestErrorBoundary extends Component<Props, State> {
+  public state: State = {
+    hasError: this.props.forceError || false,
+  };
+
+  public componentDidMount() {
+    if (this.props.forceError) {
+      this.componentDidCatch(new Error('Database connectivity error'), { componentStack: '' });
+    }
+  }
+
+  public componentDidCatch(error: Error, errorInfo: ErrorInfo) {
+    mockTelemetry.trackException(error, errorInfo);
+  }
+
+  public render() {
+    if (this.state.hasError) {
+      return (
+        <div data-testid="error-fallback">
+          <h2>Something went wrong</h2>
+          <button onClick={() => this.setState({ hasError: false })}>Retry</button>
+        </div>
+      );
+    }
+
+    return this.props.children;
+  }
+}
+
+describe('WallOfLove Error Resilience', () => {
+  let WallOfLoveModule: React.ComponentType<{ tweets: unknown[] }>;
+
+  beforeAll(async () => {
+    Object.defineProperty(window, 'matchMedia', {
+      writable: true,
+      value: vi.fn().mockImplementation((query) => ({
+        matches: false,
+        media: query,
+        onchange: null,
+        addListener: vi.fn(),
+        removeListener: vi.fn(),
+        addEventListener: vi.fn(),
+        removeEventListener: vi.fn(),
+        dispatchEvent: vi.fn(),
+      })),
+    });
+
+    const mod = await import('./WallOfLove');
+    WallOfLoveModule = mod.WallOfLove;
+  });
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+    vi.spyOn(console, 'error').mockImplementation(() => {});
+  });
+
+  it('should maintain hydration stability when initial data is missing', () => {
+    const { container } = render(<WallOfLoveModule tweets={[]} />);
+    expect(container).toBeDefined();
+  });
+
+  it('should render error recovery UI when runtime exception occurs', () => {
+    render(
+      <TestErrorBoundary forceError={true}>
+        <WallOfLoveModule tweets={[]} />
+      </TestErrorBoundary>
+    );
+
+    expect(screen.getByTestId('error-fallback')).toBeDefined();
+    expect(screen.getByText(/something went wrong/i)).toBeDefined();
+  });
+
+  it('should log exception to dev-telemetry tracker on failure', () => {
+    render(
+      <TestErrorBoundary forceError={true}>
+        <WallOfLoveModule tweets={[]} />
+      </TestErrorBoundary>
+    );
+
+    expect(mockTelemetry.trackException).toHaveBeenCalled();
+  });
+
+  it('should prevent full screen crashes using localized boundary containment', () => {
+    render(
+      <div>
+        <header data-testid="app-header">App Header</header>
+        <TestErrorBoundary forceError={true}>
+          <WallOfLoveModule tweets={[]} />
+        </TestErrorBoundary>
+      </div>
+    );
+    expect(screen.getByTestId('app-header')).toBeDefined();
+  });
+
+  it('should trigger user reset or reload path on recovery panel click', () => {
+    render(
+      <TestErrorBoundary forceError={true}>
+        <WallOfLoveModule tweets={[]} />
+      </TestErrorBoundary>
+    );
+
+    const resetButton = screen.getByRole('button', { name: /retry/i });
+    fireEvent.click(resetButton);
+
+    expect(screen.queryByTestId('error-fallback')).toBeNull();
+  });
+});

components/dashboard/HistoricalTrendView.accessibility.test.tsx

@@ -0,0 +1,197 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { render, screen, fireEvent, act } from '@testing-library/react';
+import type { DashboardPeriod } from '@/utils/dashboardPeriod';
+import type { ActivityData } from '@/types/dashboard';
+import HistoricalTrendView from './HistoricalTrendView';
+import '@testing-library/jest-dom/vitest';
+
+beforeEach(() => {
+  const MockResizeObserver = class {
+    observe = vi.fn();
+    unobserve = vi.fn();
+    disconnect = vi.fn();
+  };
+  vi.stubGlobal('ResizeObserver', MockResizeObserver);
+});
+
+afterEach(() => {
+  vi.unstubAllGlobals();
+});
+
+vi.mock('next/navigation', () => ({
+  useRouter: () => ({
+    push: vi.fn(),
+  }),
+}));
+
+vi.mock('framer-motion', async () => {
+  const React = await import('react');
+  const MotionDiv = React.forwardRef<
+    HTMLDivElement,
+    React.HTMLAttributes<HTMLDivElement> & Record<string, unknown>
+  >((props, ref) => {
+    const domProps = { ...props };
+    delete domProps.whileInView;
+    delete domProps.viewport;
+    delete domProps.initial;
+    delete domProps.animate;
+    delete domProps.exit;
+    delete domProps.transition;
+    return React.createElement('div', { ref, ...domProps });
+  });
+  MotionDiv.displayName = 'MotionDiv';
+  return {
+    motion: {
+      div: MotionDiv,
+    },
+    AnimatePresence: ({ children }: { children: React.ReactNode }) => <>{children}</>,
+  };
+});
+
+const mockPeriod: DashboardPeriod = {
+  kind: 'month',
+  month: '2026-06',
+  label: 'June 2026',
+  from: '2026-06-01T00:00:00.000Z',
+  to: '2026-06-30T23:59:59.999Z',
+};
+
+const mockActivity: ActivityData[] = Array.from({ length: 30 }, (_, index) => ({
+  date: `2026-06-${String(index + 1).padStart(2, '0')}`,
+  count: index % 3 === 0 ? 5 : 0,
+  intensity: index % 3 === 0 ? 2 : 0,
+}));
+
+describe('HistoricalTrendView - Accessibility & Aria compliance (Variation 4)', () => {
+  // Case 1: Verifies interactive grids expose valid cell coordinate label configurations
+  it('Case 1: Inspect markup landmarks to verify the correct usage of accessible coordinate labels on container modules', () => {
+    render(<HistoricalTrendView username="ashish" activity={mockActivity} period={mockPeriod} />);
+
+    const grid = screen.getByRole('grid');
+    expect(grid).toBeInTheDocument();
+
+    const rows = screen.getAllByRole('row');
+    expect(rows.length).toBeGreaterThan(0);
+
+    const cells = screen.getAllByRole('gridcell');
+    expect(cells.length).toBeGreaterThan(0);
+
+    cells.forEach((cell) => {
+      expect(cell).toHaveAttribute('aria-label');
+      expect(cell.getAttribute('aria-label')).toMatch(/contributions? on/i);
+    });
+  });
+
+  // Case 2: Confirms active form and keyboard interaction nodes maintain focus indicator rings
+  it('Case 2: Assert interactive nodes designed to accept focus maintain visible outline class parameters', () => {
+    const { container } = render(
+      <HistoricalTrendView username="ashish" activity={mockActivity} period={mockPeriod} />
+    );
+
+    // Verify inputs can receive focus natively to test accessibility behaviors
+    const inputs = container.querySelectorAll('input');
+    expect(inputs.length).toBeGreaterThan(0);
+    act(() => {
+      inputs.forEach((input) => {
+        input.focus();
+        expect(document.activeElement).toBe(input);
+      });
+    });
+
+    // Verify grid cells are natively capable of receiving focus
+    const cells = screen.getAllByRole('gridcell');
+    expect(cells.length).toBeGreaterThan(0);
+    act(() => {
+      cells.forEach((cell) => {
+        expect(cell).toHaveProperty('tabIndex', 0);
+        cell.focus();
+        expect(document.activeElement).toBe(cell);
+      });
+    });
+  });
+
+  // Case 3: Confirms focused cells successfully spawn announced overlays reflecting target string definitions
+  it('Case 3: Verify the trend data tooltip triggers accurately match and announce their descriptive accessibility target nodes', async () => {
+    render(<HistoricalTrendView username="ashish" activity={mockActivity} period={mockPeriod} />);
+
+    const cells = screen.getAllByRole('gridcell');
+    const firstCell = cells[0];
+    const cellLabel = firstCell.getAttribute('aria-label');
+
+    await act(async () => {
+      fireEvent.focus(firstCell);
+    });
+
+    const tooltip = await screen.findByRole('tooltip');
+    expect(tooltip).toBeInTheDocument();
+    expect(tooltip).toHaveTextContent(cellLabel || '');
+  });
+
+  // Case 4: Evaluates chronological tab indexes across controls and grid structures
+  it('Case 4: Test keyboard control path selectors to ensure normal tab ordering', () => {
+    const { container } = render(
+      <HistoricalTrendView username="ashish" activity={mockActivity} period={mockPeriod} />
+    );
+
+    // Using lowercase tabindex in resilient selector query to fetch focusable elements
+    const focusable = Array.from(
+      container.querySelectorAll('button, input, [tabindex]:not([tabindex="-1"])')
+    ) as HTMLElement[];
+
+    expect(focusable.length).toBeGreaterThan(0);
+
+    const previousBtn = screen.getByRole('button', { name: /previous/i });
+    const nextBtn = screen.getByRole('button', { name: /next/i });
+    const cells = screen.getAllByRole('gridcell');
+
+    expect(previousBtn).toBeInTheDocument();
+    expect(nextBtn).toBeInTheDocument();
+    expect(cells[0]).toBeInTheDocument();
+
+    const prevIndex = focusable.indexOf(previousBtn);
+    const nextIndex = focusable.indexOf(nextBtn);
+    const firstCellIndex = focusable.indexOf(cells[0]);
+
+    expect(prevIndex).toBeGreaterThanOrEqual(0);
+    expect(nextIndex).toBeGreaterThanOrEqual(0);
+    expect(firstCellIndex).toBeGreaterThanOrEqual(0);
+
+    expect(prevIndex).toBeLessThan(nextIndex);
+
+    const monthInput = container.querySelector('input[name="month"]');
+    const yearInput = container.querySelector('input[name="year"]');
+
+    expect(monthInput).toBeInTheDocument();
+    expect(yearInput).toBeInTheDocument();
+
+    const monthIndex = focusable.indexOf(monthInput as HTMLElement);
+    const yearIndex = focusable.indexOf(yearInput as HTMLElement);
+
+    expect(monthIndex).toBeGreaterThanOrEqual(0);
+    expect(yearIndex).toBeGreaterThanOrEqual(0);
+
+    expect(nextIndex).toBeLessThan(monthIndex);
+    expect(monthIndex).toBeLessThan(yearIndex);
+    expect(yearIndex).toBeLessThan(firstCellIndex);
+  });
+
+  // Case 5: Ensures typography progression tree handles semantic levels without dropping sequence nodes
+  it('Case 5: Confirm that standard typography headings follow a logical hierarchical numerical sequence', () => {
+    const { container } = render(
+      <HistoricalTrendView username="ashish" activity={mockActivity} period={mockPeriod} />
+    );
+
+    const headings = Array.from(
+      container.querySelectorAll('h1, h2, h3, h4, h5, h6')
+    ) as HTMLElement[];
+    expect(headings.length).toBeGreaterThan(0);
+
+    const levels = headings.map((h) => parseInt(h.tagName.substring(1), 10));
+
+    for (let i = 0; i < levels.length - 1; i++) {
+      const current = levels[i];
+      const next = levels[i + 1];
+      expect(next - current).toBeLessThanOrEqual(1);
+    }
+  });
+});