4.0 KB145 lines
Blame
1import { imgSnapshotTest, renderGraph } from '../../helpers/util.ts';
2
3describe('Sankey Diagram', () => {
4 it('should render a simple example', () => {
5 imgSnapshotTest(
6 `
7 sankey-beta
8
9 sourceNode,targetNode,10
10 `,
11 {}
12 );
13 });
14
15 describe('when given a linkColor', function () {
16 this.beforeAll(() => {
17 cy.wrap(
18 `sankey
19 a,b,10
20 `
21 ).as('graph');
22 });
23
24 it('links should use hex color', function () {
25 renderGraph(this.graph, { sankey: { linkColor: '#636465' } });
26
27 cy.get('.link path').should((link) => {
28 expect(link.attr('stroke')).to.equal('#636465');
29 });
30 });
31
32 it('links should be the same color as source node', function () {
33 renderGraph(this.graph, { sankey: { linkColor: 'source' } });
34
35 cy.get('.link path').then((link) => {
36 cy.get('.node[id="node-1"] rect').should((node) =>
37 expect(link.attr('stroke')).to.equal(node.attr('fill'))
38 );
39 });
40 });
41
42 it('links should be the same color as target node', function () {
43 renderGraph(this.graph, { sankey: { linkColor: 'target' } });
44
45 cy.get('.link path').then((link) => {
46 cy.get('.node[id="node-2"] rect').should((node) =>
47 expect(link.attr('stroke')).to.equal(node.attr('fill'))
48 );
49 });
50 });
51
52 it('links must be gradient', function () {
53 renderGraph(this.graph, { sankey: { linkColor: 'gradient' } });
54
55 cy.get('.link path').should((link) => {
56 expect(link.attr('stroke')).to.equal('url(#linearGradient-3)');
57 });
58 });
59 });
60
61 describe('when given a nodeAlignment', function () {
62 this.beforeAll(() => {
63 cy.wrap(
64 `
65 sankey
66
67 a,b,8
68 b,c,8
69 c,d,8
70 d,e,8
71
72 x,c,4
73 c,y,4
74 `
75 ).as('graph');
76 });
77
78 this.afterEach(() => {
79 cy.get('.node[id="node-1"]').should((node) => {
80 expect(node.attr('x')).to.equal('0');
81 });
82 cy.get('.node[id="node-2"]').should((node) => {
83 expect(node.attr('x')).to.equal('100');
84 });
85 cy.get('.node[id="node-3"]').should((node) => {
86 expect(node.attr('x')).to.equal('200');
87 });
88 cy.get('.node[id="node-4"]').should((node) => {
89 expect(node.attr('x')).to.equal('300');
90 });
91 cy.get('.node[id="node-5"]').should((node) => {
92 expect(node.attr('x')).to.equal('400');
93 });
94 });
95
96 it('should justify nodes', function () {
97 renderGraph(this.graph, {
98 sankey: { nodeAlignment: 'justify', width: 410, useMaxWidth: false },
99 });
100 cy.get('.node[id="node-6"]').should((node) => {
101 expect(node.attr('x')).to.equal('0');
102 });
103 cy.get('.node[id="node-7"]').should((node) => {
104 expect(node.attr('x')).to.equal('400');
105 });
106 });
107
108 it('should align nodes left', function () {
109 renderGraph(this.graph, {
110 sankey: { nodeAlignment: 'left', width: 410, useMaxWidth: false },
111 });
112 cy.get('.node[id="node-6"]').should((node) => {
113 expect(node.attr('x')).to.equal('0');
114 });
115 cy.get('.node[id="node-7"]').should((node) => {
116 expect(node.attr('x')).to.equal('300');
117 });
118 });
119
120 it('should align nodes right', function () {
121 renderGraph(this.graph, {
122 sankey: { nodeAlignment: 'right', width: 410, useMaxWidth: false },
123 });
124 cy.get('.node[id="node-6"]').should((node) => {
125 expect(node.attr('x')).to.equal('100');
126 });
127 cy.get('.node[id="node-7"]').should((node) => {
128 expect(node.attr('x')).to.equal('400');
129 });
130 });
131
132 it('should center nodes', function () {
133 renderGraph(this.graph, {
134 sankey: { nodeAlignment: 'center', width: 410, useMaxWidth: false },
135 });
136 cy.get('.node[id="node-6"]').should((node) => {
137 expect(node.attr('x')).to.equal('100');
138 });
139 cy.get('.node[id="node-7"]').should((node) => {
140 expect(node.attr('x')).to.equal('300');
141 });
142 });
143 });
144});
145