/** @jest-environment jsdom */
import { h } from 'preact';
import { fireEvent, render, screen } from '@testing-library/preact';
import { Modal, ModalContent, ModalFooter } from 'js/components/Modal';

describe('Modal', () => {
    it('renders a title and content when open', () => {
        render(
            <Modal title="My Title" isOpen={true}>
                <ModalContent>My Content</ModalContent>
            </Modal>
        );
        expect(screen.queryByRole('banner')).toBeVisible();
        expect(screen.queryByRole('banner')).toHaveTextContent('My Title');
        expect(screen.queryByText('My Content')).toBeVisible();

        expect(screen.queryByRole('img')).not.toBeInTheDocument();
        expect(screen.queryByTitle('Close')).not.toBeInTheDocument();
    });

    it('does not render a title and content when not open', () => {
        render(
            <Modal title="My Title" isOpen={false}>
                <ModalContent>My Content</ModalContent>
            </Modal>
        );
        expect(screen.queryByRole('banner')).not.toBeInTheDocument();
        expect(screen.queryByText('My Content')).not.toBeInTheDocument();
    });

    it('renders a footer', () => {
        render(
            <Modal title="My Title" isOpen={true}>
                <ModalContent>My Content</ModalContent>
                <ModalFooter>My Footer</ModalFooter>
            </Modal>
        );
        expect(screen.queryByRole('banner')).toHaveTextContent('My Title');
        expect(screen.queryByText('My Content')).toBeVisible();
        expect(screen.getByRole('contentinfo')).toHaveTextContent('My Footer');
    });

    it('can have a close button', () => {
        const onClose = jest.fn();
        render(
            <Modal title="My Title" isOpen={true} onClose={onClose}>
                <ModalContent>My Content</ModalContent>
            </Modal>
        );
        const button = screen.getByTitle('Close');
        expect(button).toBeVisible();
        fireEvent.click(button);
        expect(onClose).toHaveBeenCalledWith(true);
    });

    it('can have an icon', () => {
        render(
            <Modal title="My Title" isOpen={true} icon="warning">
                <ModalContent>My Content</ModalContent>
            </Modal>
        );
        expect(screen.getByRole('img')).toBeVisible();
    });
});