import { render } from '@testing-library/svelte';
import { describe, it, expect } from 'vitest';
import SidebarShortcutItem from './SidebarShortcutItem.svelte';
describe('SidebarShortcutItem', () => {
    it('renders the label and href correctly', () => {
        const { container, getByText } = render(SidebarShortcutItem, {
            props: { label: 'Shortcut', href: '/shortcut' },
        });
        const link = container.querySelector('a.mc-sidebar__shortcut-link');
        expect(link).toBeTruthy();
        expect(link.getAttribute('href')).toBe('/shortcut');
        expect(getByText('Shortcut')).toBeTruthy();
    });
    it('applies the correct class based on expanded and stacked', async () => {
        const { container } = render(SidebarShortcutItem, {
            props: { label: 'Shortcut', href: '/shortcut' },
        });
        const li = container.querySelector('li.mc-sidebar__shortcut-item');
        expect(li.classList.contains('mc-sidebar__shortcut-item--stacked')).toBe(true);
        document.dispatchEvent(new CustomEvent('update:expanded', { detail: true }));
        await new Promise((r) => setTimeout(r, 0)); // attendre le DOM update
        expect(li.classList.contains('mc-sidebar__shortcut-item--grid')).toBe(true);
        document.dispatchEvent(new CustomEvent('update:stacked', { detail: true }));
        await new Promise((r) => setTimeout(r, 0));
        expect(li.classList.contains('mc-sidebar__shortcut-item--stacked')).toBe(true);
    });
    it('renders role="menuitem"', () => {
        const { container } = render(SidebarShortcutItem, {
            props: { label: 'Shortcut', href: '/shortcut' },
        });
        const li = container.querySelector('li.mc-sidebar__shortcut-item');
        expect(li.getAttribute('role')).toBe('menuitem');
    });
});
