/**
 * @jest-environment jsdom
 */
import { cleanup, render } from '@testing-library/react';
import React from 'react';
import AlertMessage, { AlertType } from '../AlertMessage';

describe('Unit Test - AlertMessage Component', () => {
    afterEach(cleanup);

    it('hides the alert message when show prop is false', () => {
        const { container } = render(<AlertMessage show={false} type={AlertType.DANGER} message="test message"/>);
        expect(container).toBeEmpty();
    });

    it('hides the alert message when there is no show prop', () => {
        const { container } = render(<AlertMessage type={AlertType.DANGER} message="error message"/>);
        expect(container).toBeEmpty();
    });

    it('shows error message when show prop is true', () => {
        const { container } = render(<AlertMessage show={true} type={AlertType.DANGER} message="error message"/>);
        expect(container).not.toBeEmpty();
    });

    it('adds "alert-danger" class name when type is set to danger', () => {
        const { container } = render(<AlertMessage show={true} type={AlertType.DANGER} message="error message"/>);
        expect(container.firstChild).toHaveClass('alert-danger');
    });

    it('shows error message that is set by message', () => {
        const { getByText } = render(<AlertMessage show={true} type={AlertType.DANGER} message="error message"/>);
        const messageText = getByText('error message');
        expect(messageText).toBeInTheDocument();
    });

    it('shows children elements as error message', () => {
        const { getByText } = render(<AlertMessage show={true} type={AlertType.DANGER} message=""><div>error message</div></AlertMessage>);
        const messageText = getByText('error message');
        expect(messageText).toBeInTheDocument();
    });

    it('shows children element when message and children props both are available', () => {
        const { getByText } = render(<AlertMessage show={true} type={AlertType.DANGER} message="error message"><div>children message</div></AlertMessage>);
        const childrenMessageText = getByText('children message');
        expect(childrenMessageText).toBeInTheDocument();
    });

    it('shows alert label "Error" when showAlertLabel is true and type props is set to danger', () => {
        const { getByText } = render(<AlertMessage show={true} type={AlertType.DANGER} message="error message" showAlertLabel={true}/>);
        const alertLabel = getByText('Error');
        expect(alertLabel).toBeInTheDocument();
    });
});
