resize.js

   1 /**
   2  * @fileoverview Test cases for resizing.
   3  *
   4  * @author konigsberg@google.com (Robert Konigsberg)
   5  */
   6
   7 import Dygraph from '../../src/dygraph';
   8
   9 import DygraphOps from './DygraphOps';
  10 import Util from './Util';
  11
  12 describe("resize", function() {
  13
  14 cleanupAfterEach();
  15
  16 var data =
  17       "X,Y\n" +
  18       "1,100\n" +
  19       "2,200\n" +
  20       "3,300\n" +
  21       "4,400\n" +
  22       "5,300\n" +
  23       "6,100\n";
  24
  25 it('testResizeMaintainsMouseOperations', function() {
  26   var graph = document.getElementById('graph');
  27   graph.setAttribute('style', 'width: 640px; height: 480px;');
  28
  29   var callbackCount = 0;
  30   var callback = function() {
  31     callbackCount++;
  32   }
  33
  34   // Strum the mouse along the y-coordinate y, from 0 to x2. These are DOM values.
  35   var strum = function(g, y, x2) {
  36     DygraphOps.dispatchMouseDown_Point(g, 0, y);
  37     for (var x = 0; x < x2; x++) {
  38       DygraphOps.dispatchMouseMove_Point(g, x, y);
  39     }
  40     DygraphOps.dispatchMouseUp_Point(g, x2 - 1, y);
  41   }
  42
  43   var g = new Dygraph(graph, data, {highlightCallback: callback});
  44
  45   strum(g, 300, 640);
  46   assert.equal(6, callbackCount);
  47
  48   graph.style.width = "500px";
  49   g.resize();
  50
  51   callbackCount = 0;
  52   strum(g, 300, 500);
  53   assert.equal(6, callbackCount);
  54 });
  55
  56 /**
  57  * Tests that a graph created in a not-displayed div works as expected
  58  * if the graph options include height and width. Resize not needed.
  59  */
  60 it('testHiddenDivWithSizedGraph', function() {
  61   var div = document.getElementById("graph");
  62
  63   div.style.display = 'none';
  64   var g = new Dygraph(div, data, {width: 400, height: 300});
  65   div.style.display = '';
  66
  67   var area = g.getArea();
  68   assert.isTrue(area.w > 0);
  69   assert.isTrue(area.h > 0);
  70 });
  71
  72 /**
  73  * Tests that a graph created in a not-displayed div with
  74  * CSS-specified size but no graph height or width options works as
  75  * expected. The user needs to call resize() on it after displaying
  76  * it.
  77  */
  78 it('testHiddenDivWithResize', function() {
  79   var div = document.getElementById("graph");
  80
  81   div.style.display = 'none';
  82   div.style.width = '400px';
  83   div.style.height = '300px';
  84
  85   // Setting strokeWidth 3 removes any ambiguitiy from the pixel sampling
  86   // request, below.
  87   var g = new Dygraph(div, data, {strokeWidth: 3});
  88   div.style.display = '';
  89
  90   g.resize();
  91   var area = g.getArea();
  92   assert.isTrue(area.w > 0);
  93   assert.isTrue(area.h > 0);
  94
  95   // Regression test: check that graph remains visible after no-op resize.
  96   g.resize();
  97   var x = Math.floor(g.toDomXCoord(2));
  98   var y = Math.floor(g.toDomYCoord(200));
  99   assert.deepEqual([0, 128, 128, 255], Util.samplePixel(g.hidden_, x, y),
 100                    "Unexpected grid color found at pixel: x: " + x + " y: " + y);
 101 });
 102
 103 });