import { render } from '@testing-library/svelte';
import { describe, it, expect } from 'vitest';
import BuiltInMenuItem from './BuiltInMenuItem.svelte';
describe('MenuItem component', () => {
    it('renders as a button by default with the provided label', () => {
        const { container, getByText } = render(BuiltInMenuItem, { props: { label: 'Settings' } });
        expect(getByText('Settings')).toBeTruthy();
        const button = container.querySelector('button');
        expect(button).toBeTruthy();
        expect(button?.classList.contains('mc-built-in-menu__button')).toBe(true);
        const li = container.querySelector('li');
        expect(li).toBeTruthy();
        expect(li?.classList.contains('mc-built-in-menu__item')).toBe(true);
        expect(li?.classList.contains('mc-built-in-menu__item--selected')).toBe(false);
        expect(li?.hasAttribute('aria-current')).toBe(false);
        expect(container.querySelector('.mc-built-in-menu__icon')).toBeTruthy();
    });
    it('applies selected state and aria-current when selected is true', () => {
        const { container } = render(BuiltInMenuItem, { props: { label: 'Selected', selected: true } });
        const li = container.querySelector('li');
        expect(li).toBeTruthy();
        expect(li?.classList.contains('mc-built-in-menu__item--selected')).toBe(true);
        expect(li?.getAttribute('aria-current')).toBe('true');
    });
    it('renders as an anchor when tag="a" and forwards href and target', () => {
        const { container, getByText } = render(BuiltInMenuItem, {
            props: { label: 'Home', tag: 'a', href: '/home', target: '_blank' },
        });
        expect(getByText('Home')).toBeTruthy();
        const a = container.querySelector('a');
        expect(a).toBeTruthy();
        expect(a?.classList.contains('mc-built-in-menu__link')).toBe(true);
        expect(a?.getAttribute('href')).toBe('/home');
        expect(a?.getAttribute('target')).toBe('_blank');
    });
});
