CountdownForm Testing Done Succesfully

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "jshint.enable": false
+}

app/app.jsx

@@ -12,7 +12,7 @@ var Countdown = require('Countdown');
 require('style!css!foundation-sites/dist/css/foundation.min.css')
 
 $(document).foundation();
-
+// Loading Css
 require('style!css!sass!applicationStyles')
 
 ReactDOM.render(

app/components/Clock.jsx

@@ -1,5 +1,6 @@
 var React = require('react');
 
+
 var Clock = React.createClass({
   getInitialProps : function () {
     totalSeconds : 0
@@ -25,6 +26,7 @@ var Clock = React.createClass({
               <span className="clock-text">
                   {this.formatSeconds(totalSeconds)}
               </span>
+
             </div>
         );
     }

app/components/CountDownForm.jsx

@@ -0,0 +1,27 @@
+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 ref="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/Countdown.jsx

@@ -1,10 +1,25 @@
 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>
-                <Clock totalSeconds={1190}/>
+                <Clock totalSeconds={count}/>
+                <CountdownForm onSetCountDown = {this.handleSetCountDown}/>
             </div>
         );
     }

app/components/Main.jsx

@@ -5,14 +5,13 @@ var Main = React.createClass({
     render: function() {
         return (
                 <div>
-                    <div>
-
-                      <NavBar/>
-                      <h2> Main.jsx</h2>
-
-                      {this.props.children}
-                    </div>
+                    <NavBar/>
+                  <div className="row">
+                      <div className="column small-centered medium-6 large-4">
+                        {this.props.children}
+                      </div>
                   </div>
+                </div>
 
               );
     }

app/tests/components/Clock.test.jsx

@@ -2,7 +2,6 @@ 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');
@@ -16,7 +15,7 @@ describe('Clock', ()=> {
       it('should render clock component',()=>{
         var clock = TestUtils.renderIntoDocument(<Clock totalSeconds = {90}/>);
         var $el = $(ReactDOM.findDOMNode(clock));
-        var actualText = $el.find('.clock-test').text();
+        var actualText = $el.find('.clock-text').text();
         expect(actualText).toBe('01:30');
       });
     });

app/tests/components/CountDownForm.test.jsx

@@ -0,0 +1,34 @@
+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';
+
+    TestUtils.Simulate.submit($el.find('form')[0]);
+
+    expect(spy).toHaveBeenCalledWith(109);
+  });
+
+  it('should call onSetCountDown if valid seconds not entered', ()=>{
+    var spy = expect.createSpy();
+    var countdownForm = TestUtils.renderIntoDocument(<CountdownForm onSetCountDown={spy} />);
+    var $el = $(ReactDOM.findDOMNode(countdownForm));
+    countdownForm.refs.seconds.value = '109j';
+
+    TestUtils.Simulate.submit($el.find('form')[0]);
+
+    expect(spy).toNotHaveBeenCalled();
+  });
+});

webpack.config.js

@@ -27,7 +27,8 @@ module.exports = {
       NavBar : 'app/components/NavBar.jsx',
       Timer : 'app/components/Timer.jsx',
       Countdown : 'app/components/Countdown.jsx',
-      Clock : 'app/components/Clock.jsx'
+      Clock : 'app/components/Clock.jsx',
+      CountdownForm : 'app/components/CountdownForm.jsx'
     },
     extensions: ['', '.js', '.jsx']
   },