import { render, screen } from '@testing-library/react';
import { describe, it, expect, vi } from 'vitest';
import Compare from './Compare';
vi.mock('@inertiajs/react', async () => {
const actual = await vi.importActual('@inertiajs/react');
return {
...actual,
Head: ({ children }: { children?: React.ReactNode }) => {children},
Link: ({ children, href }: { children: React.ReactNode; href: string }) => (
{children}
),
usePage: vi.fn(() => ({
props: { auth: { user: null }, errors: {}, flash: {}, app_url: 'https://example.com' },
})),
};
});
vi.mock('@/Components/marketing/MarketingNav', () => ({
MarketingNav: () => ,
}));
vi.mock('@/Components/marketing/MarketingFooter', () => ({
MarketingFooter: () => ,
}));
const mockCompetitors = [
{
slug: 'surfer-seo',
name: 'Surfer SEO',
category: 'Content Optimization',
starting_price: '$89/mo',
description: 'Generic content editor.',
},
{
slug: 'ahrefs',
name: 'Ahrefs',
category: 'SEO Suite',
starting_price: '$99/mo',
description: 'Backlink and keyword tool.',
},
];
describe('Compare', () => {
it('renders the compare hub heading', () => {
render();
expect(screen.getByRole('heading', { level: 1 })).toBeInTheDocument();
});
it('renders a card for each competitor', () => {
render();
expect(screen.getAllByText(/vs\..*Surfer SEO/i).length).toBeGreaterThan(0);
expect(screen.getAllByText(/vs\..*Ahrefs/i).length).toBeGreaterThan(0);
});
it('renders competitor pricing', () => {
render();
expect(screen.getByText('$89/mo')).toBeInTheDocument();
});
it('renders primary CTA', () => {
render();
const ctaButtons = screen.getAllByText(/Start Free Analysis/i);
expect(ctaButtons.length).toBeGreaterThan(0);
});
it('renders flagship claim in hero', () => {
render();
expect(
screen.getByText(/The Only WordPress SEO Tool That Proves What Worked/i),
).toBeInTheDocument();
});
});