fix color for several tracks and add tests first functional test

package.json

@@ -1,11 +1,11 @@
 {
   "name": "circosJS",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "description": "A d3js library to build circos graphs",
   "main": "app.js",
   "scripts": {
-    "test": "NODE_ENV=test mocha --compilers js:babel-register  --reporter spec src/**/*.test.js",
-    "test:tdd": "NODE_ENV=test mocha --compilers js:babel-register --reporter nyan --watch src/**/*.test.js",
+    "test": "NODE_ENV=test mocha --compilers js:babel-register  --require ignore-styles --reporter spec src/**/*.test.js src/*.test.js",
+    "test:tdd": "NODE_ENV=test mocha --compilers js:babel-register --require ignore-styles --reporter nyan --watch src/*.test.js src/**/*.test.js",
     "coveralls": "CIRCOSJS_COVERAGE=1 mocha test --reporter mocha-lcov-reporter src/**/*.test.js | ./node_modules/coveralls/bin/coveralls.js",
     "start": "webpack --watch",
     "build": "NODE_ENV=prod webpack --optimize-minimize --optimize-dedupe"
@@ -32,6 +32,7 @@
     "coffee-script": "~1.8.0",
     "coveralls": "^2.11.16",
     "css-loader": "^0.26.1",
+    "ignore-styles": "^5.0.1",
     "mocha": "~2.5.3",
     "mocha-lcov-reporter": "^1.2.0",
     "sinon": "~1.17.4",

src/behaviors/tooltip.js

@@ -1,5 +1,6 @@
 import {select, event} from 'd3-selection'
 import 'd3-transition'
+
 import './tooltip.css'
 
 export function registerTooltip (track, instance, element, trackParams) {

src/tracks/Chords.js

@@ -52,7 +52,7 @@ export default class Chords extends Track {
         that.dispatch.call('mouseout', this, d)
       )
 
-    link.attr('fill', conf.colorIteratee)
+    link.attr('fill', conf.colorValue)
 
     return link
   }

src/tracks/Heatmap.js

@@ -5,6 +5,10 @@ import assign from 'lodash/assign'
 import {radial, values, common} from '../configs'
 
 const defaultConf = assign({
+  color: {
+    value: 'Spectral',
+    iteratee: false
+  },
   backgrounds: {
     value: [],
     iteratee: false
@@ -17,17 +21,19 @@ export default class Heatmap extends Track {
   }
 
   renderDatum (parentElement, conf, layout) {
-    return parentElement.selectAll('tile')
-      .data((d) => d.values)
-      .enter().append('path')
-      .attr('class', 'tile')
-      .attr('opacity', conf.opacity)
-      .attr('d', arc()
-        .innerRadius(conf.innerRadius)
-        .outerRadius(conf.outerRadius)
-        .startAngle((d, i) => this.theta(d.start, layout.blocks[d.block_id]))
-        .endAngle((d, i) => this.theta(d.end, layout.blocks[d.block_id]))
-      )
-      .attr('fill', conf.color)
+    return parentElement
+      .selectAll('tile')
+        .data((d) => d.values)
+      .enter()
+      .append('path')
+        .attr('class', 'tile')
+        .attr('opacity', conf.opacity)
+        .attr('d', arc()
+          .innerRadius(conf.innerRadius)
+          .outerRadius(conf.outerRadius)
+          .startAngle((d, i) => this.theta(d.start, layout.blocks[d.block_id]))
+          .endAngle((d, i) => this.theta(d.end, layout.blocks[d.block_id]))
+        )
+        .attr('fill', conf.colorValue)
   }
 }

src/tracks/Heatmap.test.js

@@ -0,0 +1,43 @@
+import { describe, it } from 'mocha'
+import { expect } from 'chai'
+import jsdom from 'mocha-jsdom'
+import { selectAll, select } from 'd3-selection'
+import forEach from 'lodash/forEach'
+import Circos from '../circos'
+
+describe('Heatmap', () => {
+  jsdom()
+
+  it('should render elements according to configuration', () => {
+    document.body.innerHTML = '<div id="chart"></div>'
+    new Circos({
+      container: '#chart',
+      width: 350,
+      height: 350
+    })
+    .layout([{id: 'chr1', len: 249250621}, {id: 'chr2', len: 243199373}])
+    .heatmap(
+      'heatmap1',
+      [
+        {block_id: 'chr1', start: 0, end: 1000000, value: 1},
+        {block_id: 'chr1', start: 1000001, end: 2000000, value: 2},
+        {block_id: 'chr2', start: 0, end: 1000000, value: 3},
+        {block_id: 'chr2', start: 1000001, end: 2000000, value: 4}
+      ])
+    .render()
+
+    const expectedColors = [
+      'rgb(158, 1, 66)',
+      'rgb(253, 190, 112)',
+      'rgb(190, 229, 160)',
+      'rgb(94, 79, 162)'
+    ]
+
+    const tiles = select('.heatmap1').selectAll('.tile')
+    expect(tiles.size()).to.equal(4)
+    forEach(tiles.nodes(), (tileNode, i) => {
+      const tile = select(tileNode)
+      expect(tile.attr('fill')).to.equal(expectedColors[i])
+    })
+  })
+})

src/tracks/Highlight.js

@@ -39,7 +39,7 @@ export default class Highlight extends Track {
         .startAngle((d, i) => this.theta(d.start, layout.blocks[d.block_id]))
         .endAngle((d, i) => this.theta(d.end, layout.blocks[d.block_id]))
       )
-      .attr('fill', conf.color)
+      .attr('fill', conf.colorValue)
       .attr('opacity', conf.opacity)
       .attr('stroke-width', conf.strokeWidth)
       .attr('stroke', conf.strokeColor)

src/tracks/Histogram.js

@@ -46,7 +46,7 @@ export default class Histogram extends Track {
         .startAngle((d) => this.theta(d.start, layout.blocks[d.block_id]))
         .endAngle((d) => this.theta(d.end, layout.blocks[d.block_id]))
       )
-    bin.attr('fill', conf.colorIteratee)
+    bin.attr('fill', conf.colorValue)
     return bin
   }
 }

src/tracks/Line.js

@@ -106,7 +106,7 @@ export default class Line extends Track {
       .attr('d', generator)
       .attr('opacity', conf.opacity)
       .attr('stroke-width', conf.thickness)
-      .attr('stroke', conf.color)
+      .attr('stroke', conf.colorValue)
       .attr('fill', 'none')
 
     if (conf.fill) { selection.attr('fill', conf.fillColor) }

src/tracks/Scatter.js

@@ -104,7 +104,7 @@ export default class Scatter extends Track {
       .attr('stroke-width', conf.strokeWidth)
       .attr('fill', 'none')
 
-    if (conf.fill) { point.attr('fill', conf.color) }
+    if (conf.fill) { point.attr('fill', conf.colorValue) }
 
     return point
   }

src/tracks/Stack.js

@@ -142,6 +142,6 @@ export default class Stack extends Track {
       .attr('opacity', conf.opacity)
       .attr('stroke-width', conf.strokeWidth)
       .attr('stroke', conf.strokeColor)
-      .attr('fill', conf.color)
+      .attr('fill', conf.colorValue)
   }
 }

src/tracks/Track.js

@@ -16,7 +16,7 @@ export default class Track {
     this.parseData = dataParser
     this.loadData(data, instance)
     this.conf = getConf(conf, defaultConf, this.meta, instance)
-    this.conf.colorIteratee = buildColorValue(
+    this.conf.colorValue = buildColorValue(
       this.conf.color,
       this.conf.cmin,
       this.conf.cmax,
@@ -44,7 +44,7 @@ export default class Track {
       .attr('class', name)
       .attr('z-index', this.conf.zIndex)
     const datumContainer = this.renderBlock(track, this.data, instance._layout, this.conf)
-    if (this.conf.axes.length > 0) {
+    if (this.conf.axes && this.conf.axes.length > 0) {
       this.renderAxes(datumContainer, this.conf, instance._layout)
     }
     const selection = this.renderDatum(datumContainer, this.conf, instance._layout)