Merge pull request #674 from danvk/module
[dygraphs.git] / auto_tests / tests / 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 });