add getUnhandled props util, fix some tests

Author: levithomason

src/elements/Image/Image.js

@@ -23,13 +23,10 @@ export default class Image extends Component {
       this.props.className,
       'image'
     );
-    const props = _.clone(this.props);
-    delete props.src;
-    delete props.alt;
 
     return (
-      <div {...props} className={classes}>
-        <img src={this.props.src} alt={this.props.alt} />
+      <div className={classes}>
+        <img {...this.props} />
       </div>
     );
   }

src/elements/List/List.js

@@ -4,6 +4,7 @@ import META from 'src/utils/Meta';
 
 export default class List extends Component {
   static propTypes = {
+    children: PropTypes.node,
     className: PropTypes.string,
   };
 
@@ -16,7 +17,9 @@ export default class List extends Component {
   render() {
     const classes = classNames('sd-list', 'ui', this.props.className, 'list');
     return (
-      <div {...this.props} className={classes}></div>
+      <div {...this.props} className={classes}>
+        {this.props.children}
+      </div>
     );
   }
 }

src/modules/Dropdown/Dropdown.js

@@ -3,6 +3,7 @@ import $ from 'jquery';
 import classNames from 'classnames';
 import React, {Component, PropTypes} from 'react';
 import META from 'src/utils/Meta';
+import getUnhandledProps from 'src/utils/getUnhandledProps';
 
 export default class Dropdown extends Component {
   static propTypes = {
@@ -43,8 +44,7 @@ export default class Dropdown extends Component {
       'dropdown'
     );
 
-    const props = _.clone(this.props);
-    delete props.options;
+    const props = getUnhandledProps(this);
 
     return (
       <select {...props} className={classes} ref='select'>

src/modules/Modal/Modal.js

@@ -2,7 +2,7 @@ import React, {Component, PropTypes} from 'react';
 import classNames from 'classnames';
 import META from 'src/utils/Meta';
 
-class Modal extends Component {
+export default class Modal extends Component {
   static propTypes = {
     children: PropTypes.any,
     className: PropTypes.string,
@@ -46,5 +46,3 @@ class Modal extends Component {
     );
   }
 }
-
-export default Modal;

test/specs/Conformance-test.js

@@ -29,11 +29,16 @@ describe('Conformance', () => {
       });
 
       it(`has the "${sdClass}" element as its first child (no wrapper elements)`, () => {
-        expect(firstChild.props.className).to.contain(sdClass);
+        if (isDOMComponent(firstChild)) {
+          expect(firstChild.getAttribute('class')).to.contain(sdClass);
+        } else {
+          expect(firstChild.props.className).to.contain(sdClass);
+        }
       });
 
       describe('_meta', () => {
-        const _meta = _.get(SDComponent, '_meta');
+        const _meta = SDComponent._meta;
+
         it('is a static object prop', () => {
           expect(_meta).to.be.an('object');
         });
@@ -74,29 +79,32 @@ describe('Conformance', () => {
       describe('props', () => {
         it('spreads props', () => {
           const props = {};
-          _.times(2, () => {
-            // single word props
-            props[faker.hacker.noun()] = faker.hacker.noun();
-            // camelCased props
-            props[_.camelCase(faker.hacker.phrase())] = faker.hacker.phrase();
-            // kebab-cased props
-            props[_.kebabCase(faker.hacker.phrase())] = faker.hacker.phrase();
-          });
+          // JSX does not render custom html attributes so we prefix them with data-*.
+          // https://facebook.github.io/react/docs/jsx-gotchas.html#custom-html-attributes
+          props[`data-${faker.hacker.noun()}`] = faker.hacker.noun();
 
           // create element with random props
-          const componentWithProps = <SDComponent {...props} />;
-
-          const hasSpreadProps = render(componentWithProps)
+          render(<SDComponent {...props} />)
             .children()
-            .some(element => _.every([element.props], props));
-
-          hasSpreadProps.should.equal(true);
+            .some(child => {
+              return _.every(props, (val, key) => {
+                return isDOMComponent(child)
+                  ? child.getAttribute(key) === val
+                  : child.props[key] === val;
+              });
+            })
+            .should.equal(true);
         });
         describe('className', () => {
           it(`has props.className after "${sdClass}"`, () => {
-            const renderedClasses = render(<SDComponent className={classes} />)
-              .findClass(sdClass)
-              .props.className;
+            let renderedClasses;
+            const rendered = render(<SDComponent className={classes} />)
+              .findClass(sdClass);
+            if (isDOMComponent(rendered)) {
+              renderedClasses = rendered.getAttribute('class');
+            } else {
+              renderedClasses = rendered.props.className;
+            }
             const sdClassIndex = renderedClasses.indexOf(sdClass);
             const classesIndex = renderedClasses.indexOf(classes);
             expect(sdClassIndex).to.be.below(classesIndex);

test/specs/addons/Confirm-test.js

@@ -7,29 +7,28 @@ describe('Confirm', () => {
     render(<Confirm />).first().props.abortLabel.should.equal('Cancel');
   });
   it('default prop confirmLabel should be "Yes"', () => {
-    render(<Confirm />).first().props.confirmLabel.should.equal('Yes');
+    Confirm.defaultProps.confirmLabel.should.equal('Yes');
   });
   it('default prop ref should be "modal"', () => {
-    render(<Confirm />).first().props.ref.should.equal('modal');
+    Confirm.defaultProps.ref.should.equal('modal');
+    var foo = true;
   });
   it('should return true on confirm', () => {
     const confirm = render(<Confirm />);
-    const confirmationButton = confirm.findClass('sd-confirm-button');
-    const confirmButtonNode = confirmationButton.getDOMNode();
-    confirm.first().show('Delete item?')
-      .then((isConfirmed) => {
-        isConfirmed.should.be.true;
-      });
-    Simulate.click(confirmButtonNode );
+    const button = confirm.findClass('sd-confirm-button');
+    confirm
+      .first()
+      .show()
+      .then(isConfirmed => isConfirmed.should.equal(true);
+    Simulate.click(button);
   });
   it('should return false on abort', () => {
     const confirm = render(<Confirm />);
-    const abortButton = confirm.findClass('sd-abort-button');
-    const abortButtonNode = abortButton.getDOMNode();
-    confirm.first().show('Delete item?')
-      .then((isConfirmed) => {
-        isConfirmed.should.be.false;
-      });
-    Simulate.click(abortButtonNode );
+    const button = confirm.findClass('sd-abort-button');
+    confirm
+      .first()
+      .show()
+      .then(isConfirmed => isConfirmed.should.equal(false));
+    Simulate.click(button);
   });
 });

test/specs/modules/Dropdown/Dropdown-test.js

@@ -1,15 +1,16 @@
 import React from 'react';
 import {Dropdown} from 'stardust';
 
-describe('Dropdown', () => {
+describe.only('Dropdown', () => {
   it('has a default value', () => {
     const options = [
       {value: '', text: 'Please select a role'},
       {value: 'admin', text: 'Admin'},
       {value: 'editor', text: 'Editor'}
     ];
-    const renderedDropdown = render(<Dropdown label='Roles' value='admin' options={options} />).findTag('select');
-    renderedDropdown.props.value.should.equal('admin');
+    render(<Dropdown label='Roles' defaultValue='admin' options={options} />)
+      .findTag('select')
+      .value.should.equal('admin');
   });
   it('has assigned amount of options', () => {
     const options = [
@@ -20,8 +21,11 @@ describe('Dropdown', () => {
       {value: 'purple', text: 'purple'},
       {value: 'blue', text: 'blue'}
     ];
-    const renderedDropdown = render(<Dropdown options={options} />);
-    renderedDropdown.findTag('select').props.children.length.should.equal(6);
-    renderedDropdown.scryTag('option')[2].props.value.should.equal('green');
+    render(<Dropdown options={options} />)
+      .scryTag('option')
+      .map((opt, i) => {
+        opt.text.should.equal(options[i].text);
+        opt.value.should.equal(options[i].value);
+      });
   });
 });