feat(tour): added promises for start, next, and prev so that users of…

… the component may do async operations to get the UI in a good state
pulsardev · Jul 26, 2019 · 3af3496 · 3af3496
1 parent c13ee1b
commit 3af3496
Show file tree

Hide file tree

Showing 2 changed files with 120 additions and 25 deletions.
diff --git a/src/components/VTour.vue b/src/components/VTour.vue
@@ -98,27 +98,63 @@ export default {
     },
     numberOfSteps () {
       return this.steps.length
+    },
+    step () {
+      return this.steps[this.currentStep]
     }
   },
   methods: {
-    start (startStep) {
+    async start (startStep) {
       // Wait for the DOM to be loaded, then start the tour
-      setTimeout(() => {
-        this.customCallbacks.onStart()
-        this.currentStep = typeof startStep !== 'undefined' ? parseInt(startStep, 10) : 0
-      }, this.customOptions.startTimeout)
+      startStep = typeof startStep !== 'undefined' ? parseInt(startStep, 10) : 0
+      let step = this.steps[startStep]
+
+      let process = () => new Promise((resolve, reject) => {
+        setTimeout(() => {
+          this.customCallbacks.onStart()
+          this.currentStep = startStep
+          resolve()
+        }, this.customOptions.startTimeout)
+      })
+
+      if (typeof step.before !== 'undefined') await step.before('start')
+      await process()
+
+      return Promise.resolve()
     },
-    previousStep () {
-      if (this.currentStep > 0) {
+    async previousStep () {
+      let futureStep = this.currentStep - 1
+
+      let process = () => new Promise((resolve, reject) => {
         this.customCallbacks.onPreviousStep(this.currentStep)
-        this.currentStep--
+        this.currentStep = futureStep
+        resolve()
+      })
+
+      if (futureStep > -1) {
+        let step = this.steps[futureStep]
+        if (typeof step.before !== 'undefined') await step.before('previous')
+        await process()
       }
+
+      return Promise.resolve()
     },
-    nextStep () {
-      if (this.currentStep < this.numberOfSteps - 1 && this.currentStep !== -1) {
+    async nextStep () {
+      let futureStep = this.currentStep + 1
+
+      let process = () => new Promise((resolve, reject) => {
         this.customCallbacks.onNextStep(this.currentStep)
-        this.currentStep++
+        this.currentStep = futureStep
+        resolve()
+      })
+
+      if (futureStep < this.numberOfSteps && this.currentStep !== -1) {
+        let step = this.steps[futureStep]
+        if (typeof step.before !== 'undefined') await step.before('next')
+        await process()
       }
+
+      return Promise.resolve()
     },
     stop () {
       this.customCallbacks.onStop()

diff --git a/test/unit/VTour.spec.js b/test/unit/VTour.spec.js
@@ -40,7 +40,7 @@ describe('VTour.vue', () => {
     expect(wrapper.vm.$tours).to.be.an('object').that.has.all.keys('myTestTour')
   })
 
-  it('stays within the boundaries of the number of steps', () => {
+  it('stays within the boundaries of the number of steps', async () => {
     const wrapper = mount(VTour, {
       propsData: {
         name: 'myTestTour',
@@ -50,28 +50,87 @@ describe('VTour.vue', () => {
 
     expect(wrapper.vm.currentStep).to.equal(-1)
 
-    wrapper.vm.start()
+    await wrapper.vm.start()
+    expect(wrapper.vm.currentStep).to.equal(0)
 
-    setTimeout(() => {
-      expect(wrapper.vm.currentStep).to.equal(0)
+    // We call nextStep one more time than needed
+    for (let i = 0; i < steps.length; i++) {
+      await wrapper.vm.nextStep()
+    }
 
-      // We call nextStep one more time than needed
-      for (let i = 0; i < steps.length; i++) {
-        wrapper.vm.nextStep()
-      }
+    expect(wrapper.vm.currentStep).to.equal(1)
 
-      expect(wrapper.vm.currentStep).to.equal(1)
+    // We call previousStep one more time than needed
+    for (let i = 0; i < steps.length; i++) {
+      await wrapper.vm.previousStep()
+    }
+
+    expect(wrapper.vm.currentStep).to.equal(0)
+
+    wrapper.vm.stop()
+
+    expect(wrapper.vm.currentStep).to.equal(-1)
+  })
 
-      // We call previousStep one more time than needed
-      for (let i = 0; i < steps.length; i++) {
-        wrapper.vm.previousStep()
+  describe('#before', () => {
+    let step0 = false
+    let step1 = false
+    const beforeSteps = [
+      {
+        target: '#v-step-0',
+        content: `Discover <strong>Vue Tour</strong>!`,
+        before: () => {
+          step0 = true
+          return Promise.resolve()
+        }
+      },
+      {
+        target: '#v-step-1',
+        content: 'An awesome plugin made with Vue.js!',
+        before: () => {
+          step1 = true
+          return Promise.resolve()
+        }
+      },
+      {
+        target: '#v-step-2',
+        content: 'An awesome plugin made with Vue.js!'
       }
+    ]
 
+    it('invokes before() on start()', async () => {
+      const wrapper = mount(VTour, {
+        propsData: {
+          name: 'myTestTour',
+          steps: beforeSteps
+        }
+      })
+
+      await wrapper.vm.start()
       expect(wrapper.vm.currentStep).to.equal(0)
+      expect(step0).to.equal(true)
+
+      step0 = false
+      step1 = false
+    })
+
+    it('invokes before() on nextStep()', async () => {
+      const wrapper = mount(VTour, {
+        propsData: {
+          name: 'myTestTour',
+          steps: beforeSteps
+        }
+      })
 
-      wrapper.vm.stop()
+      await wrapper.vm.start()
+      expect(wrapper.vm.currentStep).to.equal(0)
+
+      await wrapper.vm.nextStep()
+      expect(wrapper.vm.currentStep).to.equal(1)
+      expect(step1).to.equal(true)
 
-      expect(wrapper.vm.currentStep).to.equal(-1)
+      step0 = false
+      step1 = false
     })
   })
 })