Finish adding in interaction tests.

Close #27.

test/interactionTests.ts

@@ -30,23 +30,47 @@ function fakeDragSequence(anyedInteraction: any, startX: number, startY: number,
 
 describe("Interactions", () => {
   describe("PanZoomInteraction", () => {
-    it.skip("Properly updates scales on zoom", () => {
-      //
+    it("Pans properly", () => {
+      // The only difference between pan and zoom is internal to d3
+      // Simulating zoom events is painful, so panning will suffice here
       var xScale = new LinearScale();
       var yScale = new LinearScale();
+
+      var svg = generateSVG();
+      var dataset = makeLinearSeries(11);
+      var renderer = new CircleRenderer(dataset, xScale, yScale);
+      renderer.anchor(svg).computeLayout().render();
+
       var xDomainBefore = xScale.domain();
       var yDomainBefore = yScale.domain();
 
-      var svg = generateSVG();
-      var component = new Component();
-      component.anchor(svg).computeLayout().render();
-      var interaction = new PanZoomInteraction(component, [], xScale, yScale);
+      var interaction = new PanZoomInteraction(renderer, [], xScale, yScale);
 
-      // var zoomEvent = document.createEvent("WheelEvent");
-      // zoomEvent.initEvent("mousewheel", true, true);
-      // var hb = component.element.select(".hit-box").node();
+      var hb = renderer.element.select(".hit-box").node();
+      var dragDistancePixelX = 10;
+      var dragDistancePixelY = 20;
+      $(hb).simulate("drag", {
+        dx: dragDistancePixelX,
+        dy: dragDistancePixelY
+      });
+
+      var xDomainAfter = xScale.domain();
+      var yDomainAfter = yScale.domain();
+
+      assert.notDeepEqual(xDomainAfter, xDomainBefore, "x domain was changed by panning");
+      assert.notDeepEqual(yDomainAfter, yDomainBefore, "y domain was changed by panning");
+
+      function getSlope(scale: LinearScale) {
+        var range = scale.range();
+        var domain = scale.domain();
+        return (domain[1]-domain[0])/(range[1]-range[0]);
+      };
 
-      // hb.dispatchEvent(zoomEvent);
+      var expectedXDragChange = -dragDistancePixelX * getSlope(xScale);
+      var expectedYDragChange = -dragDistancePixelY * getSlope(yScale);
+
+      assert.equal(xDomainAfter[0]-xDomainBefore[0], expectedXDragChange, "x domain changed by the correct amount");
+      assert.equal(yDomainAfter[0]-yDomainBefore[0], expectedYDragChange, "y domain changed by the correct amount");
 
       svg.remove();
     });
@@ -127,15 +151,53 @@ describe("Interactions", () => {
       assert.equal(parseFloat(dragBox.attr("width")), Math.abs(dragstartX-dragendX), "highlighted box has correct width");
       assert.equal(parseFloat(dragBox.attr("height")), Math.abs(dragstartY-dragendY), "highlighted box has correct height");
 
-      (<any> interaction).dragstart();
-      dragBox = renderer.element.select(dragBoxClass);
-      assert.equal(dragBox.attr("width"), "0", "highlighted box disappears when a new drag begins");
-      assert.equal(dragBox.attr("height"), "0", "highlighted box disappears when a new drag begins");
-      (<any> interaction).dragend();
+      interaction.clearBox();
+      var boxGone = dragBox.attr("width") === "0" && dragBox.attr("height") === "0";
+      assert.isTrue(boxGone, "highlighted box disappears when clearBox is called");
     });
 
     after(() => {
       svg.remove();
     });
   });
+
+  describe("BrushZoomInteraction", () => {
+    it("Zooms in correctly on drag", () =>{
+      var xScale = new LinearScale();
+      var yScale = new LinearScale();
+
+      var svgWidth = 400;
+      var svgHeight = 400;
+      var svg = generateSVG(svgWidth, svgHeight);
+      var dataset = makeLinearSeries(11);
+      var renderer = new CircleRenderer(dataset, xScale, yScale);
+      renderer.anchor(svg).computeLayout().render();
+
+      var xDomainBefore = xScale.domain();
+      var yDomainBefore = yScale.domain();
+
+      var dragstartX = 10;
+      var dragstartY = 210;
+      var dragendX = 190;
+      var dragendY = 390;
+
+      var expectedXDomain = [xScale.invert(dragstartX), xScale.invert(dragendX)];
+      var expectedYDomain = [yScale.invert(dragendY), yScale.invert(dragstartY)]; // reversed because Y scale is
+
+      var indicesCallbackCalled = false;
+      var indicesCallback = (a: number[]) => {
+        indicesCallbackCalled = true;
+        interaction.clearBox();
+        assert.deepEqual(a, [1, 2, 3, 4], "the correct points were selected");
+        assert.deepEqual(xScale.domain(), expectedXDomain, "X scale domain was updated correctly");
+        assert.deepEqual(yScale.domain(), expectedYDomain, "Y scale domain was updated correclty");
+      };
+      var interaction = new BrushZoomInteraction(renderer, xScale, yScale, indicesCallback);
+
+      fakeDragSequence((<any> interaction), dragstartX, dragstartY, dragendX, dragendY);
+      assert.isTrue(indicesCallbackCalled, "indicesCallback was called");
+
+      svg.remove();
+    });
+  });
 });

test/testReference.ts

@@ -1,5 +1,7 @@
 ///<reference path="../typings/chai/chai-assert.d.ts" />
 ///<reference path="../typings/mocha/mocha.d.ts" />
 ///<reference path="../typings/d3/d3.d.ts" />
+///<reference path="../typings/jquery/jquery.d.ts" />
+///<reference path="../typings/jquery.simulate/jquery.simulate.d.ts" />
 ///<reference path="testUtils.ts" />
 ///<reference path="../build/plottable.d.ts" />

tests.html

@@ -14,9 +14,12 @@
       }
     </style>
 
-    <script src="bower_components/d3/d3.min.js"></script>
+    <script src="bower_components/d3/d3.js"></script>
     <script src="bower_components/chai/chai.js"></script>
     <script src="bower_components/mocha/mocha.js"></script>
+    <script src="bower_components/jQuery/dist/jquery.js"></script>
+    <script src="bower_components/jquery.simulate/libs/jquery.simulate.js"></script>
+    <script src="bower_components/jquery.simulate/src/jquery.simulate.ext.js"></script>
     <script src="blanket_mocha.js"></script>
     <script src="build/plottable.js" data-cover></script>
   </head>

tsd.json

@@ -12,6 +12,12 @@
     },
     "mocha/mocha.d.ts": {
       "commit": "16dd1ab76fb4c65e532ca820dd45c875636521b6"
+    },
+    "jquery/jquery.d.ts": {
+      "commit": "dfa8d86385232fabd220c43a81a0bf4ca418f761"
+    },
+    "jquery.simulate/jquery.simulate.d.ts": {
+      "commit": "dfa8d86385232fabd220c43a81a0bf4ca418f761"
     }
   }
 }