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

describe('<Checkbox />', function() {
    it('should initialize properly', function() {
        const wrapper = shallow(<Checkbox />);

        expect(wrapper.hasClass('checkbox')).to.be.true;
        expect(wrapper.hasClass('active')).to.be.false;
    });

    it('should initialize from props', function() {
        const wrapper = shallow(<Checkbox value />);

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

    it('should update from props', function() {
        const wrapper = shallow(<Checkbox value />);

        expect(wrapper.hasClass('active')).to.be.true;

        wrapper.setProps({ value: false });

        expect(wrapper.hasClass('active')).to.be.false;

        wrapper.setProps({ beans: 'pinto' });

        expect(wrapper.hasClass('active')).to.be.false;
    });

    it('should toggle on clicks', function() {
        const wrapper = shallow(<Checkbox />);

        expect(wrapper.hasClass('active')).to.be.false;

        wrapper.simulate('click');

        expect(wrapper.hasClass('active')).to.be.true;

        wrapper.simulate('click');

        expect(wrapper.hasClass('active')).to.be.false;
    });

    it('should let you know when it has changed', function() {
        const change = sinon.spy(),
            wrapper = shallow(<Checkbox onChange={ change } />);

        wrapper.simulate('click');

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