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  * Test the closest-series highlighting methods for normal and stacked modes.
  59  * Also pass in line widths for plain and highlighted lines for easier visual
  60  * confirmation that the highlighted line is drawn on top of the others.
  61  */
  62 var runClosestTest = function(isStacked, widthNormal, widthHighlighted) {
  63   var h_row;
  64   var h_pts;
  65   var h_series;
  66
  67   var graph = document.getElementById("graph");
  68   var g = new Dygraph(graph, data,
  69       {
  70         width: 600,
  71         height: 400,
  72         visibility: [false, true, true],
  73         stackedGraph: isStacked,
  74         strokeWidth: widthNormal,
  75         strokeBorderWidth: 2,
  76         highlightCircleSize: widthNormal * 2,
  77         highlightSeriesBackgroundFade: 0.7,
  78         highlightSeriesAnimate: true,
  79
  80         highlightSeriesOpts: {
  81           strokeWidth: widthHighlighted,
  82           highlightCircleSize: widthHighlighted * 2
  83         }
  84       });
  85
  86   var highlightCallback  =  function(e, x, pts, row, set) {
  87     h_row = row;
  88     h_pts = pts;
  89     h_series = set;
  90     document.getElementById('selection').innerHTML='row=' + row + ', set=' + set;
  91   };
  92
  93   g.updateOptions({highlightCallback: highlightCallback}, true);
  94
  95   if (isStacked) {
  96     DygraphOps.dispatchMouseMove(g, 11.45, 1.4);
  97     assertEquals(1, h_row);
  98     assertEquals('c', h_series);
  99
 100     //now move up in the same row
 101     DygraphOps.dispatchMouseMove(g, 11.45, 1.5);
 102     assertEquals(1, h_row);
 103     assertEquals('b', h_series);
 104
 105     //and a bit to the right
 106     DygraphOps.dispatchMouseMove(g, 11.55, 1.5);
 107     assertEquals(2, h_row);
 108     assertEquals('c', h_series);
 109   } else {
 110     DygraphOps.dispatchMouseMove(g, 11, 1.5);
 111     assertEquals(1, h_row);
 112     assertEquals('c', h_series);
 113
 114     //now move up in the same row
 115     DygraphOps.dispatchMouseMove(g, 11, 2.5);
 116     assertEquals(1, h_row);
 117     assertEquals('b', h_series);
 118   }
 119
 120   return g;
 121 };
 122
 123 /**
 124  * Test basic closest-point highlighting.
 125  */
 126 CallbackTestCase.prototype.testClosestPointCallback = function() {
 127   runClosestTest(false, 1, 3);
 128 }
 129
 130 /**
 131  * Test setSelection() with series name
 132  */
 133 CallbackTestCase.prototype.testSetSelection = function() {
 134   var g = runClosestTest(false, 1, 3);
 135   assertEquals(1, g.attr_('strokeWidth', 'c'));
 136   g.setSelection(false, 'c');
 137   assertEquals(3, g.attr_('strokeWidth', 'c'));
 138 }
 139
 140 /**
 141  * Test closest-point highlighting for stacked graph
 142  */
 143 CallbackTestCase.prototype.testClosestPointStackedCallback = function() {
 144   runClosestTest(true, 1, 3);
 145 }
 146
 147 /**
 148  * Closest-point highlighting with legend CSS - border around active series.
 149  */
 150 CallbackTestCase.prototype.testClosestPointCallbackCss1 = function() {
 151   var css = "div.dygraph-legend > span { display: block; }\n" +
 152     "div.dygraph-legend > span.highlight { border: 1px solid grey; }\n";
 153   this.styleSheet.innerHTML = css;
 154   runClosestTest(false, 2, 4);
 155 }
 156
 157 /**
 158  * Closest-point highlighting with legend CSS - show only closest series.
 159  */
 160 CallbackTestCase.prototype.testClosestPointCallbackCss2 = function() {
 161   var css = "div.dygraph-legend > span { display: none; }\n" +
 162     "div.dygraph-legend > span.highlight { display: inline; }\n";
 163   this.styleSheet.innerHTML = css;
 164   runClosestTest(false, 10, 15);
 165   // TODO(klausw): verify that the highlighted line is drawn on top?
 166 }