Skip to content

toWarnInDev matcher; throw on unexpected console.error #11786

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
bvaughn merged 19 commits into from
Jan 2, 2018
Merged

toWarnInDev matcher; throw on unexpected console.error #11786

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
19 commits
Select commit Hold shift + click to select a range
f254d9a
Added toWarnInDev matcher and connected to 1 test
bvaughn Dec 5, 2017
2cf33eb
Added .toLowPriorityWarnDev() matcher
bvaughn Dec 6, 2017
178007e
Merged master
bvaughn Dec 18, 2017
472f5e3
Nest toThrow and toWarn matchers in ReactElementValidator test
bvaughn Dec 18, 2017
d8d0f66
Reply Jest spy with custom spy. Unregister spy after toWarnDev() so u…
bvaughn Dec 18, 2017
1af3d1e
console warn/error throws immediately in tests by default (if not spi…
bvaughn Dec 18, 2017
e6ff0da
Removed unused oldMethod
bvaughn Dec 18, 2017
0662fd0
Refactored toWarn matchers to fail faster
bvaughn Dec 19, 2017
36c6550
Added TODO about Jest overriding error stacks
bvaughn Dec 19, 2017
feac559
Moved TODO
bvaughn Dec 19, 2017
47fa899
Pass-thru console message before erroring to make it easier to identify
bvaughn Dec 19, 2017
cdb1b50
Updated a few more tests to use toWarnDev matcher
bvaughn Dec 19, 2017
2541749
Added TypeScript test and types, fixed equivalence test
bvaughn Dec 19, 2017
cdba8b4
Upgraded a few additional tests
bvaughn Dec 19, 2017
68fc971
More robustly handle unexpected warnings within try/catch
bvaughn Dec 19, 2017
1659c93
Merge branch 'master' into expect-toWarnInDev
bvaughn Jan 2, 2018
62c4b4f
Replaced .splice(0) with .length=0
bvaughn Jan 2, 2018
b766964
Error message includes remaining expected warnings in addition to une…
bvaughn Jan 2, 2018
eeeb0e3
Removed unnecessary "" around unexpected error message
bvaughn Jan 2, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
131 changes: 47 additions & 84 deletions packages/react-dom/src/__tests__/CSSPropertyOperations-test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,10 +13,6 @@ const React = require('react');
const ReactDOM = require('react-dom');
const ReactDOMServer = require('react-dom/server');

function normalizeCodeLocInfo(str) {
return str && str.replace(/at .+?:\d+/g, 'at **');
}

describe('CSSPropertyOperations', () => {
it('should automatically append `px` to relevant styles', () => {
const styles = {
Expand Down Expand Up @@ -91,17 +87,13 @@ describe('CSSPropertyOperations', () => {
}
}

spyOnDev(console, 'error');
const root = document.createElement('div');
ReactDOM.render(<Comp />, root);
if (__DEV__) {
expect(console.error.calls.count()).toBe(1);
expect(normalizeCodeLocInfo(console.error.calls.argsFor(0)[0])).toEqual(
'Warning: Unsupported style property background-color. Did you mean backgroundColor?' +
'\n in div (at **)' +
'\n in Comp (at **)',
);
}

expect(() => ReactDOM.render(<Comp />, root)).toWarnDev(
'Warning: Unsupported style property background-color. Did you mean backgroundColor?' +
'\n in div (at **)' +
'\n in Comp (at **)',
);
});

it('should warn when updating hyphenated style names', () => {
Expand All @@ -113,28 +105,21 @@ describe('CSSPropertyOperations', () => {
}
}

spyOnDev(console, 'error');
const styles = {
'-ms-transform': 'translate3d(0, 0, 0)',
'-webkit-transform': 'translate3d(0, 0, 0)',
};
const root = document.createElement('div');
ReactDOM.render(<Comp />, root);
ReactDOM.render(<Comp style={styles} />, root);

if (__DEV__) {
expect(console.error.calls.count()).toBe(2);
expect(normalizeCodeLocInfo(console.error.calls.argsFor(0)[0])).toEqual(
'Warning: Unsupported style property -ms-transform. Did you mean msTransform?' +
'\n in div (at **)' +
'\n in Comp (at **)',
);
expect(normalizeCodeLocInfo(console.error.calls.argsFor(1)[0])).toEqual(
'Warning: Unsupported style property -webkit-transform. Did you mean WebkitTransform?' +
'\n in div (at **)' +
'\n in Comp (at **)',
);
}

expect(() => ReactDOM.render(<Comp style={styles} />, root)).toWarnDev([
'Warning: Unsupported style property -ms-transform. Did you mean msTransform?' +
'\n in div (at **)' +
'\n in Comp (at **)',
'Warning: Unsupported style property -webkit-transform. Did you mean WebkitTransform?' +
'\n in div (at **)' +
'\n in Comp (at **)',
]);
});

it('warns when miscapitalizing vendored style names', () => {
Expand All @@ -154,25 +139,19 @@ describe('CSSPropertyOperations', () => {
}
}

spyOnDev(console, 'error');
const root = document.createElement('div');
ReactDOM.render(<Comp />, root);
if (__DEV__) {

expect(() => ReactDOM.render(<Comp />, root)).toWarnDev([
// msTransform is correct already and shouldn't warn
expect(console.error.calls.count()).toBe(2);
expect(normalizeCodeLocInfo(console.error.calls.argsFor(0)[0])).toEqual(
'Warning: Unsupported vendor-prefixed style property oTransform. ' +
'Did you mean OTransform?' +
'\n in div (at **)' +
'\n in Comp (at **)',
);
expect(normalizeCodeLocInfo(console.error.calls.argsFor(1)[0])).toEqual(
'Warning: Unsupported vendor-prefixed style property webkitTransform. ' +
'Did you mean WebkitTransform?' +
'\n in div (at **)' +
'\n in Comp (at **)',
);
}
'Warning: Unsupported vendor-prefixed style property oTransform. ' +
'Did you mean OTransform?' +
'\n in div (at **)' +
'\n in Comp (at **)',
'Warning: Unsupported vendor-prefixed style property webkitTransform. ' +
'Did you mean WebkitTransform?' +
'\n in div (at **)' +
'\n in Comp (at **)',
]);
});

it('should warn about style having a trailing semicolon', () => {
Expand All @@ -193,24 +172,18 @@ describe('CSSPropertyOperations', () => {
}
}

spyOnDev(console, 'error');
const root = document.createElement('div');
ReactDOM.render(<Comp />, root);
if (__DEV__) {
expect(console.error.calls.count()).toBe(2);
expect(normalizeCodeLocInfo(console.error.calls.argsFor(0)[0])).toEqual(
"Warning: Style property values shouldn't contain a semicolon. " +
'Try "backgroundColor: blue" instead.' +
'\n in div (at **)' +
'\n in Comp (at **)',
);
expect(normalizeCodeLocInfo(console.error.calls.argsFor(1)[0])).toEqual(
"Warning: Style property values shouldn't contain a semicolon. " +
'Try "color: red" instead.' +
'\n in div (at **)' +
'\n in Comp (at **)',
);
}

expect(() => ReactDOM.render(<Comp />, root)).toWarnDev([
"Warning: Style property values shouldn't contain a semicolon. " +
'Try "backgroundColor: blue" instead.' +
'\n in div (at **)' +
'\n in Comp (at **)',
"Warning: Style property values shouldn't contain a semicolon. " +
'Try "color: red" instead.' +
'\n in div (at **)' +
'\n in Comp (at **)',
]);
});

it('should warn about style containing a NaN value', () => {
Expand All @@ -222,18 +195,13 @@ describe('CSSPropertyOperations', () => {
}
}

spyOnDev(console, 'error');
const root = document.createElement('div');
ReactDOM.render(<Comp />, root);

if (__DEV__) {
expect(console.error.calls.count()).toBe(1);
expect(normalizeCodeLocInfo(console.error.calls.argsFor(0)[0])).toEqual(
'Warning: `NaN` is an invalid value for the `fontSize` css style property.' +
'\n in div (at **)' +
'\n in Comp (at **)',
);
}
expect(() => ReactDOM.render(<Comp />, root)).toWarnDev(
'Warning: `NaN` is an invalid value for the `fontSize` css style property.' +
'\n in div (at **)' +
'\n in Comp (at **)',
);
});

it('should not warn when setting CSS custom properties', () => {
Expand All @@ -256,18 +224,13 @@ describe('CSSPropertyOperations', () => {
}
}

spyOnDev(console, 'error');
const root = document.createElement('div');
ReactDOM.render(<Comp />, root);

if (__DEV__) {
expect(console.error.calls.count()).toBe(1);
expect(normalizeCodeLocInfo(console.error.calls.argsFor(0)[0])).toEqual(
'Warning: `Infinity` is an invalid value for the `fontSize` css style property.' +
'\n in div (at **)' +
'\n in Comp (at **)',
);
}
expect(() => ReactDOM.render(<Comp />, root)).toWarnDev(
'Warning: `Infinity` is an invalid value for the `fontSize` css style property.' +
'\n in div (at **)' +
'\n in Comp (at **)',
);
});

it('should not add units to CSS custom properties', () => {
Expand Down
Loading
⚡