diff --git a/spec/description_spec.js b/spec/description_spec.js
new file mode 100644
index 0000000..073271a
--- /dev/null
+++ b/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(
+
+ );
+
+ expect(validation).to.be.ok;
+ });
+
+ it('is a Description React element', function() {
+ let validation = ReactTestUtils.isElementOfType(
+ ,
+ Description
+ );
+
+ expect(validation).to.be.ok;
+ });
+
+ it('is not a DOM component', function() {
+ let component = ReactTestUtils.renderIntoDocument();
+ let validation = ReactTestUtils.isDOMComponent(component);
+
+ expect(validation).to.not.be.ok;
+ });
+
+ it('is a composite component', function() {
+ let component = ReactTestUtils.renderIntoDocument();
+ let validation = ReactTestUtils.isCompositeComponent(component);
+
+ expect(validation).to.be.ok;
+ });
+
+ it('is a composite Description component', function() {
+ let component = ReactTestUtils.renderIntoDocument();
+ let validation = ReactTestUtils.isCompositeComponentWithType(component, Description);
+
+ expect(validation).to.be.ok;
+ });
+
+ it('renders a
tag', function() {
+ let component = ReactTestUtils.renderIntoDocument();
+ let descriptionElement = React.findDOMNode( component );
+
+ expect( descriptionElement.tagName ).to.equal( 'P' );
+ });
+});
diff --git a/spec/section_spec.js b/spec/section_spec.js
new file mode 100644
index 0000000..cba9e5a
--- /dev/null
+++ b/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( );
+ sectionComponent = shallowRenderer.getRenderOutput();
+ });
+
+ it('is wrapped in 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( [
+ ,
+
+ ] );
+ });
+});
diff --git a/src/app.js b/src/app.js
index 985c6fd..2424c01 100644
--- a/src/app.js
+++ b/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( , document.getElementById( 'heading-container' ) );
+import Section from './book/section.jsx'; // eslint-disable-line no-unused-vars
+React.render( , document.getElementById( 'heading-container' ) );
var book = new Book();
book.logSomething();
diff --git a/src/book/description.jsx b/src/book/description.jsx
new file mode 100644
index 0000000..f8deb3d
--- /dev/null
+++ b/src/book/description.jsx
@@ -0,0 +1,9 @@
+import React from 'react';
+
+export default class extends React.Component {
+ render() {
+ return (
+ This is the description!
+ );
+ }
+}
diff --git a/src/book/section.jsx b/src/book/section.jsx
new file mode 100644
index 0000000..6981a2e
--- /dev/null
+++ b/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 (
+
+ )
+ }
+}