auto_tests/tests/plugins.js

   1 /**
   2  * @fileoverview Tests for the plugins option.
   3  *
   4  * @author konigsberg@google.com (Robert Konigsberg)
   5  */
   6 describe("plugins", function() {
   7
   8 var data;
   9
  10 beforeEach(function() {
  11   document.body.innerHTML = "<div id='graph'></div>";
  12
  13   data = "X,Y1,Y2\n" +
  14       "0,1,2\n" +
  15       "1,2,1\n" +
  16       "2,1,2\n" +
  17       "3,2,1\n"
  18   ;
  19 });
  20
  21 afterEach(function() {
  22 });
  23
  24 it('testWillDrawChart', function() {
  25   var draw = 0;
  26
  27   var plugin = (function() {
  28     var p = function() {
  29     };
  30
  31     p.prototype.activate = function(g) {
  32       return {
  33         willDrawChart: this.willDrawChart
  34       };
  35     };
  36
  37     p.prototype.willDrawChart = function(e) {
  38       draw++;
  39     };
  40
  41     return p;
  42   })();
  43
  44   var graph = document.getElementById("graph");
  45   var g = new Dygraph(graph, data, {plugins: [plugin]});
  46
  47   assert.equal(1, draw);
  48 });
  49
  50 it('testPassingInstance', function() {
  51   // You can also pass an instance of a plugin instead of a Plugin class.
  52   var draw = 0;
  53   var p = {
  54     activate: function(g) {
  55       return {
  56         willDrawChart: this.willDrawChart
  57       }
  58     },
  59     willDrawChart: function(g) {
  60       draw++;
  61     }
  62   };
  63
  64   var graph = document.getElementById("graph");
  65   var g = new Dygraph(graph, data, {plugins: [p]});
  66
  67   assert.equal(1, draw);
  68 });
  69
  70 it('testPreventDefault', function() {
  71   var data1 = "X,Y\n" +
  72       "20,-1\n" +
  73       "21,0\n" +
  74       "22,1\n" +
  75       "23,0\n";
  76
  77   var events = [];
  78
  79   var p = {
  80     pointClickPreventDefault: false,
  81     clickPreventDefault: false,
  82     activate: function(g) {
  83       return {
  84         pointClick: this.pointClick,
  85         click: this.click
  86       }
  87     },
  88     pointClick: function(e) {
  89       events.push(['plugin.pointClick', e.point.xval, e.point.yval]);
  90       if (this.pointClickPreventDefault) {
  91         e.preventDefault();
  92       }
  93     },
  94     click: function(e) {
  95       events.push(['plugin.click', e.xval]);
  96       if (this.clickPreventDefault) {
  97         e.preventDefault();
  98       }
  99     }
 100   };
 101
 102   var graph = document.getElementById("graph");
 103   var g = new Dygraph(graph, data1, {
 104     plugins: [p],
 105     clickCallback: function(e, x) {
 106       events.push(['clickCallback', x]);
 107     },
 108     pointClickCallback: function(e, pt) {
 109       events.push(['pointClickCallback', pt.xval, pt.yval]);
 110     }
 111   });
 112
 113   // Click the point at x=20
 114   function clickOnPoint() {
 115     var x = 58, y = 275;
 116     DygraphOps.dispatchMouseDown_Point(g, x, y);
 117     DygraphOps.dispatchMouseMove_Point(g, x, y);
 118     DygraphOps.dispatchMouseUp_Point(g, x, y);
 119   }
 120
 121   p.pointClickPreventDefault = false;
 122   p.clickPreventDefault = false;
 123   clickOnPoint();
 124   assert.deepEqual([
 125     ['plugin.pointClick', 20, -1],
 126     ['pointClickCallback', 20, -1],
 127     ['plugin.click', 20],
 128     ['clickCallback', 20]
 129   ], events);
 130
 131   events = [];
 132   p.pointClickPreventDefault = true;
 133   p.clickPreventDefault = false;
 134   clickOnPoint();
 135   assert.deepEqual([
 136     ['plugin.pointClick', 20, -1]
 137   ], events);
 138
 139   events = [];
 140   p.pointClickPreventDefault = false;
 141   p.clickPreventDefault = true;
 142   clickOnPoint();
 143   assert.deepEqual([
 144     ['plugin.pointClick', 20, -1],
 145     ['pointClickCallback', 20, -1],
 146     ['plugin.click', 20]
 147   ], events);
 148 });
 149
 150 it('testEventSequence', function() {
 151   var events = [];
 152
 153   var eventLogger = function(name) {
 154     return function(e) {
 155       events.push(name);
 156     };
 157   };
 158
 159   var p = {
 160     activate: function(g) {
 161       return {
 162         clearChart: eventLogger('clearChart'),
 163         predraw: eventLogger('predraw'),
 164         willDrawChart: eventLogger('willDrawChart'),
 165         didDrawChart: eventLogger('didDrawChart'),
 166         dataWillUpdate: eventLogger('dataWillUpdate'),
 167         dataDidUpdate: eventLogger('dataDidUpdate')
 168       }
 169     }
 170   };
 171
 172   var graph = document.getElementById("graph");
 173   var g = new Dygraph(graph, data, {plugins: [p]});
 174
 175   // Initial draw sequence
 176   assert.deepEqual([
 177    "dataDidUpdate",  // should dataWillUpdate be called here, too?
 178    "predraw",
 179    "clearChart",
 180    "willDrawChart",
 181    "didDrawChart"
 182   ], events);
 183
 184   // An options change triggers a redraw, but doesn't change the data.
 185   events = [];
 186   g.updateOptions({series: {Y1: {color: 'blue'}}});
 187   assert.deepEqual([
 188    "predraw",
 189    "clearChart",
 190    "willDrawChart",
 191    "didDrawChart"
 192   ], events);
 193
 194   // A pan shouldn't cause a new "predraw"
 195   events = [];
 196   DygraphOps.dispatchMouseDown_Point(g, 100, 100, {shiftKey: true});
 197   DygraphOps.dispatchMouseMove_Point(g, 200, 100, {shiftKey: true});
 198   DygraphOps.dispatchMouseUp_Point(g, 200, 100, {shiftKey: true});
 199   assert.deepEqual([
 200    "clearChart",
 201    "willDrawChart",
 202    "didDrawChart"
 203   ], events);
 204
 205   // New data triggers the full sequence.
 206   events = [];
 207   g.updateOptions({file: data + '\n4,1,2'});
 208   assert.deepEqual([
 209    "dataWillUpdate",
 210    "dataDidUpdate",
 211    "predraw",
 212    "clearChart",
 213    "willDrawChart",
 214    "didDrawChart"
 215   ], events);
 216 });
 217
 218 it('testDestroyCalledInOrder', function() {
 219   var destructions = [];
 220   var makePlugin = function(name) {
 221     return {
 222       activate: function(g) { return {} },
 223       destroy: function() {
 224         destructions.push(name);
 225       }
 226     };
 227   };
 228
 229   var graph = document.getElementById("graph");
 230   var g = new Dygraph(graph, data, {
 231     plugins: [makePlugin('p'), makePlugin('q')]
 232   });
 233
 234   assert.deepEqual([], destructions);
 235   g.destroy();
 236   assert.deepEqual(['q', 'p'], destructions);
 237 });
 238
 239 });