Test render methods

test/ol.html

@@ -84,6 +84,8 @@
   <script type="text/javascript" src="spec/ol/tilerange.test.js"></script>
   <script type="text/javascript" src="spec/ol/tileurlfunction.test.js"></script>
   <script type="text/javascript" src="spec/ol/control/control.test.js"></script>
+  <script type="text/javascript" src="spec/ol/renderer/map.test.js"></script>
+  <script type="text/javascript" src="spec/ol/renderer/dom/map.test.js"></script>
 
   <script type="text/javascript">
 

test/spec/ol/map.test.js

@@ -135,4 +135,102 @@ describe('ol.Map', function() {
       });
     });
   });
+
+  describe('#render', function() {
+
+    var layer, map;
+    beforeEach(function() {
+      // always use setTimeout based shim for requestAnimationFrame
+      spyOn(goog.async.AnimationDelay.prototype, 'getRaf_')
+          .andCallFake(function() {return null;});
+
+      layer = new ol.layer.TileLayer({
+        source: new ol.source.XYZ({
+          url: 'foo',
+          maxZoom: 2
+        })
+      });
+
+      map = new ol.Map({
+        center: new ol.Coordinate(0, 0),
+        layers: new ol.Collection([layer]),
+        renderer: ol.RendererHint.DOM,
+        target: 'map',
+        zoom: 1
+      });
+    });
+
+    afterEach(function() {
+      map.dispose();
+      layer.dispose();
+    });
+
+    describe('callback', function() {
+
+      function quadInOut(t, b, c, d) {
+        if ((t /= d / 2) < 1) {
+          return c / 2 * t * t + b;
+        }
+        return -c / 2 * ((--t) * (t - 2) - 1) + b;
+      }
+
+      var duration = 500;
+      var destination = new ol.Coordinate(1000, 1000);
+
+      it('can set up an animation loop', function() {
+
+        var origin = map.getCenter();
+        var start = (new Date).getTime();
+        var x0 = origin.x;
+        var y0 = origin.y;
+        var dx = destination.x - origin.x;
+        var dy = destination.y - origin.y;
+
+        var o = {
+          callback: function() {
+            var dt = (new Date).getTime() - start;
+            var more = dt <= duration,
+                x, y;
+            if (more) {
+              x = quadInOut(dt, x0, dx, duration);
+              y = quadInOut(dt, y0, dy, duration);
+            } else {
+              x = destination.x;
+              y = destination.y;
+            }
+            map.setCenter(new ol.Coordinate(x, y));
+            return more;
+          }
+        };
+
+        spyOn(o, 'callback').andCallThrough();
+
+        map.render(o.callback);
+
+        // confirm that the center is somewhere between origin and destination
+        // after a short delay
+        waits(100);
+        runs(function() {
+          expect(o.callback).toHaveBeenCalled();
+          var loc = map.getCenter();
+          expect(loc.x).not.toEqual(origin.x);
+          expect(loc.y).not.toEqual(origin.y);
+          expect(loc.x).not.toEqual(destination.x);
+          expect(loc.y).not.toEqual(destination.y);
+        });
+
+        // confirm that the map has reached the destination after the duration
+        waits(duration);
+        runs(function() {
+          var loc = map.getCenter();
+          expect(loc.x).toEqual(destination.x);
+          expect(loc.y).toEqual(destination.y);
+        });
+
+      });
+
+    });
+
+  });
+
 });

test/spec/ol/renderer/dom/map.test.js

