fixes and tests to prevent dragging on a node to trigger a clicking behavior

Author: Kerry Chang

app/plugins/modules/wskflow/lib/graph2doms.js

@@ -86,7 +86,8 @@ function graph2doms(JSONgraph, ifReuseContainer, activations){
 	    .on("zoom", redraw);
 
 	let containerElement,
-		wskflowContainer = $('<div id="wskflowContainer"></div>');
+		wskflowContainer = $('<div id="wskflowContainer"></div>'),
+		enterClickMode = false;
 
 	if(ifReuseContainer && $(`#${containerId}`).length>0){
 		containerElement = $(`#${containerId}`);
@@ -727,7 +728,12 @@ function graph2doms(JSONgraph, ifReuseContainer, activations){
 				$(".link").removeClass("hover");
 				$("#qtip").removeClass("visible");
 
+			}).on('mousedown', () => {	
+				enterClickMode = true;			
 			}).on("click", function(d, i){
+				if(!enterClickMode) return;
+				enterClickMode = false;
+
 				if(activations){
 					if(d.visited){
 						if($("#actList").css("display") != "block"){
@@ -1219,6 +1225,7 @@ function graph2doms(JSONgraph, ifReuseContainer, activations){
 			customZoom = true
             notify()   
 		}
+		enterClickMode = false;
 		container.attr('transform', `translate(${d3.event.translate}) scale(${d3.event.scale})`);
      	$("#qtip").removeClass("visible")	
 	}	

tests/tests/passes/07/wskflow-tests.js

@@ -133,7 +133,7 @@ describe('create a if composition, invoke, verify session flow is shown correctl
        .then(sidecar.expectShowing(appName))
        .catch(common.oops(this)))
 
-    it(`should invoke ${appName} with condition equals true, and get the output {path: true}`, () => cli.do(`app invoke ${appName} -p condition true`, this.app)
+    it(`should invoke ${appName} with condition equals true`, () => cli.do(`app invoke ${appName} -p condition true`, this.app)
       .then(cli.expectOK)
        .then(sidecar.expectOpen)
        .catch(common.oops(this)))
@@ -148,7 +148,7 @@ describe('create a if composition, invoke, verify session flow is shown correctl
            .then(verifyNodeStatusExists('p=>({path:false})', 'not-run'))
            .catch(common.oops(this)))
 
-    it(`should invoke ${appName} with condition equals false, and get the output {path: false}`, () => cli.do(`app invoke ${appName} -p condition false`, this.app)
+    it(`should invoke ${appName} with condition equals false`, () => cli.do(`app invoke ${appName} -p condition false`, this.app)
       .then(cli.expectOK)
        .then(sidecar.expectOpen)
        .catch(common.oops(this)))
@@ -165,3 +165,46 @@ describe('create a if composition, invoke, verify session flow is shown correctl
            .catch(common.oops(this)))
 
 });
+
+// test if mousedown on a node, drag and release triggers the clicking behavior of the node (it shouldn't)
+describe('test if pressing a node, dragging and releasing triggers the clicking behavior of the node (it shouldn not)', function() {
+    before(common.before(this))
+    after(common.after(this))
+
+    const appName = 'test-if', appFile = 'data/composer-source/if-session.js';
+    it('should have an active repl', () => this.app.client.waitForText('#openwhisk-api-host', 60000))
+
+    it(`should create an app with ${appFile}`, () => cli.do(`app create ${appName} ${appFile}`, this.app)
+      .then(cli.expectOK)
+       .then(sidecar.expectOpen)
+       .then(sidecar.expectShowing(appName))
+       .catch(common.oops(this)))
+
+    it(`should invoke ${appName} with condition equals true`, () => cli.do(`app invoke ${appName} -p condition true`, this.app)
+      .then(cli.expectOK)
+       .then(sidecar.expectOpen)
+       .catch(common.oops(this)))
+
+    it(`should be able to click on the mode button to switch to session flow`, () => this.app.client.click(ui.selectors.SIDECAR_MODE_BUTTON('visualization'))
+      .then(() => this.app)           
+           .then(sidecar.expectOpen)
+           .then(sidecar.expectShowing(appName))
+           .then(app => app.client.waitForExist('#wskflowSVG', 5000))
+           .then(() => this.app)
+           .then(verifyNodeStatusExists('Exit', 'success'))
+           .catch(common.oops(this)))
+
+    it(`should press, drag and release exist node and still stay at session flow`, () => this.app.client.moveToObject('#Exit')
+      .then(() => this.app.client.buttonDown())
+      .then(() => this.app.client.moveToObject('#wskflowSVG'))
+      .then(() => this.app.client.buttonUp())      
+      .then(() => this.app.client.getText('.sidecar-header-icon'))
+      .then(text => assert.equal(text, 'SESSION'))
+      .catch(common.oops(this)))
+
+    it(`should click on the exit node and go to the activation`, () => this.app.client.click('#Exit')
+      .then(() => this.app.client.getText('.sidecar-header-icon'))      
+      .then(text => assert.equal(text, 'ACTIVATION'))
+      .catch(common.oops(this)))
+
+});