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

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

afterEach(cleanup);

describe('BackButton', () => {
	it('renders the visible label by default (showLabel=true)', async () => {
		render(BackButton, { props: {} });

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

	it('hides the visible label when showLabel is false', async () => {
		render(BackButton, { props: { showLabel: false } });

		const btn = (await page.getByRole('button').element()) as HTMLButtonElement;
		// The label is exposed via aria-label only when showLabel=false.
		expect(btn.getAttribute('aria-label')).toBe('Zurück');
		expect(btn.textContent?.trim()).toBe('');
	});

	it('does not set an aria-label when the visible label is shown', async () => {
		render(BackButton, { props: { showLabel: true } });

		const btn = (await page.getByRole('button').element()) as HTMLButtonElement;
		expect(btn.getAttribute('aria-label')).toBeNull();
	});

	it('applies the supplied class string to the button', async () => {
		render(BackButton, { props: { class: 'custom-class' } });

		const btn = (await page.getByRole('button').element()) as HTMLButtonElement;
		expect(btn.classList.contains('custom-class')).toBe(true);
	});

	it('calls history.back() when clicked', async () => {
		const backSpy = vi.spyOn(globalThis.history, 'back').mockImplementation(() => {});
		try {
			render(BackButton, { props: {} });

			await page.getByRole('button').click();

			expect(backSpy).toHaveBeenCalledOnce();
		} finally {
			backSpy.mockRestore();
		}
	});
});