import { shallow } from 'enzyme';
import sinon from 'sinon';
import React from 'react';
import { Button } from 'web-foundation';

describe('<Button />', function() {
    it('should render a button', function() {
        const wrapper = shallow(<Button />);

        expect(wrapper.is('button')).to.be.true;
    });

    it('should propagate its class', function() {
        const wrapper = shallow(<Button type="error"/>);

        expect(wrapper.hasClass('error')).to.be.true;
    });

    it('should render child components', function() {
        const wrapper = shallow(
            <Button>
                <div className="inner"></div>
            </Button>
        );

        expect(wrapper.contains(<div className="inner" />)).to.be.true;
    });

    it('should trigger its callback when clicked', function() {
        const spy = sinon.spy(),
            wrapper = shallow(<Button click={ spy }/>);

        wrapper.simulate('click');

        expect(spy.calledOnce).to.be.true;
    });

    it('should not die if no callback is given', function() {
        const spy = sinon.spy(),
            wrapper = shallow(<Button />);

        wrapper.simulate('click');

        expect(spy.calledOnce).to.be.false;
    });

    it('should not click if disabled', function() {
        const spy = sinon.spy(),
            wrapper = shallow(<Button
                click={ spy }
                disabled />);

        wrapper.simulate('click');

        expect(spy.calledOnce).to.be.false;
    });

    it('should apply a \'disabled\' class', function() {
        const wrapper = shallow(<Button
            type="error"
            disabled />);

        expect(wrapper.hasClass('disabled')).to.be.true;
    });

    it('should apply a \'loading\' class', function() {
        const wrapper = shallow(<Button
            type="error"
            loading />);

        expect(wrapper.hasClass('loading')).to.be.true;
    });
});
