Refactored code and added status badges in README.

README.md

@@ -1,5 +1,7 @@
 # Analog Clock using React
 
+[![CircleCI](https://circleci.com/gh/vishnuramana/analogclock/tree/dev.svg?style=shield)](https://circleci.com/gh/vishnuramana/analogclock/tree/dev) [![Coverage Status](https://coveralls.io/repos/github/vishnuramana/analogclock/badge.svg?branch=dev)](https://coveralls.io/github/vishnuramana/analogclock?branch=dev) [![npm](https://img.shields.io/npm/dw/analog-clock-react)](https://www.npmjs.com/package/analog-clock-react) ![npm](https://img.shields.io/npm/v/analog-clock-react) [![NPM](https://img.shields.io/npm/l/analog-clock-react)](https://github.com/vishnuramana/analogclock/blob/dev/LICENSE)
+
 This is an customizable analog clock completely built using React. It is customizable by passing an options JSON Object to the component.
 
 ![Clock Preview](https://imgur.com/3kV92PJ.png)
@@ -83,14 +85,17 @@ Please visit the [demo](http://vishnuramana.github.io/analogclock) page to get a
       this.interval = setInterval(this.updateClock, 1000);
 
 ## Change Log
-
   - **v1.2.2**
     - Fixed clock hand centering issues
     - Removed unwanted
 
 ## Contribution
 
-If you wish to contribute to this project, please use the `dev` branch to add your changes and test. Once you are done with your changes, please raise a PR.
+If you wish to contribute to this project, please use the `dev` branch to add your changes and test. Make sure all the tests are passed and optimal coverage is present. Once you are done with your changes, please raise a PR.
+
+## Issues/Feature Requests
+
+For any issues/feature-requests, you can create an issue in Github or email me at [me@vishnu.codes](mailto:me@vishnu.codes)
 
 ## License
 

src/AnalogClock.js

@@ -1,4 +1,5 @@
 import React, { Component } from 'react';
+import Util from './Util';
 import { ClockContainer, ClockBaseBorder, ClockBase, ClockCenter } from './ClockComponents';
 import Hand from './Hand.js';
 
@@ -9,24 +10,26 @@ class AnalogClock extends Component {
         this.state = this.initClock();
     }
 
-    initClock(){
+    initClock() {
         const date = new Date();
         return {
             seconds: date.getSeconds(),
             minutes: date.getMinutes(),
-            hours: date.getHours() > 12 ? date.getHours() - 12 : date.getHours()
+            hours: Util.getHourIn12HrFormat(date.getHours())
         }
     }
 
-    setupInterval(){
-        this.interval = setInterval(() => {
-            const date = new Date();
-            this.setState({
-                seconds: date.getSeconds(),
-                minutes: date.getMinutes(),
-                hours: date.getHours() > 12 ? date.getHours() - 12 : date.getHours()
-            })
-        }, 1000);
+    setupTime() {
+        const date = new Date();
+        this.setState({
+            seconds: date.getSeconds(),
+            minutes: date.getMinutes(),
+            hours: Util.getHourIn12HrFormat(date.getHours())
+        })
+    }
+
+    setupInterval() {
+        this.interval = setInterval(() => this.setupTime(), 1000);
     }
 
     componentDidMount() {

src/Util.js

@@ -13,6 +13,17 @@ class Util {
         }
         return handAngle;
     }
+
+    static getHourIn12HrFormat(hour) {
+        if (hour) {
+            if (hour > 12) {
+                hour -= 12;
+            }
+        } else {
+            hour = 0;
+        }
+        return hour;
+    }
 }
 
 export default Util;

src/__tests__/component/AnalogClock.unit.test.js

@@ -8,19 +8,26 @@ import AnalogClock from "../../AnalogClock.js";
 describe("AnalogClock component", () => {
   const initClockSpy = jest.spyOn(AnalogClock.prototype, "initClock");
   const setupIntervalSpy = jest.spyOn(AnalogClock.prototype, "setupInterval");
+  const setupTimeSpy = jest.spyOn(AnalogClock.prototype, "setupTime");
   const componentWillUnmountSpy = jest.spyOn(
     AnalogClock.prototype,
     "componentWillUnmount"
   );
 
-  jest.useFakeTimers();
-  jest.spyOn(global, "setInterval");
-  jest.spyOn(global, "clearInterval");
+  beforeEach(() => {
+    jest.useFakeTimers();
+    jest.spyOn(global, "setInterval");
+    jest.spyOn(global, "clearInterval");
+
+  })
+
 
   afterEach(() => {
     initClockSpy.mockClear();
     setupIntervalSpy.mockClear();
     componentWillUnmountSpy.mockClear();
+    setupTimeSpy.mockClear();
+    jest.useRealTimers();
   });
 
   it("mounts the component", () => {
@@ -42,6 +49,8 @@ describe("AnalogClock component", () => {
     expect(setupIntervalSpy).toHaveBeenCalledTimes(1);
     expect(setInterval).toHaveBeenCalledTimes(1);
     expect(setInterval).toHaveBeenLastCalledWith(expect.any(Function), 1000);
+    jest.advanceTimersByTime(1001);
+    expect(setupTimeSpy).toHaveBeenCalledTimes(1)
   });
 
   it("uses 12 hr time format", () => {
@@ -67,6 +76,10 @@ describe("AnalogClock component", () => {
       },
     };
     const wrapper = mount(<AnalogClock {...options} />);
+    expect(setInterval).toHaveBeenCalledTimes(1);
+    expect(setInterval).toHaveBeenLastCalledWith(expect.any(Function), 1000);
+    expect(wrapper.state("hours")).toEqual(2);
+    jest.advanceTimersByTime(1500);
     expect(wrapper.state("hours")).toEqual(2);
   });
 
@@ -114,7 +127,7 @@ describe("AnalogClock component", () => {
       hours: 22,
     });
     expect(setupIntervalSpy).toHaveBeenCalledTimes(1);
-    expect(clearInterval).toHaveBeenCalledTimes(2);
+    expect(clearInterval).toHaveBeenCalledTimes(1);
   });
 
   it("sets current time when useCustomTime is set to false", () => {
@@ -142,6 +155,5 @@ describe("AnalogClock component", () => {
       useCustomTime: false,
     });
     expect(setupIntervalSpy).toHaveBeenCalledTimes(2);
-    expect(clearInterval).toHaveBeenCalledTimes(2);
   });
 });

src/__tests__/component/Util.test.js

@@ -10,16 +10,34 @@ describe("Util tests", () => {
   });
 
   it("returns hand angle as 450 when 6 hours is passed", () => {
-    expect(Util.getHandAngle({ type: "hour", hours: "6" , minutes:"0" })).toBe(450);
+    expect(Util.getHandAngle({ type: "hour", hours: "6", minutes: "0" })).toBe(450);
   });
 
   it("returns hand angle as 450 when 6 hours is passed", () => {
-    expect(Util.getHandAngle({ type: "hour", hours: "6" , minutes:"31" })).toBe(465.5);
+    expect(Util.getHandAngle({ type: "hour", hours: "6", minutes: "31" })).toBe(465.5);
   });
 
   it("returns hand angle as 0 when type is not passed", () => {
     expect(
       Util.getHandAngle({ hours: "6", minutes: "30", seconds: "30" })
     ).toBe(0);
   });
+
+  it("returns 0 when passed hour is invalid", () => {
+    expect(
+      Util.getHourIn12HrFormat(undefined)
+    ).toBe(0);
+  });
+
+  it("returns passed hour when time is less than 12 hours", () => {
+    expect(
+      Util.getHourIn12HrFormat(10)
+    ).toBe(10);
+  });
+
+  it("returns passed hour-12 when time is greater than 12 hours", () => {
+    expect(
+      Util.getHourIn12HrFormat(13)
+    ).toBe(1);
+  });
 });