auto_tests/tests/callback.js

   1 /**
   2  * @fileoverview Test cases for the callbacks.
   3  *
   4  * @author uemit.seren@gmail.com (Ümit Seren)
   5  */
   6
   7 var CallbackTestCase = TestCase("callback");
   8
   9 CallbackTestCase.prototype.setUp = function() {
  10   document.body.innerHTML = "<div id='graph'></div><div id='selection'></div>";
  11   this.styleSheet = document.createElement("style");
  12   this.styleSheet.type = "text/css";
  13   document.getElementsByTagName("head")[0].appendChild(this.styleSheet);
  14 };
  15
  16 CallbackTestCase.prototype.tearDown = function() {
  17 };
  18
  19 var data = "X,a\,b,c\n" +
  20  "10,-1,1,2\n" +
  21  "11,0,3,1\n" +
  22  "12,1,4,2\n" +
  23  "13,0,2,3\n";
  24
  25
  26 /**
  27  * This tests that when the function idxToRow_ returns the proper row and the onHiglightCallback
  28  * is properly called when the  first series is hidden (setVisibility = false)
  29  *
  30  */
  31 CallbackTestCase.prototype.testHighlightCallbackIsCalled = function() {
  32   var h_row;
  33   var h_pts;
  34
  35   var highlightCallback  =  function(e, x, pts, row) {
  36     h_row = row;
  37     h_pts = pts;
  38   };
  39
  40   var graph = document.getElementById("graph");
  41   var g = new Dygraph(graph, data,
  42       {
  43         width: 100,
  44         height: 100,
  45         visibility: [false, true, true],
  46         highlightCallback: highlightCallback
  47       });
  48
  49   DygraphOps.dispatchMouseMove(g, 13, 10);
  50
  51   //check correct row is returned
  52   assertEquals(3, h_row);
  53   //check there are only two points (because first series is hidden)
  54   assertEquals(2, h_pts.length);
  55 };
  56
  57
  58 /**
  59  * Test that drawPointCallback isn't called when drawPoints is false
  60  */
  61 CallbackTestCase.prototype.testDrawPointCallback_disabled = function() {
  62   var called = false;
  63
  64   var callback = function() {
  65     called = true;
  66   };
  67
  68   var graph = document.getElementById("graph");
  69   var g = new Dygraph(graph, data, {
  70       drawPointCallback : callback,
  71     });
  72
  73   assertFalse(called);
  74 };
  75
  76 /**
  77  * Test that drawPointCallback is called when drawPoints is true
  78  */
  79 CallbackTestCase.prototype.testDrawPointCallback_enabled = function() {
  80   var called = false;
  81
  82   var callback = function() {
  83     called = true;
  84   };
  85
  86   var graph = document.getElementById("graph");
  87   var g = new Dygraph(graph, data, {
  88       drawPoints : true,
  89       drawPointCallback : callback
  90     });
  91
  92   assertTrue(called);
  93 };
  94
  95 /**
  96  * Test that drawPointCallback is called when drawPoints is true
  97  */
  98 CallbackTestCase.prototype.testDrawPointCallback_pointSize = function() {
  99   var pointSize = 0;
 100   var count = 0;
 101
 102   var callback = function(g, seriesName, canvasContext, cx, cy, color, pointSizeParam) {
 103     pointSize = pointSizeParam;
 104     count++;
 105   };
 106
 107   var graph = document.getElementById("graph");
 108   var g = new Dygraph(graph, data, {
 109       drawPoints : true,
 110       drawPointCallback : callback
 111     });
 112
 113   assertEquals(1.5, pointSize);
 114   assertEquals(12, count); // one call per data point.
 115
 116   var g = new Dygraph(graph, data, {
 117       drawPoints : true,
 118       drawPointCallback : callback,
 119       pointSize : 8
 120     });
 121
 122   assertEquals(8, pointSize);
 123 };
 124
 125 /**
 126  * This tests that when the function idxToRow_ returns the proper row and the onHiglightCallback
 127  * is properly called when the first series is hidden (setVisibility = false)
 128  *
 129  */
 130 CallbackTestCase.prototype.testDrawHighlightPointCallbackIsCalled = function() {
 131   var called = false;
 132
 133   var drawHighlightPointCallback  = function() {
 134     called = true;
 135   };
 136
 137   var graph = document.getElementById("graph");
 138   var g = new Dygraph(graph, data,
 139       {
 140         width: 100,
 141         height : 100,
 142         drawHighlightPointCallback : drawHighlightPointCallback
 143       });
 144
 145   assertFalse(called);
 146   DygraphOps.dispatchMouseMove(g, 13, 10);
 147   assertTrue(called);
 148 };
 149
 150 /**
 151  * Test the closest-series highlighting methods for normal and stacked modes.
 152  * Also pass in line widths for plain and highlighted lines for easier visual
 153  * confirmation that the highlighted line is drawn on top of the others.
 154  */
 155 var runClosestTest = function(isStacked, widthNormal, widthHighlighted) {
 156   var h_row;
 157   var h_pts;
 158   var h_series;
 159
 160   var graph = document.getElementById("graph");
 161   var g = new Dygraph(graph, data,
 162       {
 163         width: 600,
 164         height: 400,
 165         visibility: [false, true, true],
 166         stackedGraph: isStacked,
 167         strokeWidth: widthNormal,
 168         strokeBorderWidth: 2,
 169         highlightCircleSize: widthNormal * 2,
 170         highlightSeriesBackgroundFade: 0.7,
 171         highlightSeriesAnimate: true,
 172
 173         highlightSeriesOpts: {
 174           strokeWidth: widthHighlighted,
 175           highlightCircleSize: widthHighlighted * 2
 176         }
 177       });
 178
 179   var highlightCallback  =  function(e, x, pts, row, set) {
 180     h_row = row;
 181     h_pts = pts;
 182     h_series = set;
 183     document.getElementById('selection').innerHTML='row=' + row + ', set=' + set;
 184   };
 185
 186   g.updateOptions({highlightCallback: highlightCallback}, true);
 187
 188   if (isStacked) {
 189     DygraphOps.dispatchMouseMove(g, 11.45, 1.4);
 190     assertEquals(1, h_row);
 191     assertEquals('c', h_series);
 192
 193     //now move up in the same row
 194     DygraphOps.dispatchMouseMove(g, 11.45, 1.5);
 195     assertEquals(1, h_row);
 196     assertEquals('b', h_series);
 197
 198     //and a bit to the right
 199     DygraphOps.dispatchMouseMove(g, 11.55, 1.5);
 200     assertEquals(2, h_row);
 201     assertEquals('c', h_series);
 202   } else {
 203     DygraphOps.dispatchMouseMove(g, 11, 1.5);
 204     assertEquals(1, h_row);
 205     assertEquals('c', h_series);
 206
 207     //now move up in the same row
 208     DygraphOps.dispatchMouseMove(g, 11, 2.5);
 209     assertEquals(1, h_row);
 210     assertEquals('b', h_series);
 211   }
 212
 213   return g;
 214 };
 215
 216 /**
 217  * Test basic closest-point highlighting.
 218  */
 219 CallbackTestCase.prototype.testClosestPointCallback = function() {
 220   runClosestTest(false, 1, 3);
 221 }
 222
 223 /**
 224  * Test setSelection() with series name
 225  */
 226 CallbackTestCase.prototype.testSetSelection = function() {
 227   var g = runClosestTest(false, 1, 3);
 228   assertEquals(1, g.attr_('strokeWidth', 'c'));
 229   g.setSelection(false, 'c');
 230   assertEquals(3, g.attr_('strokeWidth', 'c'));
 231 }
 232
 233 /**
 234  * Test closest-point highlighting for stacked graph
 235  */
 236 CallbackTestCase.prototype.testClosestPointStackedCallback = function() {
 237   runClosestTest(true, 1, 3);
 238 }
 239
 240 /**
 241  * Closest-point highlighting with legend CSS - border around active series.
 242  */
 243 CallbackTestCase.prototype.testClosestPointCallbackCss1 = function() {
 244   var css = "div.dygraph-legend > span { display: block; }\n" +
 245     "div.dygraph-legend > span.highlight { border: 1px solid grey; }\n";
 246   this.styleSheet.innerHTML = css;
 247   runClosestTest(false, 2, 4);
 248 }
 249
 250 /**
 251  * Closest-point highlighting with legend CSS - show only closest series.
 252  */
 253 CallbackTestCase.prototype.testClosestPointCallbackCss2 = function() {
 254   var css = "div.dygraph-legend > span { display: none; }\n" +
 255     "div.dygraph-legend > span.highlight { display: inline; }\n";
 256   this.styleSheet.innerHTML = css;
 257   runClosestTest(false, 10, 15);
 258   // TODO(klausw): verify that the highlighted line is drawn on top?
 259 }