import { render, fireEvent } from '@testing-library/svelte';
import { describe, it, expect, vi } from 'vitest';
import PageHeader from './PageHeader.svelte';
describe('PageHeader', () => {
    describe('Basic rendering', () => {
        it('renders the title', () => {
            const { getByText } = render(PageHeader, { title: 'My Page' });
            expect(getByText('My Page')).toBeTruthy();
        });
        it('applies shadow class when shadow is true', () => {
            const { container } = render(PageHeader, {
                title: 'My Page',
                shadow: true,
            });
            expect(container.querySelector('.mc-page-header--with-shadow')).toBeTruthy();
        });
        it('renders back button when backbutton is true', () => {
            const { getByLabelText } = render(PageHeader, {
                title: 'My Page',
                backbutton: true,
            });
            expect(getByLabelText('Back button')).toBeTruthy();
        });
        it('renders extra info when provided', () => {
            const { getByText } = render(PageHeader, {
                title: 'My Page',
                extrainfo: 'Extra info',
            });
            expect(getByText('Extra info')).toBeTruthy();
        });
        it('renders status badge if status and statuslabel are provided', () => {
            const { getByText } = render(PageHeader, {
                title: 'My Page',
                status: 'success',
                statuslabel: 'OK',
            });
            expect(getByText('OK')).toBeTruthy();
        });
        it('always renders tabs slot container', () => {
            const { container } = render(PageHeader, {
                title: 'Page title',
            });
            expect(container.querySelector('.mc-page-header__tabs')).toBeTruthy();
        });
    });
    describe('Events and callbacks', () => {
        it('calls onBack and dispatches "back" event when back button is clicked', async () => {
            const onBack = vi.fn();
            const { getByLabelText, container } = render(PageHeader, {
                title: 'Page',
                backbutton: true,
                onBack,
            });
            const root = container.querySelector('.mc-page-header');
            const dispatched = vi.fn();
            root.addEventListener('back', dispatched);
            await fireEvent.click(getByLabelText('Back button'));
            expect(onBack).toHaveBeenCalled();
            expect(dispatched).toHaveBeenCalled();
        });
        it('calls onTogglemenu and dispatches "toggle-menu" event when burger menu is clicked', async () => {
            const onTogglemenu = vi.fn();
            const { getByLabelText, container } = render(PageHeader, {
                title: 'Page',
                onTogglemenu,
            });
            const root = container.querySelector('.mc-page-header');
            const dispatched = vi.fn();
            root.addEventListener('toggle-menu', dispatched);
            await fireEvent.click(getByLabelText('Burger menu'));
            expect(onTogglemenu).toHaveBeenCalled();
            expect(dispatched).toHaveBeenCalled();
        });
    });
});
