import React from 'react';
import { fireEvent, render } from '@testing-library/react';
import { testComponent } from 'lib/test-utils/common';
import { Toast, ToastProps } from '../toast';

describe('<Toast>', () => {
    const defaultProps: ToastProps = {
        message: { id: '1', content: 'Yoobaa' },
        toastTime: 1,
    };

    const renderComponent = (props: Partial<ToastProps> = {}) =>
        render(<Toast {...defaultProps} {...props} />);

    testComponent(Toast, defaultProps);

    test('renders snapshot', () => {
        const { container } = renderComponent();

        expect(container).toMatchSnapshot();
    });

    test('has message id as testId for its content', () => {
        const { getByTestId } = renderComponent();
        const body = getByTestId(`Toast-${defaultProps.message.id}`);

        expect(body).toBeVisible();
    });

    describe('on close button click', () => {
        test('hides toast', () => {
            const { getByRole, getByTestId } = renderComponent();
            const closeBtn = getByRole('button');
            fireEvent.click(closeBtn);

            expect(getByTestId('Toast')).not.toHaveClass('show');
        });
    });

    describe('has no message variant', () => {
        test('renders with default variant class name', () => {
            const { getByTestId } = renderComponent();

            expect(getByTestId('Toast')).toHaveClass('success');
        });
    });

    describe('has message variant', () => {
        const variants = ['success', 'warning', 'danger', 'info'] as const;

        test.each(variants)('renders with %s variant class name', (variant) => {
            const { getByTestId } = renderComponent({
                message: { ...defaultProps.message, variant },
            });

            expect(getByTestId('Toast')).toHaveClass(variant);
        });
    });
});