Merge pull request #1125 from andrewiggins/spec-props-children-type

Specify the behavior of props.children

test/browser/components.js

@@ -311,6 +311,79 @@ describe('Components', () => {
 
 			expect(scratch.innerHTML).to.equal('<div>a</div>');
 		});
+
+		describe('should always be an array', () => {
+			let children;
+
+			let Foo = props => {
+				children = props.children;
+				return <div>{props.children}</div>;
+			};
+
+			let FunctionFoo = props => {
+				children = props.children;
+				return <div>{props.children[0](2)}</div>;
+			};
+
+			let Bar = () => <span>Bar</span>;
+
+			beforeEach(() => {
+				children = undefined;
+			});
+
+			it('with no child', () => {
+				render(<Foo></Foo>, scratch);
+
+				expect(children).to.be.an('array');
+				expect(children).to.have.lengthOf(0);
+				expect(scratch.innerHTML).to.equal('<div></div>');
+			});
+
+			it('with a text child', () => {
+				render(<Foo>text</Foo>, scratch);
+
+				expect(children).to.be.an('array');
+				expect(children).to.have.lengthOf(1);
+				expect(children[0]).to.be.a('string');
+				expect(scratch.innerHTML).to.equal('<div>text</div>');
+			});
+
+			it('with a DOM node child', () => {
+				render(<Foo><span /></Foo>, scratch);
+
+				expect(children).to.be.an('array');
+				expect(children).to.have.lengthOf(1);
+				expect(children[0]).to.be.an('object');
+				expect(scratch.innerHTML).to.equal('<div><span></span></div>');
+			});
+
+			it('with a Component child', () => {
+				render(<Foo><Bar /></Foo>, scratch);
+
+				expect(children).to.be.an('array');
+				expect(children).to.have.lengthOf(1);
+				expect(children[0]).to.be.an('object');
+				expect(scratch.innerHTML).to.equal('<div><span>Bar</span></div>');
+			});
+
+			it('with a function child', () => {
+				render(<FunctionFoo>{num => num.toFixed(2)}</FunctionFoo>, scratch);
+
+				expect(children).to.be.an('array');
+				expect(children).to.have.lengthOf(1);
+				expect(children[0]).to.be.a('function');
+				expect(scratch.innerHTML).to.equal('<div>2.00</div>');
+			});
+
+			it('with multiple children', () => {
+				render(<Foo><span /><Bar /><span /></Foo>, scratch);
+
+				expect(children).to.be.an('array');
+				expect(children).to.have.lengthOf(3);
+				expect(children[0]).to.be.an('object');
+				expect(scratch.innerHTML).to.equal('<div><span></span><span>Bar</span><span></span></div>');
+			});
+		});
 	});