import { Button, Icon } from '../';
import t from '../../config/variables';
describe('<Button />', () => {
  let props = {
    theme: 'primary',
    size: 'medium',
    children: 'Hello world!',
    onPress: jest.fn()
  };
  let wrapper;
  beforeEach(() => {
    wrapper = shallow(React.createElement(Button, props));
  });
  it('should render correctly', () => {
    expect(wrapper).toHaveLength(1);
    expect(wrapper).toMatchSnapshot();
  });
  it('should call on press prop after press on the button', () => {
    expect(props.onPress).not.toHaveBeenCalled();
    wrapper.simulate('click');
    expect(props.onPress).toHaveBeenCalledTimes(1);
  });
  it('should render the correctly style', () => {
    expect(wrapper).toHaveStyleRule('display', 'inline-block');
    expect(wrapper).toHaveStyleRule('font-size', `${t.fontSizes[wrapper.props().size]}px`);
    expect(wrapper).toHaveStyleRule('cursor', 'pointer');
    expect(wrapper).toHaveStyleRule('padding', `${t.sizeDivisor[wrapper.props().size]}px ${2 * t.sizeDivisor[wrapper.props().size]}px`);
    expect(wrapper).toHaveStyleRule('color', t.colors[props.theme]);
    expect(wrapper).toHaveStyleRule('background', t.backgrounds[props.theme]);
    expect(wrapper).toHaveStyleRule('border', `1px solid ${t.borderColors[props.theme]}`);
  });
  it('should have the correctly style when is hovered', () => {
    expect(wrapper).toHaveStyleRule('color', t.colorsHover[props.theme], {
      modifier: ':hover'
    });
    expect(wrapper).toHaveStyleRule('background', t.backgroundsHover[props.theme], {
      modifier: ':hover'
    });
    expect(wrapper).toHaveStyleRule('border', `1px solid ${t.borderColorsHover[props.theme]}`, {
      modifier: ':hover'
    });
  });
  it('should have the correctly style when is hovered', () => {
    expect(wrapper).toHaveStyleRule('background', t.backgroundsActive[props.theme], {
      modifier: ':active'
    });
  });
  it('should not have an <Icon />', () => {
    expect(wrapper.find(Icon)).toHaveLength(0);
  });
  describe('<Button /> with icon', () => {
    beforeEach(() => {
      props = {
        children: 'Hello world!',
        onPress: jest.fn(),
        icon: 'coffee'
      };
      wrapper = shallow(React.createElement(Button, props));
    });
    it('should render an <Icon />', () => {
      expect(wrapper.find(Icon)).toHaveLength(1);
    });
  });
  describe('<Button theme="success" outline />', () => {
    beforeEach(() => {
      props = {
        outline: true,
        theme: 'success',
        children: 'Hello world!',
        onPress: jest.fn()
      };
      wrapper = shallow(React.createElement(Button, props));
    });
    it('should render the correctly style', () => {
      expect(wrapper).toHaveStyleRule('color', t.colorsOutline[props.theme]);
      expect(wrapper).toHaveStyleRule('background', t.backgroundsOutline[props.theme]);
      expect(wrapper).toHaveStyleRule('border', `1px solid ${t.outlineBorderColors[props.theme]}`);
    });
    it('should have the correctly style when is hovered', () => {
      expect(wrapper).toHaveStyleRule('color', t.colorsOutlineHover[props.theme], {
        modifier: ':hover'
      });
      expect(wrapper).toHaveStyleRule('background', t.backgroundsOutlineHover[props.theme], {
        modifier: ':hover'
      });
      expect(wrapper).toHaveStyleRule('border', `1px solid ${t.outlineBorderColorsHover[props.theme]}`, {
        modifier: ':hover'
      });
    });
    it('should have the correctly style when is hovered', () => {
      expect(wrapper).toHaveStyleRule('background', t.backgroundsOutlineActive[props.theme], {
        modifier: ':active'
      });
    });
  });
  describe('<Button disabled />', () => {
    beforeEach(() => {
      props = {
        disabled: true,
        children: 'Hello world!'
      };
      wrapper = shallow(React.createElement(Button, props));
    });
    it('should render the correctly style', () => {
      expect(wrapper).toHaveStyleRule('cursor', 'not-allowed');
      expect(wrapper).toHaveStyleRule('background', t.backgrounds.disabled);
      expect(wrapper).toHaveStyleRule('border', `1px solid ${t.backgrounds.disabled}`);
    });
  });
  describe('<Button block />', () => {
    beforeEach(() => {
      props = {
        block: true,
        children: 'Hello world!',
        onPress: jest.fn()
      };
      wrapper = shallow(React.createElement(Button, props));
    });
    it('should render the correctly style', () => {
      expect(wrapper).toHaveStyleRule('display', 'block');
    });
  });
  describe('<Button loading />', () => {
    beforeEach(() => {
      props = {
        loading: true,
        children: 'Hello world!',
        onPress: jest.fn()
      };
      wrapper = shallow(React.createElement(Button, props));
    });
    it('should render <Icon />', () => {
      expect(wrapper.find(Icon)).toHaveLength(1);
    });
    it('should render <Icon /> with the spinner', () => {
      expect(wrapper.find(Icon).props().name).toEqual('spinner');
    });
  });
});