Commit | Line | Data |
---|---|---|
e8c70e4e DV |
1 | import Dygraph from '../../src/dygraph'; |
2 | import LegendPlugin from '../../src/plugins/legend'; | |
3 | import Util from './Util'; | |
4 | ||
89fdcedb | 5 | describe("plugins-legend", function() { |
8b38c21f | 6 | |
e8c70e4e | 7 | var graph; |
8b38c21f | 8 | |
e8c70e4e DV |
9 | cleanupAfterEach(); |
10 | beforeEach(function() { | |
11 | var testDiv = document.getElementById('graph'); | |
12 | testDiv.innerHTML = "<div id='inner-graph'></div><div id='label'></div>"; | |
13 | graph = document.getElementById('inner-graph'); | |
89fdcedb | 14 | }); |
8b38c21f | 15 | |
89fdcedb | 16 | it('testLegendEscape', function() { |
8b38c21f A |
17 | var opts = { |
18 | width: 480, | |
19 | height: 320 | |
20 | }; | |
21 | var data = "X,<script>alert('XSS')</script>\n" + | |
22 | "0,-1\n" + | |
23 | "1,0\n" + | |
24 | "2,1\n" + | |
25 | "3,0\n" | |
26 | ; | |
27 | ||
8b38c21f A |
28 | var g = new Dygraph(graph, data, opts); |
29 | ||
e8c70e4e | 30 | var legendPlugin = new LegendPlugin(); |
8b38c21f A |
31 | legendPlugin.activate(g); |
32 | var e = { | |
33 | selectedX: 'selectedX', | |
34 | selectedPoints: [{ | |
35 | canvasy: 100, | |
36 | name: "<script>alert('XSS')</script>", | |
37 | yval: 10, | |
38 | }], | |
39 | dygraph: g | |
40 | } | |
41 | legendPlugin.select(e); | |
42 | ||
dc910fce DV |
43 | var legendSpan = legendPlugin.legend_div_.querySelector("span b span"); |
44 | assert.equal(legendSpan.innerHTML, "<script>alert('XSS')</script>"); | |
89fdcedb | 45 | }); |
8b38c21f | 46 | |
89fdcedb | 47 | |
457deb39 DV |
48 | it('should let labelsDiv be a string', function() { |
49 | var labelsDiv = document.getElementById('label'); | |
e8c70e4e | 50 | var g = new Dygraph(graph, 'X,Y\n1,2\n', {labelsDiv: 'label'}); |
457deb39 DV |
51 | null |
52 | g.setSelection(0); | |
53 | assert.equal('1: Y: 2', Util.nbspToSpace(labelsDiv.textContent)); | |
54 | }); | |
55 | ||
56 | it('should let labelsDiv be an Element', function() { | |
57 | var labelsDiv = document.getElementById('label'); | |
e8c70e4e | 58 | var g = new Dygraph(graph, 'X,Y\n1,2\n', { labelsDiv: labelsDiv }); |
457deb39 DV |
59 | assert.isNull(labelsDiv.getAttribute('class')); // dygraph-legend not added. |
60 | g.setSelection(0); | |
61 | assert.equal('1: Y: 2', Util.nbspToSpace(labelsDiv.textContent)); | |
62 | }); | |
63 | ||
5f01c8b6 | 64 | it('should render dashed patterns', function() { |
e8c70e4e | 65 | var g = new Dygraph(graph, 'X,Y\n1,2\n', { |
5f01c8b6 DV |
66 | strokePattern: [5, 5], |
67 | color: 'red', | |
68 | legend: 'always' | |
69 | }); | |
70 | ||
71 | // The legend has a dashed line and a label. | |
72 | var legendEl = document.querySelector('.dygraph-legend > span'); | |
73 | assert.equal(' Y', legendEl.textContent); | |
74 | var dashEl = document.querySelector('.dygraph-legend > span > div'); | |
75 | assert.equal(window.getComputedStyle(dashEl)['border-bottom-color'], | |
76 | 'rgb(255, 0, 0)'); | |
77 | }); | |
457deb39 | 78 | |
77ad1333 DV |
79 | it('should use a legendFormatter', function() { |
80 | var calls = []; | |
81 | var g = new Dygraph(graph, 'X,Y\n1,2\n', { | |
82 | color: 'red', | |
83 | legend: 'always', | |
84 | legendFormatter: function(data) { | |
85 | calls.push(data); | |
86 | // Note: can't check against `g` because it's not defined yet. | |
87 | assert(this.toString().indexOf('Dygraph') >= 0); | |
88 | return ''; | |
89 | } | |
90 | }); | |
91 | ||
92 | assert(calls.length == 1); // legend for no selected points | |
93 | g.setSelection(0); | |
94 | assert(calls.length == 2); // legend with selected points | |
95 | g.clearSelection(); | |
96 | assert(calls.length == 3); | |
97 | ||
98 | assert.equal(calls[0].x, undefined); | |
99 | assert.equal(calls[1].x, 1); | |
100 | assert.equal(calls[1].xHTML, '1'); | |
101 | assert.equal(calls[2].x, undefined); | |
102 | ||
103 | assert.equal(calls[0].series.length, 1); | |
104 | assert.equal(calls[1].series.length, 1); | |
105 | assert.equal(calls[2].series.length, 1); | |
106 | ||
107 | assert.equal(calls[0].series[0].y, undefined); | |
108 | assert.equal(calls[1].series[0].label, 'Y'); | |
109 | assert.equal(calls[1].series[0].labelHTML, 'Y'); | |
110 | assert.equal(calls[1].series[0].y, 2); | |
111 | assert.equal(calls[1].series[0].yHTML, '2'); | |
112 | assert.equal(calls[1].series[0].isVisible, true); | |
113 | assert.equal(calls[2].series[0].y, undefined); | |
114 | }); | |
115 | ||
da6089e8 JR |
116 | it('should include point drawn where canvas-y is 0', function () { |
117 | var graph = document.getElementById("graph"); | |
118 | var calls = [] | |
119 | function callback(data) { | |
120 | calls.push(data); | |
121 | }; | |
122 | ||
123 | var g = new Dygraph(document.getElementById("graph"), | |
124 | "X,Y\n" + | |
125 | "1,5\n" + | |
126 | "1,10\n" + | |
127 | "1,12\n", | |
128 | { | |
129 | legendFormatter: callback, | |
130 | axes: { | |
131 | y: { | |
132 | valueRange: [0, 10] | |
133 | } | |
134 | } | |
135 | }); | |
136 | g.setSelection(1); | |
137 | var data = calls[1]; | |
138 | assert.isTrue(data.series[0].isVisible); | |
139 | assert.notEqual(data.series[0].yHTML, ''); | |
140 | }); | |
141 | ||
89fdcedb | 142 | }); |