fix: fix tests and improve error handling

src/components/VStep.vue

@@ -21,56 +21,58 @@
 </template>
 
 <script>
-  // import Vue from 'vue'
-  import Popper from 'popper.js'
-  import sum from 'hash-sum'
-
-  export default {
-    name: 'v-step',
-    props: {
-      step: {
-        type: Object
-      },
-      previousStep: {
-        type: Function
-      },
-      nextStep: {
-        type: Function
-      },
-      stop: {
-        type: Function
-      },
-      isFirst: {
-        type: Boolean
-      },
-      isLast: {
-        type: Boolean
-      }
+import Popper from 'popper.js'
+import sum from 'hash-sum'
+
+export default {
+  name: 'v-step',
+  props: {
+    step: {
+      type: Object
     },
-    data () {
-      return {
-        hash: sum(this.step.target)
-      }
+    previousStep: {
+      type: Function
     },
-    mounted () {
-      let params = this.step.params ? this.step.params : {}
-
-      console.log('hash from ' + this.step.target, this.hash)
-
-      let targetElement = document.querySelector(this.step.target)
-      console.log('targetElement', targetElement)
+    nextStep: {
+      type: Function
+    },
+    stop: {
+      type: Function
+    },
+    isFirst: {
+      type: Boolean
+    },
+    isLast: {
+      type: Boolean
+    }
+  },
+  data () {
+    return {
+      hash: sum(this.step.target)
+    }
+  },
+  mounted () {
+    let params = this.step.params ? this.step.params : {}
+    let targetElement = document.querySelector(this.step.target)
+    console.log('[Vue Tour] The target element ' + this.step.target + ' of .v-step[id="' + this.hash + '"] is:', targetElement)
 
+    if (targetElement) {
       targetElement.scrollIntoView({behavior: 'smooth'})
 
+      /* eslint-disable no-new */
       new Popper(
         targetElement,
         this.$refs['v-step-' + this.hash],
         {
           placement: params.placement ? params.placement : 'bottom'
         }
       )
+    } else {
+      console.error('[Vue Tour] The target element ' + this.step.target + ' of .v-step[id="' + this.hash + '"] does not exist!')
+      this.stop()
     }
   }
+}
 </script>
 
 <style lang="scss" scoped>

src/components/VTour.vue

@@ -30,49 +30,49 @@
 </template>
 
 <script>
-  export default {
-    name: 'v-tour',
-    props: {
-      steps: {
-        type: Array,
-        default: []
-      },
-      name: {
-        type: String
-      }
+export default {
+  name: 'v-tour',
+  props: {
+    steps: {
+      type: Array,
+      default: () => []
     },
-    data () {
-      return {
-        currentStep: -1
-      }
+    name: {
+      type: String
+    }
+  },
+  data () {
+    return {
+      currentStep: -1
+    }
+  },
+  mounted () {
+    this.$tours[this.name] = this
+  },
+  computed: {
+    isFirst () {
+      return this.currentStep === 0
+    },
+    isLast () {
+      return this.currentStep === this.steps.length - 1
+    }
+  },
+  methods: {
+    start () {
+      // Wait for the DOM to be loaded, then start the tour
+      setTimeout(() => {
+        this.currentStep = 0
+      })
     },
-    mounted () {
-      this.$tours[this.name] = this
+    previousStep () {
+      this.currentStep--
     },
-    computed: {
-      isFirst () {
-        return this.currentStep === 0
-      },
-      isLast () {
-        return this.currentStep === this.steps.length - 1
-      }
+    nextStep () {
+      this.currentStep++
     },
-    methods: {
-      start () {
-        // Wait for the DOM to be loaded, then start the tour
-        setTimeout(() => {
-          this.currentStep = 0
-        })
-      },
-      previousStep () {
-        this.currentStep--
-      },
-      nextStep () {
-        this.currentStep++
-      },
-      stop () {
-        this.currentStep = -1
-      }
+    stop () {
+      this.currentStep = -1
     }
   }
+}
 </script>

test/unit/VStep.spec.js

@@ -0,0 +1,22 @@
+import { expect } from 'chai'
+import { shallow } from '@vue/test-utils'
+import VStep from '@/components/VStep.vue'
+
+describe('VStep.vue', () => {
+  it('renders props.step.content when passed', () => {
+    const step = {
+      target: 'v-step-0',
+      content: 'This is a demo step!'
+    }
+
+    const wrapper = shallow(VStep, {
+      propsData: {
+        step,
+        stop: () => {}
+      },
+      mounted: () => {}
+    })
+
+    expect(wrapper.text()).to.include(step.content)
+  })
+})