import { render, fireEvent } from '@testing-library/svelte';
import { vi, describe, it, expect, beforeEach } from 'vitest';
import SidebarExpandableItem from './SidebarExpandableItem.svelte';
const showMock = vi.fn();
const hideMock = vi.fn();
const triggerKeydownMock = vi.fn();
const listboxKeydownMock = vi.fn();
vi.mock('../sidebar/floating-item.svelte', async () => {
    return {
        useFloatingItem: vi.fn(() => ({
            floatingItemIsDisplayed: false,
            showFloatingItem: showMock,
            hideFloatingItem: hideMock,
            onTriggerKeydown: triggerKeydownMock,
            onListboxKeydown: listboxKeydownMock,
        })),
    };
});
describe('SidebarExpandableItem', () => {
    beforeEach(() => {
        vi.resetAllMocks();
    });
    it('calls showFloatingItem and hideFloatingItem on trigger mouse events', async () => {
        const { container } = render(SidebarExpandableItem, {
            props: { label: 'Item', menulabel: 'Menu' },
        });
        const button = container.querySelector('button.mc-sidebar__trigger');
        await fireEvent.mouseEnter(button);
        expect(showMock).toHaveBeenCalled();
        await fireEvent.mouseLeave(button);
        expect(hideMock).toHaveBeenCalled();
    });
    it('calls onTriggerKeydown when a key is pressed on trigger', async () => {
        const { container } = render(SidebarExpandableItem, {
            props: { label: 'Item', menulabel: 'Menu' },
        });
        const button = container.querySelector('button.mc-sidebar__trigger');
        await fireEvent.keyDown(button, { key: 'Enter' });
        expect(triggerKeydownMock).toHaveBeenCalled();
    });
    it('calls showFloatingItem and hideFloatingItem on trigger focus/blur', async () => {
        const { container } = render(SidebarExpandableItem, {
            props: { label: 'Item', menulabel: 'Menu' },
        });
        const trigger = container.querySelector('.mc-sidebar__trigger');
        await fireEvent.focus(trigger);
        expect(showMock).toHaveBeenCalled();
        await fireEvent.blur(trigger);
        expect(hideMock).toHaveBeenCalled();
    });
    it('calls onListboxKeydown when a key is pressed on listbox', async () => {
        const { container } = render(SidebarExpandableItem, {
            props: { label: 'Item', menulabel: 'Menu' },
        });
        const listbox = container.querySelector('.mc-sidebar__floating-item');
        await fireEvent.keyDown(listbox, { key: 'ArrowDown' });
        expect(listboxKeydownMock).toHaveBeenCalled();
    });
    it('calls hideFloatingItem when on listbox blur', async () => {
        const { container } = render(SidebarExpandableItem, {
            props: { label: 'Item', menulabel: 'Menu' },
        });
        const listbox = container.querySelector('.mc-sidebar__floating-item');
        await fireEvent.blur(listbox);
        expect(hideMock).toHaveBeenCalled();
    });
    it('calls hideFloatingItem when on listbox mouseleave', async () => {
        const { container } = render(SidebarExpandableItem, {
            props: { label: 'Item', menulabel: 'Menu' },
        });
        const listbox = container.querySelector('.mc-sidebar__floating-item');
        await fireEvent.mouseLeave(listbox);
        expect(hideMock).toHaveBeenCalled();
    });
    it('displays a list item when expanded is true', async () => {
        const sidebar = document.createElement('m-sidebar');
        sidebar.setAttribute('expanded', '');
        document.body.appendChild(sidebar);
        const { container } = render(SidebarExpandableItem, {
            props: { label: 'Item', menulabel: 'Menu' },
        });
        const li = container.querySelector('li');
        expect(li).toBeTruthy();
    });
});
