diff --git a/src/index.js b/src/index.js index bf6fe95..31faef0 100644 --- a/src/index.js +++ b/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); } }; } diff --git a/test/unit/props.js b/test/unit/props.js index e064c2b..603b493 100644 --- a/test/unit/props.js +++ b/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(, 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(, 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(
, 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(, 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(, 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(, window.fixture); }); + + it('should work with rest/spread properties', () => { + const Comp = createComponentWithProp('test'); + const rest = { style: { color: 'white' }, test: 'test' }; + ReactDOM.render(, 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'); + }); });