Fix turning off modal overlay in successive tour starts (#277)

* Fix turning off modal overlay in successive tour starts

Currently, the `showOrHideModal` function is being called for each step
on the `'hide' and 'destroy' events. This has the effect of calling it before
showing a tour again after closing it.

Moving the hide call up to the service itself fixes this.

* Update environment.js

addon/services/tour.js

@@ -56,6 +56,7 @@ export default Service.extend(Evented, {
    * @public
    */
   cancel() {
+    this._showOrHideModal('hide');
     get(this, 'tourObject').cancel();
   },
 
@@ -64,6 +65,7 @@ export default Service.extend(Evented, {
    * @public
    */
   complete() {
+    this._showOrHideModal('hide');
     get(this, 'tourObject').complete();
   },
 
@@ -72,6 +74,7 @@ export default Service.extend(Evented, {
    * @public
    */
   hide() {
+    this._showOrHideModal('hide');
     get(this, 'tourObject').hide();
   },
 
@@ -162,7 +165,6 @@ export default Service.extend(Evented, {
     tourObject.on('cancel', bind(this, 'onTourFinish', 'cancel'));
 
     set(this, 'tourObject', tourObject);
-    this._initModalOverlay();
   },
 
   /**
@@ -278,7 +280,6 @@ export default Service.extend(Evented, {
       ['hide', 'destroy'].forEach(event => {
         currentStep.on(event, () => {
           unhighlightStepTarget(currentStep);
-          this._showOrHideModal('hide');
         });
       });
 
@@ -320,6 +321,7 @@ export default Service.extend(Evented, {
       this._modalOverlayElem = createModalOverlay();
       this._modalOverlayOpening = getModalMaskOpening(this._modalOverlayElem);
 
+      // don't show yet -- each step will control that
       this._showOrHideModal('hide');
 
       document.body.appendChild(this._modalOverlayElem);

tests/acceptance/ember-shepherd-test.js

@@ -131,14 +131,12 @@ module('Acceptance | Tour functionality tests', function(hooks) {
     test('Displaying the modal during tours when modal mode is enabled', async function(assert) {
       await visit('/');
 
-      const modalOverlay = document.querySelector(`#${modalElementIds.modalOverlay}`);
-
-      assert.ok(modalOverlay, 'modal overlay is present in the DOM');
-      assert.equal(getComputedStyle(modalOverlay).display, 'none', 'modal overlay is present but not displayed before the tour starts');
-      assert.notOk(document.body.classList.contains(modalClassNames.isVisible), `Body has no class of "${modalClassNames.isVisible}" when shepherd is not active`);
+      assert.equal(document.querySelector(`#${modalElementIds.modalOverlay}`), null, 'modal overlay is not present in the DOM before any tour is started');
 
       await click('.toggleHelpModal');
 
+      const modalOverlay = document.querySelector(`#${modalElementIds.modalOverlay}`);
+
       assert.equal(getComputedStyle(modalOverlay).display, 'block', 'modal overlay is present and displayed after the tour starts');
 
       assert.ok(document.body.classList.contains('shepherd-active'), 'Body gets class of shepherd-active, when shepherd becomes active');
@@ -149,13 +147,12 @@ module('Acceptance | Tour functionality tests', function(hooks) {
     test('Hiding the modal during tours when modal mode is not enabled', async function(assert) {
       await visit('/');
 
-      const modalOverlay = document.querySelector(`#${modalElementIds.modalOverlay}`);
-
-      assert.ok(modalOverlay, 'modal overlay is present in the DOM');
-      assert.equal(getComputedStyle(modalOverlay).display, 'none', 'modal overlay is present but not displayed before the tour starts');
+      assert.equal(document.querySelector(`#${modalElementIds.modalOverlay}`), null, 'modal overlay is not present in the DOM before any tour is started');
 
       await click('.toggleHelpNonmodal');
 
+      const modalOverlay = document.querySelector(`#${modalElementIds.modalOverlay}`);
+
       assert.equal(getComputedStyle(modalOverlay).display, 'none', 'modal overlay is present but not displayed after the tour starts');
 
       assert.ok(document.body.classList.contains('shepherd-active'), 'Body gets class of shepherd-active, when shepherd becomes active');