Commit | Line | Data |
---|---|---|
d9fbba56 RK |
1 | /** |
2 | * @fileoverview Tests for the plugins option. | |
3 | * | |
4 | * @author konigsberg@google.com (Robert Konigsberg) | |
5 | */ | |
6 | var pluginsTestCase = TestCase("plugins"); | |
7 | ||
319d0361 DV |
8 | var data; |
9 | ||
d9fbba56 RK |
10 | pluginsTestCase.prototype.setUp = function() { |
11 | document.body.innerHTML = "<div id='graph'></div>"; | |
48238e1d | 12 | |
319d0361 | 13 | data = "X,Y1,Y2\n" + |
48238e1d DV |
14 | "0,1,2\n" + |
15 | "1,2,1\n" + | |
16 | "2,1,2\n" + | |
17 | "3,2,1\n" | |
18 | ; | |
d9fbba56 RK |
19 | }; |
20 | ||
21 | pluginsTestCase.prototype.tearDown = function() { | |
22 | }; | |
23 | ||
24 | pluginsTestCase.prototype.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 | ||
48238e1d | 44 | var graph = document.getElementById("graph"); |
319d0361 | 45 | var g = new Dygraph(graph, data, {plugins: [plugin]}); |
48238e1d DV |
46 | |
47 | assertEquals(1, draw); | |
48 | }; | |
49 | ||
50 | pluginsTestCase.prototype.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 | }; | |
d9fbba56 RK |
63 | |
64 | var graph = document.getElementById("graph"); | |
319d0361 | 65 | var g = new Dygraph(graph, data, {plugins: [p]}); |
d9fbba56 RK |
66 | |
67 | assertEquals(1, draw); | |
68 | }; | |
48238e1d DV |
69 | |
70 | pluginsTestCase.prototype.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 | assertEquals([ | |
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 | assertEquals([ | |
136 | ['plugin.pointClick', 20, -1] | |
137 | ], events); | |
138 | ||
139 | events = []; | |
140 | p.pointClickPreventDefault = false; | |
141 | p.clickPreventDefault = true; | |
142 | clickOnPoint(); | |
143 | assertEquals([ | |
144 | ['plugin.pointClick', 20, -1], | |
145 | ['pointClickCallback', 20, -1], | |
146 | ['plugin.click', 20] | |
147 | ], events); | |
148 | }; | |
149 | ||
150 | pluginsTestCase.prototype.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"); | |
319d0361 | 173 | var g = new Dygraph(graph, data, {plugins: [p]}); |
48238e1d DV |
174 | |
175 | // Initial draw sequence | |
176 | assertEquals([ | |
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 | assertEquals([ | |
48238e1d | 188 | "predraw", |
c04c8044 | 189 | "clearChart", |
48238e1d DV |
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 | assertEquals([ | |
200 | "clearChart", | |
201 | "willDrawChart", | |
202 | "didDrawChart" | |
203 | ], events); | |
204 | ||
205 | // New data triggers the full sequence. | |
206 | events = []; | |
319d0361 | 207 | g.updateOptions({file: data + '\n4,1,2'}); |
48238e1d DV |
208 | assertEquals([ |
209 | "dataWillUpdate", | |
210 | "dataDidUpdate", | |
48238e1d | 211 | "predraw", |
c04c8044 | 212 | "clearChart", |
48238e1d DV |
213 | "willDrawChart", |
214 | "didDrawChart" | |
215 | ], events); | |
216 | }; | |
92c5f414 DV |
217 | |
218 | pluginsTestCase.prototype.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"); | |
319d0361 | 230 | var g = new Dygraph(graph, data, { |
92c5f414 DV |
231 | plugins: [makePlugin('p'), makePlugin('q')] |
232 | }); | |
233 | ||
234 | assertEquals([], destructions); | |
235 | g.destroy(); | |
236 | assertEquals(['q', 'p'], destructions); | |
237 | }; |