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

afterEach(() => {
	cleanup();
});

describe('TranscribeDragDemo', () => {
	it('renders an SVG with an aria-label describing the animation', async () => {
		render(TranscribeDragDemo);
		const svg = page.getByRole('img');
		await expect.element(svg).toBeInTheDocument();
		await expect.element(svg).toHaveAttribute('aria-label');
	});

	it('contains a dashed-border rectangle animation element', async () => {
		const { container } = render(TranscribeDragDemo);
		const rect = container.querySelector('rect');
		expect(rect).not.toBeNull();
	});
});