auto_tests/tests/plugins.js

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