assertValidProps for updating DOM components through renderComponent
`renderComponent(<div style={invalidType}/>, container)` throws correctly, but not when it's called a second time (i.e. updating rather than mounting). It goes through `ReactDOMComponent.updateComponent` but there wasn't a props assertion there. (Removed the assertion in `receiveComponent`)
Cheng Lou committed
Mar 25, 2014 at 12:31 UTC
edc0fa4c3f542c1bc806004c8b1481d4e27a30d2
2 files changed
+36
-1
src/browser/ui/ReactDOMComponent.js
+1
-1
@@ -215,7 +215,6 @@ ReactDOMComponent.Mixin = {
215
return;
216
}
217
218
- assertValidProps(nextComponent.props);
218
ReactComponent.Mixin.receiveComponent.call(
219
this,
220
nextComponent,
@@ -236,6 +235,7 @@ ReactDOMComponent.Mixin = {
235
'ReactDOMComponent',
236
'updateComponent',
237
function(transaction, prevProps, prevOwner) {
238
+ assertValidProps(this.props);
239
ReactComponent.Mixin.updateComponent.call(
240
this,
241
transaction,
src/browser/ui/__tests__/ReactDOMComponent-test.js
+35
@@ -340,6 +340,41 @@ describe('ReactDOMComponent', function() {
340
});
341
});
342
343
+ describe('updateComponent', function() {
344
+ var React;
345
+ var container;
346
+
347
+ beforeEach(function() {
348
+ React = require('React');
349
+ container = document.createElement('div');
350
+ });
351
+
352
+ it("should validate against multiple children props", function() {
353
+ React.renderComponent(<div></div>, container);
354
+
355
+ expect(function() {
356
+ React.renderComponent(
357
+ <div children="" dangerouslySetInnerHTML={{__html: ''}}></div>,
358
+ container
359
+ );
360
+ }).toThrow(
361
+ 'Invariant Violation: Can only set one of `children` or ' +
362
+ '`props.dangerouslySetInnerHTML`.'
363
+ );
364
+ });
365
+
366
+ it("should validate against invalid styles", function() {
367
+ React.renderComponent(<div></div>, container);
368
+
369
+ expect(function() {
370
+ React.renderComponent(<div style={1}></div>, container);
371
+ }).toThrow(
372
+ 'Invariant Violation: The `style` prop expects a mapping from style ' +
373
+ 'properties to values, not a string.'
374
+ );
375
+ });
376
+ });
377
+
378
describe('unmountComponent', function() {
379
it("should clean up listeners", function() {
380
var React = require('React');