Merge pull request #27 from skatejs/26

#26 - Fix style prop

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,7 +50,7 @@ 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;
         }
 
@@ -61,7 +62,7 @@ export default function (CustomElement, opts) {
       });
     }
     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,41 +3,69 @@ 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 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);
   });
+
+  it('should work with rest/spread properties', () => {
+    const Comp = createComponentWithProp('test');
+    const rest = { style: { color: 'white' }, test: 'test' };
+    ReactDOM.render(<Comp className="test" {...rest} />, window.fixture);
+    const elem = window.fixture.firstChild;
+    expect(elem.getAttribute('class')).to.equal('test');
+    expect(elem.style.color).to.equal('white');
+    expect(elem.test).to.equal('test');
+  });
 });