tests fixed

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>

lib/SLDSLookup/index.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)
+ }));
+ }
  }
 
  //=================================================

package.json

@@ -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",

tests/SLDSLookup/lookup.test.jsx

@@ -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');
  });
+
  });
 
 });