1 // Copyright 2011 Google Inc. All Rights Reserved.
4 * @fileoverview Regression tests for range selector.
5 * @author paul.eric.felix@gmail.com (Paul Felix)
7 var RangeSelectorTestCase
= TestCase("range-selector");
9 RangeSelectorTestCase
.prototype.setUp
= function() {
10 document
.body
.innerHTML
= "<div id='graph'></div>";
13 RangeSelectorTestCase
.prototype.tearDown
= function() {
16 RangeSelectorTestCase
.prototype.testRangeSelector
= function() {
20 showRangeSelector
: true,
34 var graph
= document
.getElementById("graph");
35 var g
= new Dygraph(graph
, data
, opts
);
36 this.assertGraphExistence(g
, graph
);
39 RangeSelectorTestCase
.prototype.testRangeSelectorWithErrorBars
= function() {
44 showRangeSelector
: true,
58 var graph
= document
.getElementById("graph");
59 var g
= new Dygraph(graph
, data
, opts
);
60 this.assertGraphExistence(g
, graph
);
63 RangeSelectorTestCase
.prototype.testRangeSelectorWithCustomBars
= function() {
68 showRangeSelector
: true,
82 var graph
= document
.getElementById("graph");
83 var g
= new Dygraph(graph
, data
, opts
);
84 this.assertGraphExistence(g
, graph
);
87 RangeSelectorTestCase
.prototype.testRangeSelectorWithLogScale
= function() {
92 showRangeSelector
: true,
106 var graph
= document
.getElementById("graph");
107 var g
= new Dygraph(graph
, data
, opts
);
108 this.assertGraphExistence(g
, graph
);
111 RangeSelectorTestCase
.prototype.testRangeSelectorOptions
= function() {
115 showRangeSelector
: true,
116 rangeSelectorHeight
: 30,
117 rangeSelectorPlotFillColor
: 'lightyellow',
131 var graph
= document
.getElementById("graph");
132 var g
= new Dygraph(graph
, data
, opts
);
133 this.assertGraphExistence(g
, graph
);
136 RangeSelectorTestCase
.prototype.testAdditionalRangeSelectorOptions
= function() {
140 showRangeSelector
: true,
141 rangeSelectorHeight
: 30,
142 rangeSelectorBGStrokeColor
: 'blue',
143 rangeSelectorBGLineWidth
: 3,
144 rangeSelectorPlotLineWidth
: 0.5,
145 rangeSelectorFGStrokeColor
: 'red',
146 rangeSelectorFGLineWidth
: 2,
147 rangeSelectorAlpha
: 0.8,
161 var graph
= document
.getElementById("graph");
162 var g
= new Dygraph(graph
, data
, opts
);
163 this.assertGraphExistence(g
, graph
);
166 RangeSelectorTestCase
.prototype.testRangeSelectorEnablingAfterCreation
= function() {
183 var graph
= document
.getElementById("graph");
184 var g
= new Dygraph(graph
, data
, opts
);
185 g
.updateOptions({showRangeSelector
: true});
186 this.assertGraphExistence(g
, graph
);
189 // The animatedZooms option does not work with the range selector. Make sure it gets turned off.
190 RangeSelectorTestCase
.prototype.testRangeSelectorWithAnimatedZoomsOption
= function() {
194 showRangeSelector
: true,
209 var graph
= document
.getElementById("graph");
210 var g
= new Dygraph(graph
, data
, opts
);
211 this.assertGraphExistence(g
, graph
);
212 assertFalse(g
.getOption('animatedZooms'));
215 RangeSelectorTestCase
.prototype.testRangeSelectorWithAnimatedZoomsOption2
= function() {
233 var graph
= document
.getElementById("graph");
234 var g
= new Dygraph(graph
, data
, opts
);
235 g
.updateOptions({showRangeSelector
: true});
236 this.assertGraphExistence(g
, graph
);
237 assertFalse(g
.getOption('animatedZooms'));
240 RangeSelectorTestCase
.prototype.testRangeSelectorInteraction
= function() {
244 showRangeSelector
: true,
258 var graph
= document
.getElementById("graph");
259 var g
= new Dygraph(graph
, data
, opts
);
260 this.assertGraphExistence(g
, graph
);
261 var zoomhandles
= graph
.getElementsByClassName('dygraph-rangesel-zoomhandle');
263 // Move left zoomhandle in
264 var xRange
= g
.xAxisRange().slice();
266 var mouseDownEvent
= DygraphOps
.createEvent({
272 zoomhandles
[0].dispatchEvent(mouseDownEvent
);
274 var mouseMoveEvent
= DygraphOps
.createEvent({
279 zoomhandles
[0].dispatchEvent(mouseMoveEvent
);
281 var mouseUpEvent
= DygraphOps
.createEvent({
287 zoomhandles
[0].dispatchEvent(mouseUpEvent
);
289 var newXRange
= g
.xAxisRange().slice();
290 assert('left zoomhandle should have moved: '+newXRange
[0]+'>'+xRange
[0], newXRange
[0] > xRange
[0]);
291 assertEquals('right zoomhandle should not have moved', xRange
[1], newXRange
[1]);
293 // Move right zoomhandle in
296 mouseDownEvent
= DygraphOps
.createEvent({
302 zoomhandles
[1].dispatchEvent(mouseDownEvent
);
304 mouseMoveEvent
= DygraphOps
.createEvent({
309 zoomhandles
[1].dispatchEvent(mouseMoveEvent
);
311 mouseUpEvent
= DygraphOps
.createEvent({
317 zoomhandles
[1].dispatchEvent(mouseUpEvent
);
319 var newXRange
= g
.xAxisRange().slice();
320 assert('right zoomhandle should have moved: '+newXRange
[1]+'<'+xRange
[1], newXRange
[1] < xRange
[1]);
321 assertEquals('left zoomhandle should not have moved', xRange
[0], newXRange
[0]);
325 var fgcanvas
= graph
.getElementsByClassName('dygraph-rangesel-fgcanvas')[0];
326 var x
= parseInt(zoomhandles
[0].style
.left
) + 20;
327 var y
= parseInt(zoomhandles
[0].style
.top
);
329 mouseDownEvent
= DygraphOps
.createEvent({
335 fgcanvas
.dispatchEvent(mouseDownEvent
);
339 mouseMoveEvent
= DygraphOps
.createEvent({
344 fgcanvas
.dispatchEvent(mouseMoveEvent
);
346 mouseUpEvent
= DygraphOps
.createEvent({
352 fgcanvas
.dispatchEvent(mouseUpEvent
);
354 var newXRange
= g
.xAxisRange().slice();
355 assert(newXRange
[0]+'<'+xRange
[0], newXRange
[0] < xRange
[0]);
356 assert(newXRange
[1]+'<'+xRange
[1], newXRange
[1] < xRange
[1]);
360 RangeSelectorTestCase
.prototype.testRangeSelectorPositionIfXAxisNotDrawn
= function() {
365 axes
: { x
: { drawAxis
: false }},
366 showRangeSelector
: true,
367 rangeSelectorHeight
: 30,
374 var graph
= document
.getElementById("graph");
375 var g
= new Dygraph(graph
, data
, opts
);
377 //assert, that the range selector is at top position 70 since the 30px of the
378 // xAxis shouldn't be reserved since it isn't drawn.
379 this.assertGraphExistence(g
, graph
);
380 var bgcanvas
= graph
.getElementsByClassName('dygraph-rangesel-bgcanvas')[0];
381 assertEquals("Range selector is not at the expected position.","70px", bgcanvas
.style
.top
);
382 var fgcanvas
= graph
.getElementsByClassName('dygraph-rangesel-fgcanvas')[0];
383 assertEquals("Range selector is not at the expected position.","70px", fgcanvas
.style
.top
);
386 RangeSelectorTestCase
.prototype.testMiniPlotDrawn
= function() {
387 // Install Proxy to track canvas calls.
388 var origFunc
= Dygraph
.getContext
;
390 Dygraph
.getContext
= function(canvas
) {
391 console
.log(canvas
.className
);
392 if (canvas
.className
!= 'dygraph-rangesel-bgcanvas') {
393 return origFunc(canvas
);
395 miniHtx
= new Proxy(origFunc(canvas
));
403 axes
: { x
: { drawAxis
: false }},
404 showRangeSelector
: true,
405 rangeSelectorHeight
: 30,
406 rangeSelectorPlotStrokeColor
: '#ff0000',
414 var graph
= document
.getElementById("graph");
415 var g
= new Dygraph(graph
, data
, opts
);
417 // TODO(danvk): more precise tests.
418 assertNotNull(miniHtx
);
419 assertTrue(0 < CanvasAssertions
.numLinesDrawn(miniHtx
, '#ff0000'));
421 Dygraph
.getContext
= origFunc
;
424 // Tests data computation for the mini plot with a single series.
425 RangeSelectorTestCase
.prototype.testSingleCombinedSeries
= function() {
427 showRangeSelector
: true,
435 var graph
= document
.getElementById("graph");
436 var g
= new Dygraph(graph
, data
, opts
);
438 var rangeSelector
= g
.getPluginInstance_(Dygraph
.Plugins
.RangeSelector
);
439 assertNotNull(rangeSelector
);
441 var combinedSeries
= rangeSelector
.computeCombinedSeriesAndLimits_();
443 yMin
: 1 - 7 * 0.25, // 25% padding
454 // Tests that multiple series are averaged for the miniplot.
455 RangeSelectorTestCase
.prototype.testCombinedSeries
= function() {
457 showRangeSelector
: true,
458 labels
: ['X', 'Y1', 'Y2']
461 [0, 1, 3], // average = 2
462 [5, 4, 6], // average = 5
463 [10, 7, 9] // average = 8
465 var graph
= document
.getElementById("graph");
466 var g
= new Dygraph(graph
, data
, opts
);
468 var rangeSelector
= g
.getPluginInstance_(Dygraph
.Plugins
.RangeSelector
);
469 assertNotNull(rangeSelector
);
471 var combinedSeries
= rangeSelector
.computeCombinedSeriesAndLimits_();
473 yMin
: 2 - 6 * 0.25, // 25% padding on combined series range.
483 // Tests selection of a specific series to average for the mini plot.
484 RangeSelectorTestCase
.prototype.testSelectedCombinedSeries
= function() {
486 showRangeSelector
: true,
487 labels
: ['X', 'Y1', 'Y2', 'Y3', 'Y4'],
489 'Y1': { showInRangeSelector
: true },
490 'Y3': { showInRangeSelector
: true }
494 [0, 5, 8, 13, 21], // average (first and third) = 9
495 [5, 1, 3, 7, 14], // average (first and third) = 4
496 [10, 0, 19, 10, 6] // average (first and third) = 5
498 var graph
= document
.getElementById("graph");
499 var g
= new Dygraph(graph
, data
, opts
);
501 var rangeSelector
= g
.getPluginInstance_(Dygraph
.Plugins
.RangeSelector
);
502 assertNotNull(rangeSelector
);
504 var combinedSeries
= rangeSelector
.computeCombinedSeriesAndLimits_();
506 yMin
: 4 - 5 * 0.25, // 25% padding on combined series range.
516 // Tests data computation for the mini plot with a single error bar series.
517 RangeSelectorTestCase
.prototype.testSingleCombinedSeriesCustomBars
= function() {
520 showRangeSelector
: true,
524 [0, [0, 1, 2]], // [low, value, high]
528 var graph
= document
.getElementById("graph");
529 var g
= new Dygraph(graph
, data
, opts
);
531 var rangeSelector
= g
.getPluginInstance_(Dygraph
.Plugins
.RangeSelector
);
532 assertNotNull(rangeSelector
);
534 var combinedSeries
= rangeSelector
.computeCombinedSeriesAndLimits_();
536 yMin
: 1 - 7 * 0.25, // 25% padding
546 RangeSelectorTestCase
.prototype.testSingleCombinedSeriesErrorBars
= function() {
549 showRangeSelector
: true,
553 [0, [1, 1]], // [value, standard deviation]
557 var graph
= document
.getElementById("graph");
558 var g
= new Dygraph(graph
, data
, opts
);
560 var rangeSelector
= g
.getPluginInstance_(Dygraph
.Plugins
.RangeSelector
);
561 assertNotNull(rangeSelector
);
563 var combinedSeries
= rangeSelector
.computeCombinedSeriesAndLimits_();
565 yMin
: 1 - 7 * 0.25, // 25% padding
575 // Tests data computation for the mini plot with two custom bar series.
576 RangeSelectorTestCase
.prototype.testTwoCombinedSeriesCustomBars
= function() {
579 showRangeSelector
: true,
580 labels
: ['X', 'Y1', 'Y2']
583 [0, [0, 1, 2], [4, 5, 6]], // [low, value, high], avg_val = 3
584 [5, [1, 4, 5], [5, 8, 9]], // avg_val = 6
585 [10, [7, 8, 9], [11, 12, 13]] // avg_val = 10
587 var graph
= document
.getElementById("graph");
588 var g
= new Dygraph(graph
, data
, opts
);
590 var rangeSelector
= g
.getPluginInstance_(Dygraph
.Plugins
.RangeSelector
);
591 assertNotNull(rangeSelector
);
593 var combinedSeries
= rangeSelector
.computeCombinedSeriesAndLimits_();
595 yMin
: 3 - 7 * 0.25, // 25% padding
606 RangeSelectorTestCase
.prototype.assertGraphExistence
= function(g
, graph
) {
608 var zoomhandles
= graph
.getElementsByClassName('dygraph-rangesel-zoomhandle');
609 assertEquals(2, zoomhandles
.length
);
610 var bgcanvas
= graph
.getElementsByClassName('dygraph-rangesel-bgcanvas');
611 assertEquals(1, bgcanvas
.length
);
612 var fgcanvas
= graph
.getElementsByClassName('dygraph-rangesel-fgcanvas');
613 assertEquals(1, fgcanvas
.length
);