Commit | Line | Data |
---|---|---|
d9fbba56 RK |
1 | /** |
2 | * @fileoverview Tests for the plugins option. | |
3 | * | |
4 | * @author konigsberg@google.com (Robert Konigsberg) | |
5 | */ | |
e8c70e4e DV |
6 | |
7 | import Dygraph from '../../src/dygraph'; | |
8 | import DygraphOps from './DygraphOps'; | |
9 | ||
89fdcedb | 10 | describe("plugins", function() { |
d9fbba56 | 11 | |
e8c70e4e DV |
12 | cleanupAfterEach(); |
13 | ||
319d0361 DV |
14 | var data; |
15 | ||
89fdcedb | 16 | beforeEach(function() { |
319d0361 | 17 | data = "X,Y1,Y2\n" + |
48238e1d DV |
18 | "0,1,2\n" + |
19 | "1,2,1\n" + | |
20 | "2,1,2\n" + | |
21 | "3,2,1\n" | |
22 | ; | |
89fdcedb | 23 | }); |
d9fbba56 | 24 | |
89fdcedb | 25 | it('testWillDrawChart', function() { |
d9fbba56 RK |
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 | ||
48238e1d | 45 | var graph = document.getElementById("graph"); |
319d0361 | 46 | var g = new Dygraph(graph, data, {plugins: [plugin]}); |
48238e1d | 47 | |
89fdcedb DV |
48 | assert.equal(1, draw); |
49 | }); | |
48238e1d | 50 | |
89fdcedb | 51 | it('testPassingInstance', function() { |
48238e1d DV |
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 | }; | |
d9fbba56 RK |
64 | |
65 | var graph = document.getElementById("graph"); | |
319d0361 | 66 | var g = new Dygraph(graph, data, {plugins: [p]}); |
d9fbba56 | 67 | |
89fdcedb DV |
68 | assert.equal(1, draw); |
69 | }); | |
48238e1d | 70 | |
89fdcedb | 71 | it('testPreventDefault', function() { |
48238e1d DV |
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(); | |
89fdcedb | 125 | assert.deepEqual([ |
48238e1d DV |
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(); | |
89fdcedb | 136 | assert.deepEqual([ |
48238e1d DV |
137 | ['plugin.pointClick', 20, -1] |
138 | ], events); | |
139 | ||
140 | events = []; | |
141 | p.pointClickPreventDefault = false; | |
142 | p.clickPreventDefault = true; | |
143 | clickOnPoint(); | |
89fdcedb | 144 | assert.deepEqual([ |
48238e1d DV |
145 | ['plugin.pointClick', 20, -1], |
146 | ['pointClickCallback', 20, -1], | |
147 | ['plugin.click', 20] | |
148 | ], events); | |
89fdcedb | 149 | }); |
48238e1d | 150 | |
89fdcedb | 151 | it('testEventSequence', function() { |
48238e1d DV |
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"); | |
319d0361 | 174 | var g = new Dygraph(graph, data, {plugins: [p]}); |
48238e1d DV |
175 | |
176 | // Initial draw sequence | |
89fdcedb | 177 | assert.deepEqual([ |
48238e1d DV |
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'}}}); | |
89fdcedb | 188 | assert.deepEqual([ |
48238e1d | 189 | "predraw", |
c04c8044 | 190 | "clearChart", |
48238e1d DV |
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}); | |
89fdcedb | 200 | assert.deepEqual([ |
48238e1d DV |
201 | "clearChart", |
202 | "willDrawChart", | |
203 | "didDrawChart" | |
204 | ], events); | |
205 | ||
206 | // New data triggers the full sequence. | |
207 | events = []; | |
319d0361 | 208 | g.updateOptions({file: data + '\n4,1,2'}); |
89fdcedb | 209 | assert.deepEqual([ |
48238e1d DV |
210 | "dataWillUpdate", |
211 | "dataDidUpdate", | |
48238e1d | 212 | "predraw", |
c04c8044 | 213 | "clearChart", |
48238e1d DV |
214 | "willDrawChart", |
215 | "didDrawChart" | |
216 | ], events); | |
89fdcedb | 217 | }); |
92c5f414 | 218 | |
89fdcedb | 219 | it('testDestroyCalledInOrder', function() { |
92c5f414 DV |
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"); | |
319d0361 | 231 | var g = new Dygraph(graph, data, { |
92c5f414 DV |
232 | plugins: [makePlugin('p'), makePlugin('q')] |
233 | }); | |
234 | ||
89fdcedb | 235 | assert.deepEqual([], destructions); |
92c5f414 | 236 | g.destroy(); |
89fdcedb DV |
237 | assert.deepEqual(['q', 'p'], destructions); |
238 | }); | |
239 | ||
240 | }); |