Fix/allow custom properties to pass on update for links (#220)

* Remove hardcoded restrictions of node and links whitelists in graph.helper * Rename map link function to merge link * Re-add node props whitelist to avoid regression on change node props * Pick link source and target for detecting changes * Improve e2e tests for link properties changed * Use a LINK_PROPS_WHITELIST same pattern as for nodes to allow customProps to flow * Use object spread in favour of Object.assign * Add babel transform-object-rest-spread plugin * Update cypress to latest version 3.4.1 and fix e2e link tests * Rename componentWillReceiveProps to UNSAFE_componentWillReceiveProps * Falsy edge case on checking state.config.directed property * Add project path to cypress binary in node_modules * Revert "Add project path to cypress binary in node_modules" This reverts commit ceb674e.
danielcaldas · Sep 5, 2019 · 8c6fff3 · 8c6fff3
1 parent ca581d9
commit 8c6fff3
Show file tree

Hide file tree

Showing 10 changed files with 13,646 additions and 10,663 deletions.
diff --git a/.babelrc b/.babelrc
@@ -1,3 +1,4 @@
 {
-  "presets": ["react", "es2015", "stage-2"]
+  "presets": ["react", "es2015", "stage-2"],
+  "plugins": ["transform-object-rest-spread"]
 }
diff --git a/cypress.json b/cypress.json
@@ -1,3 +1,3 @@
 {
-    "videoRecording": false
+    "video": false
 }
diff --git a/cypress/integration/graph.e2e.js b/cypress/integration/graph.e2e.js
@@ -47,6 +47,21 @@ describe("[rd3g-graph] graph tests", function() {
 
                 nodePO.getColor().should("eq", "red");
 
+                // again click (+) add prop to 1st node
+                this.sandboxPO.addJsonTreeFirstNodeProp();
+
+                // edit color
+                cy.get('[placeholder="Key"]')
+                    .clear()
+                    .type("color");
+
+                // edit color to yellow and press ENTER
+                cy.get('[placeholder="Value"]')
+                    .clear()
+                    .type("yellow{enter}");
+
+                nodePO.getColor().should("eq", "yellow");
+
                 // delete created prop
                 this.sandboxPO.deleteJsonTreeFirstNodeProp();
 

diff --git a/cypress/integration/link.e2e.js b/cypress/integration/link.e2e.js
@@ -170,6 +170,10 @@ describe("[rd3g-link] link tests", function() {
             this.sandboxPO.fullScreenMode().click();
         });
 
+        afterEach(function() {
+            this.sandboxPO.exitFullScreenMode();
+        });
+
         it("should highlight the link and the intervening nodes", function() {
             // mouse over link between nodes 1 and 4
             // should highlight nodes 1 and 4 as well as they're connection
@@ -200,6 +204,47 @@ describe("[rd3g-link] link tests", function() {
 
             this.link34PO.shouldHaveColor("rgb(211, 211, 211)");
             this.link34PO.shouldHaveOpacity(0.2);
+
+            // clean
+            this.link14PO
+                .getLine()
+                .click()
+                .trigger("mouseout");
+        });
+    });
+
+    describe("when changing link props", function() {
+        it("should properly update link color", function() {
+            this.sandboxPO.jsonTreeExpandLinks();
+            this.sandboxPO.clickJsonTreeFirstLink();
+
+            this.sandboxPO.addJsonTreeFirstLinkProp();
+
+            // 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}");
+
+            this.sandboxPO.addJsonTreeFirstLinkProp();
+
+            // prop name be color
+            cy.get('[placeholder="Key"]')
+                .clear()
+                .type("color");
+            // prop value be red and press ENTER
+            cy.get('[placeholder="Value"]')
+                .clear()
+                .type("blue{enter}");
+
+            this.link12PO.shouldHaveColor("blue");
+
+            this.sandboxPO.deleteJsonTreeLastLinkProp();
+
+            this.link12PO.shouldHaveColor("rgb(211, 211, 211)");
         });
     });
 });
diff --git a/cypress/page-objects/sandbox.po.js b/cypress/page-objects/sandbox.po.js
@@ -8,6 +8,7 @@ function SandboxPO() {
 
     // actions
     this.fullScreenMode = () => cy.get(".container__graph > :nth-child(1) > :nth-child(1)");
+    this.exitFullScreenMode = () => cy.get(".cross-icon").click();
     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();
@@ -31,6 +32,26 @@ function SandboxPO() {
         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();
+    this.jsonTreeExpandLinks = () =>
+        cy
+            .get(
+                ".rejt-tree > :nth-child(1) > :nth-child(2) > :nth-child(2) > :nth-child(1) > :nth-child(1) > .rejt-name"
+            )
+            .click();
+    this.clickJsonTreeFirstLink = () =>
+        cy
+            .get(
+                ":nth-child(2) > :nth-child(1) > :nth-child(2) > :nth-child(2) > :nth-child(1) > :nth-child(1) > .rejt-name"
+            )
+            .click();
+    this.addJsonTreeFirstLinkProp = () =>
+        cy
+            .get(
+                ":nth-child(2) > :nth-child(1) > :nth-child(2) > :nth-child(2) > :nth-child(1) > .rejt-not-collapsed > :nth-child(4) > .rejt-plus-menu"
+            )
+            .click();
+    this.deleteJsonTreeLastLinkProp = () =>
+        cy.get(".rejt-not-collapsed-list > :nth-child(4) > .rejt-minus-menu").click();
 
     // element getters
     this.getFieldInput = field =>