Node Collapse

cypress/integration/graph.e2e.js

@@ -2,6 +2,7 @@
 const SANDBOX_URL = Cypress.env('SANDBOX_URL');
 
 const NodePO = require('../page-objects/node.po');
+const LinkPO = require('../page-objects/link.po');
 const SandboxPO = require('../page-objects/sandbox.po');
 let nodes = require('./../../sandbox/data/default').nodes.map(({ id }) => id);
 
@@ -109,3 +110,37 @@ 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.link12PO = new LinkPO(0);
+    });
+
+    it('should collapse leaf nodes', function() {
+        const line = this.link12PO.getLine();
+
+        // Check the leaf node & link is present
+        this.node2PO.getPath().should('be.visible');
+        line.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');
+    });
+});

cypress/page-objects/sandbox.po.js

@@ -6,7 +6,7 @@
  */
 function SandboxPO() {
     // whitelist checkbox inputs
-    this.checkboxes = ['node.renderLabel', 'staticGraph'];
+    this.checkboxes = ['node.renderLabel', 'staticGraph', 'collapsible'];
 
     // actions
     this.fullScreenMode = () => cy.get('.container__graph > :nth-child(1) > :nth-child(1)');