Add Confirm cancel (#232)

* Add confirm cancel * Add tests
shipshapecode · Aug 30, 2018 · fe98fd6 · fe98fd6
1 parent 115ad2a
commit fe98fd6
Show file tree

Hide file tree

Showing 5 changed files with 89 additions and 19 deletions.
diff --git a/docs/welcome/css/welcome.css b/docs/welcome/css/welcome.css
diff --git a/index.md b/index.md
@@ -117,6 +117,8 @@ const myTour = new Shepherd.Tour(options);
 
 - `steps`: An array of Step instances to initialize the tour with
 - `defaults`: Default options for Steps created through `addStep`
+- `confirmCancel`: If true, will issue a window.confirm before cancelling
+- `confirmCancelMessage`: The message to display in the confirm dialog
 
 ##### Tour Methods
 

diff --git a/src/js/tour.js b/src/js/tour.js
@@ -81,10 +81,19 @@ export class Tour extends Evented {
   }
 
   /**
-   * Calls done() triggering the `cancel` event
+   * Calls done() triggering the 'cancel' event
+   * If `confirmCancel` is true, will show a window.confirm before cancelling
    */
   cancel() {
-    this.done('cancel');
+    if (this.options.confirmCancel) {
+      const cancelMessage = this.options.confirmCancelMessage || 'Are you sure you want to stop the tour?';
+      const stopTour = window.confirm(cancelMessage);
+      if (stopTour) {
+        this.done('cancel');
+      }
+    } else {
+      this.done('cancel');
+    }
   }
 
   /**

diff --git a/test/cypress/integration/test.acceptance.js b/test/cypress/integration/test.acceptance.js
@@ -124,22 +124,6 @@ describe('Shepherd Acceptance Tests', () => {
   });
 
   describe('Cancel Link', () => {
-    it('Hides cancel link', () => {
-      const tour = setupTour(Shepherd, {
-        showCancelLink: false
-      });
-      tour.start();
-      cy.get('.shepherd-cancel-link')
-        .should('not.be.visible');
-    });
-
-    it('Shows cancel link', () => {
-      const tour = setupTour(Shepherd);
-      tour.start();
-      cy.get('.shepherd-cancel-link')
-        .should('be.visible');
-    });
-
     it('Cancel link cancels the tour', () => {
       const tour = setupTour(Shepherd);
       tour.start();
@@ -160,6 +144,22 @@ describe('Shepherd Acceptance Tests', () => {
       cy.get('.shepherd-cancel-link:nth-child(2)').click();
       cy.get('body').should('not.have.class', 'shepherd-active');
     });
+
+    it('Hides cancel link', () => {
+      const tour = setupTour(Shepherd, {
+        showCancelLink: false
+      });
+      tour.start();
+      cy.get('.shepherd-cancel-link')
+        .should('not.be.visible');
+    });
+
+    it('Shows cancel link', () => {
+      const tour = setupTour(Shepherd);
+      tour.start();
+      cy.get('.shepherd-cancel-link')
+        .should('be.visible');
+    });
   });
 
   it.skip('Defaults classes applied', () => {

diff --git a/test/unit/test.tour.js b/test/unit/test.tour.js
@@ -1,5 +1,6 @@
 import _ from 'lodash';
 import { assert } from 'chai';
+import { stub } from 'sinon';
 import Shepherd from '../../src/js/shepherd.js';
 import { Step } from '../../src/js/step.js';
 // since importing non UMD, needs assignment
@@ -141,6 +142,64 @@ describe('Tour', function() {
     });
   });
 
+  describe('.cancel()', function() {
+    it('shows confirm dialog when confirmCancel is true', function() {
+      instance = new Shepherd.Tour({
+        defaults,
+        confirmCancel: true,
+        confirmCancelMessage: 'Confirm cancel?'
+      });
+
+      instance.addStep('test', {
+        classes: 'foo',
+        id: 'test',
+        title: 'This is a test step for our tour'
+      });
+
+      let inactiveFired = false;
+      instance.on('inactive', () => {
+        inactiveFired = true;
+      });
+
+      const windowConfirmStub = stub(window, 'confirm');
+      windowConfirmStub.returns(false);
+
+      instance.start();
+      assert.equal(instance, Shepherd.activeTour, 'activeTour is set to our tour');
+      instance.cancel();
+      assert.isOk(windowConfirmStub.called, 'window confirm is called');
+      assert.isNotOk(inactiveFired, 'tour still going, since confirm returned false');
+
+      windowConfirmStub.returns(true);
+      instance.cancel();
+      assert.isOk(windowConfirmStub.called, 'window confirm is called');
+      assert.isOk(inactiveFired, 'tour inactive, since confirm returned true');
+    });
+
+    it('tears down tour on cancel', function() {
+      let inactiveFired = false;
+      instance.on('inactive', () => {
+        inactiveFired = true;
+      });
+      instance.start();
+      assert.equal(instance, Shepherd.activeTour, 'activeTour is set to our tour');
+      instance.cancel();
+      assert.isNotOk(Shepherd.activeTour, 'activeTour is torn down');
+      assert.isOk(inactiveFired, 'inactive event fired');
+    });
+
+    it('triggers cancel event when cancel function is called', function() {
+      let cancelFired = false;
+      instance.on('cancel', () => {
+        cancelFired = true;
+      });
+
+      instance.start();
+      instance.cancel();
+      assert.isOk(cancelFired, 'cancel event fired');
+    });
+  });
+
   describe('.complete()', function() {
     it('tears down tour on complete', function() {
       let inactiveFired = false;