Use rootElement, if defined, rather than document.body (#295)

* Use rootElement, if defined, rather than document.body This will help alleviate issues with testing, where the tour is added to the body, rather than the testing container. * Wrap appendTo in tippyOptions * Disable animations in the test environment, to ensure timing is correct * Remove document.querySelector from test clicks
RobbieTheWagner · Apr 5, 2019 · b50b89b · b50b89b
1 parent 2745dd4
commit b50b89b
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 6 deletions.
diff --git a/addon/services/tour.js b/addon/services/tour.js
@@ -3,6 +3,7 @@ import { get, set } from '@ember/object';
 import { isEmpty, isPresent } from '@ember/utils';
 import Service from '@ember/service';
 import Evented from '@ember/object/evented';
+import { getOwner } from '@ember/application';
 import { bind, later } from '@ember/runloop';
 import { normalizeAttachTo } from '../utils/attachTo';
 import { makeButton } from '../utils/buttons';
@@ -132,6 +133,18 @@ export default Service.extend(Evented, {
     const tourName = get(this, 'tourName');
     const useModalOverlay = get(this, 'modal');
 
+    // Ensure `tippyOptions` exists on `defaultStepOptions`
+    defaultStepOptions.tippyOptions = defaultStepOptions.tippyOptions || {};
+
+    let { rootElement } = getOwner(this);
+    if (typeof rootElement === 'string') {
+      rootElement = document.querySelector(rootElement);
+    }
+
+    if (rootElement && !defaultStepOptions.tippyOptions.appendTo) {
+      defaultStepOptions.tippyOptions.appendTo = rootElement;
+    }
+
     const tourObject = new Shepherd.Tour({
       confirmCancel,
       confirmCancelMessage,

diff --git a/tests/acceptance/ember-shepherd-test.js b/tests/acceptance/ember-shepherd-test.js
@@ -70,7 +70,7 @@ module('Acceptance | Tour functionality tests', function(hooks) {
 
       assert.ok(document.body.classList.contains('shepherd-active'), 'Body has class of shepherd-active, when shepherd becomes active');
 
-      await click(document.querySelector('.shepherd-content a.shepherd-cancel-link'));
+      await click('.shepherd-content a.shepherd-cancel-link');
 
       assert.notOk(document.body.classList.contains('shepherd-active'), 'Body does not have class of shepherd-active, when shepherd becomes inactive');
     });
@@ -249,7 +249,7 @@ module('Acceptance | Tour functionality tests', function(hooks) {
       assert.ok(document.querySelector('.button-two'), 'tour button two is visible');
       assert.ok(document.querySelector('.button-three'), 'tour button three is visible');
 
-      await click(document.querySelector('.button-two'));
+      await click('.button-two');
 
       assert.ok(buttonActionCalled, 'button action triggered');
     });
@@ -269,9 +269,9 @@ module('Acceptance | Tour functionality tests', function(hooks) {
 
       await tour.start();
 
-      await click(document.querySelector('.shepherd-content .next-button'));
+      await click('.shepherd-content .next-button');
 
-      await click(document.querySelector('.shepherd-content .next-button'));
+      await click('.shepherd-content .next-button');
 
       assert.ok(document.querySelector('#ember-testing-container').scrollTop > 0, 'Scrolled down correctly');
     });
@@ -308,7 +308,7 @@ module('Acceptance | Tour functionality tests', function(hooks) {
       assert.equal(document.querySelector('#ember-testing-container').scrollTop, 0, 'Scroll is initially 0');
 
       await tour.start();
-      await click(document.querySelector('.shepherd-content .next-button'));
+      await click('.shepherd-content .next-button');
     });
 
     test('scrollTo works without a custom scrollToHandler', async function(assert) {
@@ -325,7 +325,7 @@ module('Acceptance | Tour functionality tests', function(hooks) {
 
       await tour.start();
 
-      await click(document.querySelector('.shepherd-content .next-button'));
+      await click('.shepherd-content .next-button');
 
       assert.ok(document.querySelector('#ember-testing-container').scrollTop > 0, 'Scrolled correctly');
     });

diff --git a/tests/dummy/app/routes/application.js b/tests/dummy/app/routes/application.js
@@ -17,6 +17,14 @@ export default Route.extend({
     tour.set('modal', true);
     tour.set('confirmCancel', false);
 
+    // Disable animations in the test environment, to ensure timing is correct
+    if (config.environment === 'test') {
+      tour.set('defaultStepOptions.tippyOptions', {
+        delay: 0,
+        duration: 0
+      });
+    }
+
     tour.addSteps(defaultSteps);
 
     tour.on('cancel', () => {