test: add component and page integration tests with mocking for core features and UI states

Author: JhaSourav07

app/(root)/[username]/page.test.tsx

@@ -0,0 +1,108 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { render, screen } from '@testing-library/react';
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import DashboardPage, { generateMetadata } from './page';
+import { getFullDashboardData } from '@/lib/github';
+
+vi.mock('@/lib/github', () => ({
+  getFullDashboardData: vi.fn(),
+}));
+
+// Mock the dashboard components to keep the test focused on the page rendering logic
+vi.mock('@/components/dashboard/ProfileCard', () => ({
+  default: () => <div data-testid="profile-card">ProfileCard</div>,
+}));
+vi.mock('@/components/dashboard/ActivityLandscape', () => ({
+  default: () => <div data-testid="activity-landscape">ActivityLandscape</div>,
+}));
+vi.mock('@/components/dashboard/StatsCard', () => ({
+  default: ({ title, value }: any) => (
+    <div data-testid="stats-card">
+      {title}: {value}
+    </div>
+  ),
+}));
+vi.mock('@/components/dashboard/LanguageChart', () => ({
+  default: () => <div data-testid="language-chart">LanguageChart</div>,
+}));
+vi.mock('@/components/dashboard/CommitClock', () => ({
+  default: () => <div data-testid="commit-clock">CommitClock</div>,
+}));
+vi.mock('@/components/dashboard/Heatmap', () => ({
+  default: () => <div data-testid="heatmap">Heatmap</div>,
+}));
+vi.mock('@/components/dashboard/AIInsights', () => ({
+  default: () => <div data-testid="ai-insights">AIInsights</div>,
+}));
+vi.mock('@/components/dashboard/Achievements', () => ({
+  default: () => <div data-testid="achievements">Achievements</div>,
+}));
+
+describe('DashboardPage', () => {
+  const mockData = {
+    profile: {
+      username: 'octocat',
+      name: 'The Octocat',
+      avatarUrl: 'avatar.png',
+      isPro: true,
+      bio: 'Hello world',
+      location: 'Earth',
+      joinedDate: 'Jan 2020',
+      developerScore: 90,
+      stats: { repositories: 10, followers: 20, following: 5, stars: 100 },
+    },
+    stats: {
+      currentStreak: 5,
+      peakStreak: 15,
+      totalContributions: 500,
+    },
+    languages: [{ name: 'TypeScript', percentage: 100, color: '#3178c6' }],
+    activity: [],
+    insights: [],
+    commitClock: [],
+  };
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+    vi.mocked(getFullDashboardData).mockResolvedValue(mockData);
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  describe('generateMetadata', () => {
+    it('generates correct metadata for a given user', async () => {
+      const metadata = await generateMetadata({ params: Promise.resolve({ username: 'octocat' }) });
+
+      expect(metadata.title).toBe("octocat's Commit Pulse");
+      expect(metadata.description).toContain("octocat's GitHub contribution pulse");
+      expect((metadata.openGraph?.images as any[])?.[0].url).toContain('api/og?username=octocat');
+    });
+  });
+
+  describe('DashboardPage rendering', () => {
+    it('renders the dashboard components with the fetched data', async () => {
+      const PageContent = await DashboardPage({ params: Promise.resolve({ username: 'octocat' }) });
+      render(PageContent);
+
+      // Verify data fetching
+      expect(getFullDashboardData).toHaveBeenCalledWith('octocat');
+
+      // Verify layout and component presence
+      expect(screen.getByText('Generate Your Own Dashboard')).toBeDefined();
+      expect(screen.getByTestId('profile-card')).toBeDefined();
+      expect(screen.getByTestId('activity-landscape')).toBeDefined();
+      expect(screen.getByTestId('language-chart')).toBeDefined();
+      expect(screen.getByTestId('commit-clock')).toBeDefined();
+      expect(screen.getByTestId('heatmap')).toBeDefined();
+      expect(screen.getByTestId('ai-insights')).toBeDefined();
+      expect(screen.getByTestId('achievements')).toBeDefined();
+
+      // Verify stats cards mapped correctly
+      expect(screen.getByText('Current Streak: 5')).toBeDefined();
+      expect(screen.getByText('Peak Streak: 15')).toBeDefined();
+      expect(screen.getByText('Contributions: 500')).toBeDefined();
+    });
+  });
+});

app/page.test.tsx

