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

afterEach(cleanup);

describe('UploadZone', () => {
	it('renders an SVG arrow icon (not a Unicode character) in idle state', async () => {
		const { container } = render(UploadZone, {
			filename: 'test.pdf',
			isUploading: false,
			error: null
		});
		// The icon must be an SVG element, not the raw "↑" text
		const svg = container.querySelector('.upload-zone-icon svg');
		expect(svg).not.toBeNull();
		expect(container.textContent).not.toContain('↑');
	});

	it('shows the filename in idle state', async () => {
		render(UploadZone, { filename: 'my-document.pdf', isUploading: false, error: null });
		await expect.element(page.getByText('my-document.pdf')).toBeInTheDocument();
	});
});