Merge pull request #29 from whichdigital/child-components

Modify React components to encapsulate child components

spec/description_spec.js

@@ -0,0 +1,52 @@
+import 'core-js/es5';
+import React from 'react/addons';
+import Description from '../src/book/description.jsx';
+
+var ReactTestUtils = React.addons.TestUtils;
+
+describe('Description', function() {
+  it('is a React element', function() {
+    let validation = ReactTestUtils.isElement(
+      <Description />
+    );
+
+    expect(validation).to.be.ok;
+  });
+
+  it('is a Description React element', function() {
+    let validation = ReactTestUtils.isElementOfType(
+      <Description />,
+      Description
+    );
+
+    expect(validation).to.be.ok;
+  });
+
+  it('is not a DOM component', function() {
+    let component = ReactTestUtils.renderIntoDocument(<Description />);
+    let validation = ReactTestUtils.isDOMComponent(component);
+
+    expect(validation).to.not.be.ok;
+  });
+
+  it('is a composite component', function() {
+    let component = ReactTestUtils.renderIntoDocument(<Description />);
+    let validation = ReactTestUtils.isCompositeComponent(component);
+
+    expect(validation).to.be.ok;
+  });
+
+  it('is a composite Description component', function() {
+    let component = ReactTestUtils.renderIntoDocument(<Description />);
+    let validation = ReactTestUtils.isCompositeComponentWithType(component, Description);
+
+    expect(validation).to.be.ok;
+  });
+
+  it('renders a <p> tag', function() {
+    let component = ReactTestUtils.renderIntoDocument(<Description />);
+    let descriptionElement = React.findDOMNode( component );
+
+    expect( descriptionElement.tagName ).to.equal( 'P' );
+  });
+});

spec/section_spec.js

@@ -0,0 +1,51 @@
+import 'core-js/es5';
+import React from 'react/addons';
+import Section from '../src/book/section.jsx'
+import Heading from '../src/book/heading.jsx'
+import Description from '../src/book/description.jsx'
+
+describe('Section', function() {
+  let sectionComponent;
+
+  before(function() {
+    let ReactTestUtils = React.addons.TestUtils,
+      shallowRenderer = ReactTestUtils.createRenderer();
+
+    shallowRenderer.render( <Section/> );
+    sectionComponent = shallowRenderer.getRenderOutput();
+  });
+
+  it('is wrapped in <section> element',function() {
+    expect( sectionComponent.type ).to.equal( 'section' );
+  });
+
+  describe('checks if children exist regardless of their order',function() {
+    let children;
+
+    before(function() {
+      children = sectionComponent.props.children;
+    });
+
+    it('includes Heading component',function() {
+      let childHeading = children.filter(
+        component => component.type === Heading
+      );
+      expect( childHeading.length ).to.be.ok;
+    });
+
+    it('includes Description component',function() {
+      let childDescription = children.filter(
+        component => component.type === Description
+      );
+      expect( childDescription.length ).to.be.ok;
+    });
+  });
+
+  // An alternative to the two tests above
+  it('includes Heading and Description components in particular order',function() {
+    expect( sectionComponent.props.children ).to.eql( [
+      <Heading />,
+      <Description />
+    ] );
+  });
+});

src/app.js

@@ -4,8 +4,8 @@ import './navigation/links.scss';
 import React from 'react';
 import Book from './book/book.js';
 
-import Heading from './book/heading.jsx'; // eslint-disable-line no-unused-vars
-React.render( <Heading />, document.getElementById( 'heading-container' ) );
+import Section from './book/section.jsx'; // eslint-disable-line no-unused-vars
+React.render( <Section />, document.getElementById( 'heading-container' ) );
 
 var book = new Book();
 book.logSomething();

src/book/description.jsx

@@ -0,0 +1,9 @@
+import React from 'react';
+
+export default class extends React.Component {
+  render() {
+    return (
+      <p>This is the description!</p>
+    );
+  }
+}

src/book/section.jsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import Heading from './heading.jsx';
+import Description from './description.jsx';
+
+export default class extends React.Component {
+  render() {
+    return (
+      <section>
+        <Heading />
+        <Description />
+      </section>
+    )
+  }
+}