Issue #552 checkbox (#965)

* Fixed getStyles test.

* New structure for correct testing.

* Fixed index test.

test/checkbox/index.test.js

@@ -5,22 +5,22 @@ import chai, { expect } from 'chai';
 import { shallow } from 'enzyme';
 import sinon from 'sinon';
 import sinonChai from 'sinon-chai';
-import Checkbox from '../../src/checkbox';
+import Checkbox from '../../src/checkbox/component';
 import IconCheckbox from '../../src/icons/icon-checkbox';
 import getStyles from '../../src/checkbox/get-styles';
 
 chai.use(sinonChai);
 
 describe('Checkbox', () => {
   const props = {
-    label: 'label',
+    label: 'Label',
     name: 'name',
     onChange: () => {},
     checked: false,
-    style: { root: true },
-    inputStyle: { input: true },
-    iconStyle: { icon: true },
-    labelStyle: { label: true },
+    style: {},
+    inputStyle: {},
+    iconStyle: {},
+    labelStyle: {},
     value: 'value',
     color: '#1BA6C4'
   };
@@ -33,89 +33,74 @@ describe('Checkbox', () => {
     global.navigator = undefined;
   });
 
-  it('should always render a label element', () => {
-    const wrapper = shallow(<Checkbox {...props} />).dive();
+  it('should render default Checkbox elements', () => {
+    const component = shallow(<Checkbox {...props} />);
 
-    expect(wrapper.find('label')).to.have.length(1);
+    expect(component.find('label')).to.have.length(1);
+    expect(component.find('input')).to.have.length(1);
+    expect(component.find('div')).to.have.length(2);
+    expect(component.find('span')).to.have.length(1);
   });
 
-  it('should always render an input element', () => {
-    const wrapper = shallow(<Checkbox {...props} />).dive();
+  it('should render IconCheckbox', () => {
+    const component = shallow(<Checkbox {...props} />);
 
-    expect(wrapper.find('input')).to.have.length(1);
-  });
-
-  it('should always render a div element', () => {
-    props.checked = true;
-    const wrapper = shallow(<Checkbox {...props} />).dive();
-
-    expect(wrapper.find('div')).to.have.length(1);
-    props.checked = false;
-  });
-
-  it('should always render a span element', () => {
-    const wrapper = shallow(<Checkbox {...props} />).dive();
+    expect(component.find(IconCheckbox)).to.have.length(0);
+    expect(component.find('div > div')).to.have.length(1);
 
-    expect(wrapper.find('span')).to.have.length(1);
+    component.setProps({ checked: true });
+    expect(component.find(IconCheckbox)).to.have.length(1);
+    expect(component.find('div > div')).to.have.length(0);
   });
 
-  it('should render a div element if the value of the checked prop is false', () => {
-    const wrapper = shallow(<Checkbox {...props} />).dive();
-
-    expect(wrapper.find('div')).to.have.length(2);
-  });
-
-  it('should render an IconCheckbox icon if the value of the checked prop is true', () => {
-    props.checked = true;
-    const wrapper = shallow(<Checkbox {...props} />).dive();
-
-    expect(wrapper.find(IconCheckbox)).to.have.length(1);
-    props.checked = false;
-  });
+  it('should render label', () => {
+    const component = shallow(<Checkbox {...props} />);
 
-  it('should pass the label prop to the span element', () => {
-    const wrapper = shallow(<Checkbox {...props} />).dive();
+    expect(component.find('span')).to.have.length(1);
+    expect(component.find('span').containsMatchingElement(<span>Label</span>)).to.equal(true);
 
-    expect(wrapper.containsMatchingElement(<span>label</span>)).to.equal(true);
+    component.setProps({ label: <span>Node</span> });
+    expect(component.find('span > span')).to.have.length(1);
+    expect(component.find('span > span').containsMatchingElement(<span>Node</span>)).to.equal(true);
   });
 
   it('should call input onChange function', () => {
     const spy = sinon.spy();
-    props.onChange = spy;
-    const wrapper = shallow(<Checkbox {...props} />).dive();
+    const combinedProps = {
+      ...props,
+      onChange: spy
+    };
+    const component = shallow(<Checkbox {...combinedProps} />);
 
-    wrapper.find('input').simulate('change');
+    component.find('input').simulate('change');
     expect(spy).to.have.callCount(1);
-    props.onChange = () => {};
   });
 
   it('should get root styles', () => {
     const spy = sinon.spy(getStyles, 'root');
 
-    shallow(<Checkbox {...props} />).dive();
-    expect(spy).to.have.been.calledWith(
-      props.color, props.style
-    );
+    shallow(<Checkbox {...props} />);
+    expect(spy).to.have.been.calledWith(props.color, props.style);
   });
 
   it('should get input styles', () => {
     const spy = sinon.spy(getStyles, 'input');
 
-    shallow(<Checkbox {...props} />).dive();
+    shallow(<Checkbox {...props} />);
     expect(spy).to.have.been.calledWith(props.inputStyle);
   });
 
   it('should get icon styles', () => {
     const spy = sinon.spy(getStyles, 'icon');
 
-    shallow(<Checkbox {...props} />).dive();
+    shallow(<Checkbox {...props} />);
     expect(spy).to.have.been.calledWith(props.iconStyle);
   });
 
   it('should get label styles', () => {
     const spy = sinon.spy(getStyles, 'label');
 
-    shallow(<Checkbox {...props} />).dive();
+    shallow(<Checkbox {...props} />);
     expect(spy).to.have.been.calledWith(props.labelStyle);
   });
 });