plugins.js

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