auto_tests/tests/simple_drawing.js

   1 // Copyright (c) 2011 Google, Inc.
   2 //
   3 // Permission is hereby granted, free of charge, to any person obtaining a copy
   4 // of this software and associated documentation files (the "Software"), to deal
   5 // in the Software without restriction, including without limitation the rights
   6 // to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
   7 // copies of the Software, and to permit persons to whom the Software is
   8 // furnished to do so, subject to the following conditions:
   9 //
  10 // The above copyright notice and this permission notice shall be included in
  11 // all copies or substantial portions of the Software.
  12 //
  13 // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
  14 // IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
  15 // FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
  16 // AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
  17 // LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
  18 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
  19 // THE SOFTWARE.
  20
  21 /**
  22  * @fileoverview Test cases for drawing simple lines.
  23  *
  24  * @author konigsberg@google.com (Robert Konigsberg)
  25  */
  26
  27 describe("simple-drawing", function() {
  28
  29 var ZERO_TO_FIFTY = 'X,Y\n10,0\n20,50';
  30
  31 var _origFunc = Dygraph.getContext;
  32 beforeEach(function() {
  33   document.body.innerHTML = "<div id='graph'></div>";
  34   Dygraph.getContext = function(canvas) {
  35     return new Proxy(_origFunc(canvas));
  36   }
  37 });
  38
  39 afterEach(function() {
  40   Dygraph.getContext = _origFunc;
  41 });
  42
  43 it('testDrawSimpleRangePlusOne', function() {
  44   var opts = {
  45     axes: {
  46       x: {
  47         drawGrid: false,
  48         drawAxis: false
  49       },
  50       y: {
  51         drawGrid: false,
  52         drawAxis: false
  53       }
  54     },
  55     valueRange: [0,51]
  56   };
  57
  58   var graph = document.getElementById("graph");
  59   var g = new Dygraph(graph, ZERO_TO_FIFTY, opts);
  60   var htx = g.hidden_ctx_;
  61
  62   CanvasAssertions.assertLineDrawn(htx, [0,320], [475,6.2745], {
  63     strokeStyle: "#008080",
  64     lineWidth: 1
  65   });
  66   g.destroy(); // to balance context saves and destroys.
  67   CanvasAssertions.assertBalancedSaveRestore(htx);
  68 });
  69
  70 // See http://code.google.com/p/dygraphs/issues/detail?id=185
  71 it('testDrawSimpleRangeZeroToFifty', function() {
  72   var opts = {
  73     axes : {
  74       x : {
  75         drawGrid: false,
  76         drawAxis: false,
  77       },
  78       y : {
  79         drawGrid: false,
  80         drawAxis: false,
  81       }
  82     },
  83     valueRange: [0,50] }
  84
  85   var graph = document.getElementById("graph");
  86   var g = new Dygraph(graph, ZERO_TO_FIFTY, opts);
  87   var htx = g.hidden_ctx_;
  88
  89   var lines = CanvasAssertions.getLinesDrawn(htx, {
  90     strokeStyle: "#008080",
  91     lineWidth: 1
  92   });
  93   assert.equal(1, lines.length);
  94   g.destroy(); // to balance context saves and destroys.
  95   CanvasAssertions.assertBalancedSaveRestore(htx);
  96 });
  97
  98 it('testDrawWithAxis', function() {
  99   var graph = document.getElementById("graph");
 100   var g = new Dygraph(graph, ZERO_TO_FIFTY);
 101
 102   var htx = g.hidden_ctx_;
 103   g.destroy(); // to balance context saves and destroys.
 104   CanvasAssertions.assertBalancedSaveRestore(htx);
 105 });
 106
 107 /**
 108  * Tests that it is drawing dashes, and it remember the dash history between
 109  * points.
 110  */
 111 it('testDrawSimpleDash', function() {
 112   var opts = {
 113     axes: {
 114       x: {
 115         drawGrid: false,
 116         drawAxis: false
 117       },
 118       y: {
 119         drawGrid: false,
 120         drawAxis: false
 121       }
 122     },
 123     series: {
 124       'Y1': {strokePattern: [25, 7, 7, 7]},
 125     },
 126     colors: ['#ff0000'],
 127     labels: ['X', 'Y']
 128   };
 129
 130   var graph = document.getElementById("graph");
 131   // Set the dims so we pass if default changes.
 132   graph.style.width='480px';
 133   graph.style.height='320px';
 134   var g = new Dygraph(graph, [[1, 4], [2, 5], [3, 3], [4, 7], [5, 9]], opts);
 135   var htx = g.hidden_ctx_;
 136
 137   // TODO(danvk): figure out a good way to restore this test.
 138   // assert.equal(29, CanvasAssertions.numLinesDrawn(htx, "#ff0000"));
 139   g.destroy(); // to balance context saves and destroys.
 140   CanvasAssertions.assertBalancedSaveRestore(htx);
 141 });
 142
 143 /**
 144  * Tests that thick lines are drawn continuously.
 145  * Regression test for http://code.google.com/p/dygraphs/issues/detail?id=328
 146  */
 147 it('testDrawThickLine', function() {
 148   var opts = {
 149     axes: {
 150       x: {
 151         drawGrid: false,
 152         drawAxis: false
 153       },
 154       y: {
 155         drawGrid: false,
 156         drawAxis: false
 157       }
 158     },
 159     strokeWidth: 15,
 160     colors: ['#ff0000'],
 161     labels: ['X', 'Y']
 162   };
 163
 164   var graph = document.getElementById("graph");
 165   // Set the dims so we pass if default changes.
 166   graph.style.width='480px';
 167   graph.style.height='320px';
 168   var g = new Dygraph(graph, [[1, 2], [2, 5], [3, 2], [4, 7], [5, 0]], opts);
 169   var htx = g.hidden_ctx_;
 170
 171   // There's a big gap in the line at (2, 5)
 172   // If the bug is fixed, then there should be some red going up from here.
 173   var xy = g.toDomCoords(2, 5);
 174   var x = Math.round(xy[0]), y = Math.round(xy[1]);
 175
 176   var sampler = new PixelSampler(g);
 177   assert.deepEqual([255,0,0,255], sampler.colorAtPixel(x, y));
 178   assert.deepEqual([255,0,0,255], sampler.colorAtPixel(x, y - 1));
 179   assert.deepEqual([255,0,0,255], sampler.colorAtPixel(x, y - 2));
 180
 181   // TODO(danvk): figure out a good way to restore this test.
 182   // assert.equal(29, CanvasAssertions.numLinesDrawn(htx, "#ff0000"));
 183   g.destroy(); // to balance context saves and destroys.
 184   CanvasAssertions.assertBalancedSaveRestore(htx);
 185 });
 186
 187 });