auto_tests/tests/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 var ScrollingDivTestCase = TestCase("scrolling-div");
   7
   8 ScrollingDivTestCase.prototype.setUp = function() {
   9
  10 var LOREM_IPSUM =
  11     "<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod\n" +
  12     "tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,\n" +
  13     "quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo\n" +
  14     "consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse\n" +
  15     "cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat\n" +
  16     "non proident, sunt in culpa qui officia deserunt mollit anim id est\n" +
  17     "laborum.</p>";
  18
  19   document.body.innerHTML =
  20       "<div id='scroller' style='overflow: scroll; height: 450px; width: 800px;'>" +
  21       "<div id='graph'></div>" +
  22       "<div style='height:100px; background-color:green;'>" + LOREM_IPSUM + " </div>" +
  23       "<div style='height:100px; background-color:red;'>" + LOREM_IPSUM + "</div>" +
  24       "</div>";
  25
  26   var data = [
  27       [ 10, 1 ],
  28       [ 20, 3 ],
  29       [ 30, 2 ],
  30       [ 40, 4 ],
  31       [ 50, 3 ],
  32       [ 60, 5 ],
  33       [ 70, 4 ],
  34       [ 80, 6 ] ];
  35
  36   var graph = document.getElementById("graph");
  37
  38   this.point = null;
  39   var self = this;
  40   this.g = new Dygraph(graph, data,
  41           {
  42             labels : ['a', 'b'],
  43             drawPoints : true,
  44             highlightCircleSize : 6,
  45             pointClickCallback : function(evt, point) {
  46               self.point = point;
  47             }
  48           }
  49       );
  50
  51 };
  52
  53 ScrollingDivTestCase.prototype.tearDown = function() {
  54 };
  55
  56 /**
  57  * This tests that when the nested div is unscrolled, things work normally.
  58  */
  59 ScrollingDivTestCase.prototype.testUnscrolledDiv = function() {
  60
  61   document.getElementById('scroller').scrollTop = 0;
  62
  63   var clickOn4_40 = {
  64     clientX: 244,
  65     clientY: 131,
  66     screenX: 416,
  67     screenY: 320
  68   };
  69
  70   DygraphOps.dispatchCanvasEvent(this.g, DygraphOps.createEvent(clickOn4_40, { type : 'mousemove' }));
  71   DygraphOps.dispatchCanvasEvent(this.g, DygraphOps.createEvent(clickOn4_40, { type : 'mousedown' }));
  72   DygraphOps.dispatchCanvasEvent(this.g, DygraphOps.createEvent(clickOn4_40, { type : 'mouseup' }));
  73
  74   assertEquals(40, this.point.xval);
  75   assertEquals(4, this.point.yval);
  76 };
  77
  78 /**
  79  * This tests that when the nested div is scrolled, things work normally.
  80  */
  81 ScrollingDivTestCase.prototype.testScrolledDiv = function() {
  82   document.getElementById('scroller').scrollTop = 117;
  83
  84   var clickOn4_40 = {
  85     clientX: 244,
  86     clientY: 20,
  87     screenX: 416,
  88     screenY: 160
  89   };
  90
  91   DygraphOps.dispatchCanvasEvent(this.g, DygraphOps.createEvent(clickOn4_40, { type : 'mousemove' }));
  92   DygraphOps.dispatchCanvasEvent(this.g, DygraphOps.createEvent(clickOn4_40, { type : 'mousedown' }));
  93   DygraphOps.dispatchCanvasEvent(this.g, DygraphOps.createEvent(clickOn4_40, { type : 'mouseup' }));
  94
  95   assertEquals(40, this.point.xval);
  96   assertEquals(4, this.point.yval);
  97 };