add ColorHeatmap spec

docs/build/index.html

@@ -31,5 +31,5 @@
     </div>
 
     <div class="container-fluid" id="container">Loading...</div>
-<script type="text/javascript" src="bundle.4bf76ceec6eac992d822.js"></script></body>
+<script type="text/javascript" src="bundle.9ad33569594b4bef01a9.js"></script></body>
 </html>

docs/src/docs/ColorHeatmap/propDocs.json

@@ -90,7 +90,7 @@
         "name": "array"
       },
       "required": false,
-      "description": "...or else one will be constructed from colors, colorStops and interpolator"
+      "description": "...or else one will be constructed from colors, valueDomain and interpolator"
     },
     "valueDomain": {
       "type": {

src/ColorHeatmap.js

@@ -74,7 +74,7 @@ export default class ColorHeatmap extends React.Component {
      */
     colorScale: PropTypes.func,
     /**
-     * ...or else one will be constructed from colors, colorStops and interpolator
+     * ...or else one will be constructed from colors, valueDomain and interpolator
      */
     colors: PropTypes.array,
     valueDomain: PropTypes.array,

tests/jsdom/spec/AreaBarChart.spec.js

@@ -1,10 +1,8 @@
 import React from "react";
 import * as d3 from "d3";
-import _ from "lodash";
 import { expect } from "chai";
-import { mount, shallow } from "enzyme";
+import { mount } from "enzyme";
 
-import { testWithScales, expectProps } from "../utils";
 import { XYPlot, AreaBarChart, RangeRect } from "../../../src/index.js";
 import { getValue } from "../../../src/utils/Data.js";
 

tests/jsdom/spec/ColorHeatmap.spec.js

@@ -0,0 +1,70 @@
+import React from "react";
+import * as d3 from "d3";
+import _ from "lodash";
+import { expect } from "chai";
+import { mount } from "enzyme";
+
+import { XYPlot, ColorHeatmap, RangeRect } from "../../../src/index.js";
+import { getValue } from "../../../src/utils/Data.js";
+
+describe("ColorHeatmap", () => {
+  const gridData = _.range(30).map(m => {
+    return _.range(30).map(n => {
+      return {
+        x: n,
+        xEnd: n + 1,
+        y: m,
+        yEnd: m + 1,
+        value: Math.sin(m * n * 0.01)
+      };
+    });
+  });
+  const data = _.flatten(gridData);
+  const props = {
+    data,
+    value: d => d.value,
+    x: d => d.x,
+    xEnd: d => d.xEnd,
+    y: d => d.y,
+    yEnd: d => d.yEnd,
+    xScale: d3
+      .scaleLinear()
+      .domain([-1, 0, 1])
+      .range([0, 30]),
+    yScale: d3
+      .scaleLinear()
+      .domain([0, 10])
+      .range([0, 30]),
+    colors: ['rebeccapurple', 'goldenrod'],
+    interpolator: 'lab',
+    rectClassName: 'rect-class',
+  };
+
+  it("renders a color heatmap", () => {
+    const chart = mount(<ColorHeatmap {...props} />);
+    const group = chart.find("g");
+    const rangeRects = chart.find(RangeRect);
+    expect(rangeRects).to.have.length(props.data.length);
+  });
+
+  it('passes props correctly', () => {
+    const chart = mount(<ColorHeatmap {...props} />);
+
+    expect(chart.find(RangeRect).first().props().x).to.equal(getValue(props.x, props.data[0]));
+    expect(chart.find(RangeRect).first().props().xEnd).to.equal(getValue(props.xEnd, props.data[0]));
+    expect(chart.find(RangeRect).first().props().y).to.equal(getValue(props.y, props.data[0]));
+    expect(chart.find(RangeRect).first().props().yEnd).to.equal(getValue(props.yEnd, props.data[0]));
+    expect(chart.find(RangeRect).first().props().xScale).to.equal(props.xScale);
+    expect(chart.find(RangeRect).first().props().yScale).to.equal(props.yScale);
+    expect(chart.find(RangeRect).first().props().className).to.equal(props.rectClassName);
+
+    describe('when colorScale prop is passed', () => {
+      it('sets the color scale to the prop value', () => {
+        const propsWithColorScale = {...props, colorScale: () => 'rgb'}
+        const chart = mount(<ColorHeatmap {...propsWithColorScale} />);
+
+        expect(chart.find(RangeRect).first().props().style).to.contain({ fill: 'rgb' })
+      });
+    });
+  });
+});