import React from 'react';
import { render, fireEvent } from '@testing-library/react';
import { ModalHeader, Props } from '../modalHeader';

describe('<ModalHeader>', () => {
    const renderComponent = (props?: Partial<Props>) => render(<ModalHeader {...props} />);

    test('renders correctly', () => {
        const header = 'TITLE HERE';
        const { getByText, container } = renderComponent({ header });
        expect(getByText(header)).toBeVisible();
        expect(container.getElementsByClassName('CloseGlyphIcon').length).toBe(1);
    });

    test('accepts a custom element for title', () => {
        const headerText = 'CUSTOM HEADER';
        const header = <div>{headerText}</div>;
        const { getByText } = renderComponent({ header });
        expect(getByText(headerText)).toBeVisible();
    });

    test('accepts a custom button element', () => {
        const buttonText = 'CUSTOM BUTTON';
        const { getAllByRole, getByRole } = renderComponent({
            button: <button type="button">{buttonText}</button>,
        });
        expect(getAllByRole('button').length).toBe(1);
        expect(getByRole('button')).toHaveTextContent(buttonText);
    });

    test('accepts a button onClick handler', () => {
        const onButtonClick = vi.fn();
        const { container } = renderComponent({ onButtonClick });
        const button = container.getElementsByClassName('CloseGlyphIcon').item(0);
        if (button) fireEvent.click(button);
        expect(onButtonClick).toHaveBeenCalled();
    });
});