Zoom container spec (spotify#78)

* Zoom Container spec
* Added npm run test-files

docs/build/index.html

@@ -31,5 +31,5 @@
     </div>
 
     <div class="container-fluid" id="container">Loading...</div>
-<script type="text/javascript" src="bundle.877bd6ff026ee19fa010.js"></script></body>
+<script type="text/javascript" src="bundle.a277374995ada5b5cbc9.js"></script></body>
 </html>

package.json

@@ -24,6 +24,8 @@
     "clean": "node scripts/clean.js",
     "serve": "python -m SimpleHTTPServer",
     "test": "npm run test-jsdom-and-lint",
+    "test-files":
+      "env NODE_PATH=$NODE_PATH:$PWD/src BABEL_ENV=production mocha --compilers js:babel-register --require tests/jsdom/setup.js --recursive",
     "test-browser":
       "webpack-dev-server --config tests/browser/webpack.config.test.js",
     "test-jsdom-and-lint":

tests/jsdom/setup.js

@@ -20,3 +20,4 @@ global.navigator = {
 // hack to deal with https://github.com/airbnb/enzyme/issues/888
 // see also https://github.com/chaijs/type-detect/issues/98
 global.HTMLElement = window.HTMLElement;
+global.SVGElement = function() {};

tests/jsdom/spec/AreaBarChart.spec.js

@@ -24,8 +24,8 @@ describe("AreaBarChart", () => {
       ],
       x: d => d.ageMin,
       xEnd: d => d.ageMax,
-      y: d => d.rate,
-      yEnd: () => {},
+      y: d => 0,
+      yEnd: d => d.rate,
       barClassName: "test-bar-class-name",
       barStyle: { fill: "red" },
       onMouseEnterBar: () => {},

tests/jsdom/spec/ZoomContainer.spec.js

@@ -0,0 +1,127 @@
+import React from "react";
+import * as d3 from "d3";
+import { expect } from "chai";
+import { mount } from "enzyme";
+
+import { XYPlot, ZoomContainer } from "../../../src/index.js";
+import { getValue } from "../../../src/utils/Data.js";
+
+describe("ZoomContainer", () => {
+  const uncontrolledProps = {
+    width: 500,
+    height: 500,
+    scaleExtent: [0.5, 2]
+  };
+
+  const controlledProps = {
+    ...uncontrolledProps,
+    controlled: true
+  };
+
+  it("passes props correctly to DOM", () => {
+    const zoomContainer = mount(<ZoomContainer {...uncontrolledProps} />);
+
+    let svg = zoomContainer.find("svg").getNode();
+    let group = zoomContainer.find("g").getNode();
+
+    expect(parseInt(svg.getAttribute("width"))).to.equal(
+      uncontrolledProps.width
+    );
+    expect(parseInt(svg.getAttribute("height"))).to.equal(
+      uncontrolledProps.height
+    );
+    expect(parseInt(group.getAttribute("width"))).to.equal(
+      uncontrolledProps.width
+    );
+    expect(parseInt(group.getAttribute("height"))).to.equal(
+      uncontrolledProps.height
+    );
+
+    const controlledZoomContainer = mount(
+      <ZoomContainer {...controlledProps} />
+    );
+
+    svg = controlledZoomContainer.find("svg").getNode();
+    group = controlledZoomContainer.find("g").getNode();
+
+    expect(parseInt(svg.getAttribute("width"))).to.equal(controlledProps.width);
+    expect(parseInt(svg.getAttribute("height"))).to.equal(
+      controlledProps.height
+    );
+    expect(parseInt(group.getAttribute("width"))).to.equal(
+      controlledProps.width
+    );
+    expect(parseInt(group.getAttribute("height"))).to.equal(
+      controlledProps.height
+    );
+  });
+
+  it("passes props correctly to d3 zoom", () => {
+    const d3Props = {
+      extent: [[0, 0], [1, 1]],
+      scaleExtent: [0.5, 2],
+      translateExtent: [[0, 0], [1, 1]],
+      clickDistance: 1,
+      duration: 250,
+      interpolate: () => {},
+      constrain: () => {},
+      filter: () => {},
+      touchable: () => {},
+      wheelDelta: () => {}
+    };
+
+    const zoomContainer = mount(
+      <ZoomContainer {...uncontrolledProps} {...d3Props} />
+    );
+
+    const d3Zoom = zoomContainer.instance().zoom;
+
+    expect(d3Zoom.extent).to.be.a("function");
+    expect(d3Zoom.scaleExtent).to.be.a("function");
+    expect(d3Zoom.translateExtent).to.be.a("function");
+    expect(d3Zoom.clickDistance).to.be.a("function");
+    expect(d3Zoom.duration).to.be.a("function");
+    expect(d3Zoom.interpolate).to.be.a("function");
+    expect(d3Zoom.constrain).to.be.a("function");
+    expect(d3Zoom.filter).to.be.a("function");
+    expect(d3Zoom.touchable).to.be.a("function");
+    expect(d3Zoom.wheelDelta).to.be.a("function");
+  });
+
+  it("passes zoom props correctly when controlled", () => {
+    const zoomContainer = mount(<ZoomContainer {...controlledProps} />);
+
+    expect(zoomContainer.prop("zoomX")).to.equal(0);
+    expect(zoomContainer.prop("zoomY")).to.equal(0);
+    expect(zoomContainer.prop("zoomScale")).to.equal(1);
+    expect(zoomContainer.state("lastZoomTransform").k).to.eql(1);
+    expect(zoomContainer.state("lastZoomTransform").x).to.eql(0);
+    expect(zoomContainer.state("lastZoomTransform").y).to.eql(0);
+
+    zoomContainer.setProps({ zoomX: 100, zoomY: 100, zoomScale: 2 });
+
+    expect(zoomContainer.state("lastZoomTransform").k).to.eql(2);
+    expect(zoomContainer.state("lastZoomTransform").x).to.eql(100);
+    expect(zoomContainer.state("lastZoomTransform").y).to.eql(100);
+  });
+
+  it("renders correctly", () => {
+    const zoomContainer = mount(<ZoomContainer {...uncontrolledProps} />);
+
+    let svg = zoomContainer.find("svg");
+    let group = zoomContainer.find("g");
+
+    expect(svg.length).to.equal(1);
+    expect(group.length).to.equal(1);
+
+    const controlledZoomContainer = mount(
+      <ZoomContainer {...controlledProps} />
+    );
+
+    svg = controlledZoomContainer.find("svg");
+    group = controlledZoomContainer.find("g");
+
+    expect(svg.length).to.equal(1);
+    expect(group.length).to.equal(1);
+  });
+});