Add tests for Button and modify README

Author: donnieberg

README.md

@@ -13,22 +13,44 @@ open http://localhost:3000
 
 ## Components
 
-### Accessible [PickList Base](http://www.lightningdesignsystem.com/components/picklists#base&role=regular&status=all) Component
+### [Button](https://www.lightningdesignsystem.com/components/buttons#neutral)
+
+```jsx
+
+<SLDSButton
+  label='Test Button'
+  variant='neutral'
+  iconName='download'
+  iconSize='small'
+  iconPosition='left'
+  onClick={this.handleButtonClick} />
+
+Required Prop:
+* Only label is required
+
+Optional Props:
+* variant must be neutral, brand, or icon (inverse, stateful, icon more, and hint coming soon)
+* iconSize must be small, medium, or large
+* iconPosition must be left or right
+
+```
+
+### [PickList Base](http://www.lightningdesignsystem.com/components/picklists#base&role=regular&status=all)
 
 ```jsx
 
 import {SLDSPicklistBase} from 'design-system-react';
 
 ...
 
-<SLDSPicklistBase 
+<SLDSPicklistBase
   options={[
       {label:'A Option',value:'A0'},
       {label:'B Option',value:'B0'},
       {label:'C Option',value:'C0'},
       {label:'D Option',value:'D0'},
     ]}
-  value='A0' 
+  value='A0'
   label='Contacts'
   onSelect={(value)=>{
     console.log('selected: ',value);
@@ -42,7 +64,7 @@ import {SLDSPicklistBase} from 'design-system-react';
 
 ### Work in progress
 
-### Accessible [DatePicker Base](http://www.lightningdesignsystem.com/components/datepickers#base) Component
+### [DatePicker Base](http://www.lightningdesignsystem.com/components/datepickers#base)
 
 [![browser support](/readme-assets/SLDSDatePickerBase.gif)](/readme-assets/SLDSDatePickerBase.gif)
 
@@ -58,6 +80,4 @@ npm test
 ### Future Pipeline
 * Lookups
 * Modals
-* Buttons
-
 

components/SLDSButton/index.js

@@ -79,11 +79,11 @@ class Button extends React.Component {
       return (
         <button className={this.getClassName()} {...props} onClick={click}>
 
-        <span>{this.props.iconPosition === 'right' ? this.props.label : null}</span>
+        {this.props.iconPosition === 'right' ? this.props.label : null}
 
         {this.renderIcon()}
 
-        <span>{(this.props.iconPosition === 'left' || !this.props.iconPosition) ? this.props.label : null}</span>
+        {(this.props.iconPosition === 'left' || !this.props.iconPosition) ? this.props.label : null}
 
         </button>
       );

demo/code-snippets/SLDSButton.txt

@@ -1,9 +1,13 @@
 
-
-<SLDSButton label='Test Button' variant='neutral' iconName='download' iconSize='small' iconPosition='left' onClick={this.handleButtonClick} />
+<SLDSButton
+  label='Test Button'
+  variant='neutral'
+  iconName='download'
+  iconSize='small'
+  iconPosition='left'
+  onClick={this.handleButtonClick} />
 
 * Only label is required
 * variant must be neutral, brand, or icon
 * iconSize must be small, medium, or large
 * iconPosition must be left or right
-

tests/SLDSButton/button.test.jsx

@@ -3,4 +3,39 @@ const TestUtils = React.addons.TestUtils;
 import {SLDSButton} from '../../components';
 
 describe('SLDSButton: ',  function(){
+
+  let sandbox, reactCmp, button;
+  let handleClick = function() {
+    alert('Button Clicked');
+  };
+
+  beforeEach(function() {
+    sandbox = sinon.sandbox.create();
+    reactCmp = TestUtils.renderIntoDocument(<SLDSButton label='Test' variant='brand' icon='download' onClick={handleClick} />);
+    button = React.findDOMNode(reactCmp);
+  });
+
+  afterEach(function() {
+    sandbox.restore();
+  });
+
+  it('button renders', function() {
+    expect(button).to.not.equal(null);
+  });
+
+  it('button renders label from props', function() {
+    let label = button.innerText;
+    expect(label).to.equal('Test');
+  });
+
+  it('button onClick invokes method from props', function() {
+    let _savedAlert = window.alert;
+    try {
+      let spy = sinon.spy(window, 'alert');
+      TestUtils.Simulate.click(button);
+      sinon.assert.called(spy);
+    }
+    finally { window.alert = _savedAlert; }
+  });
+
 });