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 if (canvas
.className
!= 'dygraph-rangesel-bgcanvas') {
363 return origFunc(canvas
);
365 miniHtx
= new Proxy(origFunc(canvas
));
374 showRangeSelector
: true,
375 rangeSelectorHeight
: 30,
376 rangeSelectorPlotStrokeColor
: '#ff0000',
384 var graph
= document
.getElementById("graph");
385 var g
= new Dygraph(graph
, data
, opts
);
387 // TODO(danvk): more precise tests.
388 assertTrue(0 < CanvasAssertions
.numLinesDrawn(miniHtx
, '#ff0000'));
390 Dygraph
.getContext
= origFunc
;
393 // Tests data computation for the mini plot with a single series.
394 RangeSelectorTestCase
.prototype.testSingleCombinedSeries
= function() {
396 showRangeSelector
: true,
404 var graph
= document
.getElementById("graph");
405 var g
= new Dygraph(graph
, data
, opts
);
407 var rangeSelector
= g
.getPluginInstance_(Dygraph
.Plugins
.RangeSelector
);
408 assertNotNull(rangeSelector
);
410 var combinedSeries
= rangeSelector
.computeCombinedSeriesAndLimits_();
412 yMin
: 1 - 7 * 0.25, // 25% padding
423 // Tests that multiple series are averaged for the miniplot.
424 RangeSelectorTestCase
.prototype.testCombinedSeries
= function() {
426 showRangeSelector
: true,
427 labels
: ['X', 'Y1', 'Y2']
430 [0, 1, 3], // average = 2
431 [5, 4, 6], // average = 5
432 [10, 7, 9] // average = 8
434 var graph
= document
.getElementById("graph");
435 var g
= new Dygraph(graph
, data
, opts
);
437 var rangeSelector
= g
.getPluginInstance_(Dygraph
.Plugins
.RangeSelector
);
438 assertNotNull(rangeSelector
);
440 var combinedSeries
= rangeSelector
.computeCombinedSeriesAndLimits_();
442 yMin
: 2 - 6 * 0.25, // 25% padding on combined series range.
452 // Tests data computation for the mini plot with a single error bar series.
453 RangeSelectorTestCase
.prototype.testSingleCombinedSeriesCustomBars
= function() {
456 showRangeSelector
: true,
460 [0, [0, 1, 2]], // [low, value, high]
464 var graph
= document
.getElementById("graph");
465 var g
= new Dygraph(graph
, data
, opts
);
467 var rangeSelector
= g
.getPluginInstance_(Dygraph
.Plugins
.RangeSelector
);
468 assertNotNull(rangeSelector
);
470 var combinedSeries
= rangeSelector
.computeCombinedSeriesAndLimits_();
472 yMin
: 1 - 7 * 0.25, // 25% padding
482 RangeSelectorTestCase
.prototype.testSingleCombinedSeriesErrorBars
= function() {
485 showRangeSelector
: true,
489 [0, [1, 1]], // [value, standard deviation]
493 var graph
= document
.getElementById("graph");
494 var g
= new Dygraph(graph
, data
, opts
);
496 var rangeSelector
= g
.getPluginInstance_(Dygraph
.Plugins
.RangeSelector
);
497 assertNotNull(rangeSelector
);
499 var combinedSeries
= rangeSelector
.computeCombinedSeriesAndLimits_();
501 yMin
: 1 - 7 * 0.25, // 25% padding
511 // Tests data computation for the mini plot with two custom bar series.
512 RangeSelectorTestCase
.prototype.testTwoCombinedSeriesCustomBars
= function() {
515 showRangeSelector
: true,
516 labels
: ['X', 'Y1', 'Y2']
519 [0, [0, 1, 2], [4, 5, 6]], // [low, value, high], avg_val = 3
520 [5, [1, 4, 5], [5, 8, 9]], // avg_val = 6
521 [10, [7, 8, 9], [11, 12, 13]] // avg_val = 10
523 var graph
= document
.getElementById("graph");
524 var g
= new Dygraph(graph
, data
, opts
);
526 var rangeSelector
= g
.getPluginInstance_(Dygraph
.Plugins
.RangeSelector
);
527 assertNotNull(rangeSelector
);
529 var combinedSeries
= rangeSelector
.computeCombinedSeriesAndLimits_();
531 yMin
: 3 - 7 * 0.25, // 25% padding
542 RangeSelectorTestCase
.prototype.assertGraphExistence
= function(g
, graph
) {
544 var zoomhandles
= graph
.getElementsByClassName('dygraph-rangesel-zoomhandle');
545 assertEquals(2, zoomhandles
.length
);
546 var bgcanvas
= graph
.getElementsByClassName('dygraph-rangesel-bgcanvas');
547 assertEquals(1, bgcanvas
.length
);
548 var fgcanvas
= graph
.getElementsByClassName('dygraph-rangesel-fgcanvas');
549 assertEquals(1, fgcanvas
.length
);