scrolling_div.js

   1 /**
   2  * @fileoverview Test cases for a graph contained in a scrolling div
   3  *
   4  * @author konigsberg@google.com (Robert Konigsbrg)
   5  */
   6
   7 import Dygraph from '../../src/dygraph';
   8 import DygraphOps from './DygraphOps';
   9
  10 describe("scrolling-div", function() {
  11
  12 var point, g;
  13
  14 beforeEach(function() {
  15
  16 var LOREM_IPSUM =
  17     "<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod\n" +
  18     "tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,\n" +
  19     "quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo\n" +
  20     "consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse\n" +
  21     "cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat\n" +
  22     "non proident, sunt in culpa qui officia deserunt mollit anim id est\n" +
  23     "laborum.</p>";
  24
  25   var testDiv = document.getElementById('graph');
  26   testDiv.innerHTML =
  27       "<div id='scroller' style='overflow: scroll; height: 450px; width: 800px;'>" +
  28       "<div id='graph-inner'></div>" +
  29       "<div style='height:100px; background-color:green;'>" + LOREM_IPSUM + " </div>" +
  30       "<div style='height:100px; background-color:red;'>" + LOREM_IPSUM + "</div>" +
  31       "</div>";
  32
  33   // The old test runner had an 8px margin on the body
  34   // The Mocha test runner does not. We set it on the test div to keep the
  35   // coordinates the same.
  36   testDiv.style.margin = '8px';
  37
  38   var data = [
  39       [ 10, 1 ],
  40       [ 20, 3 ],
  41       [ 30, 2 ],
  42       [ 40, 4 ],
  43       [ 50, 3 ],
  44       [ 60, 5 ],
  45       [ 70, 4 ],
  46       [ 80, 6 ] ];
  47
  48   var graph = document.getElementById("graph-inner");
  49
  50   point = null;
  51   g = new Dygraph(graph, data,
  52           {
  53             labels : ['a', 'b'],
  54             drawPoints : true,
  55             highlightCircleSize : 6,
  56             pointClickCallback : function(evt, p) {
  57               point = p;
  58             }
  59           }
  60       );
  61
  62 });
  63
  64 // This is usually something like 15, but for OS X Lion and its auto-hiding
  65 // scrollbars, it's 0. This is a large enough difference that we need to
  66 // consider it when synthesizing clicks.
  67 // Adapted from http://davidwalsh.name/detect-scrollbar-width
  68 var detectScrollbarWidth = function() {
  69   // Create the measurement node
  70   var scrollDiv = document.createElement("div");
  71   scrollDiv.style.width = "100px";
  72   scrollDiv.style.height = "100px";
  73   scrollDiv.style.overflow = "scroll";
  74   scrollDiv.style.position = "absolute";
  75   scrollDiv.style.top = "-9999px";
  76   document.body.appendChild(scrollDiv);
  77
  78   // Get the scrollbar width
  79   var scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth;
  80
  81   // Delete the DIV
  82   document.body.removeChild(scrollDiv);
  83
  84   return scrollbarWidth;
  85 };
  86
  87 /**
  88  * This tests that when the nested div is unscrolled, things work normally.
  89  */
  90 it('testUnscrolledDiv', function() {
  91
  92   document.getElementById('scroller').scrollTop = 0;
  93
  94   var clickOn4_40 = {
  95     clientX: 244,
  96     clientY: 131,
  97     screenX: 416,
  98     screenY: 320
  99   };
 100
 101   DygraphOps.dispatchCanvasEvent(g, DygraphOps.createEvent(clickOn4_40, { type : 'mousemove' }));
 102   DygraphOps.dispatchCanvasEvent(g, DygraphOps.createEvent(clickOn4_40, { type : 'mousedown' }));
 103   DygraphOps.dispatchCanvasEvent(g, DygraphOps.createEvent(clickOn4_40, { type : 'mouseup' }));
 104
 105   assert.equal(40, point.xval);
 106   assert.equal(4, point.yval);
 107 });
 108
 109 /**
 110  * This tests that when the nested div is scrolled, things work normally.
 111  */
 112 it('testScrolledDiv', function() {
 113   document.getElementById('scroller').scrollTop = 117;
 114
 115   var clickOn4_40 = {
 116     clientX: 244,
 117     clientY: 30 - detectScrollbarWidth(),
 118     screenX: 416,
 119     screenY: 160
 120   };
 121
 122   DygraphOps.dispatchCanvasEvent(g, DygraphOps.createEvent(clickOn4_40, { type : 'mousemove' }));
 123   DygraphOps.dispatchCanvasEvent(g, DygraphOps.createEvent(clickOn4_40, { type : 'mousedown' }));
 124   DygraphOps.dispatchCanvasEvent(g, DygraphOps.createEvent(clickOn4_40, { type : 'mouseup' }));
 125
 126   assert.equal(40, point.xval);
 127   assert.equal(4, point.yval);
 128 });
 129
 130 });