Adds tests for buttons

src/Button/SimpleButton/SimpleButton.jsx

@@ -6,7 +6,7 @@ import {
 } from 'antd';
 import { Icon } from 'react-fa';
 
-import Logger from '../../util/Logger';
+import Logger from '../../Util/Logger';
 
 /**
  * The SimpleButton.

src/Button/SimpleButton/SimpleButton.spec.jsx

@@ -0,0 +1,85 @@
+/*eslint-env mocha*/
+import React from 'react';
+import expect from 'expect.js';
+import { mount } from 'enzyme';
+import sinon from 'sinon';
+
+import SimpleButton from './SimpleButton.jsx';
+import Logger from '../../Util/Logger';
+
+describe('<SimpleButton />', () => {
+
+  /**
+   * Wraps the component.
+   *
+   * @return {Object} The wrapped component.
+   */
+  const setup = () => {
+    const wrapper = mount(<SimpleButton />);
+    return wrapper;
+  };
+
+  it('is defined', () => {
+    expect(SimpleButton).not.to.be(undefined);
+  });
+
+  it('can be rendered', () => {
+    const wrapper = setup();
+    expect(wrapper).not.to.be(undefined);
+  });
+
+  it('renders a span containing a default FA class', () => {
+    const wrapper = setup();
+    expect(wrapper.find('span').length).to.equal(1);
+    expect(wrapper.find('span.fa-hand-lizard-o').length).to.equal(1);
+  });
+
+  it('allows to set some props', () => {
+    const wrapper = setup();
+
+    wrapper.setProps({
+      type: 'secondary',
+      icon: 'bath',
+      shape: 'circle',
+      size: 'small',
+      disabled: true
+    });
+
+    expect(wrapper.props().type).to.equal('secondary');
+    expect(wrapper.props().icon).to.equal('bath');
+    expect(wrapper.props().shape).to.equal('circle');
+    expect(wrapper.props().size).to.equal('small');
+    expect(wrapper.props().disabled).to.equal(true);
+
+    expect(wrapper.find('button.ant-btn-secondary').length).to.equal(1);
+    expect(wrapper.find('span.fa-bath').length).to.equal(1);
+    expect(wrapper.find('button.ant-btn-circle').length).to.equal(1);
+    expect(wrapper.find('button.ant-btn-sm').length).to.equal(1);
+    expect(wrapper.find({disabled: true}).length).to.equal(1);
+  });
+
+  it('warns if no click callback method is given', () => {
+    const wrapper = setup();
+    const logSpy = sinon.spy(Logger, 'debug');
+
+    wrapper.find('button').simulate('click');
+
+    expect(logSpy).to.have.property('callCount', 1);
+
+    Logger.debug.restore();
+  });
+
+  it('calls a given click callback method onClick', () => {
+    const wrapper = setup();
+    const onClick = sinon.spy();
+
+    wrapper.setProps({
+      onClick: onClick
+    });
+
+    wrapper.find('button').simulate('click');
+
+    expect(onClick).to.have.property('callCount', 1);
+  });
+
+});

src/Button/ToggleButton/ToggleButton.jsx

