Added Initial Test Cases And Styling to Clock Component

app/app.jsx

@@ -2,6 +2,8 @@ var React = require('react');
 var ReactDOM = require('react-dom');
 var {Route, Router, IndexRoute, hashHistory} = require('react-router');
 var Main = require('Main');
+var Timer = require('Timer');
+var Countdown = require('Countdown');
 
 
 
@@ -15,8 +17,9 @@ require('style!css!sass!applicationStyles')
 
 ReactDOM.render(
     <Router history={hashHistory}>
-      <Route path = '/' component={Main}>
-
+      <Route path = "/" component={Main}>
+          <Route path=  "countdown" component={Countdown}/>
+          <IndexRoute  component={Timer}/>
       </Route>
     </Router>,
 document.getElementById('app'));

app/components/Clock.jsx

@@ -0,0 +1,33 @@
+var React = require('react');
+
+var Clock = React.createClass({
+  getInitialProps : function () {
+    totalSeconds : 0
+  },
+  propTypes : function () {
+    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

@@ -0,0 +1,13 @@
+var React = require('react');
+var Clock = require('Clock');
+var Countdown = React.createClass({
+    render : function () {
+        return (
+            <div>
+                <Clock totalSeconds={1190}/>
+            </div>
+        );
+    }
+});
+
+module.exports = Countdown;

app/components/Main.jsx

@@ -8,7 +8,7 @@ var Main = React.createClass({
                     <div>
 
                       <NavBar/>
-                      <h2> Main Component</h2>
+                      <h2> Main.jsx</h2>
 
                       {this.props.children}
                     </div>

app/components/NavBar.jsx

@@ -11,7 +11,7 @@ var NavBar = React.createClass({
                         <ul className="menu">
                             <li className="menu-text">React Timer App
                                 <li> <IndexLink  activeClassName= "active" activeStyle = {{fontWeight: 'bold'}} to = '/'> Timer </IndexLink> </li>
-                                <li> <Link  activeClassName= "active" activeStyle = {{fontWeight: 'bold'}} to = '/'> Countdown </Link> </li>
+                                <li> <Link  activeClassName= "active" activeStyle = {{fontWeight: 'bold'}} to = '/countdown'> Countdown </Link> </li>
                             </li>
                         </ul>
                     </div>

app/components/Timer.jsx

@@ -0,0 +1,13 @@
+var React = require('react');
+
+var Timer = React.createClass({
+    render : function () {
+        return(
+            <div>
+                <h5>Timer.jsx</h5>
+            </div>
+        );
+    }
+});
+
+module.exports = Timer;

app/styles/app.scss

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

app/styles/base/_variables.scss

@@ -2,7 +2,11 @@
 $grey : #333333;
 
 
-//navigation colors
-
+//navigation styles
 $nav-background : $grey;
-$nav-text-color : white;
+$nav-text-color : white;
+
+//Clock Styles
+$clock-text-color :#ffffff;
+$clock-bg-color : #B5D0E2;
+$clock-border-color : #2099E8;

app/styles/components/_clock.scss

@@ -0,0 +1,18 @@
+.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/app.test.jsx

@@ -0,0 +1,7 @@
+var expect = require('expect');
+
+describe('App',() => {
+    it('should properly run tests',() => {
+        expect(1).toBe(1);
+    });
+});

app/tests/components/Clock.test.jsx

@@ -0,0 +1,45 @@
+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 component',()=>{
+        var clock = TestUtils.renderIntoDocument(<Clock totalSeconds = {90}/>);
+        var $el = $(ReactDOM.findDOMNode(clock));
+        var actualText = $el.find('.clock-test').text();
+        expect(actualText).toBe('01:30');
+      });
+    });
+
+    describe('formatSeconds', ()=> {
+      it('should formatSeconds',()=> {
+        var clock = TestUtils.renderIntoDocument(<Clock/>);
+        var seconds = 615;
+        var expected = '10:15';
+        var actual = clock.formatSeconds(seconds);
+
+        expect(actual).toBe(expected);
+      });
+    });
+
+    describe('formatSeconds when seconds and minutes < 10', ()=> {
+      it('should formatSeconds',()=> {
+        var clock = TestUtils.renderIntoDocument(<Clock/>);
+        var seconds = 61;
+        var expected = '01:01';
+        var actual = clock.formatSeconds(seconds);
+
+        expect(actual).toBe(expected);
+      });
+    });
+});

karma.conf.js

@@ -0,0 +1,22 @@
+var webpackConfig = require('./webpack.config.js');
+module.exports = function (config) {
+    config.set({
+        browsers: ['Chrome'],
+        singleRun: true,
+        frameworks: ['mocha'],
+        files : ['app/tests/**/*.test.jsx'],
+        preprocessors: {
+            'app/tests/**/*.test.jsx' : ['webpack','sourcemap']
+        },
+        reporters:['mocha'],
+        client: {
+            mocha: {
+                timeout: '5000'
+            }
+        },
+        webpack: webpackConfig,
+        webpackServer: {
+            noInfo : true
+        }
+    });
+}

package.json

@@ -4,7 +4,7 @@
   "description": "A Timer and Countdown app",
   "main": "index.js",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1",
+    "test": "karma start",
     "start": "node server.js"
   },
   "author": "Hemanth Kumar.S",
@@ -22,9 +22,18 @@
     "babel-preset-es2015": "^6.5.0",
     "babel-preset-react": "^6.5.0",
     "css-loader": "^0.23.1",
+    "expect": "^1.20.2",
     "foundation-sites": "^6.2.0",
     "jquery": "^2.2.1",
+    "karma": "^1.3.0",
+    "karma-chrome-launcher": "^2.0.0",
+    "karma-mocha": "^1.3.0",
+    "karma-mocha-reporter": "^2.2.1",
+    "karma-sourcemap-loader": "^0.3.7",
+    "karma-webpack": "^1.8.1",
+    "mocha": "^3.2.0",
     "node-sass": "^4.0.0",
+    "react-addons-test-utils": "^0.14.8",
     "sass-loader": "^4.1.0",
     "script-loader": "^0.6.1",
     "style-loader": "^0.13.0",