familienarchiv/frontend/src/lib/shared/primitives/Pagination.svelte.test.ts

import { describe, it, expect, afterEach } from 'vitest';
import { cleanup, render } from 'vitest-browser-svelte';
import Pagination from './Pagination.svelte';

afterEach(cleanup);

const makeHref = (p: number) => `/?page=${p}`;

describe('Pagination', () => {
	it('renders nothing when totalPages is 1 or less', async () => {
		render(Pagination, { props: { page: 0, totalPages: 1, makeHref } });

		expect(document.querySelector('nav')).toBeNull();
	});

	it('renders the nav when totalPages > 1', async () => {
		render(Pagination, { props: { page: 0, totalPages: 5, makeHref } });

		expect(document.querySelector('nav')).not.toBeNull();
	});

	it('disables the prev control on the first page', async () => {
		render(Pagination, { props: { page: 0, totalPages: 5, makeHref } });

		const prev = document.querySelector('[data-testid="pagination-prev"]') as HTMLElement;
		expect(prev.tagName).toBe('SPAN');
	});

	it('renders the prev control as a link when not on the first page', async () => {
		render(Pagination, { props: { page: 2, totalPages: 5, makeHref } });

		const prev = document.querySelector('[data-testid="pagination-prev"]') as HTMLAnchorElement;
		expect(prev.tagName).toBe('A');
		expect(prev.href).toContain('page=1');
	});

	it('disables the next control on the last page', async () => {
		render(Pagination, { props: { page: 4, totalPages: 5, makeHref } });

		const next = document.querySelector('[data-testid="pagination-next"]') as HTMLElement;
		expect(next.tagName).toBe('SPAN');
	});

	it('renders the next control as a link when not on the last page', async () => {
		render(Pagination, { props: { page: 0, totalPages: 5, makeHref } });

		const next = document.querySelector('[data-testid="pagination-next"]') as HTMLAnchorElement;
		expect(next.tagName).toBe('A');
		expect(next.href).toContain('page=1');
	});

	it('marks the active page button with aria-current=page', async () => {
		render(Pagination, { props: { page: 2, totalPages: 5, makeHref } });

		const active = document.querySelector('[data-testid="pagination-page-3"]') as HTMLElement;
		expect(active.getAttribute('aria-current')).toBe('page');
	});

	it('renders the mobile page label', async () => {
		render(Pagination, { props: { page: 1, totalPages: 5, makeHref } });

		const label = document.querySelector('[data-testid="pagination-page-label"]');
		expect(label?.textContent).toContain('2');
		expect(label?.textContent).toContain('5');
	});

	it('renders left ellipsis when current page is far enough from page 1', async () => {
		render(Pagination, { props: { page: 7, totalPages: 10, makeHref } });

		expect(document.querySelector('[data-testid="pagination-ellipsis-left"]')).not.toBeNull();
	});

	it('renders right ellipsis when current page is far from last', async () => {
		render(Pagination, { props: { page: 1, totalPages: 10, makeHref } });

		expect(document.querySelector('[data-testid="pagination-ellipsis-right"]')).not.toBeNull();
	});

	it('uses the supplied ariaLabel when provided', async () => {
		render(Pagination, {
			props: { page: 0, totalPages: 5, makeHref, ariaLabel: 'Custom pagination' }
		});

		const nav = document.querySelector('nav');
		expect(nav?.getAttribute('aria-label')).toBe('Custom pagination');
	});

	it('renders the bridge page (no ellipsis) when window is exactly 2 pages from start', async () => {
		// page=3 (1-indexed=4), totalPages=10 → windowStart=3, first+2=3 → bridge to page 2
		render(Pagination, { props: { page: 3, totalPages: 10, makeHref } });

		// Should have page 2 directly, not an ellipsis
		const ellipsisLeft = document.querySelector('[data-testid="pagination-ellipsis-left"]');
		expect(ellipsisLeft).toBeNull();
	});

	it('renders the bridge page (no ellipsis) when window is exactly 2 pages from end', async () => {
		// page=6 (1-indexed=7), totalPages=10 → windowEnd=8, last-2=8 → bridge to page 9
		render(Pagination, { props: { page: 6, totalPages: 10, makeHref } });

		// Should have page 9 directly, not an ellipsis on the right
		const ellipsisRight = document.querySelector('[data-testid="pagination-ellipsis-right"]');
		expect(ellipsisRight).toBeNull();
	});

	it('returns no result when totalPages is 0', async () => {
		render(Pagination, { props: { page: 0, totalPages: 0, makeHref } });

		expect(document.querySelector('nav')).toBeNull();
	});
});