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=8e2c41aa1d78f7b1e2cad37d44ede848a8125fae;hpb=7f6a719056e1da51c5a27727ac5341d6664de428;p=dygraphs.git diff --git a/auto_tests/tests/grid_per_axis.js b/auto_tests/tests/grid_per_axis.js index 8e2c41a..3a4c475 100644 --- a/auto_tests/tests/grid_per_axis.js +++ b/auto_tests/tests/grid_per_axis.js @@ -4,26 +4,21 @@ * * @author david.eberlein@ch.sauter-bc.com (Fr. Sauter AG) */ -var GridPerAxisTestCase = TestCase("grid-per-axis"); -GridPerAxisTestCase.prototype.setUp = function() { - document.body.innerHTML = "
"; -}; +import Dygraph from '../../src/dygraph'; +import * as utils from '../../src/dygraph-utils'; -GridPerAxisTestCase.origFunc = Dygraph.getContext; +import Proxy from './Proxy'; +import CanvasAssertions from './CanvasAssertions'; +import Util from './Util'; +import PixelSampler from './PixelSampler'; -GridPerAxisTestCase.prototype.setUp = function() { - document.body.innerHTML = ""; - Dygraph.getContext = function(canvas) { - return new Proxy(GridPerAxisTestCase.origFunc(canvas)); - }; -}; +describe("grid-per-axis", function() { -GridPerAxisTestCase.prototype.tearDown = function() { - Dygraph.getContext = GridPerAxisTestCase.origFunc; -}; +cleanupAfterEach(); +useProxyCanvas(utils, Proxy); -GridPerAxisTestCase.prototype.testIndependentGrids = function() { +it('testIndependentGrids', function() { var opts = { width : 480, height : 320, @@ -50,7 +45,7 @@ GridPerAxisTestCase.prototype.testIndependentGrids = 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 ]; @@ -72,7 +67,7 @@ GridPerAxisTestCase.prototype.testIndependentGrids = 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)); @@ -81,9 +76,9 @@ GridPerAxisTestCase.prototype.testIndependentGrids = function() { CanvasAssertions.assertLineDrawn(htx, p1, p2, attrs); } } -}; +}); -GridPerAxisTestCase.prototype.testPerAxisGridColors = function() { +it('testPerAxisGridColors', function() { var opts = { width : 480, height : 320, @@ -114,7 +109,7 @@ GridPerAxisTestCase.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 ]; @@ -130,18 +125,20 @@ GridPerAxisTestCase.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); } } -}; -GridPerAxisTestCase.prototype.testPerAxisGridWidth = function() { +}); + +it('testPerAxisGridWidth', function() { var opts = { width : 480, height : 320, @@ -174,7 +171,7 @@ GridPerAxisTestCase.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 ]; @@ -192,38 +189,34 @@ GridPerAxisTestCase.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)); // Ignore the alpha value - var drawnPixeldown2 = Util.samplePixel(g.hidden_, x, y - 2).slice(0, 3); - var drawnPixeldown1 = Util.samplePixel(g.hidden_, x, y - 1).slice(0, 3); - var drawnPixel = Util.samplePixel(g.hidden_, x, y).slice(0, 3); - var drawnPixelup1 = Util.samplePixel(g.hidden_, x, y + 1).slice(0, 3); - var drawnPixelup2 = Util.samplePixel(g.hidden_, x, y + 2).slice(0, 3); + + // 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 y-grid color found at pixel: x: " + x + "y: " - + y, emptyColor, drawnPixeldown2); - assertEquals("Unexpected y-grid color found at pixel: x: " + x + "y: " - + y, gridColor, drawnPixeldown1); - assertEquals("Unexpected y-grid color found at pixel: x: " + x + "y: " - + y, gridColor, drawnPixel); - assertEquals("Unexpected y-grid color found at pixel: x: " + x + "y: " - + y, gridColor, drawnPixelup1); - assertEquals("Unexpected y-grid color found at pixel: x: " + x + "y: " - + y, emptyColor, 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 y2-grid color found at pixel: x: " + x + "y: " - + y, emptyColor, drawnPixeldown1); - assertEquals("Unexpected y2-grid color found at pixel: x: " + x + "y: " - + y, gridColor, drawnPixel); - assertEquals("Unexpected y2-grid color found at pixel: x: " + x + "y: " - + y, emptyColor, 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; } } @@ -233,31 +226,32 @@ GridPerAxisTestCase.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 x-grid color found at pixel: x: " + x + "y: " + y, - emptyColor, Util.samplePixel(g.hidden_, x - 4, y).slice(0, 3)); - assertEquals("Unexpected x-grid color found at pixel: x: " + x + "y: " + y, - gridColor, Util.samplePixel(g.hidden_, x - 3, y).slice(0, 3)); - assertEquals("Unexpected x-grid color found at pixel: x: " + x + "y: " + y, - gridColor, Util.samplePixel(g.hidden_, x - 2, y).slice(0, 3)); - assertEquals("Unexpected x-grid color found at pixel: x: " + x + "y: " + y, - gridColor, Util.samplePixel(g.hidden_, x - 1, y).slice(0, 3)); - assertEquals("Unexpected x-grid color found at pixel: x: " + x + "y: " + y, - gridColor, Util.samplePixel(g.hidden_, x, y).slice(0, 3)); - assertEquals("Unexpected x-grid color found at pixel: x: " + x + "y: " + y, - gridColor, Util.samplePixel(g.hidden_, x + 1, y).slice(0, 3)); - assertEquals("Unexpected x-grid color found at pixel: x: " + x + "y: " + y, - emptyColor, Util.samplePixel(g.hidden_, x + 2, y).slice(0, 3)); + 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); } -}; +}); -GridPerAxisTestCase.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 : 120, + 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 : { @@ -269,7 +263,12 @@ GridPerAxisTestCase.prototype.testGridLinePattern = function() { } }, axes : { + x : { + drawGrid: false, + drawAxis: false, + }, y : { + drawAxis : false, gridLineColor : "#0000ff", gridLinePattern : [ 10, 10 ] } @@ -279,7 +278,7 @@ GridPerAxisTestCase.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 ]; @@ -291,6 +290,7 @@ GridPerAxisTestCase.prototype.testGridLinePattern = function() { return Math.round(y) - 1; } var x, y; + var sampler = new PixelSampler(g); // Step through all gridlines of the axis for (var i = 0; i < yGridlines.length; i++) { y = halfDown(g.toDomYCoord(yGridlines[i], 0)); @@ -299,20 +299,25 @@ GridPerAxisTestCase.prototype.testGridLinePattern = function() { // 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 = Util.samplePixel(g.hidden_, x, y).slice(0,3); + var drawnPixel = sampler.rgbAtPixel(x, y); var pattern = (Math.floor((x) / 10)) % 2; switch (pattern) { case 0: // fill - assertEquals("Unexpected filled grid-pattern color found at pixel: x: " + x + " y: " - + y, [ 0, 0, 255 ], 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 empty grid-pattern color found at pixel: x: " + x + " y: " - + y, [ 0, 0, 0 ], drawnPixel); + assert.deepEqual([ 0, 0, 0 ], drawnPixel, + "Unexpected empty grid-pattern color found at pixel: x: " + x + " y: " + y); break; } } } -}; +}); +} + +});