auto_tests/tests/plugins_legend.js

   1 import Dygraph from '../../src/dygraph';
   2 import LegendPlugin from '../../src/plugins/legend';
   3 import Util from './Util';
   4
   5 describe("plugins-legend", function() {
   6
   7 var graph;
   8
   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');
  14 });
  15
  16 it('testLegendEscape', function() {
  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
  28   var g = new Dygraph(graph, data, opts);
  29
  30   var legendPlugin = new LegendPlugin();
  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
  43   var legendSpan = legendPlugin.legend_div_.querySelector("span b span");
  44   assert.equal(legendSpan.innerHTML, "&lt;script&gt;alert('XSS')&lt;/script&gt;");
  45 });
  46
  47
  48 it('should let labelsDiv be a string', function() {
  49   var labelsDiv = document.getElementById('label');
  50   var g = new Dygraph(graph, 'X,Y\n1,2\n', {labelsDiv: 'label'});
  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');
  58   var g = new Dygraph(graph, 'X,Y\n1,2\n', { labelsDiv: labelsDiv });
  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
  64 it('should render dashed patterns', function() {
  65   var g = new Dygraph(graph, 'X,Y\n1,2\n', {
  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 });
  78
  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
 116 });