import { expect, it, vi } from 'vitest';
import { render } from 'svelte/server';
import CommandPalette from '../../src/lib/ui/components/CommandPalette.svelte';

vi.mock('$app/navigation', () => ({ goto: vi.fn() }));

it('connects the search field to a labelled option list and its selected result', () => {
    const body = render(CommandPalette, { props: { open: true, role: 'operator' } }).body;
    expect(body).toContain('role="combobox"');
    expect(body).toContain('aria-autocomplete="list"');
    expect(body).toContain('aria-expanded="true"');
    const list = /aria-controls="([^"]+)"/.exec(body)?.[1];
    const active = /aria-activedescendant="([^"]+)"/.exec(body)?.[1];
    expect(list).toBeTruthy(); expect(active).toBeTruthy();
    expect(body).toContain(`id="${list}" role="listbox"`);
    expect(body).toContain(`id="${active}" role="option" tabindex="-1" aria-selected="true"`);
    expect(body).toContain('Create server'); expect(body).not.toContain('Add host');
});

it('keeps the navigation palette useful for viewers without offering write actions', () => {
    const body = render(CommandPalette, { props: { open: true, role: 'viewer' } }).body;
    expect(body).toContain('Campaigns'); expect(body).toContain('Leaderboard');
    expect(body).not.toContain('Create server'); expect(body).not.toContain('Add host');
});