Update unit tests

Author: tylercollier

app/ContactFormComponent.js

@@ -2,15 +2,18 @@ import redux from 'redux'
 import React, { Component, PropTypes } from 'react'
 import { Field } from 'redux-form'
 
-const renderField = ({ input, label, type, meta: { touched, error } }) => (
-	<div>
-		<label>{label}</label>
-		{' '}
-		<input {...input}/>
-		{' '}
-		{touched && error && <span className='help-block'>{error}</span>}
-	</div>
-)
+export const renderTextInput = field => {
+	const { input, label, type, meta: { touched, error } } = field
+	return (
+		<div>
+			<label>{label}</label>
+			{' '}
+			<input {...input} type={type}/>
+			{' '}
+			{touched && error && <span className='help-block'>{error}</span>}
+		</div>
+	)
+}
 
 class ContactForm extends Component {
 	mySubmit(values) {
@@ -24,7 +27,7 @@ class ContactForm extends Component {
 		return (
 			<form onSubmit={this.props.handleSubmit(this.mySubmit.bind(this))}>
 				<h1>Contact Form</h1>
-				<Field name="firstName" component={renderField} type="text" label="First name"/>
+				<Field name="firstName" component={renderTextInput} type="text" label="First name"/>
 				<p></p>
 				<button type="submit" disabled={this.props.submitting}>
 					{this.props.submitting ? 'Submitting (takes 1 s)' : 'Submit'}

tests/unit/index.js

@@ -1,4 +1,4 @@
-import ContactFormComponent from '../../app/ContactFormComponent'
+import ContactFormComponent, { renderTextInput } from '../../app/ContactFormComponent'
 import React from 'react'
 
 // See README for discussion of chai, enzyme, and sinon
@@ -13,17 +13,16 @@ chai.use(chaiEnzyme())
 // really has nothing to do with Redux-Form at this point. We can pass in our
 // own props (e.g. `submitting`) and make sure our form renders as we expect.
 
-describe("ContactFormComponent", () => {
+describe.only("ContactFormComponent", () => {
 	let subject = null
-	let submitting, touched, error, resetForm, onSave, onSaveResponse
+	let submitting, touched, error, reset, onSave, onSaveResponse
 	beforeEach(() => {
 		submitting = false
 		touched = false
 		error = null
-		resetForm = sinon.spy()
+		reset = sinon.spy()
 		onSaveResponse = Promise.resolve()
-		onSave = sinon.stub()
-		onSave.returns(onSaveResponse)
+		onSave = sinon.stub().returns(onSaveResponse)
 	})
 	const buildSubject = () => {
 		const props = {
@@ -40,42 +39,52 @@ describe("ContactFormComponent", () => {
 				}
 			},
 			handleSubmit: fn => fn,
-			resetForm
+			reset
 		}
 		return shallow(<ContactFormComponent {...props}/>)
 	}
 
 	// Here we show we can test asychronous actions triggered by our form.
-	it("calls resetForm after onSave", (done) => {
+	it("calls reset after onSave", () => {
 		subject = buildSubject()
 		subject.find('form').simulate('submit')
 		expect(onSave.callCount).to.equal(1)
-		onSaveResponse.then(() => {
-			expect(resetForm.callCount).to.equal(1)
-			done()
+		return onSaveResponse.then(() => {
+			expect(reset.callCount).to.equal(1)
 		})
 	})
 
 	// This is a very simle test, making sure that if we pass in a certain
 	// prop value, our form renders appropriately.
 	context("when submitting", () => {
-		it("shows a spinner while submitting", () => {
+		it("shows a wait message while submitting", () => {
 			submitting = true
 			subject = buildSubject()
-			const icon = subject.find('button[type="submit"]').find('i')
-			expect(icon).to.have.className('glyphicon-refresh glyphicon-spin')
+			const icon = subject.find('button[type="submit"]')
+			expect(icon).to.have.text('Submitting (takes 1 s)')
 		})
 	})
 
-	// Again, we show that what we render is based on the props we send it. If
-	// we set the props to include an error state, our form should render that
-	// fact.
+})
+
+// renderTextInput is a stateless functional component, aka just a method that
+// returns a React element, so it's trivial to test. We export it from the
+// ContactFormComponent file. It could be named whatever we want, but it
+// should be named based on what type of input component it creates, since you
+// would create a similar function for each type of component you need to
+// render. If you look in renderTextInput, it outputs an <input/>, but you
+// would need a different method if you wanted to output a <select/>,
+// <textarea>, etc.
+describe.only('renderTextInput', () => {
+	let subject
 	context("when in an error state", () => {
 		it("renders an error message for the input", () => {
-			touched = true
-			error = "Required"
-			subject = buildSubject()
-			const firstNameHelpBlock = subject.find('.help-block')
+			const input = { name: 'firstName', value: '' }
+			const label = 'First name'
+			const meta = { touched: true, error: 'Required' }
+			const element = renderTextInput({ input, label, meta })
+			subject = shallow(element)
+			const firstNameHelpBlock = subject.find('.help-block').first()
 			expect(firstNameHelpBlock).to.exist
 			expect(firstNameHelpBlock.text()).to.equal('Required')
 		})