{"commit":{"shortRevision":"aaa8a5ff50","authorName":"Cheng Lou","authoredAt":"2014-08-06T11:20:59-07:00","subject":"Merge pull request #1990 from syranide\/rmctest","authorEmail":"chenglou92@gmail.com","revision":"aaa8a5ff50c0e218d71be2e6a07c0eef643f3b73"},"body":"Simplified and improved test-cases for ReactMultiChildText-test","parents":["12ab5e8345dd3046ba5725d80ee6365f70f7356d","41d5cee44e65787a8121c70bab5f11ea71238d2b"],"files":[{"status":"M","path":"src\/core\/__tests__\/ReactMultiChildText-test.js"}],"patch":"diff --git a\/src\/core\/__tests__\/ReactMultiChildText-test.js b\/src\/core\/__tests__\/ReactMultiChildText-test.js\nindex 3ecef8ed78..51a0cffc7a 100644\n--- a\/src\/core\/__tests__\/ReactMultiChildText-test.js\n+++ b\/src\/core\/__tests__\/ReactMultiChildText-test.js\n@@ -28,65 +28,74 @@ var ReactTestUtils = require('ReactTestUtils');\n \n var reactComponentExpect = require('reactComponentExpect');\n \n-var assertNodeText = function(instance, text) {\n- expect(instance.getDOMNode().childNodes.length).toBe(1);\n- expect(instance.getDOMNode().innerHTML).toBe('' + text);\n-};\n+\/\/ Helpers\n+var testAllPermutations = function(testCases) {\n+ for (var i = 0; i < testCases.length; i += 2) {\n+ var renderWithChildren = testCases[i];\n+ var expectedResultAfterRender = testCases[i + 1];\n \n-var assertEmptyNode = function(instance) {\n- expect(instance.getDOMNode().childNodes.length).toBe(0);\n-};\n+ for (var j = 0; j < testCases.length; j += 2) {\n+ var updateWithChildren = testCases[j];\n+ var expectedResultAfterUpdate = testCases[j + 1];\n \n-var assertMultiChild = function(instance, textOne, textTwo) {\n- expect(instance.getDOMNode().childNodes.length).toBe(2);\n- var firstTextDOMNode =\n- reactComponentExpect(instance)\n- .expectRenderedChildAt(0)\n- .toBeTextComponent()\n- .instance()\n- .getDOMNode();\n- expect(firstTextDOMNode.childNodes.length).toBe(textOne === '' ? 0 : 1);\n- expect(firstTextDOMNode.innerHTML).toBe('' + textOne);\n-\n- var secondTextDOMNode =\n- reactComponentExpect(instance)\n- .expectRenderedChildAt(1)\n- .toBeTextComponent()\n- .instance()\n- .getDOMNode();\n- expect(secondTextDOMNode.childNodes.length).toBe(textTwo === '' ? 0 : 1);\n- expect(secondTextDOMNode.innerHTML).toBe('' + textTwo);\n-};\n+ var d = renderChildren(renderWithChildren);\n+ expectChildren(d, expectedResultAfterRender);\n \n-var assertSingleChild = function(instance, text) {\n- expect(instance.getDOMNode().childNodes.length).toBe(1);\n- var textDOMNode =\n- reactComponentExpect(instance)\n- .expectRenderedChildAt(0)\n- .toBeTextComponent()\n- .instance()\n- .getDOMNode();\n- expect(textDOMNode.childNodes.length).toBe(1);\n- expect(textDOMNode.innerHTML).toBe('' + text);\n+ updateChildren(d, updateWithChildren);\n+ expectChildren(d, expectedResultAfterUpdate);\n+ }\n+ }\n };\n \n-\/\/ Helpers\n-var renderSingleTextChild = function(text) {\n- var d = ReactTestUtils.renderIntoDocument(

{text}<\/div>);\n- return d;\n+var renderChildren = function(children) {\n+ return ReactTestUtils.renderIntoDocument(\n+ React.DOM.div({children: children})\n+ );\n };\n-var renderMultipleTextChildren = function(textOne, textTwo) {\n- var d = ReactTestUtils.renderIntoDocument(

{textOne}{textTwo}<\/div>);\n- return d;\n+\n+var updateChildren = function(d, children) {\n+ d.replaceProps({children: children});\n };\n \n-var TestCompositeComponent = React.createClass({\n- render: function() {\n- return (\n-

<\/div>\n- );\n+var expectChildren = function(d, children) {\n+ if (typeof children === 'string') {\n+ var textNode = d.getDOMNode().firstChild;\n+\n+ if (children === '') {\n+ expect(textNode != null).toBe(false);\n+ } else {\n+ expect(textNode != null).toBe(true);\n+ expect(textNode.nodeType).toBe(3);\n+ expect(textNode.data).toBe('' + children);\n+ }\n+ } else {\n+ expect(d.getDOMNode().childNodes.length).toBe(children.length);\n+\n+ for (var i = 0; i < children.length; i++) {\n+ var child = children[i];\n+\n+ if (typeof child === 'string') {\n+ var textWrapperNode =\n+ reactComponentExpect(d)\n+ .expectRenderedChildAt(i)\n+ .toBeTextComponent()\n+ .instance();\n+\n+ expectChildren(textWrapperNode, child);\n+ } else {\n+ var elementDOMNode =\n+ reactComponentExpect(d)\n+ .expectRenderedChildAt(i)\n+ .toBeComponentOfType(React.DOM.div)\n+ .instance()\n+ .getDOMNode();\n+\n+ expect(elementDOMNode.tagName).toBe('DIV');\n+ }\n+ }\n }\n-});\n+};\n+\n \n \/**\n * ReactMultiChild DOM integration test. In ReactDOM components, we make sure\n@@ -94,190 +103,107 @@ var TestCompositeComponent = React.createClass({\n * faster to render and update.\n *\/\n describe('ReactMultiChildText', function() {\n- it('should render null as empty', function() {\n- var d = renderSingleTextChild(null);\n- \/\/ false should act exactly as a null child\n- assertEmptyNode(d);\n- });\n-\n- it('should render undefined as empty', function() {\n- var d = renderSingleTextChild(undefined);\n- \/\/ false should act exactly as a null child\n- assertEmptyNode(d);\n- });\n-\n- it('should render null as empty then switch to text node', function() {\n- var d = renderSingleTextChild(null);\n- \/\/ false should act exactly as a null child\n- assertEmptyNode(d);\n- d.replaceProps({children: 'hello'});\n- assertNodeText(d, 'hello');\n- });\n-\n- it('should render undefined as empty then switch to text node', function() {\n- var d = renderSingleTextChild(undefined);\n- \/\/ false should act exactly as a null child\n- assertEmptyNode(d);\n- d.replaceProps({children: 'hello'});\n- assertNodeText(d, 'hello');\n- });\n-\n- it('should render null as empty then switch to span children', function() {\n- var d = renderSingleTextChild(null);\n- \/\/ false should act exactly as a null child\n- assertEmptyNode(d);\n- d.replaceProps({children: ['hello', 'goodbye']});\n- assertMultiChild(d, 'hello', 'goodbye');\n- });\n-\n- it('should render null as empty then switch to span children', function() {\n- var d = renderSingleTextChild(undefined);\n- \/\/ false should act exactly as a null child\n- assertEmptyNode(d);\n- d.replaceProps({children: ['hello', 'goodbye']});\n- assertMultiChild(d, 'hello', 'goodbye');\n- });\n-\n- it('should render zero string as text node then switch to spans', function() {\n- var d = renderSingleTextChild('0');\n- \/\/ false should act exactly as a null child\n- assertNodeText(d, '0');\n- d.replaceProps({children: ['hello', 'goodbye']});\n- assertMultiChild(d, 'hello', 'goodbye');\n- });\n-\n- it('should render zero number as text node then switch to spans', function() {\n- var d = renderSingleTextChild(0);\n- \/\/ false should act exactly as a null child\n- assertNodeText(d, '0');\n- d.replaceProps({children: ['hello', 'goodbye']});\n- assertMultiChild(d, 'hello', 'goodbye');\n- });\n-\n- it('should render a single text child to a single text node', function() {\n- var d = renderSingleTextChild('hello');\n- assertNodeText(d, 'hello');\n- });\n-\n- it('should render two string children to two spans', function() {\n- var d = renderMultipleTextChildren('hello', 'goodbye');\n- assertMultiChild(d, 'hello', 'goodbye');\n- });\n-\n- it('should render false as a null child', function() {\n- var d = renderMultipleTextChildren(false, 234.2);\n- \/\/ false should act exactly as a null child\n- assertSingleChild(d, '234.2');\n- });\n-\n- it('should render true as a null child', function() {\n- var d = renderMultipleTextChildren(true, 234.2);\n- \/\/ false should act exactly as a null child\n- assertSingleChild(d, '234.2');\n- });\n-\n- it('should render true as a null child', function() {\n- var d = renderMultipleTextChildren(true, 234.2);\n- \/\/ false should act exactly as a null child\n- assertSingleChild(d, '234.2');\n- });\n-\n- it('should render one true as no children', function() {\n- var d = renderSingleTextChild(true);\n- assertEmptyNode(d);\n- });\n-\n- it('should render one false as no children', function() {\n- var d = renderSingleTextChild(false);\n- assertEmptyNode(d);\n- });\n-\n- it('should render empty string as no children', function() {\n- var d = renderSingleTextChild('');\n- assertEmptyNode(d);\n- });\n-\n- it('should render two empty strings as two empty spans', function() {\n- var d = renderMultipleTextChildren('', '');\n- assertMultiChild(d, '', '');\n- });\n-\n- it('should render empty string and string as two spans', function() {\n- var d = renderMultipleTextChildren('', 'yo');\n- assertMultiChild(d, '', 'yo');\n- });\n-\n- it('should render child string zero as text node', function() {\n- var d = renderSingleTextChild('0');\n- \/\/ false should act exactly as a null child\n- assertNodeText(d, '0');\n- });\n-\n- it('should render child number zero as text node', function() {\n- var d = renderSingleTextChild(0);\n- \/\/ false should act exactly as a null child\n- assertNodeText(d, '0');\n- });\n-\n- it('should render content string zero as text node', function() {\n- var d = renderSingleTextChild('0');\n- \/\/ false should act exactly as a null child\n- assertNodeText(d, '0');\n- });\n-\n- it('should render zero string as string child', function() {\n- var d = renderMultipleTextChildren('0', 234.2);\n- \/\/ false should act exactly as a null child\n- assertMultiChild(d, '0', '234.2');\n- });\n-\n- it('should render zero string as string child then text node', function() {\n- var d = renderMultipleTextChildren('0', 234.2);\n- \/\/ false should act exactly as a null child\n- assertMultiChild(d, '0', '234.2');\n- d.replaceProps({children: '0'});\n- assertNodeText(d, '0');\n- });\n-\n- it('should render zero number as string child then text node', function() {\n- var d = renderMultipleTextChildren(0, 234.2);\n- \/\/ false should act exactly as a null child\n- assertMultiChild(d, '0', '234.2');\n- d.replaceProps({children: 0});\n- \/\/ BELOW REVEALS A BUG IN JSDOM\n- \/\/ assertNodeText(d, '0'); \/\/ This works in the browser.\n- });\n-\n- it('should render multiple children then switch to inline', function() {\n- var d = renderMultipleTextChildren('hello', 'goodbye');\n- assertMultiChild(d, 'hello', 'goodbye');\n- d.replaceProps({children: 'hello'});\n- assertNodeText(d, 'hello');\n- });\n-\n- it('should render multiple children then switch to inline child', function() {\n- var d = renderMultipleTextChildren('hello', 'goodbye');\n- assertMultiChild(d, 'hello', 'goodbye');\n- \/\/ Even when switching from content to a single child, it should render\n- \/\/ that single child as inline content.\n- d.replaceProps({children: 'hello'});\n- assertNodeText(d, 'hello');\n- });\n-\n- it('should render inline child, then switch to text components ', function() {\n- var d = renderSingleTextChild('hello');\n- assertNodeText(d, 'hello');\n- d.replaceProps({children: ['hello', 'goodbye']});\n- assertMultiChild(d, 'hello', 'goodbye');\n- });\n-\n- it('should render inline child, then switch to composite', function() {\n- var d = renderSingleTextChild('hello');\n- assertNodeText(d, 'hello');\n- d.replaceProps({children: });\n- reactComponentExpect(d)\n- .expectRenderedChildAt(0)\n- .toBeCompositeComponentWithType(TestCompositeComponent);\n+ it('should correctly handle all possible children for render and update', function() {\n+ testAllPermutations([\n+ \/\/ basic values\n+ undefined, [],\n+ null, [],\n+ false, [],\n+ true, [],\n+ 0, '0',\n+ 1.2, '1.2',\n+ '', '',\n+ 'foo', 'foo',\n+\n+ [], [],\n+ [undefined], [],\n+ [null], [],\n+ [false], [],\n+ [true], [],\n+ [0], ['0'],\n+ [1.2], ['1.2'],\n+ [''], [''],\n+ ['foo'], ['foo'],\n+ [

], [

],\n+\n+ \/\/ two adjacent values\n+ [true, 0], ['0'],\n+ [0, 0], ['0', '0'],\n+ [1.2, 0], ['1.2', '0'],\n+ [0, ''], ['0', ''],\n+ ['foo', 0], ['foo', '0'],\n+ [0,

], ['0',

],\n+\n+ [true, 1.2], ['1.2'],\n+ [1.2, 0], ['1.2', '0'],\n+ [1.2, 1.2], ['1.2', '1.2'],\n+ [1.2, ''], ['1.2', ''],\n+ ['foo', 1.2], ['foo', '1.2'],\n+ [1.2,

], ['1.2',

],\n+\n+ [true, ''], [''],\n+ ['', 0], ['', '0'],\n+ [1.2, ''], ['1.2', ''],\n+ ['', ''], ['', ''],\n+ ['foo', ''], ['foo', ''],\n+ ['',

], ['',

],\n+\n+ [true, 'foo'], ['foo'],\n+ ['foo', 0], ['foo', '0'],\n+ [1.2, 'foo'], ['1.2', 'foo'],\n+ ['foo', ''], ['foo', ''],\n+ ['foo', 'foo'], ['foo', 'foo'],\n+ ['foo',

], ['foo',

],\n+\n+ \/\/ values separated by an element\n+ [true,

, true], [

],\n+ [1.2,

, 1.2], ['1.2',

, '1.2'],\n+ ['',

, ''], ['',

, ''],\n+ ['foo',

, 'foo'], ['foo',

, 'foo'],\n+\n+ [true, 1.2,

, '', 'foo'], ['1.2',

, '', 'foo'],\n+ [1.2, '',

, 'foo', true], ['1.2', '',

, 'foo'],\n+ ['', 'foo',

, true, 1.2], ['', 'foo',

, '1.2'],\n+\n+ [true, 1.2, '',

, 'foo', true, 1.2], ['1.2', '',

, 'foo', '1.2'],\n+ ['', 'foo', true,

, 1.2, '', 'foo'], ['', 'foo',

, '1.2', '', 'foo'],\n+\n+ \/\/ values inside arrays\n+ [[true], [true]], [],\n+ [[1.2], [1.2]], ['1.2', '1.2'],\n+ [[''], ['']], ['', ''],\n+ [['foo'], ['foo']], ['foo', 'foo'],\n+ [[

], [

]], [

],\n+\n+ [[true, 1.2,

], '', 'foo'], ['1.2',

, '', 'foo'],\n+ [1.2, '', [

, 'foo', true]], ['1.2', '',

, 'foo'],\n+ ['', ['foo',

, true], 1.2], ['', 'foo',

, '1.2'],\n+\n+ [true, [1.2, '',

, 'foo'], true, 1.2], ['1.2', '',

, 'foo', '1.2'],\n+ ['', 'foo', [true,

, 1.2, ''], 'foo'], ['', 'foo',

, '1.2', '', 'foo'],\n+\n+ \/\/ values inside objects\n+ [{a: true}, {a: true}], [],\n+ [{a: 1.2}, {a: 1.2}], ['1.2', '1.2'],\n+ [{a: ''}, {a: ''}], ['', ''],\n+ [{a: 'foo'}, {a: 'foo'}], ['foo', 'foo'],\n+ [{a:

}, {a:

}], [

],\n+\n+ [{a: true, b: 1.2, c:

}, '', 'foo'], ['1.2',

, '', 'foo'],\n+ [1.2, '', {a:

, b: 'foo', c: true}], ['1.2', '',

, 'foo'],\n+ ['', {a: 'foo', b:

, c: true}, 1.2], ['', 'foo',

, '1.2'],\n+\n+ [true, {a: 1.2, b: '', c:

, d: 'foo'}, true, 1.2], ['1.2', '',

, 'foo', '1.2'],\n+ ['', 'foo', {a: true, b:

, c: 1.2, d: ''}, 'foo'], ['', 'foo',

, '1.2', '', 'foo'],\n+\n+ \/\/ values inside elements\n+ [

{true}{1.2}{

}<\/div>, '', 'foo'], [

, '', 'foo'],\n+ [1.2, '',

{

}{'foo'}{true}<\/div>], ['1.2', '',

],\n+ ['',

{'foo'}{

}{true}<\/div>, 1.2], ['',

, '1.2'],\n+\n+ [true,

{1.2}{''}{

}{'foo'}<\/div>, true, 1.2], [

, '1.2'],\n+ ['', 'foo',

{true}{

}{1.2}{''}<\/div>, 'foo'], ['', 'foo',

, 'foo']\n+ ]);\n });\n \n it('should throw if rendering both HTML and children', function() {\n"}

dillon1000/react

Files changed