Add karma-spec-reporter and refactor button tests wtih Adam

Author: donnieberg

components/SLDSLookup/index.jsx

@@ -36,6 +36,10 @@ class SLDSLookup extends React.Component {
     };
   }
 
+  componentDidUpdate(){
+    React.findDOMNode(this.refs.lookup).focus();
+  }
+
   //=================================================
   // Using down/up keys, set Focus on list item and assign it to aria-activedescendant attribute in input.
   // Need to keep track of filtered list length to be able to increment/decrement the focus index so it's contained to the number of available list items.
@@ -72,7 +76,6 @@ class SLDSLookup extends React.Component {
   handleDeleteSelected() {
     this.setState({
       selectedIndex: null,
-      isOpen: false
     });
   }
 
@@ -181,6 +184,7 @@ class SLDSLookup extends React.Component {
             <InputIcon name="search"/>
             <input
               id="lookup"
+              ref="lookup"
               className={inputClasses}
               type="text"
               aria-label="lookup"

demo/pages/HomePage/index.jsx

@@ -58,14 +58,14 @@ module.exports = React.createClass( {
         </div>
         <main className='stage-main slds-grid slds-wrap slds-grow' role='main'>
           <div className='region region--main slds-grow slds-size--1-of-1 slds-medium-size--1-of-2 slds-large-size--8-of-12 slds-col-rule--right slds-p-around--large'>
+            <LookupBaseSection />
 
             <ButtonSection />
 
             <PicklistBaseSection />
 
             <ModalSection />
 
-            <LookupBaseSection />
 
             <DatePickerSingleSelectSection />
 

karma.conf.js

@@ -39,7 +39,7 @@ module.exports = function(config) {
     // test results reporter to use
     // possible values: 'dots', 'progress'
     // available reporters: https://npmjs.org/browse/keyword/karma-reporter
-    reporters: ['progress'],
+    reporters: ['spec'],
 
 
     // web server port
@@ -77,7 +77,8 @@ module.exports = function(config) {
       require('karma-chai-sinon'),
       require('karma-sourcemap-loader'),
       require('karma-phantomjs-launcher'),
-      require('karma-chrome-launcher')
+      require('karma-chrome-launcher'),
+      require('karma-spec-reporter'),
     ]
   })
 }

package.json

@@ -9,7 +9,6 @@
     "compile": "babel -d lib/ components/",
     "prepublish": "npm run compile",
     "test": "scripts/test --single-run"
-
   },
   "repository": {
     "type": "git",
@@ -50,6 +49,7 @@
     "karma-mocha": "^0.2.0",
     "karma-phantomjs-launcher": "^0.2.1",
     "karma-sourcemap-loader": "^0.3.5",
+    "karma-spec-reporter": "0.0.20",
     "karma-webpack": "^1.7.0",
     "mocha": "^2.3.3",
     "phantomjs": "^1.9.18",

tests/SLDSButton/button.test.jsx

@@ -9,6 +9,8 @@ describe('SLDSButton: ',  function(){
     alert('Button Clicked');
   };
 
+  //TODO: create function to generate button component and pass to each it block
+
   beforeEach(function() {
     sandbox = sinon.sandbox.create();
     reactCmp = TestUtils.renderIntoDocument(<SLDSButton label='Test' variant='brand' icon='download' onClick={handleClick} />);
@@ -19,6 +21,19 @@ describe('SLDSButton: ',  function(){
     sandbox.restore();
   });
 
+  describe('variants', function() {
+  });
+
+  describe('behavior', function() {
+    it('button onClick invokes method from props', function() {
+      let onClick = sinon.spy();
+      let reactCmp = TestUtils.renderIntoDocument(<SLDSButton label='Test' onClick={onClick} />);
+      let button = React.findDOMNode(reactCmp);
+      TestUtils.Simulate.click(button);
+      expect(onClick.calledOnce).to.be.true;
+    });
+  });
+
   it('button renders', function() {
     expect(button).to.not.equal(null);
   });
@@ -28,14 +43,4 @@ describe('SLDSButton: ',  function(){
     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; }
-  });
-
 });