import { fireEvent } from '@testing-library/react';
import { render } from '../../utils/theme-render-wrapper';
import { EmptyStateYoutube } from './index';
import { mockEmptyStateYoutube } from './__mocks__/mockEmptyStateYoutube';

describe('<EmptyStateYoutube />', () => {
  it('should render successfully', () => {
    const { queryByTestId } = render(<EmptyStateYoutube {...mockEmptyStateYoutube} />);
    expect(queryByTestId('popupWrapper')).toBeFalsy();
  });

  it('should render opened popup & press [esc]', () => {
    const { baseElement, queryByTestId } = render(
      <EmptyStateYoutube {...mockEmptyStateYoutube} isOpen />
    );
    expect(queryByTestId('popupWrapper')).toBeTruthy();
    fireEvent.keyDown(baseElement, { code: 'Escape' });
    expect(queryByTestId('popupWrapper')).toBeFalsy();
  });

  it('should render, open & close popup', () => {
    const onClose = jest.fn();
    const onOpen = jest.fn();
    const { queryByTestId } = render(
      <EmptyStateYoutube {...mockEmptyStateYoutube} onClose={onClose} onOpen={onOpen} />
    );
    queryByTestId('youTubePoster')?.click();
    expect(onOpen).toBeCalledTimes(1);
    queryByTestId('backdrop')?.click();
    expect(onClose).toBeCalledTimes(1);
  });
});