countdown-timers

countdown-timers.js

const assert = require('assert')
const lolex = require('lolex')

class CountdownTimerWithSetTimeout {
  countdownFrom(n, element) {
    element.innerText = n
    setTimeout(() => {
      n--
      element.innerText = n
      if (n > 0) {
        this.countdownFrom(n, element)
      }
    }, 1000)
  }
}

class CountdownTimerWithClock {
  constructor(clock) {
    this.clock = clock
  }

  countdownFrom(n, element) {
    element.innerText = n
    this.clock.eachSecond(() => {
      n--
      if (n >= 0) {
        element.innerText = n
      }
    })
  }
}

describe('countdown timers', function() {

  beforeEach(function() {
    this.element = { innerText: '' }
  })

  describe(CountdownTimerWithSetTimeout.name, function() {

    beforeEach(function() {
      this.clock = lolex.install()
    })

    afterEach(function() {
      this.clock.uninstall()
    })

    it('counts down from 3 to 0', function() {
      new CountdownTimerWithSetTimeout().countdownFrom(3, this.element)
      assert.equal(this.element.innerText, '3')
      this.clock.tick(1000)
      assert.equal(this.element.innerText, '2')
      this.clock.tick(1000)
      assert.equal(this.element.innerText, '1')
      this.clock.tick(1000)
      assert.equal(this.element.innerText, '0')
      this.clock.tick(1000)
      assert.equal(this.element.innerText, '0')
    })

  })

  describe(CountdownTimerWithClock.name, function() {
    beforeEach(function() {
      this.clock = {
        eachSecond(callback) { this.callback = callback },
        tick() { this.callback() }
      }
    })

    it('counts down from 3 to 0', function() {
      new CountdownTimerWithClock(this.clock).countdownFrom(3, this.element)
      assert.equal(this.element.innerText, '3')
      this.clock.tick()
      assert.equal(this.element.innerText, '2')
      this.clock.tick()
      assert.equal(this.element.innerText, '1')
      this.clock.tick()
      assert.equal(this.element.innerText, '0')
      this.clock.tick()
      assert.equal(this.element.innerText, '0')
    })

  })

})