Fallback to setTimeout if requestAnimationFrame is not present

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

The weirdness in the test is because there is no way currently to make sure the component is cleared and destroyed before the module's teardown hook is called. Wrapping the component in an if is a workaround until this: https://github.com/switchfly/ember-test-helpers/pull/147/files lands.

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,52 @@
+import Ember from 'ember';
+import { test, moduleForComponent } from 'ember-qunit';
+import { generateContent, sortItemsByPosition } from '../helpers/helpers';
+import hbs from 'htmlbars-inline-precompile';
+
+let originalRaf = window.requestAnimationFrame;
+
+let template = hbs`{{#if showComponent}}
+<div style={{size-to-style width height}}>
+{{#ember-collection
+    items=content
+    cell-layout=(fixed-grid-layout itemWidth itemHeight)
+    estimated-width=width
+    estimated-height=height
+    scroll-left=offsetX
+    scroll-top=offsetY
+    buffer=buffer
+    class="ember-collection"
+    as |item| ~}}
+  <div class="list-item">{{item.name}}</div>
+{{~/ember-collection~}}
+</div>
+{{/if}}`;
+
+moduleForComponent('ember-collection', 'raf', {
+  integration: true,
+  setup: function() {
+    window.requestAnimationFrame = undefined;
+  },
+  teardown: function() {
+    window.requestAnimationFrame = originalRaf;
+  }
+});
+
+test('works without requestAnimationFrame', function(assert) {
+
+  var width = 150, height = 500, itemWidth = 50, itemHeight = 50;
+  var offsetY = 100;
+  var content = generateContent(5);
+
+  this.setProperties({ width, height, itemWidth, itemHeight, content, offsetY, showComponent: true });
+  this.render(template);
+  var positionSorted = sortItemsByPosition(this);
+
+  assert.equal(
+    Ember.$(positionSorted[0]).text().trim(),
+    "Item 1", "We rendered without requestAnimationFrame"
+  );
+
+  // Force the component to be torn down.
+  this.setProperties({showComponent: false});
+});

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);
       });
     });