@@ -0,0 +1,140 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/* eslint-disable @next/next/no-img-element, jsx-a11y/alt-text */
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import LandingPage from './page';
+
+// Mock child components to isolate LandingPage testing
+vi.mock('./components/CustomizeCTA', () => ({
+  CustomizeCTA: () => <div data-testid="customize-cta">Customize CTA</div>,
+}));
+
+vi.mock('@/components/commitpulse-logo', () => ({
+  CommitPulseLogo: () => <svg data-testid="commitpulse-logo"></svg>,
+}));
+
+vi.mock('next/image', () => ({
+  default: (props: any) => <img {...props} data-testid="next-image" />,
+}));
+
+vi.mock('next/link', () => ({
+  default: ({ children, href, ...props }: any) => (
+    <a href={href} {...props} data-testid="next-link">
+      {children}
+    </a>
+  ),
+}));
+
+// Mock framer-motion
+vi.mock('framer-motion', () => ({
+  motion: {
+    div: ({ children, className, ...props }: any) => (
+      <div className={className} data-testid="motion-div" {...props}>
+        {children}
+      </div>
+    ),
+    p: ({ children, className, ...props }: any) => (
+      <p className={className} data-testid="motion-p" {...props}>
+        {children}
+      </p>
+    ),
+  },
+  AnimatePresence: ({ children }: any) => <>{children}</>,
+}));
+
+describe('LandingPage', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+
+    // Mock navigator.clipboard
+    Object.assign(navigator, {
+      clipboard: {
+        writeText: vi.fn().mockResolvedValue(undefined),
+      },
+    });
+
+    // Mock scrollIntoView
+    window.HTMLElement.prototype.scrollIntoView = vi.fn();
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  it('renders the main heading', () => {
+    render(<LandingPage />);
+    expect(screen.getByText(/Elevate Your/i)).toBeDefined();
+    expect(screen.getByText(/Contribution Story/i)).toBeDefined();
+  });
+
+  it('renders the input field with default username', () => {
+    render(<LandingPage />);
+    const input = screen.getByPlaceholderText('Enter GitHub Username') as HTMLInputElement;
+    expect(input).toBeDefined();
+    expect(input.value).toBe('jhasourav07');
+  });
+
+  it('updates the username when input changes', () => {
+    render(<LandingPage />);
+    const input = screen.getByPlaceholderText('Enter GitHub Username') as HTMLInputElement;
+
+    fireEvent.change(input, { target: { value: 'octocat' } });
+    expect(input.value).toBe('octocat');
+
+    // The image src should also update
+    const image = screen.getByTestId('next-image') as HTMLImageElement;
+    expect(image.src).toContain('user=octocat');
+  });
+
+  it('handles copying to clipboard and showing the SuccessGuide', async () => {
+    render(<LandingPage />);
+
+    const copyButton = screen.getByText('Copy Link').closest('button');
+    fireEvent.click(copyButton!);
+
+    expect(navigator.clipboard.writeText).toHaveBeenCalledWith(
+      expect.stringContaining(
+        '![CommitPulse](https://commitpulse.vercel.app/api/streak?user=jhasourav07)'
+      )
+    );
+
+    await waitFor(() => {
+      // The button text should change to Copied
+      expect(screen.getByText('Copied')).toBeDefined();
+      // The SuccessGuide should appear
+      expect(screen.getByText('Your Monolith is Ready - Deploy It in 4 Steps')).toBeDefined();
+    });
+  });
+
+  it('renders the FeatureCards', () => {
+    render(<LandingPage />);
+    expect(screen.getByText('Real-time Sync')).toBeDefined();
+    expect(screen.getByText('Theme Engine')).toBeDefined();
+    expect(screen.getByText('Isometric Math')).toBeDefined();
+  });
+
+  it('renders the CustomizeCTA', () => {
+    render(<LandingPage />);
+    expect(screen.getByTestId('customize-cta')).toBeDefined();
+  });
+
+  it('can dismiss the SuccessGuide', async () => {
+    render(<LandingPage />);
+
+    // Trigger copy to show guide
+    const copyButton = screen.getByText('Copy Link').closest('button');
+    fireEvent.click(copyButton!);
+
+    await waitFor(() => {
+      expect(screen.getByText('Your Monolith is Ready - Deploy It in 4 Steps')).toBeDefined();
+    });
+
+    // Dismiss guide
+    const dismissButton = screen.getByLabelText('Dismiss guide');
+    fireEvent.click(dismissButton);
+
+    await waitFor(() => {
+      expect(screen.queryByText('Your Monolith is Ready - Deploy It in 4 Steps')).toBeNull();
+    });
+  });
+});

components/dashboard/ShareSheet.test.tsx

