Fix gallery navigation from interaction demo (#825)
[dygraphs.git] / auto_tests / tests / interaction_model.js
index 0992f0a..2015e11 100644 (file)
@@ -1,16 +1,16 @@
-/** 
+/**
  * @fileoverview Test cases for the interaction model.
  *
  * @author konigsberg@google.com (Robert Konigsbrg)
  */
-describe("interaction-model", function() {
 
-beforeEach(function() {
-  document.body.innerHTML = "<div id='graph'></div>";
-});
+import Dygraph from '../../src/dygraph';
+import DygraphInteraction from '../../src/dygraph-interaction-model';
+import DygraphOps from './DygraphOps';
 
-afterEach(function() {
-});
+describe("interaction-model", function() {
+
+cleanupAfterEach();
 
 var data1 = "X,Y\n" +
     "20,-1\n" +
@@ -19,15 +19,16 @@ var data1 = "X,Y\n" +
     "23,0\n";
 
 var data2 =
-    [[1, 10],
-    [2, 20],
-    [3, 30],
-    [4, 40],
-    [5, 120],
-    [6, 50],
-    [7, 70],
-    [8, 90],
-    [9, 50]];
+    "X,Y\n" +
+    "1,10\n" +
+    "2,20\n" +
+    "3,30\n" +
+    "4,40\n" +
+    "5,120\n" +
+    "6,50\n" +
+    "7,70\n" +
+    "8,90\n" +
+    "9,50\n";
 
 function getXLabels() {
   var x_labels = document.getElementsByClassName("dygraph-axis-label-x");
@@ -47,16 +48,16 @@ it('testPan', function() {
   DygraphOps.dispatchMouseMove(g, xRange[1], yRange[0]); // this is really necessary.
   DygraphOps.dispatchMouseUp(g, xRange[1], yRange[0]);
 
-  assert.equalsDelta(xRange, g.xAxisRange(), 0.2);
-  // assert.equalsDelta(originalYRange, g.yAxisRange(0), 0.2); // Not true, it's something in the middle.
+  assert.closeTo(xRange, g.xAxisRange(), 0.2);
+  // assert.closeTo(originalYRange, g.yAxisRange(0), 0.2); // Not true, it's something in the middle.
 
   var midX = (xRange[1] - xRange[0]) / 2;
   DygraphOps.dispatchMouseDown(g, midX, yRange[0]);
   DygraphOps.dispatchMouseMove(g, midX, yRange[1]); // this is really necessary.
   DygraphOps.dispatchMouseUp(g, midX, yRange[1]);
 
-  assert.equalsDelta(xRange, g.xAxisRange(), 0.2);
-  assert.equalsDelta(yRange, g.yAxisRange(0), 0.2);
+  assert.closeTo(xRange, g.xAxisRange(), 0.2);
+  assert.closeTo(yRange, g.yAxisRange(0), 0.2);
 });
 */
 
@@ -99,15 +100,15 @@ it('testClickCallbackIsCalledOnCustomPan', function() {
 
   function customDown(event, g, context) {
     context.initializeMouseDown(event, g, context);
-    Dygraph.startPan(event, g, context);
+    DygraphInteraction.startPan(event, g, context);
   }
 
   function customMove(event, g, context) {
-    Dygraph.movePan(event, g, context);
+    DygraphInteraction.movePan(event, g, context);
   }
 
   function customUp(event, g, context) {
-    Dygraph.endPan(event, g, context);
+    DygraphInteraction.endPan(event, g, context);
   }
 
   var opts = {
@@ -152,7 +153,7 @@ it('testClickCallbackIsCalledWithNonInteractiveModel', function() {
     width: 100,
     height : 100,
     clickCallback : clickCallback,
-    interactionModel : Dygraph.Interaction.nonInteractiveModel_
+    interactionModel : DygraphInteraction.nonInteractiveModel_
   };
 
   var graph = document.getElementById("graph");
@@ -169,15 +170,16 @@ it('testClickCallbackIsCalledWithNonInteractiveModel', function() {
  * A sanity test to ensure pointClickCallback is called.
  */
 it('testPointClickCallback', function() {
-  var clicked;
-  var g = new Dygraph(document.getElementById("graph"), data2, {
-    pointClickCallback : function(event, point) {
+  var clicked = null;
+  var g = new Dygraph('graph', data2, {
+    pointClickCallback: function(event, point) {
       clicked = point;
     }
   });
 
   clickAt(g, 4, 40);
 
+  assert.isNotNull(clicked);
   assert.equal(4, clicked.xval);
   assert.equal(40, clicked.yval);
 });
@@ -342,7 +344,7 @@ it('testCorrectAxisValueRangeAfterUnzoom', function() {
         dateWindow: [1, 9],
         animatedZooms:false
       });
-  
+
   // Zoom x axis
   DygraphOps.dispatchMouseDown_Point(g, 100, 100);
   DygraphOps.dispatchMouseMove_Point(g, 130, 100);
@@ -354,13 +356,13 @@ it('testCorrectAxisValueRangeAfterUnzoom', function() {
   DygraphOps.dispatchMouseUp_Point(g, 100, 130);
   var currentYAxisRange = g.yAxisRange();
   var currentXAxisRange = g.xAxisRange();
-  
+
   //check that the range for the axis has changed
   assert.notEqual(1, currentXAxisRange[0]);
   assert.notEqual(10, currentXAxisRange[1]);
   assert.notEqual(1, currentYAxisRange[0]);
   assert.notEqual(50, currentYAxisRange[1]);
-  
+
   // unzoom by doubleclick.  This is really the order in which a browser
   // generates events, and we depend on it.
   DygraphOps.dispatchMouseDown_Point(g, 10, 10);
@@ -368,13 +370,10 @@ it('testCorrectAxisValueRangeAfterUnzoom', function() {
   DygraphOps.dispatchMouseDown_Point(g, 10, 10);
   DygraphOps.dispatchMouseUp_Point(g, 10, 10);
   DygraphOps.dispatchDoubleClick(g, null);
-  
-  // check if range for y-axis was reset to original value 
-  // TODO check if range for x-axis is correct. 
-  // Currently not possible because dateRange is set to null and extremes are returned
-  var newYAxisRange = g.yAxisRange();
-  assert.equal(1, newYAxisRange[0]);
-  assert.equal(50, newYAxisRange[1]);
+
+  // check if the range for both axis was reset to show the full data.
+  assert.deepEqual(g.yAxisExtremes()[0], g.yAxisRange());
+  assert.deepEqual(g.xAxisExtremes(), g.xAxisRange());
 });
 
 /**
@@ -405,4 +404,95 @@ it('testPointClickCallback_missingData', function() {
   assert.equal(110, clicked.yval);
 });
 
+describe('animated zooms', function() {
+  var oldDuration;
+
+  before(function() {
+    oldDuration = Dygraph.ANIMATION_DURATION;
+    Dygraph.ANIMATION_DURATION = 100;  // speed up the animation for testing
+  });
+  after(function() {
+    Dygraph.ANIMATION_DURATION = oldDuration;
+  });
+
+  it('should support animated zooms', function(done) {
+    var data =
+      "X,A,B\n" +
+      "1,120,100\n"+
+      "2,110,110\n"+
+      "3,140,120\n"+
+      "4,130,110\n";
+
+    var ranges = [];
+
+    var g = new Dygraph('graph', data, {
+      animatedZooms: true,
+    });
+
+    // updating the dateWindow does not result in an animation.
+    assert.deepEqual([1, 4], g.xAxisRange());
+    g.updateOptions({dateWindow: [2, 4]});
+    assert.deepEqual([2, 4], g.xAxisRange());
+
+    g.updateOptions({
+      // zoomCallback is called once when the animation is complete.
+      zoomCallback: function(xMin, xMax) {
+        assert.equal(1, xMin);
+        assert.equal(4, xMax);
+        assert.deepEqual([1, 4], g.xAxisRange());
+        done();
+      }
+    }, false);
+
+    // Zoom out -- resetZoom() _does_ produce an animation.
+    g.resetZoom();
+    assert.notDeepEqual([2, 4], g.xAxisRange());  // first frame is synchronous
+    assert.notDeepEqual([1, 4], g.xAxisRange());
+
+    // at this point control flow goes up to zoomCallback
+  });
+
+});
+
+//bulk copied from "testCorrectAxisValueRangeAfterUnzoom"
+//tests if the xRangePad is taken into account after unzoom.
+it('testCorrectAxisPaddingAfterUnzoom', function() {
+  var g = new Dygraph(document.getElementById("graph"),
+      data2, {
+        valueRange: [1, 50],
+        dateWindow: [1, 9],
+        xRangePad: 10,
+        animatedZooms:false
+      });
+
+  var xExtremes = g.xAxisExtremes();
+  var [ yExtremes ] = g.yAxisExtremes();
+
+  // Zoom x axis
+  DygraphOps.dispatchMouseDown_Point(g, 100, 100);
+  DygraphOps.dispatchMouseMove_Point(g, 130, 100);
+  DygraphOps.dispatchMouseUp_Point(g, 130, 100);
+
+  // Zoom y axis
+  DygraphOps.dispatchMouseDown_Point(g, 100, 100);
+  DygraphOps.dispatchMouseMove_Point(g, 100, 130);
+  DygraphOps.dispatchMouseUp_Point(g, 100, 130);
+
+  //check that the range for the axis has changed
+  assert.notDeepEqual([1, 10], g.xAxisRange());
+  assert.notDeepEqual([1, 50], g.yAxisRange());
+
+  // unzoom by doubleclick.  This is really the order in which a browser
+  // generates events, and we depend on it.
+  DygraphOps.dispatchMouseDown_Point(g, 10, 10);
+  DygraphOps.dispatchMouseUp_Point(g, 10, 10);
+  DygraphOps.dispatchMouseDown_Point(g, 10, 10);
+  DygraphOps.dispatchMouseUp_Point(g, 10, 10);
+  DygraphOps.dispatchDoubleClick(g, null);
+
+  // check if range for x-axis was reset to original value.
+  assert.deepEqual(xExtremes, g.xAxisRange());
+  assert.deepEqual(yExtremes, g.yAxisRange());
+});
+
 });