Fix/data updates static updates (#52)

* Add react-editable-json-tree dep

* Make graph data editable with react-editable-json-tree

* Allow state to be passed into graph _tick function

* Fix typo in utils docs

* Improve utils isDeepEqual function

* Add pick function to utils

* Improve diff strategy to detect changes in input graph nodes & links

* Remove restriction to perform updates on static graphs 🙉

* Improve change detection in graph config as well

* Sandbox improvements. Fix some linting problems

* Update graph.helper unit tests. Update linting rules for unit tests

* Small Sandbox style improvement

* Add functional tests

* Update cypress to 2.0.1 🙏

* Set cypress videoRecording to false

* Update yarn.lock

* Use npm install in travis

* Small tweaks in sandbox styling

.eslintrc.test.config.js

@@ -23,7 +23,8 @@ module.exports = {
         "jest/no-focused-tests": "error",
         "jest/no-identical-title": "error",
         "jest/valid-expect": "error",
-        "max-len": ["error", 180, 4, { "ignoreComments": true }]
+        "max-len": ["error", 180, 4, { "ignoreComments": true }],
+        "max-lines": ["error", {"max": 800, "skipComments": true}],
     },
     "env": {
         "jest/globals": true

.gitignore

@@ -73,3 +73,4 @@ gen-docs
 **/.DS_Store
 .vscode
 cypress/videos/
+cypress/screenshots/

.travis.yml

@@ -2,7 +2,7 @@ language: node_js
 node_js:
     - "8.9.0"
 install:
-    - yarn install
+    - npm install
 before_script:
     - npm start -- --silent &
 script:

cypress.json

@@ -1 +1,3 @@
-{}
+{
+    "videoRecording": false
+}

cypress/common/page-objects/node.po.js

@@ -1,3 +1,5 @@
+/*global cy*/
+
 /**
  * Page Object for interacting with Node component.
  * @param {string} id the id of the node.

cypress/common/page-objects/sandbox.po.js

@@ -1,19 +1,32 @@
+/*global cy*/
+
 /**
  * Page Object for interacting with sandbox interface.
  * @returns {undefined}
  */
 function SandboxPO () {
     // whitelist checkbox inputs
-    this.checkboxes = [ 'node.renderLabel' ];
-    
+    this.checkboxes = ['node.renderLabel', 'staticGraph'];
+
     // actions
     this.playGraph = () => cy.get('.container__graph > :nth-child(1) > :nth-child(2)').click();
     this.pauseGraph = () => cy.get('.container__graph > :nth-child(1) > :nth-child(3)').click();
+    this.addNode = () => cy.get('.container__graph > :nth-child(1) > :nth-child(5)').click();
+    this.removeNode = () => cy.get('.container__graph > :nth-child(1) > :nth-child(6)').click();
+    this.clickJsonTreeNodes = () => {
+        cy.get('.container__graph-data').contains('root').scrollIntoView();
+        cy.get('.container__graph-data').contains('nodes').click();
+    };
+    // must be collapsed
+    this.clickJsonTreeFirstNode = () => cy.get(':nth-child(2) > .rejt-not-collapsed > .rejt-not-collapsed-list > :nth-child(1) > .rejt-collapsed > .rejt-collapsed-text').click();
+    this.addJsonTreeFirstNodeProp = () => cy.get(':nth-child(2) > :nth-child(1) > .rejt-not-collapsed > :nth-child(4) > .rejt-plus-menu').click();
+    this.deleteJsonTreeFirstNodeProp = () => cy.get('.rejt-not-collapsed-list > :nth-child(2) > .rejt-minus-menu').click();
 
     // element getters
     this.getFieldInput = (field) => this.checkboxes.includes(field)
         ? cy.contains(field).children('input')
         : cy.contains(field).siblings('.form-control');
+    this.getGraphNumbers = () => cy.get('.container__graph-info');
 }
 
 module.exports = SandboxPO;

cypress/integration/graph.e2e.js

@@ -0,0 +1,105 @@
+/*global cy*/
+const SANDBOX_URL = Cypress.env('SANDBOX_URL');
+
+const NodePO = require('../common/page-objects/node.po');
+const SandboxPO = require('../common/page-objects/sandbox.po');
+let nodes = require('./../../sandbox/data').nodes.map(({id}) => id);
+
+describe('[rd3g-graph] graph tests', function () {
+    before(function () {
+        this.sandboxPO = new SandboxPO();
+        // visit sandbox
+        cy.visit(SANDBOX_URL);
+        // sleep 2 seconds
+        cy.wait(2000);
+        // pause the graph
+        this.sandboxPO.pauseGraph();
+    });
+
+    describe('when data is changed', function () {
+        describe('and we change nodes props', function () {
+            beforeEach(function () {
+                // expand nodes
+                this.sandboxPO.clickJsonTreeNodes();
+                // expand 1st node
+                this.sandboxPO.clickJsonTreeFirstNode();
+            });
+
+            afterEach(function () {
+                this.sandboxPO.clickJsonTreeNodes();
+            });
+
+            it('nodes props modifications should be reflected in the graph', function () {
+                // click (+) add prop to 1st node
+                this.sandboxPO.addJsonTreeFirstNodeProp();
+
+                // prop name be color
+                cy.get('[placeholder="Key"]')
+                    .clear()
+                    .type('color');
+
+                // prop value be red and press ENTER
+                cy.get('[placeholder="Value"]')
+                    .clear()
+                    .type('red{enter}');
+
+                const nodePO = new NodePO(nodes[0]);
+
+                nodePO.getColor().should('eq', 'red');
+
+                // delete created prop
+                this.sandboxPO.deleteJsonTreeFirstNodeProp();
+
+                nodePO.getColor().should('eq', '#d3d3d3');
+            });
+
+            describe('and staticGraph is toggled on', function () {
+                beforeEach(function () {
+                    cy.contains('staticGraph').scrollIntoView();
+                    this.sandboxPO.getFieldInput('staticGraph').click();
+                });
+
+                it('nodes props modifications should be reflected in the graph', function () {
+                    cy.get('text').should('have.length', 14);
+
+                    this.sandboxPO.addNode();
+                    this.sandboxPO.addNode();
+                    this.sandboxPO.addNode();
+                    this.sandboxPO.addNode();
+
+                    cy.get('text').should('have.length', 18);
+
+                    // click (+) add prop to 1st node
+                    this.sandboxPO.addJsonTreeFirstNodeProp();
+                    // prop name be color
+                    cy.get('[placeholder="Key"]')
+                        .clear()
+                        .type('color');
+                    // prop value be red and press ENTER
+                    cy.get('[placeholder="Value"]')
+                        .clear()
+                        .type('red{enter}');
+
+                    const nodePO = new NodePO(nodes[0]);
+
+                    nodePO.getColor().should('eq', 'red');
+
+                    // delete created prop
+                    this.sandboxPO.deleteJsonTreeFirstNodeProp();
+
+                    nodePO.getColor().should('eq', '#d3d3d3');
+
+                    this.sandboxPO.removeNode();
+
+                    cy.get('text').should('have.length', 17);
+
+                    this.sandboxPO.removeNode();
+                    this.sandboxPO.removeNode();
+                    this.sandboxPO.removeNode();
+
+                    cy.get('text').should('have.length', 14);
+                });
+            });
+        });
+    });
+});

cypress/integration/node.e2e.js

@@ -1,6 +1,8 @@
+/*global cy*/
+const SANDBOX_URL = Cypress.env('SANDBOX_URL');
+
 const NodePO = require('../common/page-objects/node.po');
 const SandboxPO = require('../common/page-objects/sandbox.po');
-const SANDBOX_URL = Cypress.env('SANDBOX_URL');
 let nodes = require('./../../sandbox/data').nodes.map(({id}) => id);
 
 describe('[rd3g-node] node tests', function () {

package.json

@@ -45,7 +45,7 @@
         "babel-preset-react": "6.24.1",
         "babel-preset-stage-0": "6.24.1",
         "css-loader": "0.28.7",
-        "cypress": "1.4.1",
+        "cypress": "2.0.1",
         "documentation": "5.3.2",
         "eslint": "3.18.0",
         "eslint-config-recommended": "1.5.0",
@@ -59,6 +59,7 @@
         "npm-run-all": "4.1.1",
         "react-addons-test-utils": "15.6.0",
         "react-dom": "15.6.1",
+        "react-editable-json-tree": "2.1.0",
         "react-jsonschema-form": "0.50.1",
         "react-router-dom": "4.2.2",
         "react-test-renderer": "15.6.1",