All checks were successful
Gitea CI / test-build (push) Successful in 11m9s
- Hero now renders server-side, eliminating JS dependency for LCP text - CMS messages fetched server-side instead of client useEffect - Removes Hero from client JS bundle (~5KB less) - LCP element (hero paragraph) now in initial HTML response - Eliminates 2,380ms 'element rendering delay' reported by PSI Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
62 lines
1.6 KiB
TypeScript
62 lines
1.6 KiB
TypeScript
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) => (
|
|
<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();
|
|
});
|
|
});
|