import { render, fireEvent } from '@testing-library/svelte';
import { describe, it, expect } from 'vitest';
import CheckListMenu from './CheckListMenu.svelte';
const items = [
    { label: 'First', checked: true },
    { label: 'Second', href: '/two', target: '_blank', checked: false },
    { label: 'Third', checked: true },
];
describe('CheckListMenu component', () => {
    it('renders the correct number of menu items', () => {
        const { container } = render(CheckListMenu, { props: { items, selected: 0 } });
        const menuItems = container.querySelectorAll('m-built-in-menu-item');
        expect(menuItems.length).toBe(items.length);
    });
    it('passes href attributes to items with links', () => {
        const { container } = render(CheckListMenu, { props: { items, selected: undefined } });
        const linked = container.querySelector('m-built-in-menu-item[href="/two"]');
        expect(linked).not.toBe(undefined);
    });
    it('renders icons for checked items and marks the selected one', () => {
        const { container } = render(CheckListMenu, { props: { items, selected: 0 } });
        const icons = container.querySelectorAll('.mc-check-list-menu__icon');
        expect(icons.length).toBe(2);
        expect(icons[0].classList.contains('mc-check-list-menu__icon--selected')).toBe(true);
    });
    it('updates selected state when an item is clicked', async () => {
        const { container } = render(CheckListMenu, { props: { items, selected: 0 } });
        const menuItems = container.querySelectorAll('m-built-in-menu-item');
        expect(menuItems[0].getAttribute('selected')).not.toBe(undefined);
        await fireEvent.click(menuItems[1]);
        expect(menuItems[1].getAttribute('selected')).not.toBe(undefined);
    });
});
