tests fixed

Author: ivansfdc

components/SLDSLookup/index.jsx

@@ -204,12 +204,14 @@ class SLDSLookup extends React.Component {
   }
 
   getFooter () {
-    const Footer = this.props.footerRenderer;
-    return <Footer  ref='footer' {... this.props}
-      focusIndex={this.state.focusIndex}
-      listLength={this.state.listLength}
-      onClose={this.handleClose.bind(this)}
-    />;
+    if(this.props.footerRenderer){
+      const Footer = this.props.footerRenderer;
+      return <Footer ref='footer' {... this.props}
+        focusIndex={this.state.focusIndex}
+        listLength={this.state.listLength}
+        onClose={this.handleClose.bind(this)}
+      />;
+    }
   }
 
   //=================================================

demo/pages/HomePage/LookupBaseDynamicSection.jsx

@@ -59,14 +59,15 @@ module.exports = React.createClass( {
             <div className="slds-p-around--medium">
             Dynamic list
               <div className="slds-p-vertical--large">
+
                 <SLDSLookup
                   items={this.state.items}
                   label="Accounts"
                   type="account"
                   onChange={this.onChange}
-                  onItemSelect={this.selectItem}
                   onItemSelect={this.handleItemSelect}
                 />
+
               </div>
 
             </div>

demo/static/bundle.js

@@ -263,12 +263,14 @@ var SLDSLookup = (function (_React$Component) {
   }, {
     key: 'getFooter',
     value: function getFooter() {
-      var Footer = this.props.footerRenderer;
-      return _react2['default'].createElement(Footer, _extends({ ref: 'footer' }, this.props, {
-        focusIndex: this.state.focusIndex,
-        listLength: this.state.listLength,
-        onClose: this.handleClose.bind(this)
-      }));
+      if (this.props.footerRenderer) {
+        var Footer = this.props.footerRenderer;
+        return _react2['default'].createElement(Footer, _extends({ ref: 'footer' }, this.props, {
+          focusIndex: this.state.focusIndex,
+          listLength: this.state.listLength,
+          onClose: this.handleClose.bind(this)
+        }));
+      }
     }
 
     //=================================================

dist/design-system-react.js

@@ -1,6 +1,6 @@
 {
   "name": "design-system-react",
-  "version": "0.0.18",
+  "version": "0.0.19",
   "description": "Salesforce Lightning Design System React components",
   "scripts": {
     "start": "node server.js",

dist/design-system-react.js.map

@@ -13,29 +13,39 @@ describe('SLDSLookup: ',  function(){
     {label:'Acme Construction'}
   ];
 
-  let generateLookup = function(lookupInstance) {
+  const generateLookup = function(lookupInstance) {
     let reactCmp = TestUtils.renderIntoDocument(lookupInstance);
     return React.findDOMNode(reactCmp);
   };
 
+  const getLookup = function(withHeader) {
+    return <SLDSLookup 
+      items={items} 
+      label="Leads" 
+      type="lead" 
+      headerRenderer={withHeader?SLDSLookup.DefaultHeader:null}
+      footerRenderer={SLDSLookup.DefaultFooter}
+    />;
+  };
+
   describe('component renders', function() {
     it('lookup renders', function() {
-      let lookup = generateLookup(<SLDSLookup items={items} label="Leads" type="lead" />);
+      let lookup = generateLookup(getLookup());
       expect(lookup).to.not.equal(undefined);
     });
   });
 
   describe('component basic props render', function() {
     it('renders label', function() {
-      let lookup = generateLookup(<SLDSLookup items={items} label="Leads" type="lead" />);
+      let lookup = generateLookup(getLookup());
       let label = lookup.getElementsByTagName("label")[0];
       expect(label.innerText).to.equal('Leads');
     });
   });
 
   describe('accessibility markup passes', function() {
     it('label for matches input id', function() {
-      let lookup = generateLookup(<SLDSLookup items={items} label="Leads" type="lead" />);
+      let lookup = generateLookup(getLookup());
       let labelFor = lookup.getElementsByTagName("label")[0].getAttribute("for");
       let inputId = lookup.getElementsByTagName("input")[0].getAttribute("id");
       expect(labelFor).to.equal(inputId);
@@ -45,18 +55,18 @@ describe('SLDSLookup: ',  function(){
 
   describe('accessibility aria attributes pass', function() {
     it('aria-haspopup is true', function() {
-      let lookup = generateLookup(<SLDSLookup items={items} label="Leads" type="lead" />);
+      let lookup = generateLookup(getLookup());
       let ariaHaspopup = lookup.getElementsByTagName("input")[0].getAttribute("aria-haspopup");
       expect(ariaHaspopup).to.equal('true');
     });
     it('aria-expanded is false initally', function() {
-      let lookup = generateLookup(<SLDSLookup items={items} label="Leads" type="lead" />);
+      let lookup = generateLookup(getLookup());
       let ariaExpanded = lookup.getElementsByTagName("input")[0].getAttribute("aria-expanded");
       expect(ariaExpanded).to.equal('false');
     });
 
     it('aria-expanded is true when clicking on input field', function() {
-      let lookup = generateLookup(<SLDSLookup items={items} label="Leads" type="lead" />);
+      let lookup = generateLookup(getLookup());
       let input = lookup.getElementsByTagName("input")[0];
       TestUtils.Simulate.click(input);
       let ariaExpanded = lookup.getElementsByTagName("input")[0].getAttribute("aria-expanded");
@@ -68,7 +78,7 @@ describe('SLDSLookup: ',  function(){
   describe('selecting item works', function() {
 
     it('no fixed header: focuses correct item', function() {
-      let lookup = generateLookup(<SLDSLookup items={items} label="Leads" type="lead" />);
+      let lookup = generateLookup(getLookup());
       let input = lookup.getElementsByTagName("input")[0];
       TestUtils.Simulate.click(input);
       TestUtils.Simulate.keyDown(input, {key: "Down", keyCode: 40, which: 40});
@@ -78,7 +88,7 @@ describe('SLDSLookup: ',  function(){
     });
 
     it('with fixed header: focuses correct item', function() {
-      let lookup = generateLookup(<SLDSLookup items={items} label="Leads" type="lead" header={<div>header</div>}/>);
+      let lookup = generateLookup(getLookup(true));
       let input = lookup.getElementsByTagName("input")[0];
       TestUtils.Simulate.click(input);
       TestUtils.Simulate.keyDown(input, {key: "Down", keyCode: 40, which: 40});
@@ -88,7 +98,7 @@ describe('SLDSLookup: ',  function(){
     });
 
     it('selects correct item', function() {
-      let lookup = generateLookup(<SLDSLookup items={items} label="Leads" type="lead" />);
+      let lookup = generateLookup(getLookup());
       let input = lookup.getElementsByTagName("input")[0];
       TestUtils.Simulate.click(input);
       TestUtils.Simulate.keyDown(input, {key: "Down", keyCode: 40, which: 40});
@@ -100,7 +110,7 @@ describe('SLDSLookup: ',  function(){
     });
 
     it('closes lookup menu on esc', function() {
-      let lookup = generateLookup(<SLDSLookup items={items} label="Leads" type="lead" />);
+      let lookup = generateLookup(getLookup());
       let input = lookup.getElementsByTagName("input")[0];
       TestUtils.Simulate.click(input);
       TestUtils.Simulate.keyDown(input, {key: "Down", keyCode: 40, which: 40});
@@ -110,7 +120,7 @@ describe('SLDSLookup: ',  function(){
     });
 
     it('aria-expanded is false after selecting item', function() {
-      let lookup = generateLookup(<SLDSLookup items={items} label="Leads" type="lead" />);
+      let lookup = generateLookup(getLookup());
       let input = lookup.getElementsByTagName("input")[0];
       TestUtils.Simulate.click(input);
       TestUtils.Simulate.keyDown(input, {key: "Down", keyCode: 40, which: 40});
@@ -119,13 +129,14 @@ describe('SLDSLookup: ',  function(){
     });
 
     it('aria-expanded is false after selecting item', function() {
-      let lookup = generateLookup(<SLDSLookup items={items} label="Leads" type="lead" />);
+      let lookup = generateLookup(getLookup());
       let input = lookup.getElementsByTagName("input")[0];
       TestUtils.Simulate.click(input);
       TestUtils.Simulate.keyDown(input, {key: "Down", keyCode: 40, which: 40});
       let focusedItem = lookup.getElementsByTagName("ul")[0].getElementsByTagName('li')[0];
       expect(focusedItem.className).to.have.string('slds-theme--shade');
     });
+
   });
 
 });