@@ -7,7 +7,7 @@ import {
 import { Icon } from 'react-fa';
 import { isFunction } from 'lodash';
 
-import Logger from '../../util/Logger';
+import Logger from '../../Util/Logger';
 
 /**
  * The ToggleButton.

src/Button/ToggleButton/ToggleButton.spec.jsx

@@ -0,0 +1,133 @@
+/*eslint-env mocha*/
+import React from 'react';
+import expect from 'expect.js';
+import { mount } from 'enzyme';
+import sinon from 'sinon';
+
+import ToggleButton from './ToggleButton.jsx';
+import Logger from '../../Util/Logger';
+
+describe('<ToggleButton />', () => {
+
+  /**
+   * Wraps the component.
+   *
+   * @return {Object} The wrapped component.
+   */
+  const setup = (props, context) => {
+    const wrapper = mount(<ToggleButton {...props} />, {context});
+    return wrapper;
+  };
+
+  it('is defined', () => {
+    expect(ToggleButton).not.to.be(undefined);
+  });
+
+  it('can be rendered', () => {
+    const wrapper = setup();
+    expect(wrapper).not.to.be(undefined);
+  });
+
+  it('renders a span containing a default FA class', () => {
+    const wrapper = setup();
+    expect(wrapper.find('span').length).to.equal(1);
+    expect(wrapper.find('span.fa-hand-lizard-o').length).to.equal(1);
+  });
+
+  it('allows to set some props', () => {
+    const wrapper = setup();
+
+    wrapper.setProps({
+      name: 'Shinji',
+      type: 'secondary',
+      icon: 'bath',
+      shape: 'circle',
+      size: 'small',
+      disabled: true,
+      pressed: false
+    });
+
+    expect(wrapper.props().name).to.equal('Shinji');
+    expect(wrapper.props().type).to.equal('secondary');
+    expect(wrapper.props().icon).to.equal('bath');
+    expect(wrapper.props().shape).to.equal('circle');
+    expect(wrapper.props().size).to.equal('small');
+    expect(wrapper.props().disabled).to.equal(true);
+    expect(wrapper.props().pressed).to.equal(false);
+
+    expect(wrapper.find('button.ant-btn-secondary').length).to.equal(1);
+    expect(wrapper.find('span.fa-bath').length).to.equal(1);
+    expect(wrapper.find('button.ant-btn-circle').length).to.equal(1);
+    expect(wrapper.find('button.ant-btn-sm').length).to.equal(1);
+    expect(wrapper.find({disabled: true}).length).to.equal(1);
+  });
+
+  it('sets a pressed class if the pressed state becomes truthy', () => {
+    const wrapper = setup({
+      onToggle: () => {}
+    });
+    let toggleClass = wrapper.instance().toggleClass;
+
+    expect(toggleClass).to.be.a('string');
+    expect(wrapper.find(`button.${toggleClass}`).length).to.equal(0);
+
+    wrapper.setProps({
+      pressed: true
+    });
+
+    expect(wrapper.find(`button.${toggleClass}`).length).to.equal(1);
+  });
+
+  it('warns if no toggle callback method is given', () => {
+    const logSpy = sinon.spy(Logger, 'debug');
+    const wrapper = setup({
+      onToggle: () => {}
+    });
+
+    wrapper.setProps({
+      onToggle: null
+    });
+
+    expect(logSpy).to.have.property('callCount', 1);
+
+    logSpy.restore();
+  });
+
+  it('calls a given toggle callback method if the pressed state changes', () => {
+    const onToggle = sinon.spy();
+    let props = {
+      onToggle: onToggle
+    };
+
+    const wrapper = setup(props);
+
+    wrapper.setProps({
+      pressed: true
+    });
+
+    expect(onToggle).to.have.property('callCount', 1);
+  });
+
+  it('changes the pressed state of the component on click (if standalone button)', () => {
+    const wrapper = setup();
+
+    wrapper.find('button').simulate('click');
+
+    expect(wrapper.state('pressed')).to.be(true);
+  });
+
+  it('calls the on change callback (if included in a ToggleGroup)', () => {
+    const onChangeSpy = sinon.spy();
+    let context = {
+      toggleGroup: {
+        onChange: onChangeSpy
+      }
+    };
+    const wrapper = setup(null, context);
+
+    wrapper.find('button').simulate('click');
+
+    expect(onChangeSpy).to.have.property('callCount', 1);
+  });
+
+});

src/Button/ToggleGroup/ToggleGroup.spec.jsx

@@ -0,0 +1,121 @@
+/*eslint-env mocha*/
+import React from 'react';
+import expect from 'expect.js';
+import { mount } from 'enzyme';
+import sinon from 'sinon';
+
+import ToggleGroup from './ToggleGroup.jsx';
+import ToggleButton from '../ToggleButton/ToggleButton.jsx';
+
+describe('<ToggleGroup />', () => {
+
+  /**
+   * Wraps the component.
+   *
+   * @return {Object} The wrapped component.
+   */
+  const setup = (props, context) => {
+    const wrapper = mount(<ToggleGroup {...props} />, {context});
+    return wrapper;
+  };
+
+  it('is defined', () => {
+    expect(ToggleGroup).not.to.be(undefined);
+  });
+
+  it('can be rendered', () => {
+    const wrapper = setup();
+    expect(wrapper).not.to.be(undefined);
+  });
+
+  it('renders it\'s children horizontally or vertically', () => {
+    const wrapper = setup();
+
+    wrapper.setProps({
+      orientation: 'vertical'
+    });
+
+    expect(wrapper.find('div.vertical-toggle-group').length).to.equal(1);
+
+    wrapper.setProps({
+      orientation: 'horizontal'
+    });
+
+    expect(wrapper.find('div.horizontal-toggle-group').length).to.equal(1);
+  });
+
+  it('renders children when passed in', () => {
+    let props = {
+      children: [
+        <ToggleButton key="1" name="Shinji" />,
+        <ToggleButton key="2" name="Kagawa" />,
+        <ToggleButton key="3" name="香川 真司" />
+      ]
+    };
+    const wrapper = setup(props);
+
+    expect(wrapper.find(ToggleButton).length).to.equal(3);
+  });
+
+  it('calls the given onChange callback if a children is pressed', () => {
+    let changeSpy = sinon.spy();
+    let props = {
+      onChange: changeSpy,
+      children: [
+        <ToggleButton key="1" name="Shinji" />
+      ]
+    };
+    const wrapper = setup(props);
+
+    wrapper.find(ToggleButton).simulate('click');
+
+    expect(changeSpy).to.have.property('callCount', 1);
+  });
+
+  it('sets the selected name on click', () => {
+    let changeSpy = sinon.spy();
+    let props = {
+      onChange: changeSpy,
+      children: [
+        <ToggleButton key="1" name="Shinji" />,
+        <ToggleButton key="2" name="Kagawa" />,
+        <ToggleButton key="3" name="香川 真司" />
+      ]
+    };
+    const wrapper = setup(props);
+
+    wrapper.find(ToggleButton).first().simulate('click');
+    expect(wrapper.state().selectedName).to.equal('Shinji');
+
+    wrapper.find(ToggleButton).at(2).simulate('click');
+    expect(wrapper.state().selectedName).to.equal('香川 真司');
+  });
+
+  it('allows to deselect an already pressed button', () => {
+    let changeSpy = sinon.spy();
+    let props = {
+      allowDeselect: false,
+      onChange: changeSpy,
+      children: [
+        <ToggleButton key="1" name="Shinji" />,
+        <ToggleButton key="2" name="Kagawa" />,
+        <ToggleButton key="3" name="香川 真司" />
+      ]
+    };
+    const wrapper = setup(props);
+
+    wrapper.find(ToggleButton).first().simulate('click');
+    expect(wrapper.state().selectedName).to.equal('Shinji');
+
+    wrapper.find(ToggleButton).first().simulate('click');
+    expect(wrapper.state().selectedName).to.equal('Shinji');
+
+    wrapper.setProps({
+      allowDeselect: true
+    });
+
+    wrapper.find(ToggleButton).first().simulate('click');
+    expect(wrapper.state().selectedName).to.equal(null);
+  });
+
+});

src/UserChip/UserChip.example.jsx

@@ -4,8 +4,8 @@ import UserChip from './UserChip.jsx'; //@react-geo@
 
 render(
   <div>
-    <UserChip userName="John Doe"/>
-    <UserChip userName="John Doe" imageSrc="./user.png" style={{marginTop: '10px'}}/>
+    <UserChip userName="John Doe" />
+    <UserChip userName="John Doe" imageSrc="./user.png" style={{marginTop: '10px'}} />
   </div>,
   document.getElementById('exampleContainer')
 );