import { render, fireEvent } from '@testing-library/svelte';
import Popover from './Popover.svelte';
import { vi, describe, it, beforeAll, expect } from 'vitest';
beforeAll(() => {
    HTMLElement.prototype.showPopover = vi.fn();
    HTMLElement.prototype.hidePopover = vi.fn();
});
describe('m-popover', () => {
    it('renders with default props', () => {
        const { container } = render(Popover, { open: false });
        const popover = container.querySelector('.mc-popover');
        expect(popover).not.toBeNull();
        expect(popover?.classList.contains('mc-popover--standard')).toBe(true);
        expect(popover?.classList.contains('mc-popover--top')).toBe(true);
        expect(popover?.classList.contains('mc-popover--s')).toBe(true);
        expect(popover?.classList.contains('mc-popover--no-pointer')).toBe(false);
    });
    it('applies appearance, pointer, closable props', () => {
        const { container } = render(Popover, {
            open: true,
            appearance: 'inverse',
            pointer: false,
            closable: true,
        });
        const popover = container.querySelector('.mc-popover');
        expect(popover?.classList.contains('mc-popover--inverse')).toBe(true);
        expect(popover?.classList.contains('mc-popover--no-pointer')).toBe(true);
        const closeButton = container.querySelector('.mc-popover__close button');
        expect(closeButton).not.toBeNull();
    });
    it('renders title and description', () => {
        const { container } = render(Popover, {
            open: true,
            title: 'My Title',
            description: 'My Description',
        });
        const titleEl = container.querySelector('.mc-popover__title');
        const descEl = container.querySelector('.mc-popover__description');
        expect(titleEl?.textContent).toBe('My Title');
        expect(descEl?.textContent).toBe('My Description');
    });
    it('closes popover when clicking close button', async () => {
        const { container } = render(Popover, { open: true, closable: true });
        const popoverWrapper = container.querySelector('.mc-popover__wrapper');
        popoverWrapper.showPopover = vi.fn();
        popoverWrapper.hidePopover = vi.fn();
        const closeButton = container.querySelector('.mc-popover__close button');
        expect(closeButton).not.toBeNull();
        await fireEvent.click(closeButton);
        // L'état open devient false, popover existe toujours
        expect(popoverWrapper).not.toBeNull();
    });
    it('closes popover when pressing Escape', async () => {
        const { container } = render(Popover, { open: true });
        const popoverWrapper = container.querySelector('.mc-popover__wrapper');
        popoverWrapper.showPopover = vi.fn();
        popoverWrapper.hidePopover = vi.fn();
        await fireEvent.keyDown(popoverWrapper, { key: 'Escape' });
        expect(popoverWrapper).not.toBeNull();
    });
    it('closes popover when clicking outside', async () => {
        const { container } = render(Popover, { open: true });
        const popoverWrapper = container.querySelector('.mc-popover__wrapper');
        popoverWrapper.showPopover = vi.fn();
        popoverWrapper.hidePopover = vi.fn();
        await fireEvent.mouseDown(document.body);
        expect(popoverWrapper).not.toBeNull();
    });
});
