auto_tests/tests/annotations.js

   1 /**
   2  * @fileoverview Tests relating to annotations
   3  *
   4  * @author danvk@google.com (Dan Vanderkam)
   5  */
   6 describe("annotations", function() {
   7
   8 beforeEach(function() {
   9   document.body.innerHTML = "<div id='graph'></div>";
  10 });
  11
  12 afterEach(function() {
  13 });
  14
  15 it('testAnnotationsDrawn', function() {
  16   var opts = {
  17     width: 480,
  18     height: 320
  19   };
  20   var data = "X,Y\n" +
  21       "0,-1\n" +
  22       "1,0\n" +
  23       "2,1\n" +
  24       "3,0\n"
  25   ;
  26
  27   var graph = document.getElementById("graph");
  28   var g = new Dygraph(graph, data, opts);
  29   g.setAnnotations([
  30     {
  31       series: 'Y',
  32       x: 1,
  33       shortText: 'A',
  34       text: 'Long A',
  35       cssClass: 'ann1'
  36     },
  37     {
  38       series: 'Y',
  39       x: 2,
  40       shortText: 'B',
  41       text: 'Long B',
  42       cssClass: 'ann2'
  43     }
  44   ]);
  45
  46   assert.equal(2, g.annotations().length);
  47   var a1 = document.getElementsByClassName('ann1');
  48   assert.equal(1, a1.length);
  49   a1 = a1[0];
  50   assert.equal('A', a1.textContent);
  51
  52   var a2 = document.getElementsByClassName('ann2');
  53   assert.equal(1, a2.length);
  54   a2 = a2[0];
  55   assert.equal('B', a2.textContent);
  56 });
  57
  58 // Some errors that should be flagged:
  59 // 1. Invalid series name (e.g. 'X' or 'non-existent')
  60 // 2. Passing a string as 'x' instead of a number (e.g. x: '1')
  61
  62 it('testAnnotationsDontDisappearOnResize', function() {
  63   var opts = {
  64   };
  65   var data = "X,Y\n" +
  66       "0,-1\n" +
  67       "1,0\n" +
  68       "2,1\n" +
  69       "3,0\n"
  70   ;
  71
  72   var graph = document.getElementById("graph");
  73   var g = new Dygraph(graph, data, opts);
  74   g.setAnnotations([
  75     {
  76       series: 'Y',
  77       x: 1,
  78       shortText: 'A',
  79       text: 'Long A',
  80       cssClass: 'ann1'
  81     }
  82   ]);
  83
  84   // Check that it displays at all
  85   assert.equal(1, g.annotations().length);
  86   var a1 = document.getElementsByClassName('ann1');
  87   assert.equal(1, a1.length);
  88   a1 = a1[0];
  89   assert.equal('A', a1.textContent);
  90
  91   // ... and that resizing doesn't kill it.
  92   g.resize(400, 300);
  93   assert.equal(1, g.annotations().length);
  94   var a1 = document.getElementsByClassName('ann1');
  95   assert.equal(1, a1.length);
  96   a1 = a1[0];
  97   assert.equal('A', a1.textContent);
  98 });
  99
 100 // Verify that annotations outside of the visible x-range are not shown.
 101 it('testAnnotationsOutOfRangeX', function() {
 102   var opts = {
 103   };
 104   var data = "X,Y\n" +
 105       "0,-1\n" +
 106       "1,0\n" +
 107       "2,1\n" +
 108       "3,0\n"
 109   ;
 110
 111   var graph = document.getElementById("graph");
 112   var g = new Dygraph(graph, data, opts);
 113   g.setAnnotations([
 114     {
 115       series: 'Y',
 116       x: 1,
 117       shortText: 'A',
 118       text: 'Long A',
 119       cssClass: 'ann1'
 120     }
 121   ]);
 122
 123   // Check that it displays at all
 124   assert.equal(1, g.annotations().length);
 125   var a1 = document.getElementsByClassName('ann1');
 126   assert.equal(1, a1.length);
 127   a1 = a1[0];
 128   assert.equal('A', a1.textContent);
 129
 130   // ... and that panning right removes the annotation.
 131   g.updateOptions({dateWindow: [2, 6]});
 132   assert.equal(1, g.annotations().length);
 133   a1 = document.getElementsByClassName('ann1');
 134   assert.equal(0, a1.length);
 135
 136   // ... and that panning left brings it back.
 137   g.updateOptions({dateWindow: [0, 4]});
 138   assert.equal(1, g.annotations().length);
 139   a1 = document.getElementsByClassName('ann1');
 140   assert.equal(1, a1.length);
 141 });
 142
 143 // Verify that annotations outside of the visible y-range are not shown.
 144 it('testAnnotationsOutOfRangeY', function() {
 145   var opts = {
 146   };
 147   var data = "X,Y\n" +
 148       "0,-1\n" +
 149       "1,0\n" +
 150       "2,1\n" +
 151       "3,0\n"
 152   ;
 153
 154   var graph = document.getElementById("graph");
 155   var g = new Dygraph(graph, data, opts);
 156   g.setAnnotations([
 157     {
 158       series: 'Y',
 159       x: 1,
 160       shortText: 'A',
 161       text: 'Long A',
 162       cssClass: 'ann1'
 163     }
 164   ]);
 165
 166   // ... check that panning up removes the annotation.
 167   g.updateOptions({valueRange: [0.5, 2.5]});
 168   assert.equal(1, g.annotations().length);
 169   var a1 = document.getElementsByClassName('ann1');
 170   assert.equal(0, a1.length);
 171
 172   // ... and that panning down brings it back.
 173   g.updateOptions({valueRange: [-1, 1]});
 174   assert.equal(1, g.annotations().length);
 175   a1 = document.getElementsByClassName('ann1');
 176   assert.equal(1, a1.length);
 177 });
 178
 179 it('testAnnotationsDrawnInDrawCallback', function() {
 180   var data = "X,Y\n" +
 181       "0,-1\n" +
 182       "1,0\n" +
 183       "2,1\n";
 184
 185   var graph = document.getElementById("graph");
 186
 187   var calls = [];
 188   var g = new Dygraph(graph, data, {
 189       width: 480,
 190       height: 320,
 191       drawCallback: function(g, initial) {
 192         calls.push(initial);
 193         if (initial) {
 194           g.setAnnotations([
 195             {
 196               series: 'Y',
 197               x: 1,
 198               shortText: 'A',
 199               text: 'Long A',
 200             },
 201           ]);
 202         }
 203       }
 204     });
 205
 206   assert.deepEqual([true, false], calls);
 207 });
 208
 209
 210 // Test that annotations on the same point are stacked.
 211 // Regression test for http://code.google.com/p/dygraphs/issues/detail?id=256
 212 it('testAnnotationsStacked', function() {
 213   var data = 'X,Y1,Y2\n' +
 214       '0,1,2\n' +
 215       '1,2,3\n';
 216   var graph = document.getElementById("graph");
 217   var annotations = [
 218     {
 219       series: 'Y1',
 220       x: 0,
 221       shortText: '1',
 222       attachAtBottom: true
 223     },
 224     {
 225       series: 'Y2',
 226       x: 0,
 227       shortText: '2',
 228       attachAtBottom: true
 229     }
 230   ];
 231   var g = new Dygraph(graph, data, {
 232     width: 480,
 233     height: 320
 234   });
 235   g.setAnnotations(annotations);
 236
 237   var annEls = document.getElementsByClassName('dygraphDefaultAnnotation');
 238   assert.equal(2, annEls.length);
 239
 240   assert.equal(annEls[0].offsetLeft, annEls[1].offsetLeft);
 241   assert(annEls[1].offsetTop < annEls[0].offsetTop - 10);
 242 });
 243
 244
 245 // Test the .ready() method, which is most often used with setAnnotations().
 246 it('testReady', function() {
 247   var data = 'X,Y1,Y2\n' +
 248       '0,1,2\n' +
 249       '1,2,3\n';
 250   var mockXhr = Util.overrideXMLHttpRequest(data);
 251
 252   var graph = document.getElementById("graph");
 253   var g = new Dygraph(graph, "data.csv", {
 254     width: 480,
 255     height: 320
 256   });
 257
 258   var ready_calls = 0;
 259   g.ready(function() { ready_calls++; });
 260
 261   assert.equal(0, ready_calls);
 262   mockXhr.respond();
 263   assert.equal(1, ready_calls);
 264
 265   // Make sure that ready isn't called on redraws.
 266   g.updateOptions({});
 267   assert.equal(1, ready_calls);
 268
 269   // Or data changes.
 270   g.updateOptions({file: data});
 271   assert.equal(1, ready_calls);
 272 });
 273
 274 });