Stopwatch implementation

src/js/TDD/Stopwatch.js

@@ -0,0 +1,61 @@
+import React from 'react';
+import './styles.css';
+
+class Stopwatch extends React.Component {
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            time: 0,
+            isTimerRunning: false
+        };
+
+        this.timer = undefined;
+    };
+
+    onClickStartButton() {
+
+        this.setState({
+            isTimerRunning: true
+        })
+
+        this.timer = setInterval(() => {
+            this.setState({
+            time: this.state.time + 1
+        })}
+        , 1000);
+
+    }
+
+    onClickStopButton() {
+        this.setState({
+            isTimerRunning: false
+        })
+        clearInterval(this.timer);
+    }
+
+    onClickResetButton() {
+        clearInterval(this.timer);
+        this.setState({
+            time: 0,
+            isTimerRunning: false
+        })
+    }
+
+    render() {
+        return (
+            <div className="stopwatch_conatiner">
+                <div className="showtime_conatiner">
+                    {this.state.time}.00
+                </div>
+                <div className="button_container">
+                    <button className="startbtn btn" onClick={this.onClickStartButton.bind(this)}>Start</button>
+                    <button className="stopbtn btn" onClick={this.onClickStopButton.bind(this)} >Stop</button>
+                    <button className="resetbtn btn"onClick={this.onClickResetButton.bind(this)} >Reset</button>
+                </div>
+            </div>
+        )
+    };
+}
+
+export default Stopwatch;

src/js/TDD/styles.css

@@ -0,0 +1,36 @@
+.stopwatch_conatiner {
+    width: 35%;
+    /* background: #cccccc; */
+    margin: auto;
+    position: absolute;
+    right: 0;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    height: 30%;
+    border: 1px solid blue;
+}
+
+.showtime_conatiner {
+    height: 75%;
+    text-align: center;
+    font-size: 36px;
+    margin: auto;
+    padding: 10%;
+}
+
+.button_container {
+    text-align: center;
+    height: 25%;
+    padding: 7px;
+    border-top: 1px solid blue;
+}
+
+.btn {
+    background: skyblue;
+    width: 30%;
+    border: 0px;
+    height: 84%;
+    margin: 2px;
+    color: white;
+}

src/test/jest/TDD/Stopwatch.test.js

@@ -0,0 +1,62 @@
+import React from 'react';
+import Stopwatch from 'js/TDD/Stopwatch';
+import { shallow } from 'enzyme';
+
+describe("Stopwatch", () => {
+    describe("render function", () => {
+        it("check container render", () => {
+            const wrapper = shallow(<Stopwatch></Stopwatch>);
+            expect(wrapper.find(".stopwatch_conatiner").exists()).toEqual(true);
+        })
+
+        it("check show time conatiner render", () => {
+            const wrapper = shallow(<Stopwatch></Stopwatch>);
+            expect(wrapper.find(".showtime_conatiner").exists()).toEqual(true);
+        })
+
+        it("check button conatiner render", () => {
+            const wrapper = shallow(<Stopwatch></Stopwatch>);
+            expect(wrapper.find(".button_container").exists()).toEqual(true);
+        })
+
+        it("check start, stop, reset button render", () => {
+            const wrapper = shallow(<Stopwatch></Stopwatch>);
+            expect(wrapper.find(".button_container").childAt(0).hasClass("startbtn")).toEqual(true);
+            expect(wrapper.find(".button_container").childAt(1).hasClass("stopbtn")).toEqual(true);
+            expect(wrapper.find(".button_container").childAt(2).hasClass("resetbtn")).toEqual(true);
+        })
+
+        it("check initial time on render", () => {
+            const wrapper = shallow(<Stopwatch></Stopwatch>);
+            expect(wrapper.find(".showtime_conatiner").text()).toEqual('0.00');
+        })
+
+        it ("check start button on click", () => {
+            const wrapper = shallow(<Stopwatch></Stopwatch>);
+            jest.useFakeTimers();
+            wrapper.find(".startbtn").simulate("click");
+            jest.advanceTimersByTime(1000);
+            expect(wrapper.state("time")).toEqual(1);
+            expect(wrapper.state("isTimerRunning")).toEqual(true);
+            expect(wrapper.find(".showtime_conatiner").text()).toEqual("1.00");
+        })
+
+        it ("check stop button on click", () => {
+            const wrapper = shallow(<Stopwatch></Stopwatch>);
+            wrapper.setState({time: 25})
+            expect(wrapper.find(".showtime_conatiner").text()).toEqual('25.00');
+            wrapper.find(".stopbtn").simulate("click");
+            expect(wrapper.state("isTimerRunning")).toEqual(false);
+            expect(wrapper.find(".showtime_conatiner").text()).toEqual('25.00');
+        })
+
+        it ("check reset button on click", () => {
+            const wrapper = shallow(<Stopwatch></Stopwatch>);
+            wrapper.setState({time: 25, isTimerRunning: true})
+            wrapper.find(".resetbtn").simulate("click");
+            expect(wrapper.state("time")).toEqual(0);
+            expect(wrapper.state("isTimerRunning")).toEqual(false);
+            expect(wrapper.find(".showtime_conatiner").text()).toEqual("0.00");
+        })
+    })
+})