Add warning for NaN in style object
Jon Tewksbury committed
Jan 16, 2016 at 11:10 UTC
7a6000c093106d5cce02c5a5ea1b512092111d20
3 files changed
+35
-1
src/renderers/dom/shared/CSSPropertyOperations.js
+18
@@ -50,6 +50,7 @@ if (__DEV__) {
50
51
var warnedStyleNames = {};
52
var warnedStyleValues = {};
53
+ var warnedForNaNValue = false;
54
55
var warnHyphenatedStyleName = function(name) {
56
if (warnedStyleNames.hasOwnProperty(name) && warnedStyleNames[name]) {
@@ -94,6 +95,19 @@ if (__DEV__) {
95
);
96
};
97
98
+ var warnStyleValueIsNaN = function(name, value) {
99
+ if (warnedForNaNValue) {
100
+ return;
101
+ }
102
+
103
+ warnedForNaNValue = true;
104
+ warning(
105
+ false,
106
+ '`NaN` is an invalid value for the `%s` css style property',
107
+ name
108
+ );
109
+ };
110
+
111
/**
112
* @param {string} name
113
* @param {*} value
@@ -106,6 +120,10 @@ if (__DEV__) {
120
} else if (badStyleValueWithSemicolonPattern.test(value)) {
121
warnStyleValueWithSemicolon(name, value);
122
}
123
+
124
+ if (typeof value === 'number' && isNaN(value)) {
125
+ warnStyleValueIsNaN(name, value);
126
+ }
127
};
128
}
129
src/renderers/dom/shared/__tests__/CSSPropertyOperations-test.js
+13
@@ -166,4 +166,17 @@ describe('CSSPropertyOperations', function() {
166
expect(console.error.argsForCall[0][0]).toContain('Try "backgroundColor: blue" instead');
167
expect(console.error.argsForCall[1][0]).toContain('Try "color: red" instead');
168
});
169
+
170
+ it('should warn about style containing a NaN value', function() {
171
+ spyOn(console, 'error');
172
+
173
+ CSSPropertyOperations.createMarkupForStyles({
174
+ fontSize: NaN,
175
+ });
176
+
177
+ expect(console.error.calls.length).toBe(1);
178
+ expect(console.error.argsForCall[0][0]).toEqual(
179
+ 'Warning: `NaN` is an invalid value for the `fontSize` css style property'
180
+ );
181
+ });
182
});
src/renderers/dom/shared/__tests__/ReactDOMComponent-test.js
+4
-1
@@ -196,8 +196,11 @@ describe('ReactDOMComponent', function() {
196
ReactDOM.render(<span style={style}></span>, div);
197
ReactDOM.render(<span style={style}></span>, div);
198
199
- expect(console.error.argsForCall.length).toBe(1);
199
+ expect(console.error.argsForCall.length).toBe(2);
200
expect(console.error.argsForCall[0][0]).toEqual(
201
+ 'Warning: `NaN` is an invalid value for the `fontSize` css style property',
202
+ );
203
+ expect(console.error.argsForCall[1][0]).toEqual(
204
'Warning: `span` was passed a style object that has previously been ' +
205
'mutated. Mutating `style` is deprecated. Consider cloning it ' +
206
'beforehand. Check the `render` using <span>. Previous style: ' +