import * as React from 'react';
import * as ReactDOM from 'react-dom';
import LoadingButton from '../components/LoadingButton/index';
import { render, cleanup, Simulate } from 'react-testing-library';

beforeEach(cleanup);

describe('Loading button tests', () => {

    it('01- LoadingButton renders corretly', () => {
        const clicked = jest.fn();
        const { getByTestId } = render(
            <div>
                <LoadingButton onClick={clicked} content={'test'} name={'test'} />
            </div>
        );
        expect(getByTestId('loadingBtn').textContent).toBe('test');
    })

    it('02- clicked', () => {
        const clicked = jest.fn();
        const { getByTestId } = render(
            <LoadingButton onClick={clicked} content={'test'} name={'test'} />
        )
        Simulate.click(getByTestId('loadingBtn'));
        expect(clicked).toHaveBeenCalled();
    });

    it('03- disabled click not called', () => {
        const clicked = jest.fn();
        const { getByTestId } = render(
            <LoadingButton onClick={clicked} content={'test'} name={'test'} disabledMode={true} />,
        )
        Simulate.click(getByTestId('loadingBtn'));
        expect(clicked).not.toHaveBeenCalled();
    });

    it('04- loading click not called', () => {
        const clicked = jest.fn();
        const { getByTestId } = render(
            <LoadingButton onClick={clicked} content={'test'} name={'test'} loadingMode={true} />,
        )
        Simulate.click(getByTestId('loadingBtn'));
        expect(clicked).not.toHaveBeenCalled();
    });

    it('05- LoadingButton Snapshot', () => {
        const clicked = jest.fn();
        const { container } = render(
            <div>
                <LoadingButton onClick={clicked} name={'normalMode'} content={'normalMode'} />
                <LoadingButton onClick={clicked} name={'loadingMode'} content={'loadingMode'} loadingMode={true} />
                <LoadingButton onClick={clicked} name={'successMode'} content={'successMode'} successMode={true} />
                <LoadingButton onClick={clicked} name={'failedMode'} content={'failedMode'} failedMode={true} />
                <LoadingButton onClick={clicked} name={'disabledMode'} content={'disabledMode'} disabledMode={true} />
            </div>
        );
        expect(container).toMatchSnapshot();
    })
})