{"files":[{"path":"packages\/react-dom\/src\/__tests__\/ReactDOMInput-test.js","status":"M"}],"parents":["0a2ed64450fcafecbbe502d4bb812843085e3918"],"commit":{"shortRevision":"59763bf7f3","authorName":"Dan Abramov","revision":"59763bf7f3ab3b06cd8ab5a5a83ae3dafc667aa9","authoredAt":"2017-12-01T17:16:05+00:00","subject":"Add explicit warning assertions to ReactDOMInput-test (#11744)","authorEmail":"dan.abramov@gmail.com"},"patch":"diff --git a\/packages\/react-dom\/src\/__tests__\/ReactDOMInput-test.js b\/packages\/react-dom\/src\/__tests__\/ReactDOMInput-test.js\nindex 1a3150dc12..4e8948d49b 100644\n--- a\/packages\/react-dom\/src\/__tests__\/ReactDOMInput-test.js\n+++ b\/packages\/react-dom\/src\/__tests__\/ReactDOMInput-test.js\n@@ -38,10 +38,10 @@ describe('ReactDOMInput', () => {\n ReactDOM = require('react-dom');\n ReactDOMServer = require('react-dom\/server');\n ReactTestUtils = require('react-dom\/test-utils');\n- spyOnDev(console, 'error');\n });\n \n it('should properly control a value even if no event listener exists', () => {\n+ spyOnDev(console, 'error');\n var container = document.createElement('div');\n var stub = ReactDOM.render(, container);\n \n@@ -141,7 +141,12 @@ describe('ReactDOMInput', () => {\n value=\"lion\"\n onChange={e => this.change(e.target.value)}\n \/>\n- (this.b = n)} checked={true} \/>\n+ (this.b = n)}\n+ checked={true}\n+ onChange={() => {}}\n+ \/>\n <\/div>\n );\n }\n@@ -219,6 +224,7 @@ describe('ReactDOMInput', () => {\n });\n \n it('does change the string \".98\" to \"0.98\" with no change handler', () => {\n+ spyOnDev(console, 'error');\n class Stub extends React.Component {\n state = {\n value: '.98',\n@@ -233,9 +239,17 @@ describe('ReactDOMInput', () => {\n stub.setState({value: '0.98'});\n \n expect(node.value).toEqual('0.98');\n+ if (__DEV__) {\n+ expect(console.error.calls.count()).toBe(1);\n+ expect(console.error.calls.argsFor(0)[0]).toContain(\n+ 'You provided a `value` prop to a form field ' +\n+ 'without an `onChange` handler.',\n+ );\n+ }\n });\n \n it('distinguishes precision for extra zeroes in string number values', () => {\n+ spyOnDev(console, 'error');\n class Stub extends React.Component {\n state = {\n value: '3.0000',\n@@ -250,6 +264,13 @@ describe('ReactDOMInput', () => {\n stub.setState({value: '3'});\n \n expect(node.value).toEqual('3');\n+ if (__DEV__) {\n+ expect(console.error.calls.count()).toBe(1);\n+ expect(console.error.calls.argsFor(0)[0]).toContain(\n+ 'You provided a `value` prop to a form field ' +\n+ 'without an `onChange` handler.',\n+ );\n+ }\n });\n \n it('should display `defaultValue` of number 0', () => {\n@@ -336,18 +357,23 @@ describe('ReactDOMInput', () => {\n });\n \n it('should take `defaultValue` when changing to uncontrolled input', () => {\n+ spyOnDev(console, 'error');\n var container = document.createElement('div');\n-\n var node = ReactDOM.render(\n ,\n container,\n );\n-\n expect(node.value).toBe('0');\n-\n ReactDOM.render(, container);\n-\n expect(node.value).toBe('0');\n+\n+ if (__DEV__) {\n+ expect(console.error.calls.count()).toBe(1);\n+ expect(console.error.calls.argsFor(0)[0]).toContain(\n+ 'A component is changing a controlled input of type ' +\n+ 'text to be uncontrolled.',\n+ );\n+ }\n });\n \n it('should render defaultValue for SSR', () => {\n@@ -361,7 +387,7 @@ describe('ReactDOMInput', () => {\n });\n \n it('should render value for SSR', () => {\n- var element = ;\n+ var element = {}} \/>;\n var markup = ReactDOMServer.renderToString(element);\n var div = document.createElement('div');\n div.innerHTML = markup;\n@@ -469,7 +495,7 @@ describe('ReactDOMInput', () => {\n \n it('should not incur unnecessary DOM mutations', () => {\n var container = document.createElement('div');\n- ReactDOM.render(, container);\n+ ReactDOM.render( {}} \/>, container);\n \n var node = container.firstChild;\n var nodeValue = 'a';\n@@ -483,16 +509,16 @@ describe('ReactDOMInput', () => {\n }),\n });\n \n- ReactDOM.render(, container);\n+ ReactDOM.render( {}} \/>, container);\n expect(nodeValueSetter.mock.calls.length).toBe(0);\n \n- ReactDOM.render(, container);\n+ ReactDOM.render( {}} \/>, container);\n expect(nodeValueSetter.mock.calls.length).toBe(1);\n });\n \n it('should not incur unnecessary DOM mutations for numeric type conversion', () => {\n var container = document.createElement('div');\n- ReactDOM.render(, container);\n+ ReactDOM.render( {}} \/>, container);\n \n var node = container.firstChild;\n var nodeValue = '0';\n@@ -506,13 +532,13 @@ describe('ReactDOMInput', () => {\n }),\n });\n \n- ReactDOM.render(, container);\n+ ReactDOM.render( {}} \/>, container);\n expect(nodeValueSetter.mock.calls.length).toBe(0);\n });\n \n it('should not incur unnecessary DOM mutations for the boolean type conversion', () => {\n var container = document.createElement('div');\n- ReactDOM.render(, container);\n+ ReactDOM.render( {}} \/>, container);\n \n var node = container.firstChild;\n var nodeValue = 'true';\n@@ -526,7 +552,7 @@ describe('ReactDOMInput', () => {\n }),\n });\n \n- ReactDOM.render(, container);\n+ ReactDOM.render( {}} \/>, container);\n expect(nodeValueSetter.mock.calls.length).toBe(0);\n });\n \n@@ -784,6 +810,7 @@ describe('ReactDOMInput', () => {\n });\n \n it('should warn with value and no onChange handler and readOnly specified', () => {\n+ spyOnDev(console, 'error');\n ReactTestUtils.renderIntoDocument(\n ,\n );\n@@ -818,6 +845,7 @@ describe('ReactDOMInput', () => {\n });\n \n it('should warn with checked and no onChange handler with readOnly specified', () => {\n+ spyOnDev(console, 'error');\n ReactTestUtils.renderIntoDocument(\n ,\n );\n@@ -841,6 +869,7 @@ describe('ReactDOMInput', () => {\n });\n \n it('should warn if value is null', () => {\n+ spyOnDev(console, 'error');\n ReactTestUtils.renderIntoDocument();\n if (__DEV__) {\n expect(console.error.calls.argsFor(0)[0]).toContain(\n@@ -857,6 +886,7 @@ describe('ReactDOMInput', () => {\n });\n \n it('should warn if checked and defaultChecked props are specified', () => {\n+ spyOnDev(console, 'error');\n ReactTestUtils.renderIntoDocument(\n {\n });\n \n it('should warn if value and defaultValue props are specified', () => {\n+ spyOnDev(console, 'error');\n ReactTestUtils.renderIntoDocument(\n ,\n );\n@@ -913,6 +944,7 @@ describe('ReactDOMInput', () => {\n });\n \n it('should warn if controlled input switches to uncontrolled (value is undefined)', () => {\n+ spyOnDev(console, 'error');\n var stub = (\n \n );\n@@ -932,6 +964,7 @@ describe('ReactDOMInput', () => {\n });\n \n it('should warn if controlled input switches to uncontrolled (value is null)', () => {\n+ spyOnDev(console, 'error');\n var stub = (\n \n );\n@@ -951,6 +984,7 @@ describe('ReactDOMInput', () => {\n });\n \n it('should warn if controlled input switches to uncontrolled with defaultValue', () => {\n+ spyOnDev(console, 'error');\n var stub = (\n \n );\n@@ -973,6 +1007,7 @@ describe('ReactDOMInput', () => {\n });\n \n it('should warn if uncontrolled input (value is undefined) switches to controlled', () => {\n+ spyOnDev(console, 'error');\n var stub = ;\n var container = document.createElement('div');\n ReactDOM.render(stub, container);\n@@ -990,6 +1025,7 @@ describe('ReactDOMInput', () => {\n });\n \n it('should warn if uncontrolled input (value is null) switches to controlled', () => {\n+ spyOnDev(console, 'error');\n var stub = ;\n var container = document.createElement('div');\n ReactDOM.render(stub, container);\n@@ -1007,6 +1043,7 @@ describe('ReactDOMInput', () => {\n });\n \n it('should warn if controlled checkbox switches to uncontrolled (checked is undefined)', () => {\n+ spyOnDev(console, 'error');\n var stub = (\n \n );\n@@ -1026,6 +1063,7 @@ describe('ReactDOMInput', () => {\n });\n \n it('should warn if controlled checkbox switches to uncontrolled (checked is null)', () => {\n+ spyOnDev(console, 'error');\n var stub = (\n \n );\n@@ -1045,6 +1083,7 @@ describe('ReactDOMInput', () => {\n });\n \n it('should warn if controlled checkbox switches to uncontrolled with defaultChecked', () => {\n+ spyOnDev(console, 'error');\n var stub = (\n \n );\n@@ -1064,6 +1103,7 @@ describe('ReactDOMInput', () => {\n });\n \n it('should warn if uncontrolled checkbox (checked is undefined) switches to controlled', () => {\n+ spyOnDev(console, 'error');\n var stub = ;\n var container = document.createElement('div');\n ReactDOM.render(stub, container);\n@@ -1081,6 +1121,7 @@ describe('ReactDOMInput', () => {\n });\n \n it('should warn if uncontrolled checkbox (checked is null) switches to controlled', () => {\n+ spyOnDev(console, 'error');\n var stub = ;\n var container = document.createElement('div');\n ReactDOM.render(stub, container);\n@@ -1098,6 +1139,7 @@ describe('ReactDOMInput', () => {\n });\n \n it('should warn if controlled radio switches to uncontrolled (checked is undefined)', () => {\n+ spyOnDev(console, 'error');\n var stub = ;\n var container = document.createElement('div');\n ReactDOM.render(stub, container);\n@@ -1115,6 +1157,7 @@ describe('ReactDOMInput', () => {\n });\n \n it('should warn if controlled radio switches to uncontrolled (checked is null)', () => {\n+ spyOnDev(console, 'error');\n var stub = ;\n var container = document.createElement('div');\n ReactDOM.render(stub, container);\n@@ -1132,6 +1175,7 @@ describe('ReactDOMInput', () => {\n });\n \n it('should warn if controlled radio switches to uncontrolled with defaultChecked', () => {\n+ spyOnDev(console, 'error');\n var stub = ;\n var container = document.createElement('div');\n ReactDOM.render(stub, container);\n@@ -1149,6 +1193,7 @@ describe('ReactDOMInput', () => {\n });\n \n it('should warn if uncontrolled radio (checked is undefined) switches to controlled', () => {\n+ spyOnDev(console, 'error');\n var stub = ;\n var container = document.createElement('div');\n ReactDOM.render(stub, container);\n@@ -1166,6 +1211,7 @@ describe('ReactDOMInput', () => {\n });\n \n it('should warn if uncontrolled radio (checked is null) switches to controlled', () => {\n+ spyOnDev(console, 'error');\n var stub = ;\n var container = document.createElement('div');\n ReactDOM.render(stub, container);\n@@ -1195,9 +1241,6 @@ describe('ReactDOMInput', () => {\n container,\n );\n ReactDOM.render(, container);\n- if (__DEV__) {\n- expect(console.error.calls.count()).toBe(0);\n- }\n });\n \n it('should not warn if radio value changes but never becomes uncontrolled', () => {\n@@ -1216,12 +1259,10 @@ describe('ReactDOMInput', () => {\n \/>,\n container,\n );\n- if (__DEV__) {\n- expect(console.error.calls.count()).toBe(0);\n- }\n });\n \n it('should warn if radio checked false changes to become uncontrolled', () => {\n+ spyOnDev(console, 'error');\n var container = document.createElement('div');\n ReactDOM.render(\n {\n });\n \n ReactTestUtils.renderIntoDocument(\n- ,\n+ {}}\n+ type=\"range\"\n+ min=\"0\"\n+ max=\"100\"\n+ step=\"1\"\n+ \/>,\n );\n expect(log).toEqual([\n 'set attribute type',\n@@ -1433,7 +1481,7 @@ describe('ReactDOMInput', () => {\n describe('setting a controlled input to undefined', () => {\n var input;\n \n- beforeEach(() => {\n+ function renderInputWithStringThenWithUndefined() {\n class Input extends React.Component {\n state = {value: 'first'};\n render() {\n@@ -1450,21 +1498,39 @@ describe('ReactDOMInput', () => {\n input = ReactDOM.findDOMNode(stub);\n ReactTestUtils.Simulate.change(input, {target: {value: 'latest'}});\n ReactTestUtils.Simulate.change(input, {target: {value: undefined}});\n- });\n+ }\n \n it('reverts the value attribute to the initial value', () => {\n+ spyOnDev(console, 'error');\n+ renderInputWithStringThenWithUndefined();\n expect(input.getAttribute('value')).toBe('first');\n+ if (__DEV__) {\n+ expect(console.error.calls.count()).toBe(1);\n+ expect(console.error.calls.argsFor(0)[0]).toContain(\n+ 'Input elements should not switch from controlled to ' +\n+ 'uncontrolled (or vice versa).',\n+ );\n+ }\n });\n \n it('preserves the value property', () => {\n+ spyOnDev(console, 'error');\n+ renderInputWithStringThenWithUndefined();\n expect(input.value).toBe('latest');\n+ if (__DEV__) {\n+ expect(console.error.calls.count()).toBe(1);\n+ expect(console.error.calls.argsFor(0)[0]).toContain(\n+ 'Input elements should not switch from controlled to ' +\n+ 'uncontrolled (or vice versa).',\n+ );\n+ }\n });\n });\n \n describe('setting a controlled input to null', () => {\n var input;\n \n- beforeEach(() => {\n+ function renderInputWithStringThenWithNull() {\n class Input extends React.Component {\n state = {value: 'first'};\n render() {\n@@ -1481,14 +1547,42 @@ describe('ReactDOMInput', () => {\n input = ReactDOM.findDOMNode(stub);\n ReactTestUtils.Simulate.change(input, {target: {value: 'latest'}});\n ReactTestUtils.Simulate.change(input, {target: {value: null}});\n- });\n+ }\n \n it('reverts the value attribute to the initial value', () => {\n+ spyOnDev(console, 'error');\n+ renderInputWithStringThenWithNull();\n expect(input.getAttribute('value')).toBe('first');\n+ if (__DEV__) {\n+ expect(console.error.calls.count()).toBe(2);\n+ expect(console.error.calls.argsFor(0)[0]).toContain(\n+ '`value` prop on `input` should not be null. ' +\n+ 'Consider using an empty string to clear the component ' +\n+ 'or `undefined` for uncontrolled components.',\n+ );\n+ expect(console.error.calls.argsFor(1)[0]).toContain(\n+ 'Input elements should not switch from controlled ' +\n+ 'to uncontrolled (or vice versa).',\n+ );\n+ }\n });\n \n it('preserves the value property', () => {\n+ spyOnDev(console, 'error');\n+ renderInputWithStringThenWithNull();\n expect(input.value).toBe('latest');\n+ if (__DEV__) {\n+ expect(console.error.calls.count()).toBe(2);\n+ expect(console.error.calls.argsFor(0)[0]).toContain(\n+ '`value` prop on `input` should not be null. ' +\n+ 'Consider using an empty string to clear the component ' +\n+ 'or `undefined` for uncontrolled components.',\n+ );\n+ expect(console.error.calls.argsFor(1)[0]).toContain(\n+ 'Input elements should not switch from controlled ' +\n+ 'to uncontrolled (or vice versa).',\n+ );\n+ }\n });\n });\n });\n","body":""}

dillon1000/react

Files changed