fix: Trigger custom click handler in collapsible nodes (#137)

* fix: Trigger custom click handler in collapsible nodes

There was a mistake in the `_tick` method which caused the user's
`onNodeClick` custom handler to never be triggered when the collapsible
feature was enabled.

The problem was that it called `setState` without using a callback
parameter if the received `cb` was not empty. The contents of that
ternary operator should be the opposite for things to work.

This fix closes #136.

* Add e2e test for node click callback

Author: LonelyPrincess

cypress/integration/graph.e2e.js

@@ -116,50 +116,72 @@ describe('[rd3g-graph] graph tests', function() {
 
     describe('when clicking a node', function() {
         before(function() {
-            this.sandboxPO = new SandboxPO();
             // visit sandbox
             cy.visit(`${SANDBOX_URL}?data=small`);
             // sleep 2 seconds
             cy.wait(2000);
             // pause the graph
             this.sandboxPO.pauseGraph();
 
-            cy.contains('collapsible').scrollIntoView();
-            this.sandboxPO.getFieldInput('collapsible').click();
-
             this.node1PO = new NodePO(1);
-            this.node2PO = new NodePO(2);
-            this.node3PO = new NodePO(3);
-            this.node4PO = new NodePO(4);
-            this.link12PO = new LinkPO(0);
         });
 
-        it('should collapse leaf nodes', function() {
-            const line = this.link12PO.getLine();
+        it('should trigger alert with message containing node id', async function() {
+            // stub window.alert
+            const stub = cy.stub();
+
+            cy.on('window:alert', stub);
 
-            // Check the leaf node & link is present
-            this.node2PO.getPath().should('be.visible');
-            line.should('be.visible');
+            // Click node 1
+            this.node1PO
+                .getPath()
+                .click()
+                .then(() => {
+                    expect(stub.getCall(0)).to.be.calledWith('laraalarla');
+                });
+        });
 
-            // Click 'Node 1' in order to collapse the leafs
-            this.node1PO.getPath().click();
+        describe('and graph is collapsible', function() {
+            before(function() {
+                ['node.renderLabel', 'collapsible'].forEach(formKey => {
+                    cy.contains(formKey).scrollIntoView();
+                    this.sandboxPO.getFieldInput(formKey).click();
+                });
 
-            // Check the leaf node & link is no longer visible
-            this.node2PO.getPath().should('not.be.visible');
-            line.should('not.be.visible');
+                this.node1PO = new NodePO(1);
+                this.node2PO = new NodePO(2);
+                this.node3PO = new NodePO(3);
+                this.node4PO = new NodePO(4);
+                this.link12PO = new LinkPO(0);
+            });
 
-            // Check if other nodes and links are still visible
-            this.node1PO.getPath().should('be.visible');
-            this.node3PO.getPath().should('be.visible');
-            this.node4PO.getPath().should('be.visible');
+            it('should collapse leaf nodes', function() {
+                const line = this.link12PO.getLine();
 
-            const link13PO = new LinkPO(1);
-            const link14PO = new LinkPO(2);
-            const link34PO = new LinkPO(3);
+                // Check the leaf node & link is present
+                this.node2PO.getPath().should('be.visible');
+                line.should('be.visible');
 
-            link13PO.getLine().should('be.visible');
-            link14PO.getLine().should('be.visible');
-            link34PO.getLine().should('be.visible');
+                // Click 'Node 1' in order to collapse the leafs
+                this.node1PO.getPath().click();
+
+                // Check the leaf node & link is no longer visible
+                this.node2PO.getPath().should('not.be.visible');
+                line.should('not.be.visible');
+
+                // Check if other nodes and links are still visible
+                this.node1PO.getPath().should('be.visible');
+                this.node3PO.getPath().should('be.visible');
+                this.node4PO.getPath().should('be.visible');
+
+                const link13PO = new LinkPO(1);
+                const link14PO = new LinkPO(2);
+                const link34PO = new LinkPO(3);
+
+                link13PO.getLine().should('be.visible');
+                link14PO.getLine().should('be.visible');
+                link34PO.getLine().should('be.visible');
+            });
         });
     });
 });

src/components/graph/Graph.jsx

@@ -185,7 +185,7 @@ export default class Graph extends React.Component {
      * @param {Function} [cb] - optional callback to fed in to {@link setState()|https://reactjs.org/docs/react-component.html#setstate}.
      * @returns {undefined}
      */
-    _tick = (state = {}, cb) => (cb ? this.setState(state) : this.setState(state, cb));
+    _tick = (state = {}, cb) => (cb ? this.setState(state, cb) : this.setState(state));
 
     /**
      * Configures zoom upon graph with default or user provided values.<br/>