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 ( +
+ + +
+ ) + } +}