import React from 'react';
import { fireEvent } from '@testing-library/react';
import renderWithTheme from '../../../testUtils/renderWithTheme';

import Button from '..';

const IconButton = Button.Icon;

describe('rendering', () => {
  it('renders icon', () => {
    const { container } = renderWithTheme(<IconButton icon="heart" />);
    expect(container.querySelectorAll('i')).toHaveLength(1);
  });
});

describe('interaction', () => {
  it('allows to click on', () => {
    const onClick = jest.fn();
    const { getByRole } = renderWithTheme(
      <IconButton icon="heart" onClick={onClick} />
    );
    fireEvent.click(getByRole('button'));
    expect(onClick).toHaveBeenCalledTimes(1);
  });

  it('allows to blur', () => {
    const onBlur = jest.fn();
    const { getByRole } = renderWithTheme(
      <IconButton icon="heart" onBlur={onBlur} />
    );
    fireEvent.click(getByRole('button'));
    fireEvent.blur(getByRole('button'));
    expect(onBlur).toHaveBeenCalledTimes(1);
  });
});