import { render } from '@testing-library/react';
import { describe, it, expect, vi, beforeEach } from 'vitest';
import BlogIndex from './Index';
vi.mock('@inertiajs/react', async () => {
const actual = await vi.importActual('@inertiajs/react');
return {
...actual,
Head: ({ title, children }: { title?: string; children?: React.ReactNode }) => (
{title && {title}}
{children}
),
Link: ({ children, href }: { children: React.ReactNode; href: string }) => (
{children}
),
router: { get: vi.fn() },
usePage: vi.fn(() => ({
props: { auth: { user: null }, errors: {}, flash: {}, app_url: 'https://example.com' },
})),
};
});
vi.mock('@/Components/marketing/BlogCard', () => ({
BlogCard: ({ title }: { title: string }) => {title},
}));
vi.mock('@/Components/marketing/MarketingNav', () => ({
MarketingNav: () => ,
}));
vi.mock('@/Components/marketing/MarketingFooter', () => ({
MarketingFooter: () => ,
}));
vi.mock('@/Components/marketing/NewsletterSignup', () => ({
NewsletterSignup: () => ,
}));
vi.mock('@/Components/Shared/InertiaPagination', () => ({
default: () => ,
}));
const emptyPosts = {
data: [],
current_page: 1,
last_page: 1,
per_page: 12,
total: 0,
links: [],
};
const baseProps = {
canLogin: true,
canRegister: true,
posts: emptyPosts,
categories: ['wordpress-seo', 'content-optimization'],
activeCategory: null,
currentSearch: null,
};
function getBreadcrumbSchema(container: HTMLElement): Record | null {
const scripts = container.querySelectorAll('script[type="application/ld+json"]');
let found: Record | null = null;
scripts.forEach((s) => {
const parsed = JSON.parse(s.textContent || '{}') as Record;
if (parsed['@type'] === 'BreadcrumbList') found = parsed;
});
return found;
}
const paginatedPosts = (currentPage: number, lastPage: number) => ({
data: [{ id: 1, title: 'Post', slug: 'post', excerpt: '', author: 'A', published_at: '2024-01-01', category: null }],
current_page: currentPage,
last_page: lastPage,
per_page: 12,
total: lastPage * 12,
links: [],
});
function getRobotsContent(container: HTMLElement): string | null {
const el = container.querySelector('meta[name="robots"]') as HTMLMetaElement | null;
return el ? el.getAttribute('content') : null;
}
function getPaginationLink(container: HTMLElement, rel: 'next' | 'prev'): string | null {
const el = container.querySelector(`link[rel="${rel}"]`) as HTMLLinkElement | null;
return el ? el.getAttribute('href') : null;
}
describe('Blog/Index — robots noindex (COP-004 / COP-010)', () => {
beforeEach(() => vi.clearAllMocks());
it('does not noindex page 1 with no filter and no search', () => {
const { container } = render();
expect(getRobotsContent(container)).toBeNull();
});
it('noindexes page 2+ (unfiltered)', () => {
const { container } = render(
,
);
expect(getRobotsContent(container)).toBe('noindex, follow');
});
it('noindexes when activeCategory is set (page 1)', () => {
const { container } = render(
,
);
expect(getRobotsContent(container)).toBe('noindex, follow');
});
it('noindexes when currentSearch is set (COP-010)', () => {
const { container } = render(
,
);
expect(getRobotsContent(container)).toBe('noindex, follow');
});
});
describe('Blog/Index — rel=next/prev pagination links (COP-004)', () => {
beforeEach(() => vi.clearAllMocks());
it('rel=next points to page 2 on plain page 1', () => {
const { container } = render(
,
);
expect(getPaginationLink(container, 'next')).toBe('https://example.com/blog?page=2');
});
it('rel=prev on page 2 returns clean /blog URL (no page param for page 1)', () => {
const { container } = render(
,
);
expect(getPaginationLink(container, 'prev')).toBe('https://example.com/blog');
});
it('rel=prev on page 3 includes page=2', () => {
const { container } = render(
,
);
expect(getPaginationLink(container, 'prev')).toBe('https://example.com/blog?page=2');
});
it('rel=next includes category param when activeCategory is set', () => {
const { container } = render(
,
);
expect(getPaginationLink(container, 'next')).toBe(
'https://example.com/blog?page=2&category=wordpress-seo',
);
});
it('rel=prev includes category param when activeCategory is set', () => {
const { container } = render(
,
);
expect(getPaginationLink(container, 'prev')).toBe(
'https://example.com/blog?category=wordpress-seo',
);
});
it('rel=next includes search param when currentSearch is set', () => {
const { container } = render(
,
);
const href = getPaginationLink(container, 'next');
expect(href).toContain('page=2');
expect(href).toContain('search=seo+tips');
});
it('no rel=next on last page', () => {
const { container } = render(
,
);
expect(getPaginationLink(container, 'next')).toBeNull();
});
it('no rel=prev on page 1', () => {
const { container } = render(
,
);
expect(getPaginationLink(container, 'prev')).toBeNull();
});
it('rel=next includes both category and search params when both are set', () => {
const { container } = render(
,
);
const href = getPaginationLink(container, 'next');
expect(href).toContain('page=2');
expect(href).toContain('category=wordpress-seo');
expect(href).toContain('search=link+building');
});
it('rel=prev includes both category and search params when both are set', () => {
const { container } = render(
,
);
const href = getPaginationLink(container, 'prev');
// page 1 omits the page param, but still carries category and search
expect(href).not.toContain('page=');
expect(href).toContain('category=wordpress-seo');
expect(href).toContain('search=link+building');
});
});
describe('Blog/Index — canonical URL (COP-004)', () => {
beforeEach(() => vi.clearAllMocks());
function getCanonical(container: HTMLElement): string | null {
const el = container.querySelector('link[rel="canonical"]') as HTMLLinkElement | null;
return el ? el.getAttribute('href') : null;
}
it('canonical self-references /blog on plain page 1', () => {
const { container } = render();
expect(getCanonical(container)).toBe('https://example.com/blog');
});
it('canonical self-references paginated URL on page 2', () => {
const { container } = render(
,
);
expect(getCanonical(container)).toBe('https://example.com/blog?page=2');
});
it('canonical includes category param when activeCategory is set on page 1', () => {
const { container } = render(
,
);
expect(getCanonical(container)).toBe('https://example.com/blog?category=wordpress-seo');
});
});
describe('Blog/Index — BreadcrumbList JSON-LD schema', () => {
beforeEach(() => {
vi.clearAllMocks();
});
it('renders a 2-item breadcrumb when no active category', () => {
const { container } = render();
const schema = getBreadcrumbSchema(container);
expect(schema).not.toBeNull();
const items = (schema as Record)['itemListElement'] as Array<
Record
>;
expect(items).toHaveLength(2);
expect(items[0]['name']).toBe('Home');
expect(items[1]['name']).toBe('Blog');
});
it('renders a 3-item breadcrumb when an active category is set', () => {
const { container } = render();
const schema = getBreadcrumbSchema(container);
expect(schema).not.toBeNull();
const items = (schema as Record)['itemListElement'] as Array<
Record
>;
expect(items).toHaveLength(3);
expect(items[0]['name']).toBe('Home');
expect(items[1]['name']).toBe('Blog');
expect(items[2]['name']).toBe('WordPress SEO');
expect(items[2]['position']).toBe(3);
expect(items[2]['item']).toBe('https://example.com/blog?category=wordpress-seo');
});
it('uses raw category slug as label when no label mapping exists', () => {
const { container } = render();
const schema = getBreadcrumbSchema(container);
const items = (schema as Record)['itemListElement'] as Array<
Record
>;
expect(items[2]['name']).toBe('unknown-category');
});
it('URL-encodes special characters in the category slug for the breadcrumb item URL', () => {
// Slugs with spaces and plus signs must be percent-encoded; hyphens are safe and pass through unchanged.
// This test verifies that encodeURIComponent is actually applied.
const { container } = render();
const schema = getBreadcrumbSchema(container);
const items = (schema as Record)['itemListElement'] as Array<
Record
>;
expect(items[2]['item']).toBe('https://example.com/blog?category=content%20%26%20strategy');
});
it('all JSON-LD blocks are valid JSON', () => {
const { container } = render(
,
);
const scripts = container.querySelectorAll('script[type="application/ld+json"]');
scripts.forEach((s) => {
expect(() => JSON.parse(s.textContent || '')).not.toThrow();
});
});
});