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

import {Widget} from 'src/Widget';

describe('src/Widget', () => {
  it('allows passing an arbitrary class name', () => {
    // Given
    const component = shallow(
      <Widget className="test">
        <span>It works!</span>
      </Widget>
    );

    // Then
    expect(component.hasClass('test')).toBe(true);
  });

  it('uses the appearance to change the style', () => {
    // Given
    const component = shallow(
      <Widget appearance={{color: 'red'}}>
        <span>It works!</span>
      </Widget>
    );

    // When
    const style = component.prop('style');

    // Then
    expect(style.backgroundColor).toEqual('red');
  });

  it('renders the children', () => {
    // Given
    const component = shallow(
      <Widget>
        <span>It works!</span>
      </Widget>
    );

    // When
    const span = component.find('span').at(0);

    // Then
    expect(span.exists()).toBe(true);
    expect(span.text()).toEqual('It works!');
  });
});