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.assertGraphExistence = function(g, graph) {
 204   assertNotNull(g);
 205   var zoomhandles = graph.getElementsByClassName('dygraph-rangesel-zoomhandle');
 206   assertEquals(2, zoomhandles.length);
 207   var bgcanvas = graph.getElementsByClassName('dygraph-rangesel-bgcanvas');
 208   assertEquals(1, bgcanvas.length);
 209   var fgcanvas = graph.getElementsByClassName('dygraph-rangesel-fgcanvas');
 210   assertEquals(1, fgcanvas.length);
 211 }