@@ -0,0 +1,144 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import ShareSheet from './ShareSheet';
+
+// Mock html-to-image
+vi.mock('html-to-image', () => ({
+  toPng: vi.fn().mockResolvedValue('data:image/png;base64,mockdata'),
+}));
+
+// Mock framer-motion to avoid animation issues in tests
+vi.mock('framer-motion', () => ({
+  motion: {
+    div: ({ children, className, onClick, ...props }: any) => (
+      <div className={className} onClick={onClick} data-testid="motion-div" {...props}>
+        {children}
+      </div>
+    ),
+    button: ({ children, className, onClick, disabled, ...props }: any) => (
+      <button
+        className={className}
+        onClick={onClick}
+        disabled={disabled}
+        data-testid="motion-button"
+        {...props}
+      >
+        {children}
+      </button>
+    ),
+  },
+  AnimatePresence: ({ children }: any) => <>{children}</>,
+}));
+
+describe('ShareSheet', () => {
+  const defaultProps = {
+    username: 'octocat',
+    isOpen: true,
+    onClose: vi.fn(),
+  };
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+
+    // Mock navigator.clipboard
+    Object.assign(navigator, {
+      clipboard: {
+        writeText: vi.fn().mockResolvedValue(undefined),
+      },
+    });
+
+    // Mock window.open
+    vi.spyOn(window, 'open').mockImplementation(() => null);
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  it('does not render when isOpen is false', () => {
+    const { container } = render(<ShareSheet {...defaultProps} isOpen={false} />);
+    expect(container.firstChild).toBeNull();
+  });
+
+  it('renders correctly when isOpen is true', () => {
+    render(<ShareSheet {...defaultProps} />);
+    expect(screen.getByText('Share Pulse')).toBeDefined();
+    expect(screen.getByText('@octocat')).toBeDefined();
+    expect(screen.getByText('Copy Link')).toBeDefined();
+    expect(screen.getByText('Share on X')).toBeDefined();
+  });
+
+  it('calls onClose when close button is clicked', () => {
+    render(<ShareSheet {...defaultProps} />);
+    const closeButton = screen.getByRole('button', { name: /close/i });
+    fireEvent.click(closeButton);
+    expect(defaultProps.onClose).toHaveBeenCalled();
+  });
+
+  it('calls onClose when overlay is clicked', () => {
+    render(<ShareSheet {...defaultProps} />);
+    const overlay = screen.getAllByTestId('motion-div')[0];
+    fireEvent.click(overlay);
+    expect(defaultProps.onClose).toHaveBeenCalled();
+  });
+
+  it('handles Copy Link action', async () => {
+    render(<ShareSheet {...defaultProps} />);
+    const copyButton = screen.getByText('Copy Link').closest('button');
+    fireEvent.click(copyButton!);
+
+    expect(navigator.clipboard.writeText).toHaveBeenCalledWith(expect.stringContaining('octocat'));
+
+    await waitFor(() => {
+      expect(screen.getByText('Link Copied!')).toBeDefined();
+    });
+  });
+
+  it('handles Share on X action', () => {
+    render(<ShareSheet {...defaultProps} />);
+    const twitterButton = screen.getByText('Share on X').closest('button');
+    fireEvent.click(twitterButton!);
+
+    expect(window.open).toHaveBeenCalledWith(
+      expect.stringContaining('twitter.com/intent/tweet'),
+      '_blank',
+      'noopener'
+    );
+    expect(defaultProps.onClose).toHaveBeenCalled();
+  });
+
+  it('handles Share on LinkedIn action', () => {
+    render(<ShareSheet {...defaultProps} />);
+    const linkedinButton = screen.getByText('Share on LinkedIn').closest('button');
+    fireEvent.click(linkedinButton!);
+
+    expect(window.open).toHaveBeenCalledWith(
+      expect.stringContaining('linkedin.com/sharing/share-offsite'),
+      '_blank',
+      'noopener'
+    );
+    expect(defaultProps.onClose).toHaveBeenCalled();
+  });
+
+  it('handles Download PNG action', async () => {
+    render(<ShareSheet {...defaultProps} />);
+
+    // Create a mock document element to satisfy the selector
+    const mockRoot = document.createElement('div');
+    mockRoot.id = 'dashboard-root';
+    document.body.appendChild(mockRoot);
+
+    const downloadButton = screen.getByText('Download as PNG').closest('button');
+    fireEvent.click(downloadButton!);
+
+    const { toPng } = await import('html-to-image');
+    expect(toPng).toHaveBeenCalled();
+
+    await waitFor(() => {
+      expect(screen.getByText('Downloaded!')).toBeDefined();
+    });
+
+    document.body.removeChild(mockRoot);
+  });
+});