diff --git a/src/core/__tests__/ReactComponent-test.js b/src/core/__tests__/ReactComponent-test.js index 0a78d56915..8455a661e7 100644 --- a/src/core/__tests__/ReactComponent-test.js +++ b/src/core/__tests__/ReactComponent-test.js @@ -31,6 +31,169 @@ describe('ReactComponent', function() { ReactMount = require('ReactMount'); ReactTestUtils = require('ReactTestUtils'); reactComponentExpect = require('reactComponentExpect'); + + // This module is whitelisted from automocking so manually + // reset it. + ReactMount.allowFullPageRender = false; + }); + + it('should be able to switch root constructors via state', function() { + var Component = React.createClass({ + render: function() { + return ( + + + Hello World + + + Hello world + + + ); + } + }); + + var Component2 = React.createClass({ + render: function() { + return ( + + + Hello World + + + Goodbye world + + + ); + } + }); + + var Root = React.createClass({ + getInitialState: function() { + return {toggled: false}; + }, + toggle: function() { + this.setState({toggled: !this.state.toggled}); + }, + render: function() { + if (this.state.toggled) { + return ; + } + return ; + } + }); + + ReactMount.allowFullPageRender = true; + var component = React.renderComponent(, document); + + expect(document.body.innerHTML).toBe(' Hello world '); + + // Reactive update via state transition + component.toggle(); + + expect(document.body.innerHTML).toBe(' Goodbye world '); + + }); + + it('should be able to switch root constructors', function() { + var Component = React.createClass({ + render: function() { + return ( + + + Hello World + + + Hello world + + + ); + } + }); + + var Component2 = React.createClass({ + render: function() { + return ( + + + Hello World + + + Goodbye world + + + ); + } + }); + + ReactMount.allowFullPageRender = true; + React.renderComponent(, document); + + expect(document.body.innerHTML).toBe(' Hello world '); + + // Reactive update + React.renderComponent(, document); + + expect(document.body.innerHTML).toBe(' Goodbye world '); + + }); + + it('should be able to update a root component', function() { + var Component = React.createClass({ + render: function() { + return ( + + + Hello World + + + {this.props.text} + + + ); + } + }); + ReactMount.allowFullPageRender = true; + React.renderComponent(, document); + + expect(document.body.innerHTML).toBe('Hello world'); + + // Add a sentinel to be sure we don't blow away old nodes + document.getElementsByTagName('title')[0].setAttribute( + 'data-yolo-king', + 'phunt' + ); + var oldHead = document.head.innerHTML; + expect(oldHead.indexOf('data-yolo-king') > -1).toBe(true); + + // Reactive update + React.renderComponent(, document); + + expect(document.body.innerHTML).toBe('Goodbye world'); + + // Head has not changed, nodes were not blown away. + expect(document.head.innerHTML).toEqual(oldHead); + }); + + it('should be able to mount into document', function() { + var Component = React.createClass({ + render: function() { + return ( + + + Hello World + + + {this.props.text} + + + ); + } + }); + ReactMount.allowFullPageRender = true; + React.renderComponent(, document); + + expect(document.body.innerHTML).toBe('Hello world'); }); it('should not throw on full document rendering', function() { @@ -148,4 +311,5 @@ describe('ReactComponent', function() { ReactTestUtils.renderIntoDocument(instance); expect(instance.isMounted()).toBeTruthy(); }); + });