X-Git-Url: https://adrianiainlam.tk/git/?a=blobdiff_plain;ds=sidebyside;f=auto_tests%2Ftests%2Fgrid_per_axis.js;h=3a4c475c25f26f4b5337b5524af569b8e3e1b394;hb=64f1c4dfd7425931fcd1bd9949157c0ba6958656;hp=1e71aad03a6b1817c9c65b9452d3e2d87b181201;hpb=4a0567daedb72437ba4b780f3f13670a1467d38c;p=dygraphs.git diff --git a/auto_tests/tests/grid_per_axis.js b/auto_tests/tests/grid_per_axis.js index 1e71aad..3a4c475 100644 --- a/auto_tests/tests/grid_per_axis.js +++ b/auto_tests/tests/grid_per_axis.js @@ -1,30 +1,24 @@ /** - * @fileoverview Test cases for the option "stepPlot" especially for the - * scenario where the option is not set for the whole graph but - * for single series. + * @fileoverview Test cases for the per-axis grid options, including the new + * option "gridLinePattern". * * @author david.eberlein@ch.sauter-bc.com (Fr. Sauter AG) */ -var StepTestCase = TestCase("grid_per_axis"); -StepTestCase.prototype.setUp = function() { - document.body.innerHTML = "
"; -}; +import Dygraph from '../../src/dygraph'; +import * as utils from '../../src/dygraph-utils'; -StepTestCase.origFunc = Dygraph.getContext; +import Proxy from './Proxy'; +import CanvasAssertions from './CanvasAssertions'; +import Util from './Util'; +import PixelSampler from './PixelSampler'; -StepTestCase.prototype.setUp = function() { - document.body.innerHTML = ""; - Dygraph.getContext = function(canvas) { - return new Proxy(StepTestCase.origFunc(canvas)); - }; -}; +describe("grid-per-axis", function() { -StepTestCase.prototype.tearDown = function() { - Dygraph.getContext = StepTestCase.origFunc; -}; +cleanupAfterEach(); +useProxyCanvas(utils, Proxy); -StepTestCase.prototype.testIndependantGrids = function() { +it('testIndependentGrids', function() { var opts = { width : 480, height : 320, @@ -51,7 +45,7 @@ StepTestCase.prototype.testIndependantGrids = function() { var graph = document.getElementById("graph"); var g = new Dygraph(graph, data, opts); - htx = g.hidden_ctx_; + var htx = g.hidden_ctx_; // The expected gridlines var yGridlines = [ 0, 20, 40, 60, 80, 100, 120 ]; @@ -73,7 +67,7 @@ StepTestCase.prototype.testIndependantGrids = function() { for ( var i = 0; i < gridlines[axis].length; i++) { // Check the labels: var labels = Util.getYLabels(axis + 1); - assertEquals("Expected label not found.", gridlines[axis][i], labels[i]); + assert.equal(gridlines[axis][i], labels[i], "Expected label not found."); // Check that the grid was drawn. y = halfDown(g.toDomYCoord(gridlines[axis][i], axis)); @@ -82,9 +76,9 @@ StepTestCase.prototype.testIndependantGrids = function() { CanvasAssertions.assertLineDrawn(htx, p1, p2, attrs); } } -}; +}); -StepTestCase.prototype.testPerAxisGridColors = function() { +it('testPerAxisGridColors', function() { var opts = { width : 480, height : 320, @@ -115,7 +109,7 @@ StepTestCase.prototype.testPerAxisGridColors = function() { [ 5, 110, 333 ] ]; var graph = document.getElementById("graph"); var g = new Dygraph(graph, data, opts); - htx = g.hidden_ctx_; + var htx = g.hidden_ctx_; // The expected gridlines var yGridlines = [ 20, 40, 60, 80, 100, 120 ]; @@ -131,18 +125,20 @@ StepTestCase.prototype.testPerAxisGridColors = function() { } var x, y; x = halfUp(g.plotter_.area.x); + var sampler = new PixelSampler(g); // Step through y(0) and y2(1) axis for ( var axis = 0; axis < 2; axis++) { // Step through all gridlines of the axis for ( var i = 0; i < gridlines[axis].length; i++) { y = halfDown(g.toDomYCoord(gridlines[axis][i], axis)); // Check the grid colors. - assertEquals("Unexpected grid color found at pixel: x: " + x + "y: " + y, - gridColors[axis], Util.samplePixel(g.hidden_, x, y)); + assert.deepEqual(gridColors[axis], sampler.colorAtPixel(x, y), + "Unexpected grid color found at pixel: x: " + x + "y: " + y); } } -}; -StepTestCase.prototype.testPerAxisGridWidth = function() { +}); + +it('testPerAxisGridWidth', function() { var opts = { width : 480, height : 320, @@ -175,13 +171,15 @@ StepTestCase.prototype.testPerAxisGridWidth = function() { [ 5, 110, 333 ] ]; var graph = document.getElementById("graph"); var g = new Dygraph(graph, data, opts); - htx = g.hidden_ctx_; + var htx = g.hidden_ctx_; // The expected gridlines var yGridlines = [ 20, 40, 60, 80 ]; var y2Gridlines = [ 50, 100, 150, 200, 250, 350 ]; var gridlines = [ yGridlines, y2Gridlines ]; var xGridlines = [ 2, 3, 4 ]; + var gridColor = [ 255, 0, 0 ]; + var emptyColor = [ 0, 0, 0 ]; function halfUp(x) { return Math.round(x) + 1; @@ -191,37 +189,34 @@ StepTestCase.prototype.testPerAxisGridWidth = function() { } var x, y; x = halfUp(g.plotter_.area.x + 10); + + var sampler = new PixelSampler(g); // Step through y(0) and y2(1) axis for ( var axis = 0; axis < 2; axis++) { // Step through all gridlines of the axis for ( var i = 0; i < gridlines[axis].length; i++) { y = halfDown(g.toDomYCoord(gridlines[axis][i], axis)); - var drawnPixeldown2 = Util.samplePixel(g.hidden_, x, y - 2); - var drawnPixeldown1 = Util.samplePixel(g.hidden_, x, y - 1); - var drawnPixel = Util.samplePixel(g.hidden_, x, y); - var drawnPixelup1 = Util.samplePixel(g.hidden_, x, y + 1); - var drawnPixelup2 = Util.samplePixel(g.hidden_, x, y + 2); + // Ignore the alpha value + + // FIXME(pholden): this test fails with a context pixel ratio of 2. + var drawnPixeldown2 = sampler.rgbAtPixel(x, y - 2); + var drawnPixeldown1 = sampler.rgbAtPixel(x, y - 1); + var drawnPixel = sampler.rgbAtPixel(x, y); + var drawnPixelup1 = sampler.rgbAtPixel(x, y + 1); + var drawnPixelup2 = sampler.rgbAtPixel(x, y + 2); // Check the grid width. switch (axis) { case 0: // y with 2 pixels width - assertEquals("Unexpected grid color found at pixel: x: " + x + "y: " - + y, [ 0, 0, 0, 0 ], drawnPixeldown2); - assertEquals("Unexpected grid color found at pixel: x: " + x + "y: " - + y, [ 255, 0, 0, 127 ], drawnPixeldown1); - assertEquals("Unexpected grid color found at pixel: x: " + x + "y: " - + y, [ 255, 0, 0, 255 ], drawnPixel); - assertEquals("Unexpected grid color found at pixel: x: " + x + "y: " - + y, [ 255, 0, 0, 128 ], drawnPixelup1); - assertEquals("Unexpected grid color found at pixel: x: " + x + "y: " - + y, [ 0, 0, 0, 0 ], drawnPixelup2); + assert.deepEqual(emptyColor, drawnPixeldown2, "Unexpected y-grid color found at pixel: x: " + x + "y: " + y); + assert.deepEqual(gridColor, drawnPixeldown1, "Unexpected y-grid color found at pixel: x: " + x + "y: " + y); + assert.deepEqual(gridColor, drawnPixel, "Unexpected y-grid color found at pixel: x: " + x + "y: " + y); + assert.deepEqual(gridColor, drawnPixelup1, "Unexpected y-grid color found at pixel: x: " + x + "y: " + y); + assert.deepEqual(emptyColor, drawnPixelup2, "Unexpected y-grid color found at pixel: x: " + x + "y: " + y); break; case 1: // y2 with 1 pixel width - assertEquals("Unexpected grid color found at pixel: x: " + x + "y: " - + y, [ 0, 0, 0, 0 ], drawnPixeldown1); - assertEquals("Unexpected grid color found at pixel: x: " + x + "y: " - + y, [ 255, 0, 0, 255 ], drawnPixel); - assertEquals("Unexpected grid color found at pixel: x: " + x + "y: " - + y, [ 0, 0, 0, 0 ], drawnPixelup1); + assert.deepEqual(emptyColor, drawnPixeldown1, "Unexpected y2-grid color found at pixel: x: " + x + "y: " + y); + assert.deepEqual(gridColor, drawnPixel, "Unexpected y2-grid color found at pixel: x: " + x + "y: " + y); + assert.deepEqual(emptyColor, drawnPixelup1, "Unexpected y2-grid color found at pixel: x: " + x + "y: " + y); break; } } @@ -231,30 +226,32 @@ StepTestCase.prototype.testPerAxisGridWidth = function() { y = halfDown(g.plotter_.area.y) + 10; for ( var i = 0; i < xGridlines.length; i++) { x = halfUp(g.toDomXCoord(xGridlines[i])); - assertEquals("Unexpected grid color found at pixel: x: " + x + "y: " + y, [ - 0, 0, 0, 0 ], Util.samplePixel(g.hidden_, x - 4, y)); - assertEquals("Unexpected grid color found at pixel: x: " + x + "y: " + y, [ - 255, 0, 0, 128 ], Util.samplePixel(g.hidden_, x - 3, y)); - assertEquals("Unexpected grid color found at pixel: x: " + x + "y: " + y, [ - 255, 0, 0, 255 ], Util.samplePixel(g.hidden_, x - 2, y)); - assertEquals("Unexpected grid color found at pixel: x: " + x + "y: " + y, [ - 255, 0, 0, 255 ], Util.samplePixel(g.hidden_, x - 1, y)); - assertEquals("Unexpected grid color found at pixel: x: " + x + "y: " + y, [ - 255, 0, 0, 255 ], Util.samplePixel(g.hidden_, x, y)); - assertEquals("Unexpected grid color found at pixel: x: " + x + "y: " + y, [ - 255, 0, 0, 128 ], Util.samplePixel(g.hidden_, x + 1, y)); - assertEquals("Unexpected grid color found at pixel: x: " + x + "y: " + y, [ - 0, 0, 0, 0 ], Util.samplePixel(g.hidden_, x + 2, y)); + assert.deepEqual(emptyColor, sampler.rgbAtPixel(x - 4, y), + "Unexpected x-grid color found at pixel: x: " + x + "y: " + y); + assert.deepEqual(gridColor, sampler.rgbAtPixel(x - 3, y), + "Unexpected x-grid color found at pixel: x: " + x + "y: " + y); + assert.deepEqual(gridColor, sampler.rgbAtPixel(x - 2, y), + "Unexpected x-grid color found at pixel: x: " + x + "y: " + y); + assert.deepEqual(gridColor, sampler.rgbAtPixel(x - 1, y), + "Unexpected x-grid color found at pixel: x: " + x + "y: " + y); + assert.deepEqual(gridColor, sampler.rgbAtPixel(x, y), + "Unexpected x-grid color found at pixel: x: " + x + "y: " + y); + assert.deepEqual(gridColor, sampler.rgbAtPixel(x + 1, y), + "Unexpected x-grid color found at pixel: x: " + x + "y: " + y); + assert.deepEqual(emptyColor, sampler.rgbAtPixel(x + 2, y), + "Unexpected x-grid color found at pixel: x: " + x + "y: " + y); } -}; -StepTestCase.prototype.testGridLinePattern = function() { +}); + +// PhantomJS 1.9.x does not support setLineDash +// When Travis-CI updates to Phantom2, this can be re-enabled. +// See https://github.com/ariya/phantomjs/issues/12948 +if (!navigator.userAgent.match(/PhantomJS\/1.9/)) { +it('testGridLinePattern', function() { var opts = { width : 480, height : 320, errorBars : false, - drawXGrid : false, - drawXAxis : false, - drawYAxis : false, labels : [ "X", "Left", "Right" ], colors : [ "rgba(0,0,0,0)", "rgba(0,0,0,0)" ], series : { @@ -266,9 +263,14 @@ StepTestCase.prototype.testGridLinePattern = function() { } }, axes : { + x : { + drawGrid: false, + drawAxis: false, + }, y : { + drawAxis : false, gridLineColor : "#0000ff", - gridLinePattern : [ 4, 4 ] + gridLinePattern : [ 10, 10 ] } } }; @@ -276,7 +278,7 @@ StepTestCase.prototype.testGridLinePattern = function() { [ 5, 110, 333 ] ]; var graph = document.getElementById("graph"); var g = new Dygraph(graph, data, opts); - htx = g.hidden_ctx_; + var htx = g.hidden_ctx_; // The expected gridlines var yGridlines = [ 0, 20, 40, 60, 80, 100, 120 ]; @@ -288,24 +290,34 @@ StepTestCase.prototype.testGridLinePattern = function() { return Math.round(y) - 1; } var x, y; - x = halfUp(g.plotter_.area.x); + var sampler = new PixelSampler(g); // Step through all gridlines of the axis - for ( var i = 0; i < yGridlines.length; i++) { + for (var i = 0; i < yGridlines.length; i++) { y = halfDown(g.toDomYCoord(yGridlines[i], 0)); // Step through the pixels of the line and test the pattern. - for (x; x < g.plotter_.area.w; x++) { - var drawnPixel = Util.samplePixel(g.hidden_, x, y); - var pattern = (Math.floor((x) / 4)) % 2; + for (x = halfUp(g.plotter_.area.x); x < g.plotter_.area.w; x++) { + // avoid checking the edge pixels since they differ depending on the OS. + var pixelpos = x % 10; + if(pixelpos < 1 || pixelpos > 8) continue; + + // XXX: check what this looks like at master + + // Ignore alpha + var drawnPixel = sampler.rgbAtPixel(x, y); + var pattern = (Math.floor((x) / 10)) % 2; switch (pattern) { case 0: // fill - assertEquals("Unexpected grid color found at pixel: x: " + x + "y: " - + y, [ 0, 0, 255, 77 ], drawnPixel); + assert.deepEqual([ 0, 0, 255 ], drawnPixel, + "Unexpected filled grid-pattern color found at pixel: x: " + x + " y: " + y); break; case 1: // no fill - assertEquals("Unexpected grid color found at pixel: x: " + x + "y: " - + y, [ 0, 0, 0, 0 ], drawnPixel); + assert.deepEqual([ 0, 0, 0 ], drawnPixel, + "Unexpected empty grid-pattern color found at pixel: x: " + x + " y: " + y); break; } } } -}; +}); +} + +});