Test cases covering rendering onto document

There were some bug reports here, I couldn't reproduce but wrote tests anyway. We should definitely have these.
2025-11-01 09:12:30 +00:00 · 2013-09-04 15:54:11 -07:00
parent dea0cc01cf
commit 8664c8ac57
1 changed files with 164 additions and 0 deletions
@@ -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 (
+          <html>
+            <head>
+              <title>Hello World</title>
+            </head>
+            <body>
+              Hello world
+            </body>
+          </html>
+        );
+      }
+    });
+
+    var Component2 = React.createClass({
+      render: function() {
+        return (
+          <html>
+            <head>
+              <title>Hello World</title>
+            </head>
+            <body>
+              Goodbye world
+            </body>
+          </html>
+        );
+      }
+    });
+
+    var Root = React.createClass({
+      getInitialState: function() {
+        return {toggled: false};
+      },
+      toggle: function() {
+        this.setState({toggled: !this.state.toggled});
+      },
+      render: function() {
+        if (this.state.toggled) {
+          return <Component2 />;
+        }
+        return <Component />;
+      }
+    });
+
+    ReactMount.allowFullPageRender = true;
+    var component = React.renderComponent(<Root />, 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 (
+          <html>
+            <head>
+              <title>Hello World</title>
+            </head>
+            <body>
+              Hello world
+            </body>
+          </html>
+        );
+      }
+    });
+
+    var Component2 = React.createClass({
+      render: function() {
+        return (
+          <html>
+            <head>
+              <title>Hello World</title>
+            </head>
+            <body>
+              Goodbye world
+            </body>
+          </html>
+        );
+      }
+    });
+
+    ReactMount.allowFullPageRender = true;
+    React.renderComponent(<Component />, document);
+
+    expect(document.body.innerHTML).toBe(' Hello world ');
+
+    // Reactive update
+    React.renderComponent(<Component2 />, 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 (
+          <html>
+            <head>
+              <title>Hello World</title>
+            </head>
+            <body>
+              {this.props.text}
+            </body>
+          </html>
+        );
+      }
+    });
+    ReactMount.allowFullPageRender = true;
+    React.renderComponent(<Component text="Hello world" />, 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(<Component text="Goodbye world" />, 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 (
+          <html>
+            <head>
+              <title>Hello World</title>
+            </head>
+            <body>
+              {this.props.text}
+            </body>
+          </html>
+        );
+      }
+    });
+    ReactMount.allowFullPageRender = true;
+    React.renderComponent(<Component text="Hello world" />, 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();
  });
+
 });