X-Git-Url: https://adrianiainlam.tk/git/?a=blobdiff_plain;f=auto_tests%2Ftests%2Frange_selector.js;h=b04cbb5d161781d589a3f2805fe86e635aa87650;hb=dc910fcebc0da0a621cf16073ebedabcff32fb12;hp=1f4dfe8cbf50b003a9a4a3264d40a68716e21d93;hpb=1085dbced14037c23267ea9faf6a5a159b570c03;p=dygraphs.git diff --git a/auto_tests/tests/range_selector.js b/auto_tests/tests/range_selector.js index 1f4dfe8..b04cbb5 100644 --- a/auto_tests/tests/range_selector.js +++ b/auto_tests/tests/range_selector.js @@ -4,16 +4,16 @@ * @fileoverview Regression tests for range selector. * @author paul.eric.felix@gmail.com (Paul Felix) */ -var RangeSelectorTestCase = TestCase("range-selector"); +describe("range-selector", function() { -RangeSelectorTestCase.prototype.setUp = function() { +beforeEach(function() { document.body.innerHTML = "
"; -}; +}); -RangeSelectorTestCase.prototype.tearDown = function() { -}; +afterEach(function() { +}); -RangeSelectorTestCase.prototype.testRangeSelector = function() { +it('testRangeSelector', function() { var opts = { width: 480, height: 320, @@ -33,10 +33,10 @@ RangeSelectorTestCase.prototype.testRangeSelector = function() { ]; var graph = document.getElementById("graph"); var g = new Dygraph(graph, data, opts); - this.assertGraphExistence(g, graph); -}; + assertGraphExistence(g, graph); +}); -RangeSelectorTestCase.prototype.testRangeSelectorWithErrorBars = function() { +it('testRangeSelectorWithErrorBars', function() { var opts = { width: 480, height: 320, @@ -57,10 +57,10 @@ RangeSelectorTestCase.prototype.testRangeSelectorWithErrorBars = function() { ]; var graph = document.getElementById("graph"); var g = new Dygraph(graph, data, opts); - this.assertGraphExistence(g, graph); -}; + assertGraphExistence(g, graph); +}); -RangeSelectorTestCase.prototype.testRangeSelectorWithCustomBars = function() { +it('testRangeSelectorWithCustomBars', function() { var opts = { width: 480, height: 320, @@ -81,10 +81,10 @@ RangeSelectorTestCase.prototype.testRangeSelectorWithCustomBars = function() { ]; var graph = document.getElementById("graph"); var g = new Dygraph(graph, data, opts); - this.assertGraphExistence(g, graph); -}; + assertGraphExistence(g, graph); +}); -RangeSelectorTestCase.prototype.testRangeSelectorWithLogScale = function() { +it('testRangeSelectorWithLogScale', function() { var opts = { width: 480, height: 320, @@ -105,17 +105,17 @@ RangeSelectorTestCase.prototype.testRangeSelectorWithLogScale = function() { ]; var graph = document.getElementById("graph"); var g = new Dygraph(graph, data, opts); - this.assertGraphExistence(g, graph); -}; + assertGraphExistence(g, graph); +}); -RangeSelectorTestCase.prototype.testRangeSelectorOptions = function() { +it('testRangeSelectorOptions', function() { var opts = { width: 480, height: 320, showRangeSelector: true, rangeSelectorHeight: 30, rangeSelectorPlotFillColor: 'lightyellow', - rangeSelectorPlotStyleColor: 'yellow', + rangeSelectorPlotFillGradientColor: 'rgba(200, 200, 42, 10)', labels: ['X', 'Y'] }; var data = [ @@ -131,10 +131,40 @@ RangeSelectorTestCase.prototype.testRangeSelectorOptions = function() { ]; var graph = document.getElementById("graph"); var g = new Dygraph(graph, data, opts); - this.assertGraphExistence(g, graph); -}; + assertGraphExistence(g, graph); +}); + +it('testAdditionalRangeSelectorOptions', function() { + var opts = { + width: 480, + height: 320, + showRangeSelector: true, + rangeSelectorHeight: 30, + rangeSelectorBackgroundStrokeColor: 'blue', + rangeSelectorBackgroundLineWidth: 3, + rangeSelectorPlotLineWidth: 0.5, + rangeSelectorForegroundStrokeColor: 'red', + rangeSelectorForegroundLineWidth: 2, + rangeSelectorAlpha: 0.8, + labels: ['X', 'Y'] + }; + var data = [ + [1, 10], + [2, 15], + [3, 10], + [4, 15], + [5, 10], + [6, 15], + [7, 10], + [8, 15], + [9, 10] + ]; + var graph = document.getElementById("graph"); + var g = new Dygraph(graph, data, opts); + assertGraphExistence(g, graph); +}); -RangeSelectorTestCase.prototype.testRangeSelectorEnablingAfterCreation = function() { +it('testRangeSelectorEnablingAfterCreation', function() { var opts = { width: 480, height: 320, @@ -154,11 +184,11 @@ RangeSelectorTestCase.prototype.testRangeSelectorEnablingAfterCreation = functio var graph = document.getElementById("graph"); var g = new Dygraph(graph, data, opts); g.updateOptions({showRangeSelector: true}); - this.assertGraphExistence(g, graph); -}; + assertGraphExistence(g, graph); +}); // The animatedZooms option does not work with the range selector. Make sure it gets turned off. -RangeSelectorTestCase.prototype.testRangeSelectorWithAnimatedZoomsOption = function() { +it('testRangeSelectorWithAnimatedZoomsOption', function() { var opts = { width: 480, height: 320, @@ -179,11 +209,11 @@ RangeSelectorTestCase.prototype.testRangeSelectorWithAnimatedZoomsOption = funct ]; var graph = document.getElementById("graph"); var g = new Dygraph(graph, data, opts); - this.assertGraphExistence(g, graph); - assertFalse(g.getOption('animatedZooms')); -}; + assertGraphExistence(g, graph); + assert.isFalse(g.getOption('animatedZooms')); +}); -RangeSelectorTestCase.prototype.testRangeSelectorWithAnimatedZoomsOption2 = function() { +it('testRangeSelectorWithAnimatedZoomsOption2', function() { var opts = { width: 480, height: 320, @@ -204,11 +234,11 @@ RangeSelectorTestCase.prototype.testRangeSelectorWithAnimatedZoomsOption2 = func var graph = document.getElementById("graph"); var g = new Dygraph(graph, data, opts); g.updateOptions({showRangeSelector: true}); - this.assertGraphExistence(g, graph); - assertFalse(g.getOption('animatedZooms')); -}; + assertGraphExistence(g, graph); + assert.isFalse(g.getOption('animatedZooms')); +}); -RangeSelectorTestCase.prototype.testRangeSelectorInteraction = function() { +it('testRangeSelectorInteraction', function() { var opts = { width: 480, height: 320, @@ -228,7 +258,7 @@ RangeSelectorTestCase.prototype.testRangeSelectorInteraction = function() { ]; var graph = document.getElementById("graph"); var g = new Dygraph(graph, data, opts); - this.assertGraphExistence(g, graph); + assertGraphExistence(g, graph); var zoomhandles = graph.getElementsByClassName('dygraph-rangesel-zoomhandle'); // Move left zoomhandle in @@ -259,7 +289,7 @@ RangeSelectorTestCase.prototype.testRangeSelectorInteraction = function() { var newXRange = g.xAxisRange().slice(); assert('left zoomhandle should have moved: '+newXRange[0]+'>'+xRange[0], newXRange[0] > xRange[0]); - assertEquals('right zoomhandle should not have moved', xRange[1], newXRange[1]); + assert.equal(xRange[1], newXRange[1], 'right zoomhandle should not have moved'); // Move right zoomhandle in xRange = newXRange; @@ -288,8 +318,8 @@ RangeSelectorTestCase.prototype.testRangeSelectorInteraction = function() { zoomhandles[1].dispatchEvent(mouseUpEvent); var newXRange = g.xAxisRange().slice(); - assert('right zoomhandle should have moved: '+newXRange[1]+'<'+xRange[1], newXRange[1] < xRange[1]); - assertEquals('left zoomhandle should not have moved', xRange[0], newXRange[0]); + assert(newXRange[1] < xRange[1], 'right zoomhandle should have moved: '+newXRange[1]+'<'+xRange[1]); + assert.equal(xRange[0], newXRange[0], 'left zoomhandle should not have moved'); // Pan left xRange = newXRange; @@ -325,15 +355,15 @@ RangeSelectorTestCase.prototype.testRangeSelectorInteraction = function() { var newXRange = g.xAxisRange().slice(); assert(newXRange[0]+'<'+xRange[0], newXRange[0] < xRange[0]); assert(newXRange[1]+'<'+xRange[1], newXRange[1] < xRange[1]); -}; +}); -RangeSelectorTestCase.prototype.testRangeSelectorPositionIfXAxisNotDrawn = function() { +it('testRangeSelectorPositionIfXAxisNotDrawn', function() { var opts = { width: 480, height: 100, xAxisHeight: 30, - drawXAxis: false, + axes : { x : { drawAxis: false }}, showRangeSelector: true, rangeSelectorHeight: 30, labels: ['X', 'Y'] @@ -344,17 +374,17 @@ RangeSelectorTestCase.prototype.testRangeSelectorPositionIfXAxisNotDrawn = funct ]; var graph = document.getElementById("graph"); var g = new Dygraph(graph, data, opts); - + //assert, that the range selector is at top position 70 since the 30px of the // xAxis shouldn't be reserved since it isn't drawn. - this.assertGraphExistence(g, graph); + assertGraphExistence(g, graph); var bgcanvas = graph.getElementsByClassName('dygraph-rangesel-bgcanvas')[0]; - assertEquals("Range selector is not at the expected position.","70px", bgcanvas.style.top); + assert.equal("70px", bgcanvas.style.top, "Range selector is not at the expected position."); var fgcanvas = graph.getElementsByClassName('dygraph-rangesel-fgcanvas')[0]; - assertEquals("Range selector is not at the expected position.","70px", fgcanvas.style.top); -}; + assert.equal("70px", fgcanvas.style.top, "Range selector is not at the expected position."); +}); -RangeSelectorTestCase.prototype.testMiniPlotDrawn = function() { +it('testMiniPlotDrawn', function() { // Install Proxy to track canvas calls. var origFunc = Dygraph.getContext; var miniHtx; @@ -371,7 +401,7 @@ RangeSelectorTestCase.prototype.testMiniPlotDrawn = function() { width: 480, height: 100, xAxisHeight: 30, - drawXAxis: false, + axes : { x : { drawAxis: false }}, showRangeSelector: true, rangeSelectorHeight: 30, rangeSelectorPlotStrokeColor: '#ff0000', @@ -386,14 +416,14 @@ RangeSelectorTestCase.prototype.testMiniPlotDrawn = function() { var g = new Dygraph(graph, data, opts); // TODO(danvk): more precise tests. - assertNotNull(miniHtx); - assertTrue(0 < CanvasAssertions.numLinesDrawn(miniHtx, '#ff0000')); + assert.isNotNull(miniHtx); + assert.isTrue(0 < CanvasAssertions.numLinesDrawn(miniHtx, '#ff0000')); Dygraph.getContext = origFunc; -}; +}); // Tests data computation for the mini plot with a single series. -RangeSelectorTestCase.prototype.testSingleCombinedSeries = function() { +it('testSingleCombinedSeries', function() { var opts = { showRangeSelector: true, labels: ['X', 'Y1'] @@ -407,10 +437,10 @@ RangeSelectorTestCase.prototype.testSingleCombinedSeries = function() { var g = new Dygraph(graph, data, opts); var rangeSelector = g.getPluginInstance_(Dygraph.Plugins.RangeSelector); - assertNotNull(rangeSelector); + assert.isNotNull(rangeSelector); var combinedSeries = rangeSelector.computeCombinedSeriesAndLimits_(); - assertEquals({ + assert.deepEqual({ yMin: 1 - 7 * 0.25, // 25% padding yMax: 8 + 7 * 0.25, data: [ @@ -419,11 +449,11 @@ RangeSelectorTestCase.prototype.testSingleCombinedSeries = function() { [10, 8] ] }, combinedSeries); -}; +}); // Tests that multiple series are averaged for the miniplot. -RangeSelectorTestCase.prototype.testCombinedSeries = function() { +it('testCombinedSeries', function() { var opts = { showRangeSelector: true, labels: ['X', 'Y1', 'Y2'] @@ -437,10 +467,10 @@ RangeSelectorTestCase.prototype.testCombinedSeries = function() { var g = new Dygraph(graph, data, opts); var rangeSelector = g.getPluginInstance_(Dygraph.Plugins.RangeSelector); - assertNotNull(rangeSelector); + assert.isNotNull(rangeSelector); var combinedSeries = rangeSelector.computeCombinedSeriesAndLimits_(); - assertEquals({ + assert.deepEqual({ yMin: 2 - 6 * 0.25, // 25% padding on combined series range. yMax: 8 + 6 * 0.25, data: [ @@ -449,14 +479,17 @@ RangeSelectorTestCase.prototype.testCombinedSeries = function() { [10, 8] ] }, combinedSeries); -}; +}); // Tests selection of a specific series to average for the mini plot. -RangeSelectorTestCase.prototype.testSelectedCombinedSeries = function() { +it('testSelectedCombinedSeries', function() { var opts = { showRangeSelector: true, - rangeSelectorCombinedSeries: [1, 3], // first and third series averaged, second skipped - labels: ['X', 'Y1', 'Y2', 'Y3', 'Y4'] + labels: ['X', 'Y1', 'Y2', 'Y3', 'Y4'], + series: { + 'Y1': { showInRangeSelector: true }, + 'Y3': { showInRangeSelector: true } + } }; var data = [ [0, 5, 8, 13, 21], // average (first and third) = 9 @@ -467,10 +500,10 @@ RangeSelectorTestCase.prototype.testSelectedCombinedSeries = function() { var g = new Dygraph(graph, data, opts); var rangeSelector = g.getPluginInstance_(Dygraph.Plugins.RangeSelector); - assertNotNull(rangeSelector); + assert.isNotNull(rangeSelector); var combinedSeries = rangeSelector.computeCombinedSeriesAndLimits_(); - assertEquals({ + assert.deepEqual({ yMin: 4 - 5 * 0.25, // 25% padding on combined series range. yMax: 9 + 5 * 0.25, data: [ @@ -479,10 +512,10 @@ RangeSelectorTestCase.prototype.testSelectedCombinedSeries = function() { [10, 5] ] }, combinedSeries); -}; +}); // Tests data computation for the mini plot with a single error bar series. -RangeSelectorTestCase.prototype.testSingleCombinedSeriesCustomBars = function() { +it('testSingleCombinedSeriesCustomBars', function() { var opts = { customBars: true, showRangeSelector: true, @@ -497,10 +530,10 @@ RangeSelectorTestCase.prototype.testSingleCombinedSeriesCustomBars = function() var g = new Dygraph(graph, data, opts); var rangeSelector = g.getPluginInstance_(Dygraph.Plugins.RangeSelector); - assertNotNull(rangeSelector); + assert.isNotNull(rangeSelector); var combinedSeries = rangeSelector.computeCombinedSeriesAndLimits_(); - assertEquals({ + assert.deepEqual({ yMin: 1 - 7 * 0.25, // 25% padding yMax: 8 + 7 * 0.25, data: [ @@ -509,9 +542,9 @@ RangeSelectorTestCase.prototype.testSingleCombinedSeriesCustomBars = function() [10, 8] ] }, combinedSeries); -}; +}); -RangeSelectorTestCase.prototype.testSingleCombinedSeriesErrorBars = function() { +it('testSingleCombinedSeriesErrorBars', function() { var opts = { errorBars: true, showRangeSelector: true, @@ -526,10 +559,10 @@ RangeSelectorTestCase.prototype.testSingleCombinedSeriesErrorBars = function() { var g = new Dygraph(graph, data, opts); var rangeSelector = g.getPluginInstance_(Dygraph.Plugins.RangeSelector); - assertNotNull(rangeSelector); + assert.isNotNull(rangeSelector); var combinedSeries = rangeSelector.computeCombinedSeriesAndLimits_(); - assertEquals({ + assert.deepEqual({ yMin: 1 - 7 * 0.25, // 25% padding yMax: 8 + 7 * 0.25, data: [ @@ -538,10 +571,10 @@ RangeSelectorTestCase.prototype.testSingleCombinedSeriesErrorBars = function() { [10, 8] ] }, combinedSeries); -}; +}); // Tests data computation for the mini plot with two custom bar series. -RangeSelectorTestCase.prototype.testTwoCombinedSeriesCustomBars = function() { +it('testTwoCombinedSeriesCustomBars', function() { var opts = { customBars: true, showRangeSelector: true, @@ -556,10 +589,10 @@ RangeSelectorTestCase.prototype.testTwoCombinedSeriesCustomBars = function() { var g = new Dygraph(graph, data, opts); var rangeSelector = g.getPluginInstance_(Dygraph.Plugins.RangeSelector); - assertNotNull(rangeSelector); + assert.isNotNull(rangeSelector); var combinedSeries = rangeSelector.computeCombinedSeriesAndLimits_(); - assertEquals({ + assert.deepEqual({ yMin: 3 - 7 * 0.25, // 25% padding yMax: 10 + 7 * 0.25, data: [ @@ -568,15 +601,17 @@ RangeSelectorTestCase.prototype.testTwoCombinedSeriesCustomBars = function() { [10, 10] ] }, combinedSeries); -}; +}); -RangeSelectorTestCase.prototype.assertGraphExistence = function(g, graph) { - assertNotNull(g); +var assertGraphExistence = function(g, graph) { + assert.isNotNull(g); var zoomhandles = graph.getElementsByClassName('dygraph-rangesel-zoomhandle'); - assertEquals(2, zoomhandles.length); + assert.equal(2, zoomhandles.length); var bgcanvas = graph.getElementsByClassName('dygraph-rangesel-bgcanvas'); - assertEquals(1, bgcanvas.length); + assert.equal(1, bgcanvas.length); var fgcanvas = graph.getElementsByClassName('dygraph-rangesel-fgcanvas'); - assertEquals(1, fgcanvas.length); -} + assert.equal(1, fgcanvas.length); +}; + +});