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

afterEach(cleanup);

describe('TranscriptionSection', () => {
	it('renders the section heading and textarea', async () => {
		render(TranscriptionSection, { props: {} });

		await expect.element(page.getByRole('heading', { name: /transkription/i })).toBeVisible();
		const textarea = document.querySelector(
			'textarea[name="transcription"]'
		) as HTMLTextAreaElement;
		expect(textarea).not.toBeNull();
	});

	it('hydrates the textarea with the initial transcription value', async () => {
		render(TranscriptionSection, { props: { initialTranscription: 'Hello World' } });

		const textarea = document.querySelector(
			'textarea[name="transcription"]'
		) as HTMLTextAreaElement;
		expect(textarea.value).toBe('Hello World');
	});

	it('renders an empty textarea by default', async () => {
		render(TranscriptionSection, { props: {} });

		const textarea = document.querySelector(
			'textarea[name="transcription"]'
		) as HTMLTextAreaElement;
		expect(textarea.value).toBe('');
	});
});