Fix styles/attributes tied to ember-application container. (#54)

percy · Feb 21, 2018 · d2143d1 · d2143d1
1 parent 0a82959
commit d2143d1
Show file tree

Hide file tree

Showing 6 changed files with 43 additions and 4 deletions.
diff --git a/addon/snapshot.js b/addon/snapshot.js
@@ -26,7 +26,7 @@ function setAttributeValues(dom) {
 
   // Limit scope to inputs only as textareas do not retain their value when cloned
   let elems = dom.find(
-    `input[type=text], input[type=search], input[type=tel], input[type=url], input[type=email], 
+    `input[type=text], input[type=search], input[type=tel], input[type=url], input[type=email],
      input[type=password], input[type=number], input[type=checkbox], input[type=radio]`
   );
 
@@ -77,10 +77,19 @@ export function percySnapshot(name, options) {
   let scope = options.scope;
 
   // Create a full-page DOM snapshot from the current testing page.
-  // TODO(fotinakis): more memory-efficient way to do this?
   let domCopy = $('html').clone();
   let testingContainer = domCopy.find('#ember-testing');
 
+  // Copy attributes from Ember's rootElement to the DOM snapshot <body> tag. Some applications rely
+  // on setting attributes on the Ember rootElement (for example, to drive dynamic per-route
+  // styling). In tests these attributes are added to the #ember-testing container and would be lost
+  // in the DOM hoisting below, so we copy them to the to the snapshot's <body> tag to
+  // make sure that they persist in the DOM snapshot.
+  let attributesToCopy = testingContainer.prop('attributes');
+  $.each(attributesToCopy, function() {
+    domCopy.attr(this.name, this.value);
+  });
+
   if (scope) {
     snapshotRoot = testingContainer.find(scope);
   } else {

diff --git a/tests/acceptance/dummy-test.js b/tests/acceptance/dummy-test.js
@@ -43,3 +43,11 @@ test('enableJavaScript option can pass through', function(assert) {
   });
   percySnapshot(assert, {enableJavaScript: true});
 });
+
+test('attributes on rootElement are copied to the DOM snapshot', function(assert) {
+  visit('/test-route-styles');
+  andThen(function() {
+    assert.equal(currentURL(), '/test-route-styles');
+  });
+  percySnapshot(assert);
+});
diff --git a/tests/dummy/app/router.js b/tests/dummy/app/router.js
@@ -1,12 +1,19 @@
+import $ from 'jquery';
+import { on } from '@ember/object/evented';
 import EmberRouter from '@ember/routing/router';
 import config from './config/environment';
 
 const Router = EmberRouter.extend({
   location: config.locationType,
-  rootURL: config.rootURL
+  rootURL: config.rootURL,
+
+  addDataRoute: on('didTransition', function() {
+    $('.ember-application').attr('data-route', this.currentRouteName);
+  }),
 });
 
 Router.map(function() {
+  this.route('test-route-styles');
 });
 
 export default Router;
diff --git a/tests/dummy/app/styles/app.css b/tests/dummy/app/styles/app.css
@@ -1,6 +1,14 @@
+body {
+  font-size: 26px;
+}
+
 .DummyBox {
   background: lightblue;
   padding: 20px;
   width: 100%;
   height: 300px;
-}
+}
+
+[data-route="test-route-styles"] .DummyBox {
+  background: lightgreen;
+}
diff --git a/tests/dummy/app/templates/test-route-styles.hbs b/tests/dummy/app/templates/test-route-styles.hbs
@@ -0,0 +1,3 @@
+{{#dummy-box}}
+  This box should be green, styled by the body tag data-route attribute.
+{{/dummy-box}}
diff --git a/tests/helpers/destroy-app.js b/tests/helpers/destroy-app.js
@@ -1,5 +1,9 @@
 import { run } from '@ember/runloop';
+import $ from 'jquery';
 
 export default function destroyApp(application) {
+  // Strip data attributes added by the router so they don't leak between tests.
+  $('.ember-application').attr('data-route', null);
+
   run(application, 'destroy');
 }