All files / tests/__tests__/components StopWatch.vue

100% Statements 9/9
100% Branches 2/2
100% Functions 4/4
100% Lines 9/9

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41                            2x             1x     3x 3x 1x   2x   2x 4x       3x          
<template>
  <div>
    <span data-testid="elapsed">{{ lapse }}ms</span>
    <button
      data-testid="start-stop-button"
      @click="handleRunClick">
      {{ running ? 'Stop' : 'Start' }}
    </button>
  </div>
</template>
 
<script>
export default {
  data () {
    return {
      running: false,
      lapse: 0,
      timer: null
    }
  },
  beforeDestroy () {
    clearInterval(this.timer)
  },
  methods: {
    handleRunClick () {
      if (this.running) {
        clearInterval(this.timer)
      } else {
        const startTime = Date.now() - this.lapse
 
        this.timer = setInterval(() => {
          this.lapse = Date.now() - startTime
        })
      }
 
      this.running = !this.running
    }
  }
}
</script>