Adds test for countdown form

app/components/Clock.jsx

@@ -0,0 +1,37 @@
+var React = require('react');
+
+var Clock = React.createClass({
+  getDefaultProps: function() {
+    return {
+      totalSeconds: 0
+    };
+  },
+  propTypes: {
+    totalSeconds: React.PropTypes.number
+  },
+  formatSeconds: function (totalSeconds) {
+    var seconds = totalSeconds % 60;
+    var minutes = Math.floor(totalSeconds / 60);
+
+    if(seconds < 10){
+      seconds = '0' + seconds;
+    }
+
+    if(minutes < 10){
+      minutes = '0' + minutes;
+    }
+
+    return minutes + ':' + seconds;
+  },
+  render: function() {
+    var {totalSeconds} = this.props;
+    return (
+      <div className="clock">
+        <span className="clock-text">{this.formatSeconds(totalSeconds)}</span>
+      </div>
+    );
+  }
+
+});
+
+module.exports = Clock;

app/components/Countdown.jsx

@@ -1,10 +1,24 @@
 var React = require('react');
+var Clock = require('Clock');
+var CountdownForm = require('CountdownForm');
 
 var Countdown = React.createClass({
-
+  getInitialState: function(){
+    return {count: 0};
+  },
+  handleSetCountdown: function(seconds){
+    this.setState({
+      count: seconds
+    });
+  },
   render: function() {
+    var {count} = this.state;
+
     return (
-      <div>This is the Countdown</div>
+      <div>
+        <Clock totalSeconds={count} />
+        <CountdownForm onSetCountdown={this.handleSetCountdown} />
+      </div>
       );
   }
 

app/components/CountdownForm.jsx

@@ -0,0 +1,26 @@
+var React = require('react');
+
+var CountdownForm = React.createClass({
+  onSubmit: function(e){
+    e.preventDefault();
+    var strSeconds = this.refs.seconds.value;
+
+    if(strSeconds.match(/^[0-9]*$/)){
+      this.refs.seconds.value = '';
+      this.props.onSetCountdown(parseInt(strSeconds, 10));
+    }
+  },
+  render: function() {
+    return (
+      <div>
+        <form onSubmit={this.onSubmit} className="countdown-form">
+          <input type="text" ref="seconds" placeholder="Enter time in seconds"/>
+          <button className="button expanded">Start</button>
+        </form>
+      </div>
+    );
+  }
+
+});
+
+module.exports = CountdownForm;

app/components/Main.jsx

@@ -4,10 +4,9 @@ var Nav = require('Nav');
 var Main = (props) => {
   return (
     <div>
-      <div>
-        <div>
-          <Nav/>
-          <p>Main.jsx Rendered</p>
+      <Nav/>
+      <div className="row">
+        <div className="column small-centered medium-6 large-4">
           {props.children}
         </div>
       </div>

app/styles/app.scss

@@ -1,2 +1,3 @@
 @import "base/variables";
 @import "components/nav";
+@import "components/clock"

app/styles/base/_variables.scss

@@ -6,3 +6,6 @@ $nav-background: $grey;
 
 $nav-text-color: white;
 
+$clock-text-color: white;
+$clock-bg-color: #B5D0E2;
+$clock-border-color: #2099E8;

app/styles/components/_clock.scss

@@ -0,0 +1,17 @@
+.clock {
+  align-items: center;
+  background-color: $clock-bg-color;
+  border: 2px solid $clock-border-color;
+  border-radius: 50%;
+  display: flex;
+  height: 14rem;
+  justify-content: center;
+  margin: 4rem auto;
+  width: 14rem;
+}
+
+.clock-text {
+  color: $clock-text-color;
+  font-size: 2.25rem;
+  font-weight: 300;
+}

app/tests/components/Clock.test.jsx

@@ -0,0 +1,40 @@
+var React = require('react');
+var ReactDOM = require('react-dom');
+var expect = require('expect');
+var $ = require('jQuery');
+var TestUtils = require('react-addons-test-utils');
+
+var Clock = require('Clock');
+
+describe('Clock', () => {
+  it('should exist', () => {
+    expect(Clock).toExist();
+  });
+
+  describe('render', () => {
+    it('should render clock to output', () => {
+      var clock = TestUtils.renderIntoDocument(<Clock totalSeconds={62}/>);
+      var $el = $(ReactDOM.findDOMNode(clock));
+      var actualText = $el.find('.clock-text').text();
+      expect(actualText).toBe('01:02');
+    });
+  });
+
+  describe('formatSeconds', () => {
+    it('should format seconds', () => {
+      var clock = TestUtils.renderIntoDocument(<Clock/>);
+      var seconds = 615;
+      var expected = '10:15';
+      var actual = clock.formatSeconds(seconds);
+      expect(actual).toBe(expected);
+    });
+
+    it('should format seconds when min/sec are less than 10', () => {
+      var clock = TestUtils.renderIntoDocument(<Clock/>);
+      var seconds = 61;
+      var expected = '01:01';
+      var actual = clock.formatSeconds(seconds);
+      expect(actual).toBe(expected);
+    });
+  });
+});

app/tests/components/CountdownForm.test.jsx

@@ -0,0 +1,37 @@
+var expect = require('expect');
+var React = require('react');
+var ReactDOM = require('react-dom');
+var TestUtils = require('react-addons-test-utils');
+var $ = require('jQuery');
+
+var CountdownForm = require('CountdownForm');
+
+describe('CountdownForm', () => {
+  it('should exist', () => {
+    expect(CountdownForm).toExist();
+  });
+
+  it('should call onSetCountdown if valid seconds entered', () => {
+    var spy = expect.createSpy();
+    var countdownForm = TestUtils.renderIntoDocument(<CountdownForm onSetCountdown={spy}/>);
+    var $el = $(ReactDOM.findDOMNode(countdownForm));
+
+    countdownForm.refs.seconds.value = '109';
+    var form = $el.find('form')[0];
+    TestUtils.Simulate.submit(form);
+
+    expect(spy).toHaveBeenCalledWith(109);
+  });
+
+  it('should not call onSetCountdown if invalid seconds entered', () => {
+    var spy = expect.createSpy();
+    var countdownForm = TestUtils.renderIntoDocument(<CountdownForm onSetCountdown={spy}/>);
+    var $el = $(ReactDOM.findDOMNode(countdownForm));
+
+    countdownForm.refs.seconds.value = '10as';
+    var form = $el.find('form')[0];
+    TestUtils.Simulate.submit(form);
+
+    expect(spy).toNotHaveBeenCalled();
+  });
+});

package.json

@@ -33,6 +33,7 @@
     "karma-webpack": "^1.8.0",
     "mocha": "^3.0.2",
     "node-sass": "^3.8.0",
+    "react-addons-test-utils": "^15.3.0",
     "sass-loader": "^4.0.0",
     "script-loader": "^0.7.0",
     "style-loader": "^0.13.1",

webpack.config.js

@@ -26,6 +26,8 @@ module.exports = {
       Nav: 'app/components/Nav.jsx',
       Timer: 'app/components/Timer.jsx',
       Countdown: 'app/components/Countdown.jsx',
+      Clock: 'app/components/Clock.jsx',
+      CountdownForm: 'app/components/CountdownForm.jsx',
       applicationStyles: 'app/styles/app.scss'
     },
     extensions: ['','.js','.jsx']