import { render } from 'vitest-browser-svelte';
import { describe, expect, it } from 'vitest';
import { page } from '@vitest/browser/context';
import SortDropdown from './SortDropdown.svelte';

describe('SortDropdown', () => {
	it('renders a select with all sort options', async () => {
		render(SortDropdown, { sort: 'DATE', dir: 'desc' });
		const select = page.getByRole('combobox');
		await expect.element(select).toBeInTheDocument();
	});

	it('shows the current sort value as selected', async () => {
		render(SortDropdown, { sort: 'TITLE', dir: 'asc' });
		const select = page.getByRole('combobox');
		await expect.element(select).toHaveValue('TITLE');
	});

	it('renders direction toggle button', async () => {
		render(SortDropdown, { sort: 'DATE', dir: 'asc' });
		const btn = page.getByRole('button');
		await expect.element(btn).toBeInTheDocument();
	});

	it('direction button shows up arrow when dir is asc', async () => {
		render(SortDropdown, { sort: 'DATE', dir: 'asc' });
		await expect.element(page.getByRole('button')).toBeInTheDocument();
		const img = document.querySelector('button img') as HTMLImageElement;
		expect(img).not.toBeNull();
		expect(img.src).toContain('Long-Arrow-Up');
	});

	it('direction button shows down arrow when dir is desc', async () => {
		render(SortDropdown, { sort: 'DATE', dir: 'desc' });
		await expect.element(page.getByRole('button')).toBeInTheDocument();
		const img = document.querySelector('button img') as HTMLImageElement;
		expect(img).not.toBeNull();
		expect(img.src).toContain('Long-Arrow-Down');
	});
});