test: check main drag update on relayout

Author: etpinard

test/jasmine/tests/fx_test.js

@@ -1,6 +1,11 @@
-var Fx = require('@src/plots/cartesian/graph_interact');
+var Plotly = require('@lib/index');
 var Plots = require('@src/plots/plots');
 
+var Fx = require('@src/plots/cartesian/graph_interact');
+
+var d3 = require('d3');
+var createGraphDiv = require('../assets/create_graph_div');
+var destroyGraphDiv = require('../assets/destroy_graph_div');
 
 
 describe('Fx defaults', function() {
@@ -65,4 +70,66 @@ describe('Fx defaults', function() {
         expect(layoutOut.dragmode).toBe('zoom', 'dragmode to zoom');
     });
 });
+
+describe('relayout', function() {
+    'use strict';
+
+    var gd;
+
+    beforeEach(function() {
+        gd = createGraphDiv();
+    });
+
+    afterEach(destroyGraphDiv);
+
+    it('should update main drag with correct', function(done) {
+
+        function assertMainDrag(cursor, isActive) {
+            expect(d3.selectAll('rect.nsewdrag').size()).toEqual(1, 'number of nodes');
+            var mainDrag = d3.select('rect.nsewdrag'),
+                node = mainDrag.node();
+
+            expect(mainDrag.classed('cursor-' + cursor)).toBe(true, 'cursor ' + cursor);
+            expect(mainDrag.style('pointer-events')).toEqual('all', 'pointer event');
+            expect(!!node.onmousedown).toBe(isActive, 'mousedown handler');
+        }
+
+        Plotly.plot(gd, [{
+            y: [2, 1, 2]
+        }]).then(function() {
+            assertMainDrag('crosshair', true);
+
+            return Plotly.relayout(gd, 'dragmode', 'pan');
+        }).then(function() {
+            assertMainDrag('move', true);
+
+            return Plotly.relayout(gd, 'dragmode', 'drag');
+        }).then(function() {
+            assertMainDrag('crosshair', true);
+
+            return Plotly.relayout(gd, 'xaxis.fixedrange', true);
+        }).then(function() {
+            assertMainDrag('ns-resize', true);
+
+            return Plotly.relayout(gd, 'yaxis.fixedrange', true);
+        }).then(function() {
+            assertMainDrag('pointer', false);
+
+            return Plotly.relayout(gd, 'dragmode', 'drag');
+        }).then(function() {
+            assertMainDrag('pointer', false);
+
+            return Plotly.relayout(gd, 'dragmode', 'lasso');
+        }).then(function() {
+            assertMainDrag('pointer', true);
+
+            return Plotly.relayout(gd, 'dragmode', 'select');
+        }).then(function() {
+            assertMainDrag('pointer', true);
+
+            return Plotly.relayout(gd, 'xaxis.fixedrange', false);
+        }).then(function() {
+            assertMainDrag('ew-resize', true);
+        }).then(done);
+    });
 });