fix(props): Simplified fix and corrected test code that was getting a false positive.

Reordered tests so that built-in React props come first.

#26

Author: treshugart

src/index.js

@@ -41,6 +41,7 @@ export default function (CustomElement, opts) {
     static get propTypes() {
       return {
         children: React.PropTypes.any,
+        style: React.PropTypes.any,
       };
     }
     componentDidMount() {
@@ -49,21 +50,19 @@ export default function (CustomElement, opts) {
     componentWillReceiveProps(props) {
       const node = ReactDOM.findDOMNode(this);
       Object.keys(props).forEach(name => {
-        if (name === 'children') {
+        if (name === 'children' || name === 'style') {
           return;
         }
 
         if (name.indexOf('on') === 0) {
           syncEvent(node, name.substring(2), props[name]);
-        } else if (name === 'style') {
-          node.setAttribute('style', props[name]);
         } else {
           node[name] = props[name];
         }
       });
     }
     render() {
-      return React.createElement(tagName, null, this.props.children);
+      return React.createElement(tagName, { style: this.props.style }, this.props.children);
     }
   };
 }

test/unit/props.js

@@ -3,51 +3,59 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 
 let x = 0;
-function createComponent(name, done) {
+function createComponentWithOpts(opts) {
   return reactify(document.registerElement(`x-props-${x++}`, {
-    prototype: Object.create(HTMLElement.prototype, {
-      [name]: {
-        get() {
-          return 'test';
-        },
-        set(value) {
-          if (done) {
-            done(this, value);
-          }
-        },
-      },
-    }),
+    prototype: Object.create(HTMLElement.prototype, opts),
   }), { React, ReactDOM });
 }
+function createComponentWithProp(name, done) {
+  return createComponentWithOpts({
+    [name]: {
+      get() {
+        return 'test';
+      },
+      set(value) {
+        if (done) {
+          done(this, value);
+        }
+      },
+    },
+  });
+}
 
 describe('props', () => {
+  it('should set style (object)', () => {
+    const Comp = createComponentWithOpts({});
+    ReactDOM.render(<Comp style={{ backgroundColor: 'black', width: 1 }} />, window.fixture);
+    const elem = window.fixture.firstChild;
+    expect(elem.style.backgroundColor).to.equal('black');
+    expect(elem.style.width).to.equal('1px');
+  });
+
+  it('should set className', () => {
+    const Comp = createComponentWithOpts({});
+    ReactDOM.render(<Comp className="test" />, window.fixture);
+    const elem = window.fixture.firstChild;
+    expect(elem.getAttribute('class')).to.equal('test');
+  });
+  
   it('should not set children', () => {
-    const Comp = createComponent('children', () => { throw new Error('set children'); });
+    const Comp = createComponentWithProp('children', () => { throw new Error('set children'); });
     ReactDOM.render(<Comp><div /></Comp>, window.fixture);
   });
 
   it('should not set events', () => {
-    const Comp = createComponent('oncustomevent', () => { throw new Error('set oncustomevent'); });
+    const Comp = createComponentWithProp('oncustomevent', () => { throw new Error('set oncustomevent'); });
     ReactDOM.render(<Comp oncustomevent="test" />, window.fixture);
   });
 
   it('should not set attributes', () => {
-    const Comp = createComponent('test', elem => expect(elem.hasAttribute('test')).to.equal(false));
+    const Comp = createComponentWithProp('test', elem => expect(elem.hasAttribute('test')).to.equal(false));
     ReactDOM.render(<Comp test="test" />, window.fixture);
   });
 
-  it('should set style as an attribute (object)', () => {
-    const Comp = createComponent('style', elem => expect(elem.style.display).to.equal('block'));
-    ReactDOM.render(<Comp style={{ display: 'block' }} />, window.fixture);
-  });
-
-  it('should set style as an attribute (string)', () => {
-    const Comp = createComponent('style', elem => expect(elem.style.display).to.equal('block'));
-    ReactDOM.render(<Comp style="style: block" />, window.fixture);
-  });
-
   it('should set properties for anything else', () => {
-    const Comp = createComponent('test', (elem, value) => expect(value).to.equal('test'));
+    const Comp = createComponentWithProp('test', (elem, value) => expect(value).to.equal('test'));
     ReactDOM.render(<Comp test="test" />, window.fixture);
   });
 });