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

afterEach(cleanup);

describe('PersonEditSaveBar', () => {
	it('renders the discard link with the supplied href', async () => {
		render(PersonEditSaveBar, { props: { discardHref: '/persons/p-1', formId: 'edit-form' } });

		await expect
			.element(page.getByRole('link', { name: /verwerfen/i }))
			.toHaveAttribute('href', '/persons/p-1');
	});

	it('renders the save button labelled "Änderungen speichern"', async () => {
		render(PersonEditSaveBar, { props: { discardHref: '/persons/p-1', formId: 'edit-form' } });

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

	it('wires the save button to the supplied formId via the form attribute', async () => {
		render(PersonEditSaveBar, { props: { discardHref: '/persons/p-1', formId: 'my-form' } });

		const btn = (await page
			.getByRole('button', { name: /speichern/i })
			.element()) as HTMLButtonElement;
		expect(btn.getAttribute('form')).toBe('my-form');
	});

	it('declares ?/update as the formaction', async () => {
		render(PersonEditSaveBar, { props: { discardHref: '/persons/p-1', formId: 'edit-form' } });

		const btn = (await page
			.getByRole('button', { name: /speichern/i })
			.element()) as HTMLButtonElement;
		expect(btn.getAttribute('formaction')).toBe('?/update');
	});
});
