import React from 'react';
import renderWithTheme from '../../../testUtils/renderWithTheme';

import Icon from '..';

describe('Icon', () => {
  it('renders custom icon as a react element', () => {
    const customIcon = <p>Custom Icon</p>;
    const { getByText, container } = renderWithTheme(
      <Icon icon={customIcon} className="CustomIconClass" />
    );

    expect(getByText('Custom Icon')).toBeInTheDocument();
    expect(container.firstChild).toHaveClass('CustomIconClass');
  });

  it('renders icon based on icon name', () => {
    const { container } = renderWithTheme(<Icon icon="bell" />);

    expect(container.firstChild).toHaveClass('hero-icon-bell');
  });

  it('renders spining icon', () => {
    const { container } = renderWithTheme(<Icon icon="cake" spin />);

    expect(container.firstChild).toHaveStyle(
      'animation: bKPVWD 1s infinite linear;'
    );
  });
});