Merge pull request #674 from danvk/module
[dygraphs.git] / 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
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 });