portfolio/app/__tests__/components/Hero.test.tsx

import { render, screen } from '@testing-library/react';
import Hero from '@/app/components/Hero';

// Mock next-intl/server
jest.mock('next-intl/server', () => ({
  getTranslations: () => Promise.resolve((key: string) => {
    const messages: Record<string, string> = {
      description: 'Dennis is a student and passionate self-hoster.',
      ctaWork: 'View My Work',
      ctaContact: 'Get in touch',
    };
    return messages[key] || key;
  }),
}));

// Mock directus getMessages
jest.mock('@/lib/directus', () => ({
  getMessages: () => Promise.resolve({}),
}));

// Mock next/image
interface ImageProps {
  src: string;
  alt: string;
  fill?: boolean;
  priority?: boolean;
  [key: string]: unknown;
}

jest.mock('next/image', () => ({
  __esModule: true,
  default: ({ src, alt, fill, priority, ...props }: ImageProps) => (
    // eslint-disable-next-line @next/next/no-img-element
    <img 
      src={src} 
      alt={alt} 
      data-fill={fill?.toString()} 
      data-priority={priority?.toString()} 
      {...props} 
    />
  ),
}));

describe('Hero', () => {
  it('renders the hero section correctly', async () => {
    const HeroResolved = await Hero({ locale: 'en' });
    render(HeroResolved);
    
    // Check for the main headlines (defaults in Hero.tsx)
    expect(screen.getByText('Building')).toBeInTheDocument();
    expect(screen.getByText('Stuff.')).toBeInTheDocument();
    
    // Check for the description from our mock
    expect(screen.getByText(/Dennis is a student/i)).toBeInTheDocument();
    
    // Check for the image
    expect(screen.getByAltText('Dennis Konkol')).toBeInTheDocument();
    
    // Check for CTA
    expect(screen.getByText('View My Work')).toBeInTheDocument();
  });
});