import React, { act } from 'react';
import { render, waitFor, screen, fireEvent } from '@testing-library/react';
import { Error } from '@squiz/resource-browser-ui-lib';
import { InlineLoadingErrorState } from './InlineLoadingErrorState';

jest.mock('@squiz/resource-browser-ui-lib', () => {
    return {
        ...jest.requireActual('@squiz/resource-browser-ui-lib'),
        Error: jest.fn(() => <div></div>),
    };
});

describe('InlineLoadingErrorState', () => {
    const defaultProps = {
        isLoading: false,
        error: undefined,
    };

    it('clicking close button should call the onClose callback', async () => {
        const onClose = jest.fn();

        //@ts-ignore
        render(<InlineLoadingErrorState {...defaultProps} title="Select Asset" onClose={onClose} />);

        await act(() => fireEvent.click(screen.getByRole('button', { name: 'Close Select Asset dialog' })));
        expect(onClose).toHaveBeenCalled();
    });

    it('Will render loading on isLoading === true', async () => {
        //@ts-ignore
        render(<InlineLoadingErrorState {...defaultProps} isLoading={true} />);

        await waitFor(() => {
            expect(screen.getByText('Loading...')).toBeTruthy();
        });
    });

    it('Will render error on error !== null', async () => {
        const onRetry = jest.fn();
        //@ts-ignore
        render(<InlineLoadingErrorState {...defaultProps} onRetry={onRetry} error={new Error('test')} />);

        await waitFor(() => {
            expect(Error).toHaveBeenCalledWith(expect.objectContaining({ onReset: onRetry }), {});
        });
    });
});