add web tests for charts

diff --git a/server/sonar-web/package.json b/server/sonar-web/package.json
index ba159c70afbd05c811998abbdaf723e3e5c127a0..7f2a33ad1716e12d6fc8d57b158dad9516b4702a 100644 (file)
--- a/server/sonar-web/package.json
+++ b/server/sonar-web/package.json
@@ -14,6 +14,7 @@
     "browserify-shim": "3.8.10",
     "chai": "3.3.0",
     "classnames": "^2.2.0",
+    "d3": "3.5.6",
     "del": "2.0.2",
     "document-offset": "^1.0.4",
     "event-stream": "3.3.1",

diff --git a/server/sonar-web/src/main/js/components/charts/bubble-chart.js b/server/sonar-web/src/main/js/components/charts/bubble-chart.js
index 87f7ef84f5a24b75baf7dac9739ae8c97b40d096..b0851ef81277e58793608b63f753341bda17ce60 100644 (file)
--- a/server/sonar-web/src/main/js/components/charts/bubble-chart.js
+++ b/server/sonar-web/src/main/js/components/charts/bubble-chart.js
@@ -39,7 +39,7 @@ export const BubbleChart = React.createClass({
   mixins: [ResizeMixin, TooltipsMixin],
 
   propTypes: {
-    items: React.PropTypes.arrayOf(React.PropTypes.object),
+    items: React.PropTypes.arrayOf(React.PropTypes.object).isRequired,
     sizeRange: React.PropTypes.arrayOf(React.PropTypes.number),
     displayXGrid: React.PropTypes.bool,
     displayXTicks: React.PropTypes.bool,

diff --git a/server/sonar-web/src/main/js/components/charts/mixins/tooltips-mixin.js b/server/sonar-web/src/main/js/components/charts/mixins/tooltips-mixin.js
index 2b3fc24346e87bec9ff6e72cf57d6b54928054d8..1fcfc6add8924680c634cec53b2113365ff011b5 100644 (file)
--- a/server/sonar-web/src/main/js/components/charts/mixins/tooltips-mixin.js
+++ b/server/sonar-web/src/main/js/components/charts/mixins/tooltips-mixin.js
@@ -11,7 +11,9 @@ export const TooltipsMixin = {
   },
 
   initTooltips () {
-    $('[data-toggle="tooltip"]', React.findDOMNode(this))
-        .tooltip({ container: 'body', placement: 'bottom', html: true });
+    if ($.fn.tooltip) {
+      $('[data-toggle="tooltip"]', React.findDOMNode(this))
+          .tooltip({ container: 'body', placement: 'bottom', html: true });
+    }
   }
 };

diff --git a/server/sonar-web/src/main/js/components/charts/word-cloud.js b/server/sonar-web/src/main/js/components/charts/word-cloud.js
index 53c36ee76aff101239f6f282331dd74be8d929dd..ed59b040fbf38857c61c0f9e0bcab41dc0ba152e 100644 (file)
--- a/server/sonar-web/src/main/js/components/charts/word-cloud.js
+++ b/server/sonar-web/src/main/js/components/charts/word-cloud.js
@@ -1,4 +1,5 @@
 import _ from 'underscore';
+import d3 from 'd3';
 import React from 'react';
 
 import { TooltipsMixin } from './mixins/tooltips-mixin';

diff --git a/server/sonar-web/tests/components/charts/bar-chart-test.js b/server/sonar-web/tests/components/charts/bar-chart-test.js
new file mode 100644 (file)
index 0000000..d2cc1f7
--- /dev/null
+++ b/server/sonar-web/tests/components/charts/bar-chart-test.js
@@ -0,0 +1,58 @@
+import React from 'react/addons';
+import { expect } from 'chai';
+
+import { BarChart } from '../../../src/main/js/components/charts/bar-chart';
+
+
+let TestUtils = React.addons.TestUtils;
+
+
+describe('Bar Chart', function () {
+
+  it('should display bars', function () {
+    const data = [
+      { x: 1, y: 10 },
+      { x: 2, y: 30 },
+      { x: 3, y: 20 }
+    ];
+    let chart = TestUtils.renderIntoDocument(<BarChart data={data} width={100} height={100}/>);
+    expect(TestUtils.scryRenderedDOMComponentsWithClass(chart, 'bar-chart-bar')).to.have.length(3);
+  });
+
+  it('should display ticks', function () {
+    const data = [
+      { x: 1, y: 10 },
+      { x: 2, y: 30 },
+      { x: 3, y: 20 }
+    ];
+    const ticks = ['A', 'B', 'C'];
+    let chart = TestUtils.renderIntoDocument(<BarChart data={data} xTicks={ticks} width={100} height={100}/>);
+    expect(TestUtils.scryRenderedDOMComponentsWithClass(chart, 'bar-chart-tick')).to.have.length(3);
+  });
+
+  it('should display values', function () {
+    const data = [
+      { x: 1, y: 10 },
+      { x: 2, y: 30 },
+      { x: 3, y: 20 }
+    ];
+    const values = ['A', 'B', 'C'];
+    let chart = TestUtils.renderIntoDocument(<BarChart data={data} xValues={values} width={100} height={100}/>);
+    expect(TestUtils.scryRenderedDOMComponentsWithClass(chart, 'bar-chart-tick')).to.have.length(3);
+  });
+
+  it('should display bars, ticks and values', function () {
+    const data = [
+      { x: 1, y: 10 },
+      { x: 2, y: 30 },
+      { x: 3, y: 20 }
+    ];
+    const ticks = ['A', 'B', 'C'];
+    const values = ['A', 'B', 'C'];
+    let chart = TestUtils.renderIntoDocument(
+        <BarChart data={data} xTicks={ticks} xValues={values} width={100} height={100}/>);
+    expect(TestUtils.scryRenderedDOMComponentsWithClass(chart, 'bar-chart-bar')).to.have.length(3);
+    expect(TestUtils.scryRenderedDOMComponentsWithClass(chart, 'bar-chart-tick')).to.have.length(6);
+  });
+
+});

diff --git a/server/sonar-web/tests/components/charts/bubble-chart-test.js b/server/sonar-web/tests/components/charts/bubble-chart-test.js
new file mode 100644 (file)
index 0000000..fd09799
--- /dev/null
+++ b/server/sonar-web/tests/components/charts/bubble-chart-test.js
@@ -0,0 +1,42 @@
+import React from 'react/addons';
+import { expect } from 'chai';
+
+import { BubbleChart } from '../../../src/main/js/components/charts/bubble-chart';
+
+
+let TestUtils = React.addons.TestUtils;
+
+
+describe('Bubble Chart', function () {
+
+  it('should display bubbles', function () {
+    const items = [
+      { x: 1, y: 10, size: 7 },
+      { x: 2, y: 30, size: 5 },
+      { x: 3, y: 20, size: 2 }
+    ];
+    let chart = TestUtils.renderIntoDocument(<BubbleChart items={items} width={100} height={100}/>);
+    expect(TestUtils.scryRenderedDOMComponentsWithClass(chart, 'bubble-chart-bubble')).to.have.length(3);
+  });
+
+  it('should display grid', function () {
+    const items = [
+      { x: 1, y: 10, size: 7 },
+      { x: 2, y: 30, size: 5 },
+      { x: 3, y: 20, size: 2 }
+    ];
+    let chart = TestUtils.renderIntoDocument(<BubbleChart items={items} width={100} height={100}/>);
+    expect(TestUtils.scryRenderedDOMComponentsWithTag(chart, 'line')).to.not.be.empty;
+  });
+
+  it('should display ticks', function () {
+    const items = [
+      { x: 1, y: 10, size: 7 },
+      { x: 2, y: 30, size: 5 },
+      { x: 3, y: 20, size: 2 }
+    ];
+    let chart = TestUtils.renderIntoDocument(<BubbleChart items={items} width={100} height={100}/>);
+    expect(TestUtils.scryRenderedDOMComponentsWithClass(chart, 'bubble-chart-tick')).to.not.be.empty;
+  });
+
+});

diff --git a/server/sonar-web/tests/components/charts/line-chart-test.js b/server/sonar-web/tests/components/charts/line-chart-test.js
new file mode 100644 (file)
index 0000000..a8fecef
--- /dev/null
+++ b/server/sonar-web/tests/components/charts/line-chart-test.js
@@ -0,0 +1,44 @@
+import React from 'react/addons';
+import { expect } from 'chai';
+
+import { LineChart } from '../../../src/main/js/components/charts/line-chart';
+
+
+let TestUtils = React.addons.TestUtils;
+
+
+describe('Line Chart', function () {
+
+  it('should display line', function () {
+    const data = [
+      { x: 1, y: 10 },
+      { x: 2, y: 30 },
+      { x: 3, y: 20 }
+    ];
+    let chart = TestUtils.renderIntoDocument(<LineChart data={data} width={100} height={100}/>);
+    expect(TestUtils.scryRenderedDOMComponentsWithClass(chart, 'line-chart-path')).to.have.length(1);
+  });
+
+  it('should display ticks', function () {
+    const data = [
+      { x: 1, y: 10 },
+      { x: 2, y: 30 },
+      { x: 3, y: 20 }
+    ];
+    const ticks = ['A', 'B', 'C'];
+    let chart = TestUtils.renderIntoDocument(<LineChart data={data} xTicks={ticks} width={100} height={100}/>);
+    expect(TestUtils.scryRenderedDOMComponentsWithClass(chart, 'line-chart-tick')).to.have.length(3);
+  });
+
+  it('should display values', function () {
+    const data = [
+      { x: 1, y: 10 },
+      { x: 2, y: 30 },
+      { x: 3, y: 20 }
+    ];
+    const values = ['A', 'B', 'C'];
+    let chart = TestUtils.renderIntoDocument(<LineChart data={data} xValues={values} width={100} height={100}/>);
+    expect(TestUtils.scryRenderedDOMComponentsWithClass(chart, 'line-chart-tick')).to.have.length(3);
+  });
+
+});

diff --git a/server/sonar-web/tests/components/charts/treemap-test.js b/server/sonar-web/tests/components/charts/treemap-test.js
new file mode 100644 (file)
index 0000000..31b838c
--- /dev/null
+++ b/server/sonar-web/tests/components/charts/treemap-test.js
@@ -0,0 +1,22 @@
+import React from 'react/addons';
+import { expect } from 'chai';
+
+import { Treemap } from '../../../src/main/js/components/charts/treemap';
+
+
+let TestUtils = React.addons.TestUtils;
+
+
+describe('Treemap', function () {
+
+  it('should display', function () {
+    const items = [
+      { size: 10, color: '#777', label: 'SonarQube :: Server' },
+      { size: 30, color: '#777', label: 'SonarQube :: Web' },
+      { size: 20, color: '#777', label: 'SonarQube :: Search' }
+    ];
+    let chart = TestUtils.renderIntoDocument(<Treemap items={items} width={100} height={100}/>);
+    expect(TestUtils.scryRenderedDOMComponentsWithClass(chart, 'treemap-cell')).to.have.length(3);
+  });
+
+});

diff --git a/server/sonar-web/tests/components/charts/work-cloud-test.js b/server/sonar-web/tests/components/charts/work-cloud-test.js
new file mode 100644 (file)
index 0000000..9d904c4
--- /dev/null
+++ b/server/sonar-web/tests/components/charts/work-cloud-test.js
@@ -0,0 +1,22 @@
+import React from 'react/addons';
+import { expect } from 'chai';
+
+import { WordCloud } from '../../../src/main/js/components/charts/word-cloud';
+
+
+let TestUtils = React.addons.TestUtils;
+
+
+describe('Word Cloud', function () {
+
+  it('should display', function () {
+    const items = [
+      { size: 10, link: '#', text: 'SonarQube :: Server' },
+      { size: 30, link: '#', text: 'SonarQube :: Web' },
+      { size: 20, link: '#', text: 'SonarQube :: Search' }
+    ];
+    let chart = TestUtils.renderIntoDocument(<WordCloud items={items} width={100} height={100}/>);
+    expect(TestUtils.scryRenderedDOMComponentsWithTag(chart, 'a')).to.have.length(3);
+  });
+
+});