import {shallow} from 'enzyme';
import React from 'react';

import {Icon} from 'src/components/Icon';

describe('src/components/Icon', () => {
  const FakeIcon = (props) => { // eslint-disable-line no-unused-vars
    return <span>It works!</span>;
  };

  it('allows passing an arbitrary class name', () => {
    const component = shallow(
      <Icon className="test" icon={FakeIcon} />
    );
    expect(component.hasClass('test')).toBe(true);
  });

  it('allows specifying the size', () => {
    const component = shallow(
      <Icon icon={FakeIcon} size="16px" />
    );

    const style = component.prop('style');
    expect(style.height).toEqual('16px');
    expect(style.width).toEqual('16px');
  });

  it('defaults size to 1em if not specified', () => {
    const component = shallow(
      <Icon icon={FakeIcon} />
    );

    const style = component.prop('style');
    expect(style.height).toEqual('1em');
    expect(style.width).toEqual('1em');
  });

  it('allows setting vertical align to middle', () => {
    const component = shallow(
      <Icon icon={FakeIcon} middle />
    );

    const style = component.prop('style');
    expect(style.verticalAlign).toEqual('middle');
  });

  it('allows specifying a title', () => {
    const component = shallow(
      <Icon icon={FakeIcon} title="Test" />
    );
    expect(component.prop('title')).toEqual('Test');
  });

  it('renders the element passed in the icon prop', () => {
    const component = shallow(
      <Icon icon={FakeIcon} />
    );
    expect(component.find(FakeIcon).exists()).toBe(true);
  });
});