@@ -0,0 +1,107 @@
+describe('ol.renderer.dom.Map', function() {
+
+  var layer,
+      map,
+      prototype = ol.renderer.dom.Map.prototype;
+
+  beforeEach(function() {
+    // always use setTimeout based shim for requestAnimationFrame
+    spyOn(goog.async.AnimationDelay.prototype, 'getRaf_')
+        .andCallFake(function() {return null;});
+
+    // set up renderer spies
+    spyOn(prototype, 'render').andCallThrough();
+    spyOn(prototype, 'beforeRenderFrame').andCallThrough();
+    spyOn(prototype, 'renderFrame').andCallThrough();
+    spyOn(prototype, 'afterRenderFrame').andCallThrough();
+
+    layer = new ol.layer.TileLayer({
+      source: new ol.source.MapQuestOpenAerial()
+    });
+
+    map = new ol.Map({
+      center: new ol.Coordinate(0, 0),
+      layers: new ol.Collection([layer]),
+      renderer: ol.RendererHint.DOM,
+      target: 'map',
+      zoom: 1
+    });
+
+  });
+
+  afterEach(function() {
+    map.dispose();
+    layer.dispose();
+  });
+
+  describe('#render', function() {
+    it('is called immediately by ol.Map#render', function() {
+      map.render();
+
+      expect(prototype.render).toHaveBeenCalled();
+      expect(prototype.render).toHaveBeenCalledWith(undefined);
+    });
+
+    it('is passed the callback passed to ol.Map#render', function() {
+      function callback() {}
+      map.render(callback);
+
+      expect(prototype.render).toHaveBeenCalled();
+      expect(prototype.render).toHaveBeenCalledWith(callback);
+    });
+  });
+
+  describe('#renderFrame', function() {
+
+    it('is not called immediately from ol.Map#render', function() {
+      map.render();
+      var renderer = map.renderer_,
+          renderFrame = renderer.renderFrame,
+          afterRenderFrame = renderer.afterRenderFrame;
+
+      expect(prototype.renderFrame).not.toHaveBeenCalled();
+      expect(prototype.afterRenderFrame).not.toHaveBeenCalled();
+
+      waitsFor('afterRenderFrame to be called', 500, function() {
+        return prototype.afterRenderFrame.callCount > 0;
+      });
+
+      runs(function() {
+        expect(prototype.renderFrame).toHaveBeenCalled();
+      });
+    });
+
+    it('is not called multiple times when setting map properties', function() {
+      expect(prototype.renderFrame).not.toHaveBeenCalled();
+
+      var callCount = 0;
+
+      waitsFor('renderFrame to be called', 500, function() {
+        callCount = prototype.renderFrame.callCount;
+        return callCount > 0;
+      });
+
+      runs(function() {
+        expect(prototype.renderFrame).toHaveBeenCalled();
+        callCount = prototype.renderFrame.callCount;
+
+        // renderFrame is not called immediately after ol.Map#setCenter
+        map.setCenter(new ol.Coordinate(10, 10));
+        expect(prototype.renderFrame.callCount).toEqual(callCount);
+
+        // renderFrame is not called immediately after ol.Map#setResolution
+        map.setResolution(map.getResolution() / 2);
+        expect(prototype.renderFrame.callCount).toEqual(callCount);
+
+        // renderFrame is called after some delay
+        waitsFor('renderFrame to be called again', 500, function() {
+          return prototype.renderFrame.callCount > callCount;
+        });
+      });
+
+    });
+
+  });
+
+
+});

test/spec/ol/renderer/map.test.js

@@ -0,0 +1,35 @@
+describe('ol.renderer.Map', function() {
+
+  var map;
+
+  beforeEach(function() {
+    map = new ol.Map({
+      target: document.getElementById('map')
+    });
+
+    spyOn(map.renderer_, 'render').andCallThrough();
+  });
+
+  afterEach(function() {
+    map.dispose();
+  });
+
+  describe('#render', function() {
+    it('is called immediately by ol.Map#render', function() {
+      map.render();
+
+      var render = map.renderer_.render;
+      expect(render.callCount).toEqual(1);
+      expect(render).toHaveBeenCalledWith(undefined);
+    });
+
+    it('is passed the callback passed to ol.Map#render', function() {
+      function callback() {}
+      map.render(callback);
+
+      var render = map.renderer_.render;
+      expect(render.callCount).toEqual(1);
+      expect(render).toHaveBeenCalledWith(callback);
+    });
+  });
+});