Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

💥 Rename Ember specific scope option #631

Merged
merged 1 commit into from
Aug 23, 2022
Merged

💥 Rename Ember specific scope option #631

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 15 additions & 9 deletions addon-test-support/@percy/ember/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Expand All @@ -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');
Expand All @@ -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
Expand Down
22 changes: 22 additions & 0 deletions tests/acceptance/index-test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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, (
/<body id="testing-container" class="ember-application">/));
});
});
});