auto_tests/tests/range_selector.js

   1 // Copyright 2011 Google Inc. All Rights Reserved.
   2
   3 /**
   4  * @fileoverview Regression tests for range selector.
   5  * @author paul.eric.felix@gmail.com (Paul Felix)
   6  */
   7 var RangeSelectorTestCase = TestCase("range-selector");
   8
   9 RangeSelectorTestCase.prototype.setUp = function() {
  10   document.body.innerHTML = "<div id='graph'></div>";
  11 };
  12
  13 RangeSelectorTestCase.prototype.tearDown = function() {
  14 };
  15
  16 RangeSelectorTestCase.prototype.testRangeSelector = function() {
  17   var opts = {
  18     width: 480,
  19     height: 320,
  20     showRangeSelector: true
  21   };
  22   var data = [
  23                [1, 10],
  24                [2, 15],
  25                [3, 10],
  26                [4, 15],
  27                [5, 10],
  28                [6, 15],
  29                [7, 10],
  30                [8, 15],
  31                [9, 10]
  32              ];
  33   var graph = document.getElementById("graph");
  34   var g = new Dygraph(graph, data, opts);
  35   this.assertGraphExistence(g, graph);
  36 };
  37
  38 RangeSelectorTestCase.prototype.testRangeSelectorWithErrorBars = function() {
  39   var opts = {
  40     width: 480,
  41     height: 320,
  42     errorBars: true,
  43     showRangeSelector: true
  44   };
  45   var data = [
  46                [1, [10, 10]],
  47                [2, [15, 10]],
  48                [3, [10, 10]],
  49                [4, [15, 10]],
  50                [5, [10, 10]],
  51                [6, [15, 20]],
  52                [7, [10, 20]],
  53                [8, [15, 20]],
  54                [9, [10, 20]]
  55              ];
  56   var graph = document.getElementById("graph");
  57   var g = new Dygraph(graph, data, opts);
  58   this.assertGraphExistence(g, graph);
  59 };
  60
  61 RangeSelectorTestCase.prototype.testRangeSelectorWithCustomBars = function() {
  62   var opts = {
  63     width: 480,
  64     height: 320,
  65     customBars: true,
  66     showRangeSelector: true
  67   };
  68   var data = [
  69                [1, [10,  10, 100]],
  70                [2, [15,  20, 110]],
  71                [3, [10,  30, 100]],
  72                [4, [15,  40, 110]],
  73                [5, [10, 120, 100]],
  74                [6, [15,  50, 110]],
  75                [7, [10,  70, 100]],
  76                [8, [15,  90, 110]],
  77                [9, [10,  50, 100]]
  78              ];
  79   var graph = document.getElementById("graph");
  80   var g = new Dygraph(graph, data, opts);
  81   this.assertGraphExistence(g, graph);
  82 };
  83
  84 RangeSelectorTestCase.prototype.testRangeSelectorWithLogScale = function() {
  85   var opts = {
  86     width: 480,
  87     height: 320,
  88     logscale: true,
  89     showRangeSelector: true
  90   };
  91   var data = [
  92                [1, 10],
  93                [2, 15],
  94                [3, 10],
  95                [4, 15],
  96                [5, 10],
  97                [6, 15],
  98                [7, 10],
  99                [8, 15],
 100                [9, 10]
 101              ];
 102   var graph = document.getElementById("graph");
 103   var g = new Dygraph(graph, data, opts);
 104   this.assertGraphExistence(g, graph);
 105 };
 106
 107 RangeSelectorTestCase.prototype.testRangeSelectorOptions = function() {
 108   var opts = {
 109     width: 480,
 110     height: 320,
 111     showRangeSelector: true,
 112     rangeSelectorHeight: 30,
 113     rangeSelectorPlotFillColor: 'lightyellow',
 114     rangeSelectorPlotStyleColor: 'yellow'
 115   };
 116   var data = [
 117                [1, 10],
 118                [2, 15],
 119                [3, 10],
 120                [4, 15],
 121                [5, 10],
 122                [6, 15],
 123                [7, 10],
 124                [8, 15],
 125                [9, 10]
 126              ];
 127   var graph = document.getElementById("graph");
 128   var g = new Dygraph(graph, data, opts);
 129   this.assertGraphExistence(g, graph);
 130 };
 131
 132 RangeSelectorTestCase.prototype.testRangeSelectorEnablingAfterCreation = function() {
 133   var opts = {
 134     width: 480,
 135     height: 320
 136   };
 137   var data = [
 138                [1, 10],
 139                [2, 15],
 140                [3, 10],
 141                [4, 15],
 142                [5, 10],
 143                [6, 15],
 144                [7, 10],
 145                [8, 15],
 146                [9, 10]
 147              ];
 148   var graph = document.getElementById("graph");
 149   var g = new Dygraph(graph, data, opts);
 150   g.updateOptions({showRangeSelector: true});
 151   this.assertGraphExistence(g, graph);
 152 };
 153
 154 // The animatedZooms option does not work with the range selector. Make sure it gets turned off.
 155 RangeSelectorTestCase.prototype.testRangeSelectorWithAnimatedZoomsOption = function() {
 156   var opts = {
 157     width: 480,
 158     height: 320,
 159     showRangeSelector: true,
 160     animatedZooms: true
 161   };
 162   var data = [
 163                [1, 10],
 164                [2, 15],
 165                [3, 10],
 166                [4, 15],
 167                [5, 10],
 168                [6, 15],
 169                [7, 10],
 170                [8, 15],
 171                [9, 10]
 172              ];
 173   var graph = document.getElementById("graph");
 174   var g = new Dygraph(graph, data, opts);
 175   this.assertGraphExistence(g, graph);
 176   assertFalse(g.getOption('animatedZooms'));
 177 };
 178
 179 RangeSelectorTestCase.prototype.testRangeSelectorWithAnimatedZoomsOption2 = function() {
 180   var opts = {
 181     width: 480,
 182     height: 320,
 183     animatedZooms: true
 184   };
 185   var data = [
 186                [1, 10],
 187                [2, 15],
 188                [3, 10],
 189                [4, 15],
 190                [5, 10],
 191                [6, 15],
 192                [7, 10],
 193                [8, 15],
 194                [9, 10]
 195              ];
 196   var graph = document.getElementById("graph");
 197   var g = new Dygraph(graph, data, opts);
 198   g.updateOptions({showRangeSelector: true});
 199   this.assertGraphExistence(g, graph);
 200   assertFalse(g.getOption('animatedZooms'));
 201 };
 202
 203 RangeSelectorTestCase.prototype.testRangeSelectorInteraction = function() {
 204   var opts = {
 205     width: 480,
 206     height: 320,
 207     showRangeSelector: true
 208   };
 209   var data = [
 210                [1, 10],
 211                [2, 15],
 212                [3, 10],
 213                [4, 15],
 214                [5, 10],
 215                [6, 15],
 216                [7, 10],
 217                [8, 15],
 218                [9, 10]
 219              ];
 220   var graph = document.getElementById("graph");
 221   var g = new Dygraph(graph, data, opts);
 222   this.assertGraphExistence(g, graph);
 223   var zoomhandles = graph.getElementsByClassName('dygraph-rangesel-zoomhandle');
 224
 225   // Move left zoomhandle in
 226   var xRange = g.xAxisRange().slice();
 227
 228   var mouseDownEvent = DygraphOps.createEvent({
 229     type : 'dragstart',
 230     detail: 1,
 231     clientX : 0,
 232     clientY : 0
 233   });
 234   zoomhandles[0].dispatchEvent(mouseDownEvent);
 235
 236   var mouseMoveEvent = DygraphOps.createEvent({
 237     type : 'mousemove',
 238     clientX : 20,
 239     clientY : 20
 240   });
 241   zoomhandles[0].dispatchEvent(mouseMoveEvent);
 242
 243   var mouseUpEvent = DygraphOps.createEvent({
 244     type : 'mouseup',
 245     detail: 1,
 246     clientX : 20,
 247     clientY : 20
 248   });
 249   zoomhandles[0].dispatchEvent(mouseUpEvent);
 250
 251   var newXRange = g.xAxisRange().slice();
 252   assert('left zoomhandle should have moved: '+newXRange[0]+'>'+xRange[0], newXRange[0] > xRange[0]);
 253   assertEquals('right zoomhandle should not have moved', xRange[1], newXRange[1]);
 254
 255   // Move right zoomhandle in
 256   xRange = newXRange;
 257
 258   mouseDownEvent = DygraphOps.createEvent({
 259     type : 'dragstart',
 260     detail: 1,
 261     clientX : 100,
 262     clientY : 100
 263   });
 264   zoomhandles[1].dispatchEvent(mouseDownEvent);
 265
 266   mouseMoveEvent = DygraphOps.createEvent({
 267     type : 'mousemove',
 268     clientX : 80,
 269     clientY : 80
 270   });
 271   zoomhandles[1].dispatchEvent(mouseMoveEvent);
 272
 273   mouseUpEvent = DygraphOps.createEvent({
 274     type : 'mouseup',
 275     detail: 1,
 276     clientX : 80,
 277     clientY : 80
 278   });
 279   zoomhandles[1].dispatchEvent(mouseUpEvent);
 280
 281   var newXRange = g.xAxisRange().slice();
 282   assert('right zoomhandle should have moved: '+newXRange[1]+'<'+xRange[1], newXRange[1] < xRange[1]);
 283   assertEquals('left zoomhandle should not have moved', xRange[0], newXRange[0]);
 284
 285   // Pan left
 286   xRange = newXRange;
 287   var fgcanvas = graph.getElementsByClassName('dygraph-rangesel-fgcanvas')[0];
 288   var x = parseInt(zoomhandles[0].style.left) + 20;
 289   var y = parseInt(zoomhandles[0].style.top);
 290
 291   mouseDownEvent = DygraphOps.createEvent({
 292     type : 'mousedown',
 293     detail: 1,
 294     clientX : x,
 295     clientY : y
 296   });
 297   fgcanvas.dispatchEvent(mouseDownEvent);
 298
 299   x -= 10;
 300
 301   mouseMoveEvent = DygraphOps.createEvent({
 302     type : 'mousemove',
 303     clientX : x,
 304     clientY : y
 305   });
 306   fgcanvas.dispatchEvent(mouseMoveEvent);
 307
 308   mouseUpEvent = DygraphOps.createEvent({
 309     type : 'mouseup',
 310     detail: 1,
 311     clientX : x,
 312     clientY : y
 313   });
 314   fgcanvas.dispatchEvent(mouseUpEvent);
 315
 316   var newXRange = g.xAxisRange().slice();
 317   assert(newXRange[0]+'<'+xRange[0], newXRange[0] < xRange[0]);
 318   assert(newXRange[1]+'<'+xRange[1], newXRange[1] < xRange[1]);
 319 };
 320
 321
 322 RangeSelectorTestCase.prototype.testRangeSelectorPositionIfXAxisNotDrawn = function() {
 323   var opts = {
 324     width: 480,
 325     height: 100,
 326     xAxisHeight: 30,
 327     drawXAxis: false,
 328     showRangeSelector: true,
 329     rangeSelectorHeight: 30
 330   };
 331   var data = [
 332                [0, 1],
 333                [10, 1]
 334              ];
 335   var graph = document.getElementById("graph");
 336   var g = new Dygraph(graph, data, opts);
 337
 338   //assert, that the range selector is at top position 70 since the 30px of the
 339   // xAxis shouldn't be reserved since it isn't drawn.
 340   this.assertGraphExistence(g, graph);
 341   var bgcanvas = graph.getElementsByClassName('dygraph-rangesel-bgcanvas')[0];
 342   assertEquals("Range selector is not at the expected position.","70px", bgcanvas.style.top);
 343   var fgcanvas = graph.getElementsByClassName('dygraph-rangesel-fgcanvas')[0];
 344   assertEquals("Range selector is not at the expected position.","70px", fgcanvas.style.top);
 345 };
 346
 347 RangeSelectorTestCase.prototype.assertGraphExistence = function(g, graph) {
 348   assertNotNull(g);
 349   var zoomhandles = graph.getElementsByClassName('dygraph-rangesel-zoomhandle');
 350   assertEquals(2, zoomhandles.length);
 351   var bgcanvas = graph.getElementsByClassName('dygraph-rangesel-bgcanvas');
 352   assertEquals(1, bgcanvas.length);
 353   var fgcanvas = graph.getElementsByClassName('dygraph-rangesel-fgcanvas');
 354   assertEquals(1, fgcanvas.length);
 355 }