Add comment to resize test case as a follow on to pull request 260.
[dygraphs.git] / auto_tests / tests / range_selector.js
CommitLineData
ccd9d7c2
PF
1// Copyright 2011 Google Inc. All Rights Reserved.
2
3/**
4 * @fileoverview Regression tests for range selector.
5 * @author paul.eric.felix@gmail.com (Paul Felix)
6 */
7var RangeSelectorTestCase = TestCase("range-selector");
8
9RangeSelectorTestCase.prototype.setUp = function() {
10 document.body.innerHTML = "<div id='graph'></div>";
11};
12
13RangeSelectorTestCase.prototype.tearDown = function() {
14};
15
16RangeSelectorTestCase.prototype.testRangeSelector = function() {
17 var opts = {
18 width: 480,
19 height: 320,
20 showRangeSelector: true
21 };
22 var data = [
23 [1, 10],
24 [2, 15],
25 [3, 10],
26 [4, 15],
27 [5, 10],
28 [6, 15],
29 [7, 10],
30 [8, 15],
31 [9, 10]
32 ];
33 var graph = document.getElementById("graph");
34 var g = new Dygraph(graph, data, opts);
35 this.assertGraphExistence(g, graph);
36};
37
38RangeSelectorTestCase.prototype.testRangeSelectorWithErrorBars = function() {
39 var opts = {
40 width: 480,
41 height: 320,
42 errorBars: true,
43 showRangeSelector: true
44 };
45 var data = [
46 [1, [10, 10]],
47 [2, [15, 10]],
48 [3, [10, 10]],
49 [4, [15, 10]],
50 [5, [10, 10]],
51 [6, [15, 20]],
52 [7, [10, 20]],
53 [8, [15, 20]],
54 [9, [10, 20]]
55 ];
56 var graph = document.getElementById("graph");
57 var g = new Dygraph(graph, data, opts);
58 this.assertGraphExistence(g, graph);
59};
60
61RangeSelectorTestCase.prototype.testRangeSelectorWithCustomBars = function() {
62 var opts = {
63 width: 480,
64 height: 320,
65 customBars: true,
66 showRangeSelector: true
67 };
68 var data = [
69 [1, [10, 10, 100]],
70 [2, [15, 20, 110]],
71 [3, [10, 30, 100]],
72 [4, [15, 40, 110]],
73 [5, [10, 120, 100]],
74 [6, [15, 50, 110]],
75 [7, [10, 70, 100]],
76 [8, [15, 90, 110]],
77 [9, [10, 50, 100]]
78 ];
79 var graph = document.getElementById("graph");
80 var g = new Dygraph(graph, data, opts);
81 this.assertGraphExistence(g, graph);
82};
83
84RangeSelectorTestCase.prototype.testRangeSelectorWithLogScale = function() {
85 var opts = {
86 width: 480,
87 height: 320,
88 logscale: true,
89 showRangeSelector: true
90 };
91 var data = [
92 [1, 10],
93 [2, 15],
94 [3, 10],
95 [4, 15],
96 [5, 10],
97 [6, 15],
98 [7, 10],
99 [8, 15],
100 [9, 10]
101 ];
102 var graph = document.getElementById("graph");
103 var g = new Dygraph(graph, data, opts);
104 this.assertGraphExistence(g, graph);
105};
106
107RangeSelectorTestCase.prototype.testRangeSelectorOptions = function() {
108 var opts = {
109 width: 480,
110 height: 320,
111 showRangeSelector: true,
112 rangeSelectorHeight: 30,
113 rangeSelectorPlotFillColor: 'lightyellow',
114 rangeSelectorPlotStyleColor: 'yellow'
115 };
116 var data = [
117 [1, 10],
118 [2, 15],
119 [3, 10],
120 [4, 15],
121 [5, 10],
122 [6, 15],
123 [7, 10],
124 [8, 15],
125 [9, 10]
126 ];
127 var graph = document.getElementById("graph");
128 var g = new Dygraph(graph, data, opts);
129 this.assertGraphExistence(g, graph);
130};
131
ceb821aa
PF
132RangeSelectorTestCase.prototype.testRangeSelectorEnablingAfterCreation = function() {
133 var opts = {
134 width: 480,
135 height: 320
136 };
137 var data = [
138 [1, 10],
139 [2, 15],
140 [3, 10],
141 [4, 15],
142 [5, 10],
143 [6, 15],
144 [7, 10],
145 [8, 15],
146 [9, 10]
147 ];
148 var graph = document.getElementById("graph");
149 var g = new Dygraph(graph, data, opts);
150 g.updateOptions({showRangeSelector: true});
151 this.assertGraphExistence(g, graph);
152};
153
154// The animatedZooms option does not work with the range selector. Make sure it gets turned off.
155RangeSelectorTestCase.prototype.testRangeSelectorWithAnimatedZoomsOption = function() {
156 var opts = {
157 width: 480,
158 height: 320,
159 showRangeSelector: true,
160 animatedZooms: true
161 };
162 var data = [
163 [1, 10],
164 [2, 15],
165 [3, 10],
166 [4, 15],
167 [5, 10],
168 [6, 15],
169 [7, 10],
170 [8, 15],
171 [9, 10]
172 ];
173 var graph = document.getElementById("graph");
174 var g = new Dygraph(graph, data, opts);
175 this.assertGraphExistence(g, graph);
176 assertFalse(g.getOption('animatedZooms'));
177};
178
179RangeSelectorTestCase.prototype.testRangeSelectorWithAnimatedZoomsOption2 = function() {
180 var opts = {
181 width: 480,
182 height: 320,
183 animatedZooms: true
184 };
185 var data = [
186 [1, 10],
187 [2, 15],
188 [3, 10],
189 [4, 15],
190 [5, 10],
191 [6, 15],
192 [7, 10],
193 [8, 15],
194 [9, 10]
195 ];
196 var graph = document.getElementById("graph");
197 var g = new Dygraph(graph, data, opts);
198 g.updateOptions({showRangeSelector: true});
199 this.assertGraphExistence(g, graph);
200 assertFalse(g.getOption('animatedZooms'));
201};
202
2871344a
PF
203RangeSelectorTestCase.prototype.testRangeSelectorInteraction = function() {
204 var opts = {
205 width: 480,
206 height: 320,
207 showRangeSelector: true
208 };
209 var data = [
210 [1, 10],
211 [2, 15],
212 [3, 10],
213 [4, 15],
214 [5, 10],
215 [6, 15],
216 [7, 10],
217 [8, 15],
218 [9, 10]
219 ];
220 var graph = document.getElementById("graph");
221 var g = new Dygraph(graph, data, opts);
222 this.assertGraphExistence(g, graph);
223 var zoomhandles = graph.getElementsByClassName('dygraph-rangesel-zoomhandle');
224
225 // Move left zoomhandle in
226 var xRange = g.xAxisRange().slice();
227
228 var mouseDownEvent = DygraphOps.createEvent({
229 type : 'dragstart',
230 detail: 1,
231 clientX : 0,
232 clientY : 0
233 });
234 zoomhandles[0].dispatchEvent(mouseDownEvent);
235
236 var mouseMoveEvent = DygraphOps.createEvent({
237 type : 'mousemove',
238 clientX : 20,
239 clientY : 20
240 });
241 zoomhandles[0].dispatchEvent(mouseMoveEvent);
242
243 var mouseUpEvent = DygraphOps.createEvent({
244 type : 'mouseup',
245 detail: 1,
246 clientX : 20,
247 clientY : 20
248 });
249 zoomhandles[0].dispatchEvent(mouseUpEvent);
250
251 var newXRange = g.xAxisRange().slice();
252 assert('left zoomhandle should have moved: '+newXRange[0]+'>'+xRange[0], newXRange[0] > xRange[0]);
253 assertEquals('right zoomhandle should not have moved', xRange[1], newXRange[1]);
254
255 // Move right zoomhandle in
256 xRange = newXRange;
257
258 mouseDownEvent = DygraphOps.createEvent({
259 type : 'dragstart',
260 detail: 1,
261 clientX : 100,
262 clientY : 100
263 });
264 zoomhandles[1].dispatchEvent(mouseDownEvent);
265
266 mouseMoveEvent = DygraphOps.createEvent({
267 type : 'mousemove',
268 clientX : 80,
269 clientY : 80
270 });
271 zoomhandles[1].dispatchEvent(mouseMoveEvent);
272
273 mouseUpEvent = DygraphOps.createEvent({
274 type : 'mouseup',
275 detail: 1,
276 clientX : 80,
277 clientY : 80
278 });
279 zoomhandles[1].dispatchEvent(mouseUpEvent);
280
281 var newXRange = g.xAxisRange().slice();
282 assert('right zoomhandle should have moved: '+newXRange[1]+'<'+xRange[1], newXRange[1] < xRange[1]);
283 assertEquals('left zoomhandle should not have moved', xRange[0], newXRange[0]);
284
285 // Pan left
286 xRange = newXRange;
287 var fgcanvas = graph.getElementsByClassName('dygraph-rangesel-fgcanvas')[0];
288 var x = parseInt(zoomhandles[0].style.left) + 20;
289 var y = parseInt(zoomhandles[0].style.top);
290
291 mouseDownEvent = DygraphOps.createEvent({
292 type : 'mousedown',
293 detail: 1,
294 clientX : x,
295 clientY : y
296 });
297 fgcanvas.dispatchEvent(mouseDownEvent);
298
299 x -= 10;
300
301 mouseMoveEvent = DygraphOps.createEvent({
302 type : 'mousemove',
303 clientX : x,
304 clientY : y
305 });
306 fgcanvas.dispatchEvent(mouseMoveEvent);
307
308 mouseUpEvent = DygraphOps.createEvent({
309 type : 'mouseup',
310 detail: 1,
311 clientX : x,
312 clientY : y
313 });
314 fgcanvas.dispatchEvent(mouseUpEvent);
315
316 var newXRange = g.xAxisRange().slice();
317 assert(newXRange[0]+'<'+xRange[0], newXRange[0] < xRange[0]);
318 assert(newXRange[1]+'<'+xRange[1], newXRange[1] < xRange[1]);
319};
320
3718778b
DE
321
322RangeSelectorTestCase.prototype.testRangeSelectorPositionIfXAxisNotDrawn = function() {
323 var opts = {
324 width: 480,
325 height: 100,
326 xAxisHeight: 30,
327 drawXAxis: false,
328 showRangeSelector: true,
329 rangeSelectorHeight: 30
330 };
331 var data = [
332 [0, 1],
333 [10, 1]
334 ];
335 var graph = document.getElementById("graph");
336 var g = new Dygraph(graph, data, opts);
337
338 //assert, that the range selector is at top position 70 since the 30px of the
55cf43c3 339 // xAxis shouldn't be reserved since it isn't drawn.
3718778b
DE
340 this.assertGraphExistence(g, graph);
341 var bgcanvas = graph.getElementsByClassName('dygraph-rangesel-bgcanvas')[0];
342 assertEquals("Range selector is not at the expected position.","70px", bgcanvas.style.top);
343 var fgcanvas = graph.getElementsByClassName('dygraph-rangesel-fgcanvas')[0];
344 assertEquals("Range selector is not at the expected position.","70px", fgcanvas.style.top);
345};
346
ccd9d7c2
PF
347RangeSelectorTestCase.prototype.assertGraphExistence = function(g, graph) {
348 assertNotNull(g);
88c4a47e 349 var zoomhandles = graph.getElementsByClassName('dygraph-rangesel-zoomhandle');
ccd9d7c2 350 assertEquals(2, zoomhandles.length);
88c4a47e 351 var bgcanvas = graph.getElementsByClassName('dygraph-rangesel-bgcanvas');
ccd9d7c2 352 assertEquals(1, bgcanvas.length);
88c4a47e 353 var fgcanvas = graph.getElementsByClassName('dygraph-rangesel-fgcanvas');
ccd9d7c2
PF
354 assertEquals(1, fgcanvas.length);
355}