Refactor tests to play better with Shepherd's cleanup.

addon/services/tour.js

@@ -6,7 +6,7 @@ import Evented from '@ember/object/evented';
 import { bind, debounce, later } from '@ember/runloop';
 import { normalizeAttachTo } from '../utils/attachTo';
 import { makeButton } from '../utils/buttons';
-import { cleanupModal, cleanupSteps, cleanupStepEventListeners } from '../utils/cleanup';
+import { cleanupModal, cleanupSteps, cleanupStepEventListeners, unhighlightStepTarget } from '../utils/cleanup';
 import {
   elementIsHidden,
   getElementForStep,
@@ -59,6 +59,14 @@ export default Service.extend(Evented, {
     get(this, 'tourObject').cancel();
   },
 
+  /**
+   * Complete the tour
+   * @public
+   */
+  complete() {
+    get(this, 'tourObject').complete();
+  },
+
   /**
    * Hides the current step
    * @public
@@ -254,6 +262,7 @@ export default Service.extend(Evented, {
       if (options.buttons) {
         options.buttons = options.buttons.map(makeButton.bind(this), this);
       }
+
       options.attachTo = normalizeAttachTo(options.attachTo);
       tour.addStep(id, options);
 
@@ -265,17 +274,12 @@ export default Service.extend(Evented, {
         this._styleTargetElementForStep(currentStep);
       });
 
-      currentStep.on('hide', () => {
-        // Remove any modal and target-element highlight styling
-        const targetElement = getElementForStep(currentStep);
-
-        if (targetElement) {
-          if (currentStep.options.highlightClass) {
-            targetElement.classList.remove(currentStep.options.highlightClass);
-          }
-
+      // Remove any modal and target-element highlight styling
+      ['hide', 'destroy'].forEach(event => {
+        currentStep.on(event, () => {
+          unhighlightStepTarget(currentStep);
           this._showOrHideModal('hide');
-        }
+        });
       });
 
       if (!currentStep.options.scrollToHandler) {

addon/utils/buttons.js

@@ -1,4 +1,6 @@
 import { bind } from '@ember/runloop';
+import { assert } from '@ember/debug';
+
 
 /**
  * Creates a button of the specified type, with the given classes and text
@@ -12,21 +14,24 @@ import { bind } from '@ember/runloop';
  */
 export function makeButton(button) {
   const { type, classes, text } = button;
+  const builtInButtonTypes = ['back', 'cancel', 'next'];
 
   if (!type) {
     return button;
   }
 
-  const builtInButtonTypes = ['back', 'cancel', 'next'];
-  if (builtInButtonTypes.includes(type)) {
-    const action = bind(this, function() {
-      this[type]();
-    });
+  assert(
+    `'type' property must be one of 'back', 'cancel', or 'next'`,
+    builtInButtonTypes.includes(type)
+  );
 
-    return {
-      action,
-      classes,
-      text
-    };
-  }
+  const action = bind(this, function() {
+    this[type]();
+  });
+
+  return {
+    action,
+    classes,
+    text
+  };
 }

addon/utils/cleanup.js

@@ -18,6 +18,17 @@ export function cleanupModal() {
   });
 }
 
+// Remove any modal and target-element highlight styling
+export function unhighlightStepTarget(currentStep) {
+  const targetElement = getElementForStep(currentStep);
+
+  if (targetElement) {
+    if (currentStep.options.highlightClass) {
+      targetElement.classList.remove(currentStep.options.highlightClass);
+    }
+  }
+}
+
 /**
  * Cleanup the steps and set pointerEvents back to 'auto'
  * @param tour The tour object

tests/acceptance/ember-shepherd-test.js

@@ -22,7 +22,7 @@ module('Acceptance | Tour functionality tests', function(hooks) {
   });
 
   hooks.afterEach(async function() {
-    return await tour.cancel();
+    return await tour.complete();
   });
 
   module('Cancel link', function() {
@@ -393,12 +393,12 @@ module('Acceptance | Tour functionality tests', function(hooks) {
       assert.equal(getComputedStyle(targetElement)['pointer-events'], 'auto');
 
       // Exit the tour
-      await click(document.querySelector('[data-id="step-1"] .next-button'));
+      await click(document.querySelector('[data-shepherd-step-id="step-1"] .next-button'));
 
       assert.equal(getComputedStyle(targetElement)['pointer-events'], 'none');
 
       // Exit the tour
-      await click(document.querySelector('[data-id="step-2"] .cancel-button'));
+      await click(document.querySelector('[data-shepherd-step-id="step-2"] .cancel-button'));
 
       assert.equal(getComputedStyle(targetElement)['pointer-events'], 'auto');
     });
@@ -500,7 +500,7 @@ module('Acceptance | Tour functionality tests', function(hooks) {
       tour.show('usage');
       tour.hide();
 
-      assert.equal(tour.get('tourObject').currentStep.el.hidden, true, 'The step is hidden');
+      assert.equal(tour.get('tourObject').currentStep.isOpen(), false, 'The step is hidden');
     });
   });
 });

tests/unit/utils/make-button-test.js

@@ -0,0 +1,48 @@
+import { makeButton } from 'ember-shepherd/utils/buttons';
+import { module, test } from 'qunit';
+
+module('Unit | Utility | make-button', function() {
+  module('Making an `action` handler for Shepherd button types', function() {
+    test('returning an object with an `action` handler if a supported built-in button "type" is specified', async function(assert) {
+      assert.expect(3);
+
+      const context = {
+        next() {
+          assert.ok(true, 'Action was called in calling context');
+        }
+      };
+
+      const buttonOpts = {
+        type: 'next',
+        classes: 'foo',
+        text: 'Suivant!'
+      };
+
+      const button = makeButton.call(context, buttonOpts);
+
+      assert.equal(button.classes, buttonOpts.classes);
+      assert.equal(button.text, buttonOpts.text);
+
+      button.action();
+    });
+
+
+    test('Throwing an error if the built-in button "type" specified is not supported', async function(assert) {
+      const badButtonOpts = {
+        type: 'cipher',
+        classes: 'foo',
+        text: 'Encrypt'
+      };
+      const goodButtonOpts = {
+        type: 'next',
+        classes: 'foo',
+        text: 'Encrypt'
+      };
+
+      assert.throws(() => makeButton(badButtonOpts));
+
+      assert.equal(makeButton(goodButtonOpts).text, goodButtonOpts.text);
+      assert.equal(makeButton(goodButtonOpts).classes, goodButtonOpts.classes);
+    });
+  });
+});