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',
118 rangeSelectorPlotStyleColor
: 'yellow',
132 var graph
= document
.getElementById("graph");
133 var g
= new Dygraph(graph
, data
, opts
);
134 this.assertGraphExistence(g
, graph
);
137 RangeSelectorTestCase
.prototype.testRangeSelectorEnablingAfterCreation
= function() {
154 var graph
= document
.getElementById("graph");
155 var g
= new Dygraph(graph
, data
, opts
);
156 g
.updateOptions({showRangeSelector
: true});
157 this.assertGraphExistence(g
, graph
);
160 // The animatedZooms option does not work with the range selector. Make sure it gets turned off.
161 RangeSelectorTestCase
.prototype.testRangeSelectorWithAnimatedZoomsOption
= function() {
165 showRangeSelector
: true,
180 var graph
= document
.getElementById("graph");
181 var g
= new Dygraph(graph
, data
, opts
);
182 this.assertGraphExistence(g
, graph
);
183 assertFalse(g
.getOption('animatedZooms'));
186 RangeSelectorTestCase
.prototype.testRangeSelectorWithAnimatedZoomsOption2
= function() {
204 var graph
= document
.getElementById("graph");
205 var g
= new Dygraph(graph
, data
, opts
);
206 g
.updateOptions({showRangeSelector
: true});
207 this.assertGraphExistence(g
, graph
);
208 assertFalse(g
.getOption('animatedZooms'));
211 RangeSelectorTestCase
.prototype.testRangeSelectorInteraction
= function() {
215 showRangeSelector
: true,
229 var graph
= document
.getElementById("graph");
230 var g
= new Dygraph(graph
, data
, opts
);
231 this.assertGraphExistence(g
, graph
);
232 var zoomhandles
= graph
.getElementsByClassName('dygraph-rangesel-zoomhandle');
234 // Move left zoomhandle in
235 var xRange
= g
.xAxisRange().slice();
237 var mouseDownEvent
= DygraphOps
.createEvent({
243 zoomhandles
[0].dispatchEvent(mouseDownEvent
);
245 var mouseMoveEvent
= DygraphOps
.createEvent({
250 zoomhandles
[0].dispatchEvent(mouseMoveEvent
);
252 var mouseUpEvent
= DygraphOps
.createEvent({
258 zoomhandles
[0].dispatchEvent(mouseUpEvent
);
260 var newXRange
= g
.xAxisRange().slice();
261 assert('left zoomhandle should have moved: '+newXRange
[0]+'>'+xRange
[0], newXRange
[0] > xRange
[0]);
262 assertEquals('right zoomhandle should not have moved', xRange
[1], newXRange
[1]);
264 // Move right zoomhandle in
267 mouseDownEvent
= DygraphOps
.createEvent({
273 zoomhandles
[1].dispatchEvent(mouseDownEvent
);
275 mouseMoveEvent
= DygraphOps
.createEvent({
280 zoomhandles
[1].dispatchEvent(mouseMoveEvent
);
282 mouseUpEvent
= DygraphOps
.createEvent({
288 zoomhandles
[1].dispatchEvent(mouseUpEvent
);
290 var newXRange
= g
.xAxisRange().slice();
291 assert('right zoomhandle should have moved: '+newXRange
[1]+'<'+xRange
[1], newXRange
[1] < xRange
[1]);
292 assertEquals('left zoomhandle should not have moved', xRange
[0], newXRange
[0]);
296 var fgcanvas
= graph
.getElementsByClassName('dygraph-rangesel-fgcanvas')[0];
297 var x
= parseInt(zoomhandles
[0].style
.left
) + 20;
298 var y
= parseInt(zoomhandles
[0].style
.top
);
300 mouseDownEvent
= DygraphOps
.createEvent({
306 fgcanvas
.dispatchEvent(mouseDownEvent
);
310 mouseMoveEvent
= DygraphOps
.createEvent({
315 fgcanvas
.dispatchEvent(mouseMoveEvent
);
317 mouseUpEvent
= DygraphOps
.createEvent({
323 fgcanvas
.dispatchEvent(mouseUpEvent
);
325 var newXRange
= g
.xAxisRange().slice();
326 assert(newXRange
[0]+'<'+xRange
[0], newXRange
[0] < xRange
[0]);
327 assert(newXRange
[1]+'<'+xRange
[1], newXRange
[1] < xRange
[1]);
331 RangeSelectorTestCase
.prototype.testRangeSelectorPositionIfXAxisNotDrawn
= function() {
337 showRangeSelector
: true,
338 rangeSelectorHeight
: 30,
345 var graph
= document
.getElementById("graph");
346 var g
= new Dygraph(graph
, data
, opts
);
348 //assert, that the range selector is at top position 70 since the 30px of the
349 // xAxis shouldn't be reserved since it isn't drawn.
350 this.assertGraphExistence(g
, graph
);
351 var bgcanvas
= graph
.getElementsByClassName('dygraph-rangesel-bgcanvas')[0];
352 assertEquals("Range selector is not at the expected position.","70px", bgcanvas
.style
.top
);
353 var fgcanvas
= graph
.getElementsByClassName('dygraph-rangesel-fgcanvas')[0];
354 assertEquals("Range selector is not at the expected position.","70px", fgcanvas
.style
.top
);
357 RangeSelectorTestCase
.prototype.testMiniPlotDrawn
= function() {
358 // Install Proxy to track canvas calls.
359 var origFunc
= Dygraph
.getContext
;
361 Dygraph
.getContext
= function(canvas
) {
362 console
.log(canvas
.className
);
363 if (canvas
.className
!= 'dygraph-rangesel-bgcanvas') {
364 return origFunc(canvas
);
366 miniHtx
= new Proxy(origFunc(canvas
));
375 showRangeSelector
: true,
376 rangeSelectorHeight
: 30,
377 rangeSelectorPlotStrokeColor
: '#ff0000',
385 var graph
= document
.getElementById("graph");
386 var g
= new Dygraph(graph
, data
, opts
);
388 // TODO(danvk): more precise tests.
389 assertNotNull(miniHtx
);
390 assertTrue(0 < CanvasAssertions
.numLinesDrawn(miniHtx
, '#ff0000'));
392 Dygraph
.getContext
= origFunc
;
395 // Tests data computation for the mini plot with a single series.
396 RangeSelectorTestCase
.prototype.testSingleCombinedSeries
= function() {
398 showRangeSelector
: true,
406 var graph
= document
.getElementById("graph");
407 var g
= new Dygraph(graph
, data
, opts
);
409 var rangeSelector
= g
.getPluginInstance_(Dygraph
.Plugins
.RangeSelector
);
410 assertNotNull(rangeSelector
);
412 var combinedSeries
= rangeSelector
.computeCombinedSeriesAndLimits_();
414 yMin
: 1 - 7 * 0.25, // 25% padding
425 // Tests that multiple series are averaged for the miniplot.
426 RangeSelectorTestCase
.prototype.testCombinedSeries
= function() {
428 showRangeSelector
: true,
429 labels
: ['X', 'Y1', 'Y2']
432 [0, 1, 3], // average = 2
433 [5, 4, 6], // average = 5
434 [10, 7, 9] // average = 8
436 var graph
= document
.getElementById("graph");
437 var g
= new Dygraph(graph
, data
, opts
);
439 var rangeSelector
= g
.getPluginInstance_(Dygraph
.Plugins
.RangeSelector
);
440 assertNotNull(rangeSelector
);
442 var combinedSeries
= rangeSelector
.computeCombinedSeriesAndLimits_();
444 yMin
: 2 - 6 * 0.25, // 25% padding on combined series range.
454 // Tests selection of a specific series to average for the mini plot.
455 RangeSelectorTestCase
.prototype.testSelectedCombinedSeries
= function() {
457 showRangeSelector
: true,
458 labels
: ['X', 'Y1', 'Y2', 'Y3', 'Y4'],
460 'Y1': { showInRangeSelector
: true },
461 'Y3': { showInRangeSelector
: true }
465 [0, 5, 8, 13, 21], // average (first and third) = 9
466 [5, 1, 3, 7, 14], // average (first and third) = 4
467 [10, 0, 19, 10, 6] // average (first and third) = 5
469 var graph
= document
.getElementById("graph");
470 var g
= new Dygraph(graph
, data
, opts
);
472 var rangeSelector
= g
.getPluginInstance_(Dygraph
.Plugins
.RangeSelector
);
473 assertNotNull(rangeSelector
);
475 var combinedSeries
= rangeSelector
.computeCombinedSeriesAndLimits_();
477 yMin
: 4 - 5 * 0.25, // 25% padding on combined series range.
487 // Tests data computation for the mini plot with a single error bar series.
488 RangeSelectorTestCase
.prototype.testSingleCombinedSeriesCustomBars
= function() {
491 showRangeSelector
: true,
495 [0, [0, 1, 2]], // [low, value, high]
499 var graph
= document
.getElementById("graph");
500 var g
= new Dygraph(graph
, data
, opts
);
502 var rangeSelector
= g
.getPluginInstance_(Dygraph
.Plugins
.RangeSelector
);
503 assertNotNull(rangeSelector
);
505 var combinedSeries
= rangeSelector
.computeCombinedSeriesAndLimits_();
507 yMin
: 1 - 7 * 0.25, // 25% padding
517 RangeSelectorTestCase
.prototype.testSingleCombinedSeriesErrorBars
= function() {
520 showRangeSelector
: true,
524 [0, [1, 1]], // [value, standard deviation]
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 // Tests data computation for the mini plot with two custom bar series.
547 RangeSelectorTestCase
.prototype.testTwoCombinedSeriesCustomBars
= function() {
550 showRangeSelector
: true,
551 labels
: ['X', 'Y1', 'Y2']
554 [0, [0, 1, 2], [4, 5, 6]], // [low, value, high], avg_val = 3
555 [5, [1, 4, 5], [5, 8, 9]], // avg_val = 6
556 [10, [7, 8, 9], [11, 12, 13]] // avg_val = 10
558 var graph
= document
.getElementById("graph");
559 var g
= new Dygraph(graph
, data
, opts
);
561 var rangeSelector
= g
.getPluginInstance_(Dygraph
.Plugins
.RangeSelector
);
562 assertNotNull(rangeSelector
);
564 var combinedSeries
= rangeSelector
.computeCombinedSeriesAndLimits_();
566 yMin
: 3 - 7 * 0.25, // 25% padding
577 RangeSelectorTestCase
.prototype.assertGraphExistence
= function(g
, graph
) {
579 var zoomhandles
= graph
.getElementsByClassName('dygraph-rangesel-zoomhandle');
580 assertEquals(2, zoomhandles
.length
);
581 var bgcanvas
= graph
.getElementsByClassName('dygraph-rangesel-bgcanvas');
582 assertEquals(1, bgcanvas
.length
);
583 var fgcanvas
= graph
.getElementsByClassName('dygraph-rangesel-fgcanvas');
584 assertEquals(1, fgcanvas
.length
);