All files / tests/__tests__/components EndToEnd.vue

100% Statements 10/10
100% Branches 4/4
100% Functions 5/5
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                    1x       1x 1x 1x       11x   1x               1x 1x 1x        
<template>
  <div v-if="loading">
    Loading...
  </div>
  <div v-else data-testid="message">
    Loaded this message: {{ data.returnedMessage }}
  </div>
</template>
 
<script>
const fetchAMessage = () =>
  new Promise(resolve => {
    // we are using random timeout here to simulate a real-time example
    // of an async operation calling a callback at a non-deterministic time
    const randomTimeout = Math.floor(Math.random() * 100)
    setTimeout(() => {
      resolve({returnedMessage: 'Hello World'})
    }, randomTimeout)
  })
 
export default {
  data () {
    return {
      loading: true,
      data: {
        returnedMessage: null
      }
    }
  },
  async mounted () {
    const data = await fetchAMessage()
    this.loading = false
    this.data = data
  }
}
</script>