Added test for interaction with domain reference objects

Author: nicholas-esterer

test/image/mocks/domain_refs_editable.json

@@ -56,6 +56,7 @@
       ]
     },
     "xaxis4": {
+      "type": "log",
       "anchor": "y4",
       "domain": [
         0.55,
@@ -81,6 +82,7 @@
       ]
     },
     "yaxis3": {
+      "type": "log",
       "anchor": "x3",
       "domain": [
         0.0,
@@ -116,14 +118,14 @@
         "xref": "x4 domain",
         "yref": "y4 domain",
         "x0":   0.4,
-        "y0":   0.6,
-        "x1":   0.5,
+        "y0":   0.5,
+        "x1":   0.6,
         "y1":   0.7,
         "line": { "color": "rgb(10, 20, 31)" }
     }],
     "annotations": [{
         "text": "A",
-        "bgcolor": "rgb(100, 200, 232)",
+        "bordercolor": "rgb(100, 200, 232)",
         "xref": "x3 domain",
         "yref": "y3 domain",
         "x":   0.4,
@@ -134,7 +136,7 @@
         "ay":   0.7
     },{
         "text": "B",
-        "bgcolor": "rgb(200, 200, 232)",
+        "bordercolor": "rgb(200, 200, 232)",
         "xref": "x4 domain",
         "yref": "y4 domain",
         "x":   0.3,

test/jasmine/assets/domain_ref/components.js

@@ -437,9 +437,10 @@ function compareBBoxes(a, b) {
         true);
 }
 
-function findAROByColor(color, id) {
+function findAROByColor(color, id, type) {
     id = (id === undefined) ? '' : id + ' ';
-    var selector = id + 'path';
+    type = (type === undefined) ? 'path' : type;
+    var selector = id + type;
     var ret = d3.selectAll(selector).filter(function() {
         return this.style.stroke === color;
     }).node();

test/jasmine/tests/domain_ref_interact_test.js

@@ -10,13 +10,57 @@ var getSVGElemScreenBBox = require(
 var testMock = require('../../image/mocks/domain_refs_editable.json');
 var delay = require('../assets/delay');
 var mouseEvent = require('../assets/mouse_event');
+var drag = require('../assets/drag');
 
-// color of first rectangle
-var rectColor1 = "rgb(10, 20, 30)";
+// color of the rectangles
+var rectColor1 = 'rgb(10, 20, 30)';
+var rectColor2 = 'rgb(10, 20, 31)';
+var rectColor3 = 'rgb(100, 200, 232)';
+var rectColor4 = 'rgb(200, 200, 232)';
 
 var DELAY_TIME = 0;
 
-describe("Shapes referencing domain", function () {
+function testObjectMove(objectColor, moveX, moveY, type) {
+    var bboxBefore = getSVGElemScreenBBox(
+        domainRefComponents.findAROByColor(objectColor, undefined, type)
+    );
+    var pos = {
+        mouseStartX: bboxBefore.x + bboxBefore.width * 0.5,
+        mouseStartY: bboxBefore.y + bboxBefore.height * 0.5,
+    };
+    pos.mouseEndX = pos.mouseStartX + moveX;
+    pos.mouseEndY = pos.mouseStartY + moveY;
+    mouseEvent('mousemove', pos.mouseStartX, pos.mouseStartY);
+    mouseEvent('mousedown', pos.mouseStartX, pos.mouseStartY);
+    mouseEvent('mousemove', pos.mouseEndX, pos.mouseEndY);
+    mouseEvent('mouseup', pos.mouseEndX, pos.mouseEndY);
+    var bboxAfter = getSVGElemScreenBBox(
+        domainRefComponents.findAROByColor(objectColor, undefined, type)
+    );
+    expect(bboxAfter.x).toBeCloseTo(bboxBefore.x + moveX, 2);
+    expect(bboxAfter.y).toBeCloseTo(bboxBefore.y + moveY, 2);
+}
+
+function testAnnotationMove(objectColor, moveX, moveY, type) {
+    var bboxBefore = getSVGElemScreenBBox(
+        domainRefComponents.findAROByColor(objectColor, undefined, type)
+    );
+    var opt = {
+        pos0: [ bboxBefore.x + bboxBefore.width * 0.5,
+            bboxBefore.y + bboxBefore.height * 0.5 ],
+    };
+    opt.dpos = [moveX, moveY];
+    return (new Promise(function() { drag(opt); }))
+    .then(function() {
+        var bboxAfter = getSVGElemScreenBBox(
+            domainRefComponents.findAROByColor(objectColor, undefined, type)
+        );
+        expect(bboxAfter.x).toBeCloseTo(bboxBefore.x + moveX, 2);
+        expect(bboxAfter.y).toBeCloseTo(bboxBefore.y + moveY, 2);
+    });
+}
+
+describe('Shapes referencing domain', function() {
     var gd;
     beforeEach(function() {
         gd = createGraphDiv();
@@ -26,31 +70,34 @@ describe("Shapes referencing domain", function () {
         destroyGraphDiv(gd);
         gd = null;
     });
-    it("should move to the proper position", function(done) {
-        Plotly.newPlot(gd, Lib.extendDeep({}, testMock))
-        .then(delay(DELAY_TIME))
-        .then(function () {
-            var rectPos1before = getSVGElemScreenBBox(
-                domainRefComponents.findAROByColor(rectColor1)
-            );
-            var pos = {
-                mouseStartX: rectPos1before.x + rectPos1before.width * 0.5,
-                mouseStartY: rectPos1before.y + rectPos1before.height * 0.5,
-            };
-            pos.mouseEndX = pos.mouseStartX + 100;
-            pos.mouseEndY = pos.mouseStartY + -300;
-            mouseEvent('mousemove', pos.mouseStartX, pos.mouseStartY);
-            mouseEvent('mousedown', pos.mouseStartX, pos.mouseStartY);
-            mouseEvent('mousemove', pos.mouseEndX, pos.mouseEndY);
-            mouseEvent('mouseup', pos.mouseEndX, pos.mouseEndY);
-            var rectPos1after = getSVGElemScreenBBox(
-                domainRefComponents.findAROByColor(rectColor1)
-            );
-            expect(rectPos1after.x).toBeCloseTo(rectPos1before.x + 100, 2);
-            expect(rectPos1after.y).toBeCloseTo(rectPos1before.y - 300, 2);
-        })
-        .then(delay(DELAY_TIME))
-        .catch(failTest)
-        .then(done);
-    });
+    function testObjectMoveItFun(color, x, y, type) {
+        return function(done) {
+            Plotly.newPlot(gd, Lib.extendDeep({}, testMock))
+            .then(delay(DELAY_TIME))
+            .then(function() {
+                testObjectMove(color, x, y, type);
+            })
+            .then(delay(DELAY_TIME))
+            .catch(failTest)
+            .then(done);
+        };
+    }
+    function testAnnotationMoveItFun(color, x, y, type) {
+        return function(done) {
+            Plotly.newPlot(gd, Lib.extendDeep({}, testMock))
+            .then(delay(DELAY_TIME))
+            .then(testAnnotationMove(color, x, y, type))
+            .then(delay(DELAY_TIME))
+            .catch(failTest)
+            .then(done);
+        };
+    }
+    it('should move box on linear x axis and log y to the proper position',
+    testObjectMoveItFun(rectColor1, 100, -300, 'path'));
+    it('should move box on log x axis and linear y to the proper position',
+    testObjectMoveItFun(rectColor2, -400, -200, 'path'));
+    it('should move annotation box on linear x axis and log y to the proper position',
+    testAnnotationMoveItFun(rectColor3, 50, -100, 'rect'));
+    it('should move annotation box on log x axis and linear y to the proper position',
+    testAnnotationMoveItFun(rectColor4, -75, -150, 'rect'));
 });