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.
Pete Hunt committed
Sep 4, 2013 at 15:51 UTC
8664c8ac5704a29c6deac44853e3350fccb7729e
1 file changed
+164
src/core/__tests__/ReactComponent-test.js
+164
@@ -31,6 +31,169 @@ describe('ReactComponent', function() {
31
ReactMount = require('ReactMount');
32
ReactTestUtils = require('ReactTestUtils');
33
reactComponentExpect = require('reactComponentExpect');
34
+
35
+ // This module is whitelisted from automocking so manually
36
+ // reset it.
37
+ ReactMount.allowFullPageRender = false;
38
+ });
39
+
40
+ it('should be able to switch root constructors via state', function() {
41
+ var Component = React.createClass({
42
+ render: function() {
43
+ return (
44
+ <html>
45
+ <head>
46
+ <title>Hello World</title>
47
+ </head>
48
+ <body>
49
+ Hello world
50
+ </body>
51
+ </html>
52
+ );
53
+ }
54
+ });
55
+
56
+ var Component2 = React.createClass({
57
+ render: function() {
58
+ return (
59
+ <html>
60
+ <head>
61
+ <title>Hello World</title>
62
+ </head>
63
+ <body>
64
+ Goodbye world
65
+ </body>
66
+ </html>
67
+ );
68
+ }
69
+ });
70
+
71
+ var Root = React.createClass({
72
+ getInitialState: function() {
73
+ return {toggled: false};
74
+ },
75
+ toggle: function() {
76
+ this.setState({toggled: !this.state.toggled});
77
+ },
78
+ render: function() {
79
+ if (this.state.toggled) {
80
+ return <Component2 />;
81
+ }
82
+ return <Component />;
83
+ }
84
+ });
85
+
86
+ ReactMount.allowFullPageRender = true;
87
+ var component = React.renderComponent(<Root />, document);
88
+
89
+ expect(document.body.innerHTML).toBe(' Hello world ');
90
+
91
+ // Reactive update via state transition
92
+ component.toggle();
93
+
94
+ expect(document.body.innerHTML).toBe(' Goodbye world ');
95
+
96
+ });
97
+
98
+ it('should be able to switch root constructors', function() {
99
+ var Component = React.createClass({
100
+ render: function() {
101
+ return (
102
+ <html>
103
+ <head>
104
+ <title>Hello World</title>
105
+ </head>
106
+ <body>
107
+ Hello world
108
+ </body>
109
+ </html>
110
+ );
111
+ }
112
+ });
113
+
114
+ var Component2 = React.createClass({
115
+ render: function() {
116
+ return (
117
+ <html>
118
+ <head>
119
+ <title>Hello World</title>
120
+ </head>
121
+ <body>
122
+ Goodbye world
123
+ </body>
124
+ </html>
125
+ );
126
+ }
127
+ });
128
+
129
+ ReactMount.allowFullPageRender = true;
130
+ React.renderComponent(<Component />, document);
131
+
132
+ expect(document.body.innerHTML).toBe(' Hello world ');
133
+
134
+ // Reactive update
135
+ React.renderComponent(<Component2 />, document);
136
+
137
+ expect(document.body.innerHTML).toBe(' Goodbye world ');
138
+
139
+ });
140
+
141
+ it('should be able to update a root component', function() {
142
+ var Component = React.createClass({
143
+ render: function() {
144
+ return (
145
+ <html>
146
+ <head>
147
+ <title>Hello World</title>
148
+ </head>
149
+ <body>
150
+ {this.props.text}
151
+ </body>
152
+ </html>
153
+ );
154
+ }
155
+ });
156
+ ReactMount.allowFullPageRender = true;
157
+ React.renderComponent(<Component text="Hello world" />, document);
158
+
159
+ expect(document.body.innerHTML).toBe('Hello world');
160
+
161
+ // Add a sentinel to be sure we don't blow away old nodes
162
+ document.getElementsByTagName('title')[0].setAttribute(
163
+ 'data-yolo-king',
164
+ 'phunt'
165
+ );
166
+ var oldHead = document.head.innerHTML;
167
+ expect(oldHead.indexOf('data-yolo-king') > -1).toBe(true);
168
+
169
+ // Reactive update
170
+ React.renderComponent(<Component text="Goodbye world" />, document);
171
+
172
+ expect(document.body.innerHTML).toBe('Goodbye world');
173
+
174
+ // Head has not changed, nodes were not blown away.
175
+ expect(document.head.innerHTML).toEqual(oldHead);
176
+ });
177
+
178
+ it('should be able to mount into document', function() {
179
+ var Component = React.createClass({
180
+ render: function() {
181
+ return (
182
+ <html>
183
+ <head>
184
+ <title>Hello World</title>
185
+ </head>
186
+ <body>
187
+ {this.props.text}
188
+ </body>
189
+ </html>
190
+ );
191
+ }
192
+ });
193
+ ReactMount.allowFullPageRender = true;
194
+ React.renderComponent(<Component text="Hello world" />, document);
195
+
196
+ expect(document.body.innerHTML).toBe('Hello world');
197
});
198
199
it('should not throw on full document rendering', function() {
@@ -148,4 +311,5 @@ describe('ReactComponent', function() {
311
ReactTestUtils.renderIntoDocument(instance);
312
expect(instance.isMounted()).toBeTruthy();
313
});
314
+
315
});