Skip to content

Commit 765b8ae

Browse files
danielcaldasdanielcaldas
authored
Feature/directional graph (#132)
* Add marker component * Add marker.const * Render markers at graph level * Create marker.helper. Replace arrowId for markerId naming * Memoize operations to fetch marker id * Add markers only in directed graphs * Add size constatns to marker.const * Memoize defs for markers * Documentation for marker.helper * Fix regression in graph.helper on link.types * Update several tests and revert graph.config changes * Fix comment on sandbox node click * Add collapse.helper.js * Properly config eslint for jest * Fix sandbox no initial config provided * Correct collapsible behavior for directed graphs with isNodeVisible * Add @memberof for collapse.helper * Pass click node handler as setState callback * Clean collapse code in Graph component and graph.heler * Add marker snapshot tests * Add marker.helper tests * Remove FIXME on sandbox resolved with initial config fix * Small detail valid jsdoc for _tick * Fix state transition between active/inactive collapsible config * Fix bad call to toggleLinksMatrixConnections in Graph.jsx * Differ condition to check leaf node for directed graphs * Add eslint-plugin-cypress * Add 'directed' to sandbox.po whitelist of checkboxes * Add marker className to marker component * Add e2e tests for directed graph * Small lint fix * Fix scenario for toggling directed config * Add note in graph.config about issue #129 * Improvements in collapse.helper * Write more unit tests for toggleLinksConnections * Add module to eslint globals * Support fullscreen query param on sandbox * Add marvel dataset to sandbox * Add jsdoc for directed config * Code review
1 parent c3029ab commit 765b8ae

30 files changed

+5283
-3951
lines changed

‎.eslintrc.js‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,12 @@
11
module.exports = {
2-
extends: ['eslint:recommended'],
2+
extends: ['eslint:recommended', 'plugin:jest/recommended'],
33
globals: {
44
document: true,
55
Reflect: true,
6-
window: true
6+
window: true,
7+
Cypress: true,
8+
cy: true,
9+
module: true
710
},
811
parser: 'babel-eslint',
912
parserOptions: {
@@ -12,7 +15,7 @@ module.exports = {
1215
jsx: true
1316
}
1417
},
15-
plugins: ['standard', 'promise', 'react'],
18+
plugins: ['standard', 'promise', 'react', 'jest', 'cypress'],
1619
rules: {
1720
'react/jsx-uses-react': 'error',
1821
'react/jsx-uses-vars': 'error',

‎cypress/integration/graph.directed.e2e.js‎

Lines changed: 151 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,151 @@
1+
const SANDBOX_URL = Cypress.env('SANDBOX_URL');
2+
3+
const LinkPO = require('../page-objects/link.po');
4+
const NodePO = require('../page-objects/node.po');
5+
const SandboxPO = require('../page-objects/sandbox.po');
6+
7+
describe('[rd3g-graph] directed graph tests', function() {
8+
beforeEach(function() {
9+
this.sandboxPO = new SandboxPO();
10+
// visit sandbox
11+
cy.visit(`${SANDBOX_URL}?data=small`);
12+
// sleep 1.5 seconds
13+
cy.wait(1500);
14+
// pause the graph
15+
this.sandboxPO.pauseGraph();
16+
// make graph directed and remove labels
17+
['node.renderLabel', 'directed'].forEach(formKey => {
18+
cy.contains(formKey).scrollIntoView();
19+
this.sandboxPO.getFieldInput(formKey).click();
20+
});
21+
});
22+
23+
describe('check for graph elements', function() {
24+
beforeEach(function() {
25+
this.node1PO = new NodePO(1);
26+
this.node2PO = new NodePO(2);
27+
this.node3PO = new NodePO(3);
28+
this.node4PO = new NodePO(4);
29+
this.link12PO = new LinkPO(0);
30+
this.link13PO = new LinkPO(1);
31+
this.link14PO = new LinkPO(2);
32+
this.link34PO = new LinkPO(3);
33+
});
34+
35+
it('should properly display elements for directed graph', function() {
36+
// Check if other , links and markers are visible
37+
this.node1PO.getPath().should('be.visible');
38+
this.node2PO.getPath().should('be.visible');
39+
this.node3PO.getPath().should('be.visible');
40+
this.node4PO.getPath().should('be.visible');
41+
this.link12PO.getLine().should('be.visible');
42+
this.link12PO.hasMarker();
43+
this.link13PO.getLine().should('be.visible');
44+
this.link13PO.hasMarker();
45+
this.link14PO.getLine().should('be.visible');
46+
this.link14PO.hasMarker();
47+
this.link34PO.getLine().should('be.visible');
48+
this.link34PO.hasMarker();
49+
});
50+
});
51+
52+
describe('when graph is collapsible', function() {
53+
beforeEach(function() {
54+
cy.contains('collapsible').scrollIntoView();
55+
this.sandboxPO.getFieldInput('collapsible').click();
56+
57+
this.node1PO = new NodePO(1);
58+
this.node2PO = new NodePO(2);
59+
this.node3PO = new NodePO(3);
60+
this.node4PO = new NodePO(4);
61+
this.link12PO = new LinkPO(0);
62+
this.link13PO = new LinkPO(1);
63+
this.link14PO = new LinkPO(2);
64+
this.link34PO = new LinkPO(3);
65+
});
66+
67+
it('should behave correctly when directed is disabled after collapsed node', function() {
68+
const toggledLine = this.link12PO.getLine();
69+
70+
// Check the leaf node & link is present
71+
this.node2PO.getPath().should('be.visible');
72+
toggledLine.should('be.visible');
73+
74+
// Click 'Node 1' in order to collapse the leafs
75+
this.node1PO.getPath().click();
76+
77+
// Check the leaf node & link is no longer visible
78+
this.node2PO.getPath().should('not.be.visible');
79+
toggledLine.should('not.be.visible');
80+
81+
// Check if other nodes and links are still visible
82+
this.node1PO.getPath().should('be.visible');
83+
this.node3PO.getPath().should('be.visible');
84+
this.node4PO.getPath().should('be.visible');
85+
86+
this.link13PO.getLine().should('be.visible');
87+
this.link14PO.getLine().should('be.visible');
88+
this.link34PO.getLine().should('be.visible');
89+
90+
// Disable "directed"
91+
cy.contains('directed').scrollIntoView();
92+
this.sandboxPO.getFieldInput('directed').click();
93+
94+
// Check if other nodes and links are still visible
95+
this.node1PO.getPath().should('be.visible');
96+
this.node2PO.getPath().should('be.visible');
97+
this.node3PO.getPath().should('be.visible');
98+
this.node4PO.getPath().should('be.visible');
99+
100+
toggledLine.should('be.visible');
101+
this.link13PO.getLine().should('be.visible');
102+
this.link14PO.getLine().should('be.visible');
103+
this.link34PO.getLine().should('be.visible');
104+
});
105+
106+
it('should behave correctly when collapsible is disabled after collapsible node', function() {
107+
const toggledLine = this.link12PO.getLine();
108+
109+
// Check the leaf node & link is present
110+
this.node2PO.getPath().should('be.visible');
111+
toggledLine.should('be.visible');
112+
113+
// Click 'Node 1' in order to collapse the leafs
114+
this.node1PO.getPath().click();
115+
116+
// Check the leaf node & link is no longer visible
117+
this.node2PO.getPath().should('not.be.visible');
118+
toggledLine.should('not.be.visible');
119+
120+
// Check if other nodes and links are still visible
121+
this.node1PO.getPath().should('be.visible');
122+
this.node3PO.getPath().should('be.visible');
123+
this.node4PO.getPath().should('be.visible');
124+
125+
this.link13PO.getLine().should('be.visible');
126+
this.link14PO.getLine().should('be.visible');
127+
this.link34PO.getLine().should('be.visible');
128+
129+
// Disable "collapsible"
130+
cy.contains('collapsible').scrollIntoView();
131+
this.sandboxPO.getFieldInput('collapsible').click();
132+
133+
// The previously hidden node should reappear
134+
this.node2PO.getPath().should('be.visible');
135+
toggledLine.should('be.visible');
136+
this.link12PO.hasMarker();
137+
138+
// Check if other nodes and links are still visible
139+
this.node1PO.getPath().should('be.visible');
140+
this.node3PO.getPath().should('be.visible');
141+
this.node4PO.getPath().should('be.visible');
142+
143+
this.link13PO.getLine().should('be.visible');
144+
this.link13PO.hasMarker();
145+
this.link14PO.getLine().should('be.visible');
146+
this.link14PO.hasMarker();
147+
this.link34PO.getLine().should('be.visible');
148+
this.link34PO.hasMarker();
149+
});
150+
});
151+
});

‎cypress/page-objects/link.po.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,10 @@ function LinkPO(index) {
1212
this.getStyle = () => this.getLine().invoke('attr', 'style');
1313
this.shouldHaveColor = color => this.getStyle().should('contain', `stroke: ${color};`);
1414
this.shouldHaveOpacity = opacity => this.getStyle().should('contain', `opacity: ${opacity};`);
15+
this.hasMarker = () =>
16+
this.getLine()
17+
.invoke('attr', 'marker-end')
18+
.should('contain', 'url(#marker-');
1519
}
1620

1721
module.exports = LinkPO;

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
*/
77
function SandboxPO() {
88
// whitelist checkbox inputs
9-
this.checkboxes = ['node.renderLabel', 'staticGraph', 'collapsible'];
9+
this.checkboxes = ['node.renderLabel', 'staticGraph', 'collapsible', 'directed'];
1010

1111
// actions
1212
this.fullScreenMode = () => cy.get('.container__graph > :nth-child(1) > :nth-child(1)');

‎docs/rd3g-directed.gif‎

5.01 MB
Loading

0 commit comments

Comments
 (0)