diff --git a/addon/services/tour.js b/addon/services/tour.js index 41129324..53cbdb95 100644 --- 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 index e9f91c82..86d1f989 100644 --- 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 index 146aac48..419ef476 100644 --- 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', () => {