Fallback to setTimeout if requestAnimationFrame is not present

This is mostly to allow tests to run in PhantomJS without requring a 'requestAnimationFrame' pollyfill. Closes adopted-ember-addons#43.

addon/components/ember-native-scrollable.js

@@ -76,13 +76,21 @@ export default Ember.Component.extend({
       nextStep();
     }
     function nextStep() {
-      component._animationFrame = requestAnimationFrame(step);
+      if (window.requestAnimationFrame) {
+        component._animationFrame = requestAnimationFrame(step);
+      } else {
+        component._animationFrame = setTimeout(step, 16);
+      }
     }
     nextStep();
   },
   cancelScrollCheck() {
     if (this._animationFrame) {
-      cancelAnimationFrame(this._animationFrame);
+      if (window.requestAnimationFrame) {
+        cancelAnimationFrame(this._animationFrame);
+      } else {
+        clearTimeout(this._animationFrame);
+      }
       this._animationFrame = undefined;
     }
   },

testem.json

@@ -4,11 +4,13 @@
   "disable_watching": true,
   "launch_in_ci": [
     "Chrome",
-    "Firefox"
+    "Firefox",
+    "PhantomJS"
   ],
   "launch_in_dev": [
     "Chrome",
     "Firefox",
-    "Safari"
+    "Safari",
+    "PhantomJS"
   ]
 }

tests/unit/raf-test.js

@@ -0,0 +1,32 @@
+import Ember from 'ember';
+import { test, moduleForComponent } from 'ember-qunit';
+import wait from 'ember-test-helpers/wait';
+import { generateContent, sortItemsByPosition } from '../helpers/helpers';
+import template from '../templates/fixed-grid';
+
+moduleForComponent('ember-collection', 'raf', {
+  integration: true,
+});
+
+test('works without requestAnimationFrame', function(assert) {
+  var originalRaf = window.requestAnimationFrame;
+  window.requestAnimationFrame = undefined;
+
+  var width = 150, height = 500, itemWidth = 50, itemHeight = 50;
+  var offsetY = 100;
+  var content = generateContent(5);
+
+  this.setProperties({ width, height, itemWidth, itemHeight, content, offsetY });
+  this.render(template);
+  var positionSorted = sortItemsByPosition(this);
+
+  assert.equal(
+    Ember.$(positionSorted[0]).text().trim(),
+    "Item 1", "We rendered without requestAnimationFrame"
+  );
+
+  wait().
+    then(function() {
+        window.requestAnimationFrame = originalRaf;
+    });
+});

tests/unit/scroll-top-test.js

@@ -1,9 +1,15 @@
-/* global requestAnimationFrame */
 import Ember from 'ember';
 import { test, moduleForComponent } from 'ember-qunit';
 import { findScrollable, generateContent, sortItemsByPosition, checkContent } from '../helpers/helpers';
 import template from '../templates/fixed-grid';
 
+var raf = window.requestAnimationFrame;
+if (raf === undefined) {
+    raf = function(callback) {
+        setTimeout(callback, 16);
+    };
+}
+
 var RSVP = Ember.RSVP;
 
 var size;
@@ -76,7 +82,7 @@ test("scroll but within content length", function(assert){
   });
 
   return new RSVP.Promise(function (resolve) {
-    requestAnimationFrame(() => {
+    raf(() => {
       Ember.run(resolve);
     });
   }).then(() => {
@@ -112,7 +118,7 @@ test("scroll within content length, beyond buffer", function(assert){
 
   findScrollable(this).prop('scrollTop', 150);
   return new RSVP.Promise(function (resolve) {
-    requestAnimationFrame(() => {
+    raf(() => {
       Ember.run(resolve);
     });
   }).then(() => {
@@ -130,7 +136,7 @@ test("scroll within content length, beyond buffer", function(assert){
       this.set('width', 200+scrollbarSize());
     });
     return new RSVP.Promise(function (resolve) {
-      requestAnimationFrame(() => {
+      raf(() => {
         Ember.run(resolve);
       });
     });