familienarchiv/frontend/src/lib/document/TimelineControls.svelte.test.ts

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

afterEach(cleanup);

describe('TimelineControls', () => {
	it('renders neither button when not zoomed and no selection', async () => {
		render(TimelineControls, {
			props: {
				isZoomed: false,
				hasSelection: false,
				onresetzoom: () => {},
				onclearselection: () => {}
			}
		});

		const buttons = document.querySelectorAll('button');
		expect(buttons.length).toBe(0);
	});

	it('renders the reset-zoom button when isZoomed is true', async () => {
		render(TimelineControls, {
			props: {
				isZoomed: true,
				hasSelection: false,
				onresetzoom: () => {},
				onclearselection: () => {}
			}
		});

		await expect.element(page.getByRole('button', { name: /zur übersicht/i })).toBeVisible();
	});

	it('renders the clear-selection button when hasSelection is true', async () => {
		render(TimelineControls, {
			props: {
				isZoomed: false,
				hasSelection: true,
				onresetzoom: () => {},
				onclearselection: () => {}
			}
		});

		await expect.element(page.getByRole('button', { name: /auswahl zurücksetzen/i })).toBeVisible();
	});

	it('renders both buttons when both flags are true', async () => {
		render(TimelineControls, {
			props: {
				isZoomed: true,
				hasSelection: true,
				onresetzoom: () => {},
				onclearselection: () => {}
			}
		});

		const buttons = document.querySelectorAll('button');
		expect(buttons.length).toBe(2);
	});

	it('calls onresetzoom when the reset button is clicked', async () => {
		const onresetzoom = vi.fn();
		render(TimelineControls, {
			props: { isZoomed: true, hasSelection: false, onresetzoom, onclearselection: () => {} }
		});

		await page.getByRole('button', { name: /zur übersicht/i }).click();

		expect(onresetzoom).toHaveBeenCalledOnce();
	});

	it('calls onclearselection when the clear button is clicked', async () => {
		const onclearselection = vi.fn();
		render(TimelineControls, {
			props: { isZoomed: false, hasSelection: true, onresetzoom: () => {}, onclearselection }
		});

		await page.getByRole('button', { name: /auswahl zurücksetzen/i }).click();

		expect(onclearselection).toHaveBeenCalledOnce();
	});
});