Move propType validation to element instead of class.
Conflicts: src/classic/element/ReactElementValidator.js
Jim committed
Jan 22, 2015 at 19:13 UTC
6ee5299b4a00be39acf3410756b7d00feedd0cee
4 files changed
+67
-40
src/browser/ui/dom/components/__tests__/ReactDOMInput-test.js
+41
-26
@@ -216,31 +216,35 @@ describe('ReactDOMInput', function() {
216
try {
217
console.warn = mocks.getMockFunction();
218
219
- var node = document.createElement('div');
219
var link = new ReactLink('yolo', mocks.getMockFunction());
221
- React.render(<input type="text" valueLink={link} />, node);
220
+ ReactTestUtils.renderIntoDocument(<input type="text" valueLink={link} />);
221
expect(console.warn.mock.calls.length).toBe(0);
222
224
- React.render(
225
- <input type="text" value="zoink" onChange={mocks.getMockFunction()} />,
226
- node
223
+ ReactTestUtils.renderIntoDocument(
224
+ <input type="text" value="zoink" onChange={mocks.getMockFunction()} />
225
);
226
expect(console.warn.mock.calls.length).toBe(0);
227
+ ReactTestUtils.renderIntoDocument(<input type="text" value="zoink" />);
228
+ expect(console.warn.mock.calls.length).toBe(1);
229
+ } finally {
230
+ console.warn = oldWarn;
231
+ }
232
+ });
233
230
- React.render(
231
- <input type="text" value="zoink" readOnly={true} />,
232
- node
234
+ it('should warn with value and no onChange handler and readOnly specified', function() {
235
+ var oldWarn = console.warn;
236
+ try {
237
+ console.warn = mocks.getMockFunction();
238
+
239
+ ReactTestUtils.renderIntoDocument(
240
+ <input type="text" value="zoink" readOnly={true} />
241
);
242
expect(console.warn.mock.calls.length).toBe(0);
243
236
- React.render(<input type="text" value="zoink" />, node);
237
- expect(console.warn.mock.calls.length).toBe(1);
238
-
239
- React.render(
240
- <input type="text" value="zoink" readOnly={false} />,
241
- node
244
+ ReactTestUtils.renderIntoDocument(
245
+ <input type="text" value="zoink" readOnly={false} />
246
);
243
- expect(console.warn.mock.calls.length).toBe(2);
247
+ expect(console.warn.mock.calls.length).toBe(1);
248
} finally {
249
console.warn = oldWarn;
250
}
@@ -299,30 +303,41 @@ describe('ReactDOMInput', function() {
303
React.render(<input type="checkbox" checkedLink={link} />, node);
304
expect(console.warn.mock.calls.length).toBe(0);
305
302
- React.render(
306
+ ReactTestUtils.renderIntoDocument(
307
<input
308
type="checkbox"
309
checked="false"
310
onChange={mocks.getMockFunction()}
307
- />,
308
- node
311
+ />
312
);
313
expect(console.warn.mock.calls.length).toBe(0);
314
312
- React.render(
313
- <input type="checkbox" checked="false" readOnly={true} />,
314
- node
315
+ ReactTestUtils.renderIntoDocument(
316
+ <input type="checkbox" checked="false" readOnly={true} />
317
);
318
expect(console.warn.mock.calls.length).toBe(0);
319
318
- React.render(<input type="checkbox" checked="false" />, node);
320
+ ReactTestUtils.renderIntoDocument(<input type="checkbox" checked="false" />);
321
expect(console.warn.mock.calls.length).toBe(1);
322
+ } finally {
323
+ console.warn = oldWarn;
324
+ }
325
+ });
326
+
327
+ it('should warn with checked and no onChange handler with readOnly specified', function() {
328
+ var oldWarn = console.warn;
329
+ try {
330
+ console.warn = mocks.getMockFunction();
331
+
332
+ ReactTestUtils.renderIntoDocument(
333
+ <input type="checkbox" checked="false" readOnly={true} />
334
+ );
335
+ expect(console.warn.mock.calls.length).toBe(0);
336
321
- React.render(
322
- <input type="checkbox" checked="false" readOnly={false} />,
323
- node
337
+ ReactTestUtils.renderIntoDocument(
338
+ <input type="checkbox" checked="false" readOnly={false} />
339
);
325
- expect(console.warn.mock.calls.length).toBe(2);
340
+ expect(console.warn.mock.calls.length).toBe(1);
341
} finally {
342
console.warn = oldWarn;
343
}
src/classic/element/ReactElementValidator.js
+13
-13
@@ -29,6 +29,16 @@ var monitorCodeUse = require('monitorCodeUse');
29
var invariant = require('invariant');
30
var warning = require('warning');
31
32
+function getDeclarationErrorAddendum() {
33
+ if (ReactCurrentOwner.current) {
34
+ var name = ReactCurrentOwner.current.getName();
35
+ if (name) {
36
+ return ' Check the render method of `' + name + '`.';
37
+ }
38
+ }
39
+ return '';
40
+}
41
+
42
/**
43
* Warn if there's no key explicitly set on dynamic arrays of children or
44
* object keys are not valid. This allows us to keep track of children between
@@ -257,11 +267,9 @@ function checkPropTypes(componentName, propTypes, props, location) {
267
// Only monitor this failure once because there tends to be a lot of the
268
// same error.
269
loggedTypeFailures[error.message] = true;
260
- // This will soon use the warning module
261
- monitorCodeUse(
262
- 'react_failed_descriptor_type_check',
263
- { message: error.message }
264
- );
270
+
271
+ var addendum = getDeclarationErrorAddendum(this);
272
+ warning(false, error.message + addendum);
273
}
274
}
275
}
@@ -378,14 +386,6 @@ var ReactElementValidator = {
386
ReactPropTypeLocations.prop
387
);
388
}
381
- if (componentClass.contextTypes) {
382
- checkPropTypes(
383
- name,
384
- componentClass.contextTypes,
385
- element._context,
386
- ReactPropTypeLocations.context
387
- );
388
- }
389
if (typeof componentClass.getDefaultProps === 'function') {
390
warning(
391
componentClass.getDefaultProps.isReactClassApproved,
src/core/ReactCompositeComponent.js
+9
-1
@@ -28,6 +28,7 @@ var assign = require('Object.assign');
28
var emptyObject = require('emptyObject');
29
var invariant = require('invariant');
30
var keyMirror = require('keyMirror');
31
+var monitorCodeUse = require('monitorCodeUse');
32
var shouldUpdateReactComponent = require('shouldUpdateReactComponent');
33
var warning = require('warning');
34
@@ -608,7 +609,14 @@ var ReactCompositeComponentMixin = {
609
// React.render calls, so I'm abstracting it away into
610
// a function to minimize refactoring in the future
611
var addendum = getDeclarationErrorAddendum(this);
611
- warning(false, error.message + addendum);
612
+
613
+ if (location === ReactPropTypeLocations.prop) {
614
+ // Preface gives us something to blacklist in warning module
615
+ var preface = 'Failed CompositeComponent proptype check. ';
616
+ warning(false, preface + error.message + addendum);
617
+ } else {
618
+ warning(false, error.message + addendum);
619
+ }
620
}
621
}
622
}
src/vendor/core/warning.js
+4
@@ -31,6 +31,10 @@ if (__DEV__) {
31
);
32
}
33
34
+ if (format.indexOf('Failed CompositeComponent proptype check. ') === 0) {
35
+ return; // Ignore CompositeComponent proptype check.
36
+ }
37
+
38
if (!condition) {
39
var argIndex = 0;
40
var message = 'Warning: ' + format.replace(/%s/g, () => args[argIndex++]);