diff --git a/cypress/integration/rendering/sankey.spec.ts b/cypress/integration/rendering/sankey.spec.ts index de10338e8..ded23a045 100644 --- a/cypress/integration/rendering/sankey.spec.ts +++ b/cypress/integration/rendering/sankey.spec.ts @@ -13,73 +13,132 @@ describe('Sankey Diagram', () => { }); describe('when given a linkColor', function () { - it('links should be the same color as source node', () => { - renderGraph( - ` - sankey-beta - - sourceNode,targetNode,10 - `, - { - sankey: { linkColor: 'source' }, - } - ); - - cy.get('.link path').then((link) => { - cy.get('.node[id="node-1"] rect').should(node => - expect(link.attr('stroke')).to.equal(node.attr('fill')) - ); - }); + this.beforeAll(() => { + cy.wrap( + `sankey-beta + a,b,10 + ` + ).as('graph'); }); - it('should change link color to hex code', () => { - renderGraph( - ` - sankey-beta - a,b,10 - `, - { - sankey: { linkColor: '#636465' }, - } - ); + it('links should use hex color', function () { + renderGraph(this.graph, { sankey: { linkColor: '#636465' } }); cy.get('.link path').should((link) => { expect(link.attr('stroke')).to.equal('#636465'); }); }); - it('links should be the same color as target node', () => { - renderGraph( - ` - sankey-beta - sourceNode,targetNode,10 - `, - { - sankey: { linkColor: 'target' }, - } - ); + it('links should be the same color as source node', function () { + renderGraph(this.graph, { sankey: { linkColor: 'source' } }); cy.get('.link path').then((link) => { - cy.get('.node[id="node-2"] rect').should(node => + cy.get('.node[id="node-1"] rect').should((node) => expect(link.attr('stroke')).to.equal(node.attr('fill')) ); }); }); - it('links must be gradient', () => { - renderGraph( - ` - sankey-beta - sourceNode,targetNode,10 - `, - { - sankey: { linkColor: 'gradient' }, - } - ); + it('links should be the same color as target node', function () { + renderGraph(this.graph, { sankey: { linkColor: 'target' } }); + + cy.get('.link path').then((link) => { + cy.get('.node[id="node-2"] rect').should((node) => + expect(link.attr('stroke')).to.equal(node.attr('fill')) + ); + }); + }); + + it('links must be gradient', function () { + renderGraph(this.graph, { sankey: { linkColor: 'gradient' } }); cy.get('.link path').should((link) => { expect(link.attr('stroke')).to.equal('url(#linearGradient-3)'); }); }); }); + + describe('when given a nodeAlignment', function () { + this.beforeAll(() => { + cy.wrap( + ` + sankey-beta + + a,b,8 + b,c,8 + c,d,8 + d,e,8 + + x,c,4 + c,y,4 + ` + ).as('graph'); + }); + + this.afterEach(() => { + cy.get('.node[id="node-1"]').should((node) => { + expect(node.attr('x')).to.equal('0'); + }); + cy.get('.node[id="node-2"]').should((node) => { + expect(node.attr('x')).to.equal('100'); + }); + cy.get('.node[id="node-3"]').should((node) => { + expect(node.attr('x')).to.equal('200'); + }); + cy.get('.node[id="node-4"]').should((node) => { + expect(node.attr('x')).to.equal('300'); + }); + cy.get('.node[id="node-5"]').should((node) => { + expect(node.attr('x')).to.equal('400'); + }); + }); + + it('should justify nodes', function () { + renderGraph(this.graph, { + sankey: { nodeAlignment: 'justify', width: 410, useMaxWidth: false }, + }); + cy.get('.node[id="node-6"]').should((node) => { + expect(node.attr('x')).to.equal('0'); + }); + cy.get('.node[id="node-7"]').should((node) => { + expect(node.attr('x')).to.equal('400'); + }); + }); + + it('should align nodes left', function () { + renderGraph(this.graph, { + sankey: { nodeAlignment: 'left', width: 410, useMaxWidth: false }, + }); + cy.get('.node[id="node-6"]').should((node) => { + expect(node.attr('x')).to.equal('0'); + }); + cy.get('.node[id="node-7"]').should((node) => { + expect(node.attr('x')).to.equal('300'); + }); + }); + + it('should align nodes right', function () { + renderGraph(this.graph, { + sankey: { nodeAlignment: 'right', width: 410, useMaxWidth: false }, + }); + cy.get('.node[id="node-6"]').should((node) => { + expect(node.attr('x')).to.equal('100'); + }); + cy.get('.node[id="node-7"]').should((node) => { + expect(node.attr('x')).to.equal('400'); + }); + }); + + it('should center nodes', function () { + renderGraph(this.graph, { + sankey: { nodeAlignment: 'center', width: 410, useMaxWidth: false }, + }); + cy.get('.node[id="node-6"]').should((node) => { + expect(node.attr('x')).to.equal('100'); + }); + cy.get('.node[id="node-7"]').should((node) => { + expect(node.attr('x')).to.equal('300'); + }); + }); + }); }); diff --git a/demos/sankey.html b/demos/sankey.html index c8cdc1e7e..0c9679c65 100644 --- a/demos/sankey.html +++ b/demos/sankey.html @@ -100,6 +100,7 @@ width: 1200, height: 600, linkColor: 'gradient', + nodeAlignment: 'justify', }, });