import { render, cleanup } from '@testing-library/svelte';
import SidebarHeader from './SidebarHeader.svelte';
import { describe, it, expect, afterEach } from 'vitest';
import { tick } from 'svelte';
afterEach(() => {
    cleanup();
});
describe('SidebarHeader component', () => {
    it('renders provided title and logo and has collapsed class by default', () => {
        const { getByText, container } = render(SidebarHeader, {
            props: { title: 'My Sidebar', logo: '/assets/logo.png' },
        });
        expect(getByText('My Sidebar')).toBeTruthy();
        const img = container.querySelector('img.mc-sidebar__header-logo');
        expect(img).toBeTruthy();
        expect(img.src).toContain('/assets/logo.png');
        const header = container.querySelector('header.mc-sidebar__header');
        expect(header).toBeTruthy();
        expect(header.classList.contains('mc-sidebar__header--collapsed')).toBe(true);
        expect(header.classList.contains('mc-sidebar__header--expanded')).toBe(false);
    });
    it('toggles classes when update:expanded events are dispatched', async () => {
        const { container } = render(SidebarHeader, {
            props: { title: 'T', logo: '/l' },
        });
        const header = container.querySelector('header.mc-sidebar__header');
        expect(header.classList.contains('mc-sidebar__header--collapsed')).toBe(true);
        document.dispatchEvent(new CustomEvent('update:expanded', { detail: true }));
        await tick();
        expect(header.classList.contains('mc-sidebar__header--expanded')).toBe(true);
        expect(header.classList.contains('mc-sidebar__header--collapsed')).toBe(false);
        document.dispatchEvent(new CustomEvent('update:expanded', { detail: false }));
        await tick();
        expect(header.classList.contains('mc-sidebar__header--expanded')).toBe(false);
        expect(header.classList.contains('mc-sidebar__header--collapsed')).toBe(true);
    });
});
