/**
* Tests for HeroSection component
*/
import { render, screen, fireEvent } from '@testing-library/react';
import { HeroSection } from '@/components/home/HeroSection';
// Mock framer-motion
jest.mock('framer-motion', () => ({
motion: {
div: ({ children, ...props }: any) =>
{children}
,
h1: ({ children, ...props }: any) => {children}
,
p: ({ children, ...props }: any) => {children}
,
},
}));
// Mock Next.js Link
jest.mock('next/link', () => ({
__esModule: true,
default: ({ children, href, ...props }: any) => {
return (
{children}
);
},
}));
// Mock DemoCredentialsModal
jest.mock('@/components/home/DemoCredentialsModal', () => ({
DemoCredentialsModal: ({ open, onClose }: any) =>
open ? (
) : null,
}));
describe('HeroSection', () => {
it('renders badge with key highlights', () => {
render(
);
expect(screen.getByText('MIT Licensed')).toBeInTheDocument();
expect(screen.getByText('OAuth 2.0 + i18n')).toBeInTheDocument();
expect(screen.getByText('Pragmatic by Design')).toBeInTheDocument();
});
it('renders main headline', () => {
render(
);
expect(screen.getByText(/The Pragmatic/i)).toBeInTheDocument();
expect(screen.getByText(/Full-Stack Template/i)).toBeInTheDocument();
});
it('renders subheadline with key messaging', () => {
render(
);
expect(screen.getByText(/Opinionated, secure, and production-ready/i)).toBeInTheDocument();
expect(screen.getByText(/Start building features on day one/i)).toBeInTheDocument();
});
it('renders Try Live Demo button', () => {
render(
);
const demoButton = screen.getByRole('button', { name: /try live demo/i });
expect(demoButton).toBeInTheDocument();
});
it('renders View on GitHub link', () => {
render(
);
const githubLink = screen.getByRole('link', { name: /view on github/i });
expect(githubLink).toHaveAttribute('href', 'https://github.com/cardosofelipe/pragma-stack.git');
expect(githubLink).toHaveAttribute('target', '_blank');
expect(githubLink).toHaveAttribute('rel', 'noopener noreferrer');
});
it('renders Explore Components link', () => {
render(
);
const componentsLink = screen.getByRole('link', { name: /explore components/i });
expect(componentsLink).toHaveAttribute('href', '/dev');
});
it('calls onOpenDemoModal when Try Live Demo button is clicked', () => {
const mockOnOpenDemoModal = jest.fn();
render();
const demoButton = screen.getByRole('button', { name: /try live demo/i });
fireEvent.click(demoButton);
expect(mockOnOpenDemoModal).toHaveBeenCalledTimes(1);
});
describe('Accessibility', () => {
it('has proper heading hierarchy', () => {
render(
);
const heading = screen.getAllByRole('heading', { level: 1 })[0];
expect(heading).toBeInTheDocument();
});
it('has proper external link attributes', () => {
render(
);
const githubLink = screen.getByRole('link', { name: /view on github/i });
expect(githubLink).toHaveAttribute('target', '_blank');
expect(githubLink).toHaveAttribute('rel', 'noopener noreferrer');
});
});
});