Replace steps observer with manual addSteps method

README.md

@@ -119,12 +119,12 @@ this.get('tour').set('requiredElements', [
 > **default value:** `[]`
 
 
-### steps
+### addSteps
 
-You will need to define a steps object to set on the tour service of the following form:
+You must pass an array of steps to `addSteps`, something like this:
 
 ```js
-this.get('tour').set('steps', [
+this.get('tour').addSteps([
   {
     id: 'intro',
     options: {

addon/services/tour.js

@@ -1,5 +1,5 @@
-/* eslint-disable ember/avoid-leaking-state-in-ember-objects, ember/no-observers */
-import { get, observer, set } from '@ember/object';
+/* eslint-disable ember/avoid-leaking-state-in-ember-objects */
+import { get, set } from '@ember/object';
 import { isEmpty, isPresent } from '@ember/utils';
 import Service from '@ember/service';
 import Evented from '@ember/object/evented';
@@ -214,14 +214,13 @@ export default Service.extend(Evented, {
     return allElementsPresent;
   },
 
-  // TODO: Figure out how to use a computed instead of an observer here
   /**
-   * Create a tour object based on the current configuration
+   * Take a set of steps and create a tour object based on the current configuration
+   * @param {Array} steps An array of steps
    * @private
    */
-  stepsChange: observer('steps', function() {
+  addSteps(steps) {
     this._initialize();
-    const steps = get(this, 'steps');
     const tour = get(this, 'tourObject');
 
     // Return nothing if there are no steps
@@ -287,9 +286,22 @@ export default Service.extend(Evented, {
           }, 50);
         };
       }
-
     });
-  }),
+  },
+
+  /**
+   * Add resize and scroll listeners to window
+   * @private
+   */
+  _addStepEventListeners() {
+    if (typeof this._onScreenChange === 'function') {
+      window.removeEventListener('resize', this._onScreenChange, false);
+      window.removeEventListener('scroll', this._onScreenChange, false);
+    }
+
+    window.addEventListener('resize', this._onScreenChange, false);
+    window.addEventListener('scroll', this._onScreenChange, false);
+  },
 
   _initModalOverlay() {
     if (!this._modalOverlayElem) {
@@ -342,19 +354,5 @@ export default Service.extend(Evented, {
     if (this._modalOverlayElem) {
       this._modalOverlayElem.style.display = show ? 'block' : 'none';
     }
-  },
-
-  /**
-   * Add resize and scroll listeners to window
-   * @private
-   */
-  _addStepEventListeners() {
-    if (typeof this._onScreenChange === 'function') {
-      window.removeEventListener('resize', this._onScreenChange, false);
-      window.removeEventListener('scroll', this._onScreenChange, false);
-    }
-
-    window.addEventListener('resize', this._onScreenChange, false);
-    window.addEventListener('scroll', this._onScreenChange, false);
   }
 });

tests/acceptance/ember-shepherd-test.js

@@ -56,7 +56,7 @@ module('Acceptance | Tour functionality tests', function(hooks) {
       await visit('/');
 
       tour.set('defaultStepOptions', defaultStepOptions);
-      tour.set('steps', steps);
+      tour.addSteps(steps);
 
       await click('.toggleHelpModal');
 
@@ -130,7 +130,7 @@ module('Acceptance | Tour functionality tests', function(hooks) {
 
       await visit('/');
 
-      tour.set('steps', steps);
+      tour.addSteps(steps);
       tour.set('modal', true);
 
       await click('.toggleHelpModal');
@@ -162,7 +162,7 @@ module('Acceptance | Tour functionality tests', function(hooks) {
 
       await visit('/');
 
-      tour.set('steps', steps);
+      tour.addSteps(steps);
 
       await click('.toggleHelpNonmodal');
 
@@ -195,7 +195,7 @@ module('Acceptance | Tour functionality tests', function(hooks) {
 
       await visit('/');
 
-      tour.set('steps', stepsWithoutClasses);
+      tour.addSteps(stepsWithoutClasses);
 
       await click('.toggleHelpModal');
 
@@ -219,7 +219,7 @@ module('Acceptance | Tour functionality tests', function(hooks) {
         }
       }];
 
-      tour.set('steps', steps);
+      tour.addSteps(steps);
 
       await visit('/');
 
@@ -247,7 +247,7 @@ module('Acceptance | Tour functionality tests', function(hooks) {
         }
       }];
 
-      tour.set('steps', steps);
+      tour.addSteps(steps);
 
       await click('.toggleHelpModal');
 
@@ -288,7 +288,7 @@ module('Acceptance | Tour functionality tests', function(hooks) {
 
       await visit('/');
 
-      tour.set('steps', steps);
+      tour.addSteps(steps);
 
       await click('.toggleHelpModal');
 
@@ -331,7 +331,7 @@ module('Acceptance | Tour functionality tests', function(hooks) {
 
       await visit('/');
 
-      tour.set('steps', steps);
+      tour.addSteps(steps);
       tour.set('modal', true);
 
       await click('.toggleHelpModal');
@@ -402,7 +402,7 @@ module('Acceptance | Tour functionality tests', function(hooks) {
       // Visit route
       await visit('/');
 
-      tour.set('steps', steps);
+      tour.addSteps(steps);
 
       document.querySelector('#ember-testing-container').scrollTop = 0;
       assert.equal(document.querySelector('#ember-testing-container').scrollTop, 0, 'Scroll is initially 0');

tests/dummy/app/routes/application.js

@@ -16,7 +16,7 @@ export default Route.extend({
     tour.set('disableScroll', this.get('disableScroll'));
     tour.set('modal', true);
     tour.set('confirmCancel', false);
-    tour.set('steps', defaultSteps);
+    tour.addSteps(defaultSteps);
     tour.set('requiredElements', [
       {
         selector: '.first-element',