fix(perf) manually add run loop to RAF calls

tylerturdenpants · Sep 20, 2017 · c007f88 · c007f88
1 parent d4160ca
commit c007f88
Show file tree

Hide file tree

Showing 15 changed files with 53 additions and 147 deletions.
diff --git a/addon/components/ember-attacher-inner.js b/addon/components/ember-attacher-inner.js
@@ -1,6 +1,6 @@
 import Component from '@ember/component';
 import layout from '../templates/components/ember-attacher-inner';
-import { cancel, debounce, later, next } from '@ember/runloop';
+import { cancel, debounce, later, next, run } from '@ember/runloop';
 import { computed, observer } from '@ember/object';
 import { htmlSafe } from '@ember/string';
 
@@ -186,7 +186,7 @@ export default Component.extend({
       this._delayedVisibilityToggle = later(this, () => {
         this._animationTimeout = requestAnimationFrame(() => {
           if (!this.isDestroyed && !this.isDestroying) {
-            this.set('isVisible', isVisible);
+            run(() => this.set('isVisible', isVisible));
 
             if (onChange) {
               onChange(isVisible);
@@ -262,9 +262,10 @@ export default Component.extend({
         const showDuration = parseInt(this.get('showDuration'));
 
         this.element.style.transitionDuration = `${showDuration}ms`;
-        this.set('_transitionDuration', showDuration);
-
-        this.set('_isStartingAnimation', true);
+        run(() => {
+          this.set('_transitionDuration', showDuration);
+          this.set('_isStartingAnimation', true);
+        });
 
         this._isHidden = false;
       });
@@ -296,12 +297,14 @@ export default Component.extend({
       const hideDuration = parseInt(this.get('hideDuration'));
 
       this.element.style.transitionDuration = `${hideDuration}ms`;
-      this.set('_transitionDuration', hideDuration);
 
-      this.set('_isStartingAnimation', false);
+      run(() => {
+        this.set('_transitionDuration', hideDuration);
+        this.set('_isStartingAnimation', false);
 
-      // Wait for any animations to complete before hiding the attachment
-      this._setIsVisibleAfterDelay(false, hideDuration);
+        // Wait for any animations to complete before hiding the attachment
+        this._setIsVisibleAfterDelay(false, hideDuration);
+      });
 
       this.get('disableEventListeners')();
 

diff --git a/config/ember-try.js b/config/ember-try.js
@@ -1,5 +1,6 @@
 /* eslint-env node */
 module.exports = {
+  useYarn: true,
   scenarios: [
     {
       name: 'ember-lts-2.12',

diff --git a/ember-cli-build.js b/ember-cli-build.js
@@ -4,11 +4,9 @@
 const EmberAddon = require('ember-cli/lib/broccoli/ember-addon');
 
 module.exports = function(defaults) {
-  const options = {};
-
-  if (defaults.project.findAddonByName('ember-native-dom-event-dispatcher')) {
-    options.vendorFiles = { 'jquery.js': null };
-  }
+  const options = {
+    vendorFiles: { 'jquery.js': null }
+  };
 
   const app = new EmberAddon(defaults, options);
 

diff --git a/package.json b/package.json
@@ -58,6 +58,7 @@
     "ember-native-dom-event-dispatcher": "^0.6.3",
     "ember-native-dom-helpers": "^0.5.3",
     "ember-power-select": "^1.9.6",
+    "ember-raf-test-waiter": "^0.1.0",
     "ember-resolver": "^4.5.0",
     "ember-source": "~2.15.0",
     "flexi": "^2.0.1",

diff --git a/tests/integration/components/ember-attacher/hide-on-blur-test.js b/tests/integration/components/ember-attacher/hide-on-blur-test.js
@@ -1,5 +1,4 @@
 import hbs from 'htmlbars-inline-precompile';
-import wait from 'ember-test-helpers/wait';
 import { click, find, focus } from 'ember-native-dom-helpers';
 import { moduleForComponent, test } from 'ember-qunit';
 
@@ -28,17 +27,12 @@ test('hides when the target loses focus', async function(assert) {
 
   assert.equal(innerAttacher.style.display, 'none', 'Initially hidden');
 
-  await click(find('#click-toggle'));
-  await wait();
-  await wait();
+  await click('#click-toggle');
 
   assert.equal(innerAttacher.style.display, '', 'Now shown');
 
   await focus('#focus-me');
 
-  await wait();
-  await wait();
-
   assert.equal(innerAttacher.style.display, 'none', 'hidden again');
 });
 
@@ -63,17 +57,12 @@ test('with interactive=false: hides when the attachment gains focus', async func
 
   assert.equal(innerAttacher.style.display, 'none', 'Initially hidden');
 
-  await click(find('#click-toggle'));
-  await wait();
-  await wait();
+  await click('#click-toggle');
 
   assert.equal(innerAttacher.style.display, '', 'Now shown');
 
   await focus('#attachment-focus-me');
 
-  await wait();
-  await wait();
-
   assert.equal(innerAttacher.style.display, 'none', 'hidden again');
 });
 
@@ -99,23 +88,15 @@ test("with interactive=true: doesn't hide when attachment gains focus", async fu
 
   assert.equal(innerAttacher.style.display, 'none', 'Initially hidden');
 
-  await click(find('#click-toggle'));
-  await wait();
-  await wait();
+  await click('#click-toggle');
 
   assert.equal(innerAttacher.style.display, '', 'Now shown');
 
   await focus('#attachment-focus-me');
 
-  await wait();
-  await wait();
-
   assert.equal(innerAttacher.style.display, '', 'Still shown');
 
   await focus('#outer-focus-me');
 
-  await wait();
-  await wait();
-
   assert.equal(innerAttacher.style.display, '', 'Hidden again');
 });
diff --git a/tests/integration/components/ember-attacher/hide-on-click-test.js b/tests/integration/components/ember-attacher/hide-on-click-test.js
@@ -1,5 +1,4 @@
 import hbs from 'htmlbars-inline-precompile';
-import wait from 'ember-test-helpers/wait';
 import { click, find } from 'ember-native-dom-helpers';
 import { moduleForComponent, test } from 'ember-qunit';
 
@@ -22,16 +21,11 @@ test('hides when the target is clicked', async function(assert) {
     </button>
   `);
 
-  // Wait for the initial show() RAF to complete;
-  await wait();
-
   const innerAttacher = find('#attachment > .inner');
 
   assert.equal(innerAttacher.style.display, '', 'Initially shown');
 
-  await click(find('#click-toggle'));
-  await wait();
-  await wait();
+  await click('#click-toggle');
 
   assert.equal(innerAttacher.style.display, 'none', 'Now hidden');
 });
diff --git a/tests/integration/components/ember-attacher/hide-on-clickout-test.js b/tests/integration/components/ember-attacher/hide-on-clickout-test.js
@@ -1,5 +1,4 @@
 import hbs from 'htmlbars-inline-precompile';
-import wait from 'ember-test-helpers/wait';
 import { click, find } from 'ember-native-dom-helpers';
 import { moduleForComponent, test } from 'ember-qunit';
 
@@ -22,24 +21,16 @@ test('hides when an element outside the target is clicked', async function(asser
     </div>
   `);
 
-  // Wait for initial show animation to complete
-  await wait();
-  await wait();
-
   const innerAttacher = find('#attachment > .inner');
 
   assert.equal(innerAttacher.style.display, '', 'Initially shown');
 
   // Make sure the attachment is still shown when the target is clicked
-  await click(find('#parent'));
-  await wait();
-  await wait();
+  await click('#parent');
 
   assert.equal(innerAttacher.style.display, '', 'Still shown');
 
-  await click(find('#focus-me'));
-  await wait();
-  await wait();
+  await click('#focus-me');
 
   assert.equal(innerAttacher.style.display, 'none', 'Now hidden');
 });
@@ -57,16 +48,11 @@ test('with interactive=false: hides when attachment is clicked', async function(
     </div>
   `);
 
-  // Wait for initial show animation to complete
-  await wait();
-
   const innerAttacher = find('#attachment > .inner');
 
   assert.equal(innerAttacher.style.display, '', 'Initially shown');
 
   await click(innerAttacher);
-  await wait();
-  await wait();
 
   assert.equal(innerAttacher.style.display, 'none', 'Now hidden');
 });
@@ -87,31 +73,22 @@ test("with interactive=true: doesn't hide when attachment is clicked", async fun
     </div>
   `);
 
-  // Wait for initial show animation to complete
-  await wait();
-
   const innerAttacher = find('#attachment > .inner');
 
   assert.equal(innerAttacher.style.display, '', 'Initially shown');
 
   // Make sure attachment stays shown when attachment clicked
   await click(innerAttacher);
-  await wait();
-  await wait();
 
   assert.equal(innerAttacher.style.display, '', 'Still shown');
 
   // Make sure attachment stays shown when target clicked
-  await click(find('#parent'));
-  await wait();
-  await wait();
+  await click('#parent');
 
   assert.equal(innerAttacher.style.display, '', 'Still shown');
 
   // Make sure attachment is hidden once an element outside target or attachment is clicked
-  await click(find('#focus-me'));
-  await wait();
-  await wait();
+  await click('#focus-me');
 
   assert.equal(innerAttacher.style.display, 'none', 'Now hidden');
 });
diff --git a/tests/integration/components/ember-attacher/hide-on-escapekey-test.js b/tests/integration/components/ember-attacher/hide-on-escapekey-test.js
@@ -1,5 +1,4 @@
 import hbs from 'htmlbars-inline-precompile';
-import wait from 'ember-test-helpers/wait';
 import { find, keyEvent } from 'ember-native-dom-helpers';
 import { moduleForComponent, test } from 'ember-qunit';
 
@@ -20,17 +19,12 @@ test('hides when the escape key is pressed', async function(assert) {
     </div>
   `);
 
-  // Wait for initial show animation to complete
-  await wait();
-
   const innerAttacher = find('#attachment > .inner');
 
   assert.equal(innerAttacher.style.display, '', 'Initially shown');
 
   // Press escape key (keyCode === 27)
   await keyEvent(document, 'keydown', 27);
-  await wait();
-  await wait();
 
   assert.equal(innerAttacher.style.display, 'none', 'Now hidden');
 });
diff --git a/tests/integration/components/ember-attacher/hide-on-focusout-test.js b/tests/integration/components/ember-attacher/hide-on-focusout-test.js
@@ -1,6 +1,5 @@
 import hbs from 'htmlbars-inline-precompile';
-import wait from 'ember-test-helpers/wait';
-import { click, find } from 'ember-native-dom-helpers';
+import { click, find, focus } from 'ember-native-dom-helpers';
 import { moduleForComponent, test } from 'ember-qunit';
 
 moduleForComponent('ember-attacher', 'Integration | Component | hideOn "focusout"', {
@@ -28,16 +27,11 @@ test('hides when the target loses focus', async function(assert) {
 
   assert.equal(innerAttacher.style.display, 'none', 'Initially hidden');
 
-  await click(find('#click-toggle'));
-  await wait();
-  await wait();
+  await click('#click-toggle');
 
   assert.equal(innerAttacher.style.display, '', 'Now shown');
 
-  document.getElementById('focus-me').focus();
-
-  await wait();
-  await wait();
+  await focus('#focus-me');
 
   assert.equal(innerAttacher.style.display, 'none', 'hidden again');
 });
@@ -63,17 +57,11 @@ test('with interactive=false: hides when the attachment gains focus', async func
 
   assert.equal(innerAttacher.style.display, 'none', 'Initially hidden');
 
-  await click(find('#click-toggle'));
-  await wait();
-  await wait();
+  await click('#click-toggle');
 
   assert.equal(innerAttacher.style.display, '', 'Now shown');
 
-  document.getElementById('attachment-focus-me').focus();
-
-  // Make sure all deferables finish
-  await wait();
-  await wait();
+  await focus('#attachment-focus-me');
 
   assert.equal(innerAttacher.style.display, 'none', 'hidden again');
 });
@@ -100,23 +88,15 @@ test("with interactive=true: doesn't hide when the attachment gains focus", asyn
 
   assert.equal(innerAttacher.style.display, 'none', 'Initially hidden');
 
-  await click(find('#click-toggle'));
-  await wait();
-  await wait();
+  await click('#click-toggle');
 
   assert.equal(innerAttacher.style.display, '', 'Now shown');
 
-  document.getElementById('attachment-focus-me').focus();
-
-  await wait();
-  await wait();
+  await focus('#attachment-focus-me');
 
   assert.equal(innerAttacher.style.display, '', 'Still shown');
 
-  document.getElementById('outer-focus-me').focus();
-
-  await wait();
-  await wait();
+  await focus('#outer-focus-me');
 
   assert.equal(innerAttacher.style.display, '', 'Hidden again');
 });