From f35bf59e385e15449ae1080683c8a46a83b3dd42 Mon Sep 17 00:00:00 2001
From: raytiley <raytiley@gmail.com>
Date: Sat, 30 Jan 2016 16:18:42 -0500
Subject: [PATCH] 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 | 12 ++++-
 testem.json                                 |  6 ++-
 tests/unit/raf-test.js                      | 52 +++++++++++++++++++++
 tests/unit/scroll-top-test.js               | 14 ++++--
 4 files changed, 76 insertions(+), 8 deletions(-)
 create mode 100644 tests/unit/raf-test.js

diff --git a/addon/components/ember-native-scrollable.js b/addon/components/ember-native-scrollable.js
index a0c71f52..3398129a 100644
--- a/addon/components/ember-native-scrollable.js
+++ b/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;
     }
   },
diff --git a/testem.json b/testem.json
index e02e4f0a..2ace8ad8 100644
--- a/testem.json
+++ b/testem.json
@@ -4,11 +4,13 @@
   "disable_watching": true,
   "launch_in_ci": [
     "Chrome",
-    "Firefox"
+    "Firefox",
+    "PhantomJS"
   ],
   "launch_in_dev": [
     "Chrome",
     "Firefox",
-    "Safari"
+    "Safari",
+    "PhantomJS"
   ]
 }
diff --git a/tests/unit/raf-test.js b/tests/unit/raf-test.js
new file mode 100644
index 00000000..061e3976
--- /dev/null
+++ b/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});
+});
\ No newline at end of file
diff --git a/tests/unit/scroll-top-test.js b/tests/unit/scroll-top-test.js
index 45f0c567..d6d852ce 100644
--- a/tests/unit/scroll-top-test.js
+++ b/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);
       });
     });