[New] Add blink prop to Clock component

eddyerburgh · Mar 30, 2017 · 7bada8d · 7bada8d
1 parent b5ad1ec
commit 7bada8d
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 10 deletions.
diff --git a/Clock.vue b/Clock.vue
@@ -1,6 +1,9 @@
 <template>
   <time class="clock">
-    <span class="clock__hour">{{ hours }}</span>:<span class="clock__minutes">{{ minutes }}</span>
+    <span class="clock__hour">{{ hours }}</span><!--
+    --><span v-if="!blink || seconds % 2 === 0">:</span><!--
+    --><span v-else>&nbsp;</span><!--
+    --><span class="clock__minutes">{{ minutes }}</span>
   </time>
 </template>
 
@@ -16,6 +19,10 @@ function getDate() {
   return new Date();
 }
 
+function getSeconds() {
+  return getDate().getSeconds();
+}
+
 function getMinutes() {
   return padZero(getDate().getMinutes());
 }
@@ -27,11 +34,14 @@ function getHour() {
 module.exports = {
   name: 'clock',
 
+  props: ['blink'],
+
   data: function data() {
     return {
       ticker: null,
       minutes: getMinutes(),
       hours: getHour(),
+      seconds: getSeconds(),
     };
   },
 
@@ -41,11 +51,13 @@ module.exports = {
     this.ticker = setInterval(function ticker() {
       _this.minutes = getMinutes();
       _this.hours = getHour();
+      _this.seconds = getSeconds();
     }, 1000);
   },
 
   destroyed: function destroyed() {
     clearInterval(this.ticker);
   },
+
 };
 </script>
diff --git a/example/App.vue b/example/App.vue
@@ -1,5 +1,5 @@
 <template>
-  <Clock />
+  <Clock :blink="true"/>
 </template>
 
 <script>

diff --git a/test/unit/specs/Clock.spec.js b/test/unit/specs/Clock.spec.js
@@ -19,47 +19,76 @@ describe('Clock.vue', () => {
     clock = sinon.useFakeTimers(new Date(2016, 2, 15).getTime());
     clock.tick(21 * hours);
     const wrapper = mount(Clock);
-    expect(wrapper.find('.clock__hour')[0].text()).to.equal('21');
+    expect(wrapper.find('.clock__hour')[0].text()).to.contain('21');
   });
 
   it('renders current hour with padded 0', () => {
     clock = sinon.useFakeTimers(new Date(2016, 2, 15).getTime());
     clock.tick(3 * hours);
     const wrapper = mount(Clock);
-    expect(wrapper.find('.clock__hour')[0].text()).to.equal('03');
+    expect(wrapper.find('.clock__hour')[0].text()).to.contain('03');
   });
 
   it('Updates hours when changed', () => {
     clock = sinon.useFakeTimers(new Date(2016, 2, 15).getTime());
     clock.tick(13 * hours);
     const wrapper = mount(Clock);
-    expect(wrapper.find('.clock__hour')[0].text()).to.equal('13');
+    expect(wrapper.find('.clock__hour')[0].text()).to.contain('13');
     clock.tick(14 * hours);
-    setTimeout(() => expect(wrapper.find('.clock__hour')[0].text()).to.equal('14'), 1000);
+    setTimeout(() => expect(wrapper.find('.clock__hour')[0].text()).to.contain('14'), 1000);
   });
 
   it('renders current minutes', () => {
     clock = sinon.useFakeTimers(new Date(2016, 2, 15).getTime());
     clock.tick(30 * minutes);
     const wrapper = mount(Clock);
-    expect(wrapper.find('.clock__minutes')[0].text()).to.equal('30');
+    expect(wrapper.find('.clock__minutes')[0].text()).to.contain('30');
   });
 
   it('renders current minutes with padded 0', () => {
     clock = sinon.useFakeTimers(new Date(2016, 2, 15).getTime());
     clock.tick(3 * minutes);
     const wrapper = mount(Clock);
-    expect(wrapper.find('.clock__minutes')[0].text()).to.equal('03');
+    expect(wrapper.find('.clock__minutes')[0].text()).to.contain('03');
   });
 
   it('Updates minutes when changed', () => {
     clock = sinon.useFakeTimers(new Date(2016, 2, 15).getTime());
     clock.tick(3 * minutes);
     const wrapper = mount(Clock);
-    expect(wrapper.find('.clock__minutes')[0].text()).to.equal('03');
+    expect(wrapper.find('.clock__minutes')[0].text()).to.contain('03');
     clock.tick(4 * minutes);
-    setTimeout(() => expect(wrapper.find('.clock__minutes')[0].text()).to.equal('04'), 1000);
+    setTimeout(() => expect(wrapper.find('.clock__minutes')[0].text()).to.contain('04'), 1000);
   });
+
+  it('displays colon when not passed blink prop and seconds are even', () => {
+    clock = sinon.useFakeTimers(new Date(2016, 2, 15).getTime());
+    clock.tick(seconds * 2);
+    const wrapper = mount(Clock);
+    expect(wrapper.text()).to.contain(':');
+  });
+
+  it('displays colon when not passed blink prop and seconds are odd', () => {
+    clock = sinon.useFakeTimers(new Date(2016, 2, 15).getTime());
+    clock.tick(seconds);
+    const wrapper = mount(Clock);
+    expect(wrapper.text()).to.contain(':');
+  });
+
+  it('displays colon when passed blink prop and seconds are even', () => {
+    clock = sinon.useFakeTimers(new Date(2016, 2, 15).getTime());
+    clock.tick(seconds * 2);
+    const wrapper = mount(Clock, { propsData: { blink: true } });
+    expect(wrapper.text()).to.contain(':');
+  });
+
+  it('does not display colon when passed blink prop and seconds are odd', () => {
+    clock = sinon.useFakeTimers(new Date(2016, 2, 15).getTime());
+    clock.tick(seconds);
+    const wrapper = mount(Clock, { propsData: { blink: true } });
+    expect(wrapper.text()).to.not.contain(':');
+  });
+
   it('Calls clear input with vm.ticker when component is destroyed', () => {
     const stub = sinon.stub();
     window.clearInterval = stub;