diff --git a/addon-test-support/@percy/ember/index.js b/addon-test-support/@percy/ember/index.js index 073f339a..fe6a9fc7 100644 --- a/addon-test-support/@percy/ember/index.js +++ b/addon-test-support/@percy/ember/index.js @@ -26,11 +26,10 @@ function generateName(assertOrTestOrName) { } } -// Helper to scope a DOM snapshot to the ember-testing container -function scopeDOM(dom, { scope, domTransformation }) { - if (domTransformation) domTransformation(dom); - // we only want to capture the ember application, not the testing UI - let $scoped = dom.querySelector(scope || '#ember-testing'); +// Helper to scope a DOM snapshot to the ember-testing container to capture the +// ember application without the testing UI +function scopeDOM(scope, dom) { + let $scoped = dom.querySelector(scope); let $body = dom.querySelector('body'); if (!$scoped) return; @@ -45,11 +44,16 @@ function scopeDOM(dom, { scope, domTransformation }) { $body.setAttribute(name, value); } - // remove ember-testing styles by removing the id - dom.querySelector('#ember-testing').removeAttribute('id'); + // remove #ember-testing styles by removing the id + dom.querySelector('#ember-testing')?.removeAttribute('id'); } -export default async function percySnapshot(name, options = {}) { +export default async function percySnapshot(name, { + // separate SDK specific options from snapshot options + emberTestingScope = '#ember-testing', + domTransformation, + ...options +} = {}) { // Check if Percy is enabled if (!(await utils.isPercyEnabled())) return; let log = utils.logger('ember'); @@ -65,7 +69,9 @@ export default async function percySnapshot(name, options = {}) { // Serialize and capture the DOM let domSnapshot = window.PercyDOM.serialize({ enableJavaScript: options.enableJavaScript, - domTransformation: dom => scopeDOM(dom, options) + domTransformation: dom => scopeDOM(emberTestingScope, ( + domTransformation ? domTransformation(dom) : dom + )) }); // Post the DOM to the snapshot endpoint with snapshot options and other info diff --git a/tests/acceptance/index-test.js b/tests/acceptance/index-test.js index bc0718a0..5529b434 100644 --- a/tests/acceptance/index-test.js +++ b/tests/acceptance/index-test.js @@ -87,4 +87,26 @@ module('percySnapshot', hooks => { 'Could not take DOM snapshot "Snapshot 1"' ]); }); + + module('with an alternate ember-testing scope', hooks => { + let $scope; + + hooks.beforeEach(() => { + $scope = document.querySelector('#ember-testing'); + $scope.id = 'testing-container'; + }); + + hooks.afterEach(() => { + $scope.id = 'ember-testing'; + }); + + test('uses the alternate scope', async assert => { + await percySnapshot('Snapshot 1', { + emberTestingScope: '#testing-container' + }); + + assert.matches((await helpers.get('requests'))[1].body.domSnapshot, ( + //)); + }); + }); });