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

import Avatar from '.';

describe('Avatar', () => {
  it('displays Avatar', () => {
    const node = shallow(<Avatar>OB</Avatar>);
    expect(node.hasClass('Avatar')).toBe(true);
  });

  it('displays emoji Avatar', () => {
    const node = shallow(
      <Avatar>
        <span aria-label="Owl" role="img">
          🦉
        </span>
      </Avatar>
    );
    expect(node.hasClass('Avatar_emoji')).toBe(true);
  });

  it('displays circular Avatar', () => {
    const node = shallow(<Avatar circular>OB</Avatar>);
    expect(node.hasClass('Avatar_circular')).toBe(true);
  });

  it('displays Avatar with custom bg color', () => {
    const color = '#000';
    const node = shallow(<Avatar hexColor={color}>OB</Avatar>);
    expect(node.find('.Avatar').get(0).props.style.background).toBe(color);
  });

  it('displays Avatar with image', () => {
    const node = shallow(<Avatar imgSrc="//fakeUrl.png" />);
    expect(node.find('img')).toHaveLength(1);
  });

  it('displays large Avatar', () => {
    const node = shallow(<Avatar size="lg">OB</Avatar>);
    expect(node.hasClass('Avatar_lg')).toBe(true);
  });
});
