CoCalc -- ReactRenderDocument-test.js

Summer of Sage Days 2015: San Diego (sd64.25), etc.
react / react-0.13.3 / examples / basic-commonjs / node_modules / reactify / node_modules / react-tools / src / browser / ui / __tests__ / ReactRenderDocument-test.js
⁸¹¹⁵⁹ views
1
/**
2
 * Copyright 2013-2014, Facebook, Inc.
3
 * All rights reserved.
4
 *
5
 * This source code is licensed under the BSD-style license found in the
6
 * LICENSE file in the root directory of this source tree. An additional grant
7
 * of patent rights can be found in the PATENTS file in the same directory.
8
 *
9
 * @emails react-core
10
 */
11

12
/*jslint evil: true */
13

14
"use strict";
15

16
var React;
17
var ReactMount;
18

19
var getTestDocument;
20

21
var testDocument;
22

23
var UNMOUNT_INVARIANT_MESSAGE =
24
  'Invariant Violation: ReactFullPageComponenthtml tried to unmount. ' +
25
  'Because of cross-browser quirks it is impossible to unmount some ' +
26
  'top-level components (eg <html>, <head>, and <body>) reliably and ' +
27
  'efficiently. To fix this, have a single top-level component that ' +
28
  'never unmounts render these elements.';
29

30
describe('rendering React components at document', function() {
31
  beforeEach(function() {
32
    require('mock-modules').dumpCache();
33

34
    React = require('React');
35
    ReactMount = require('ReactMount');
36
    getTestDocument = require('getTestDocument');
37

38
    testDocument = getTestDocument();
39
  });
40

41
  it('should be able to get root component id for document node', function() {
42
    expect(testDocument).not.toBeUndefined();
43

44
    var Root = React.createClass({
45
      render: function() {
46
        return (
47
          <html>
48
            <head>
49
              <title>Hello World</title>
50
            </head>
51
            <body>
52
              Hello world
53
            </body>
54
          </html>
55
        );
56
      }
57
    });
58

59
    var markup = React.renderToString(<Root />);
60
    testDocument = getTestDocument(markup);
61
    var component = React.render(<Root />, testDocument);
62
    expect(testDocument.body.innerHTML).toBe('Hello world');
63

64
    var componentID = ReactMount.getReactRootID(testDocument);
65
    expect(componentID).toBe(component._rootNodeID);
66
  });
67

68
  it('should not be able to unmount component from document node', function() {
69
    expect(testDocument).not.toBeUndefined();
70

71
    var Root = React.createClass({
72
      render: function() {
73
        return (
74
          <html>
75
            <head>
76
              <title>Hello World</title>
77
            </head>
78
            <body>
79
              Hello world
80
            </body>
81
          </html>
82
        );
83
      }
84
    });
85

86
    var markup = React.renderToString(<Root />);
87
    testDocument = getTestDocument(markup);
88
    React.render(<Root />, testDocument);
89
    expect(testDocument.body.innerHTML).toBe('Hello world');
90

91
    expect(function() {
92
      React.unmountComponentAtNode(testDocument);
93
    }).toThrow(UNMOUNT_INVARIANT_MESSAGE);
94

95
    expect(testDocument.body.innerHTML).toBe('Hello world');
96
  });
97

98
  it('should not be able to switch root constructors', function() {
99
    expect(testDocument).not.toBeUndefined();
100

101
    var Component = React.createClass({
102
      render: function() {
103
        return (
104
          <html>
105
            <head>
106
              <title>Hello World</title>
107
            </head>
108
            <body>
109
              Hello world
110
            </body>
111
          </html>
112
        );
113
      }
114
    });
115

116
    var Component2 = React.createClass({
117
      render: function() {
118
        return (
119
          <html>
120
            <head>
121
              <title>Hello World</title>
122
            </head>
123
            <body>
124
              Goodbye world
125
            </body>
126
          </html>
127
        );
128
      }
129
    });
130

131
    var markup = React.renderToString(<Component />);
132
    testDocument = getTestDocument(markup);
133

134
    React.render(<Component />, testDocument);
135

136
    expect(testDocument.body.innerHTML).toBe('Hello world');
137

138
    // Reactive update
139
    expect(function() {
140
      React.render(<Component2 />, testDocument);
141
    }).toThrow(UNMOUNT_INVARIANT_MESSAGE);
142

143
    expect(testDocument.body.innerHTML).toBe('Hello world');
144
  });
145

146
  it('should be able to mount into document', function() {
147
    expect(testDocument).not.toBeUndefined();
148

149
    var Component = React.createClass({
150
      render: function() {
151
        return (
152
          <html>
153
            <head>
154
              <title>Hello World</title>
155
            </head>
156
            <body>
157
              {this.props.text}
158
            </body>
159
          </html>
160
        );
161
      }
162
    });
163

164
    var markup = React.renderToString(
165
      <Component text="Hello world" />
166
    );
167
    testDocument = getTestDocument(markup);
168

169
    React.render(<Component text="Hello world" />, testDocument);
170

171
    expect(testDocument.body.innerHTML).toBe('Hello world');
172
  });
173

174
  it('should give helpful errors on state desync', function() {
175
    expect(testDocument).not.toBeUndefined();
176

177
    var Component = React.createClass({
178
      render: function() {
179
        return (
180
          <html>
181
            <head>
182
              <title>Hello World</title>
183
            </head>
184
            <body>
185
              {this.props.text}
186
            </body>
187
          </html>
188
        );
189
      }
190
    });
191

192
    var markup = React.renderToString(
193
      <Component text="Goodbye world" />
194
    );
195
    testDocument = getTestDocument(markup);
196

197
    expect(function() {
198
      // Notice the text is different!
199
      React.render(<Component text="Hello world" />, testDocument);
200
    }).toThrow(
201
      'Invariant Violation: ' +
202
      'You\'re trying to render a component to the document using ' +
203
      'server rendering but the checksum was invalid. This usually ' +
204
      'means you rendered a different component type or props on ' +
205
      'the client from the one on the server, or your render() methods ' +
206
      'are impure. React cannot handle this case due to cross-browser ' +
207
      'quirks by rendering at the document root. You should look for ' +
208
      'environment dependent code in your components and ensure ' +
209
      'the props are the same client and server side.'
210
    );
211
  });
212

213
  it('should throw on full document render w/ no markup', function() {
214
    expect(testDocument).not.toBeUndefined();
215

216
    var container = testDocument;
217

218
    var Component = React.createClass({
219
      render: function() {
220
        return (
221
          <html>
222
            <head>
223
              <title>Hello World</title>
224
            </head>
225
            <body>
226
              {this.props.text}
227
            </body>
228
          </html>
229
        );
230
      }
231
    });
232

233
    expect(function() {
234
      React.render(<Component />, container);
235
    }).toThrow(
236
      'Invariant Violation: You\'re trying to render a component to the ' +
237
      'document but you didn\'t use server rendering. We can\'t do this ' +
238
      'without using server rendering due to cross-browser quirks. See ' +
239
      'renderComponentToString() for server rendering.'
240
    );
241
  });
242

243
});
244

245
Product

Resources

Company
