Skip to content

Commit 0554eee

Browse files
dlabrecqdlabrecq
committed
chore(charts): update sankey tests
1 parent c16a75b commit 0554eee

File tree

14 files changed

+303
-49
lines changed

14 files changed

+303
-49
lines changed

‎jest.config.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ const config: Config = {
1919
'^.+\\.m?[jt]sx?$': 'babel-jest',
2020
'^.+\\.svg$': 'jest-transform-stub'
2121
},
22-
setupFilesAfterEnv: ['<rootDir>/packages/testSetup.ts'],
22+
setupFilesAfterEnv: ['<rootDir>/packages/testSetup.ts', 'jest-canvas-mock'],
2323
testPathIgnorePatterns: ['<rootDir>/packages/react-integration/'],
2424
transformIgnorePatterns: [
2525
'/node_modules/victory-*/',

‎package.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -105,7 +105,8 @@
105105
"start:cypress": "lerna run cypress:open",
106106
"start:demo-app": "lerna run dev --scope=demo-app-ts --stream",
107107
"test": "TZ=EST LC_ALL=en_US.UTF8 jest packages",
108-
"test-sankey": "TZ=EST LC_ALL=en_US.UTF8 jest packages/react-charts/src/echarts/components/Sankey/__tests__/Sankey.test.tsx",
108+
"test-sankey-old": "TZ=EST LC_ALL=en_US.UTF8 jest packages/react-charts/src/echarts/components/Sankey/__tests__/Sankey.test.tsx",
109+
"test-sankey": "TZ=EST LC_ALL=en_US.UTF8 jest --transform-IgnorePatterns '/node_modules/(?!(chart\\.js|echarts|zrender)).*\\.js$' packages/react-charts/src/echarts/components/Sankey/__tests__/Sankey.test.tsx",
109110
"test:a11y": "lerna run test:a11y --stream",
110111
"test:integration": "yarn workspace @patternfly/react-integration test:integration",
111112
"uninstall": "find . -name node_modules -type d | xargs rm -rf",

‎packages/react-charts/package.json

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,8 @@
4747
},
4848
"devDependencies": {
4949
"@types/lodash": "^4.17.15",
50-
"fs-extra": "^11.3.0"
50+
"fs-extra": "^11.3.0",
51+
"jest-canvas-mock": "^2.5.2"
5152
},
5253
"peerDependencies": {
5354
"echarts": "^5.6.0",
@@ -124,6 +125,9 @@
124125
"optional": true
125126
}
126127
},
128+
"jest": {
129+
"transformIgnorePatterns": ["node_modules/(?!(chart\\.js|echarts|zrender)).*\\.js$"]
130+
},
127131
"scripts": {
128132
"clean": "rimraf dist echarts victory",
129133
"build:single:packages": "node ../../scripts/build-single-packages.mjs --config single-packages.config.json",

‎packages/react-charts/src/echarts/__mocks__/echarts.js renamed to ‎packages/react-charts/src/echarts/__mocks__/echarts.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
const echarts = jest.createMockFromModule('echarts');
1+
const echarts: any = jest.createMockFromModule('echarts');
22
echarts.init = jest.fn(() => ({
33
setOption: jest.fn(),
44
dispose: jest.fn()

‎packages/react-charts/src/echarts/components/Sankey/Sankey.tsx

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -139,7 +139,8 @@ export const Sankey: React.FunctionComponent<SankeyProps> = ({
139139
themeColor,
140140
tooltipDestinationLabel = 'Destination',
141141
tooltipSourceLabel = 'Source',
142-
width
142+
width,
143+
...rest
143144
}: SankeyProps) => {
144145
const containerRef = useRef<HTMLDivElement>();
145146
const echart = useRef<echarts.ECharts>();
@@ -207,7 +208,11 @@ export const Sankey: React.FunctionComponent<SankeyProps> = ({
207208
const isSkeleton = themeColor === ThemeColor.skeleton;
208209
const getChartTheme = () => (isComputedTheme ? getComputedTheme(themeColor) : getTheme(themeColor));
209210
const chartTheme = theme ? theme : getChartTheme();
210-
echart.current = echarts.init(containerRef.current, chartTheme, defaultsDeep(opts, { renderer: 'svg' }));
211+
echart.current = echarts.init(
212+
containerRef.current,
213+
chartTheme,
214+
defaultsDeep(opts, { height, renderer: 'svg', width })
215+
);
211216

212217
const getSeries = () =>
213218
series.map((serie: any) => {
@@ -259,6 +264,6 @@ export const Sankey: React.FunctionComponent<SankeyProps> = ({
259264
};
260265
}, [nodeSelector]);
261266

262-
return <div className={getClassName(className)} id={id} ref={containerRef} style={getSize()} />;
267+
return <div className={getClassName(className)} id={id} ref={containerRef} style={getSize()} {...rest} />;
263268
};
264269
Sankey.displayName = 'Sankey';

‎packages/react-charts/src/echarts/components/Sankey/__tests__/Sankey.test.tsx

Lines changed: 33 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,13 @@
11
import React from 'react';
2-
import * as echarts from 'echarts';
2+
import { setupJestCanvasMock } from 'jest-canvas-mock';
33
import { render, screen } from '@testing-library/react';
44
import { Sankey } from '../Sankey';
55

6-
jest.mock('echarts');
7-
8-
// See https://stackoverflow.com/questions/54921743/testing-echarts-react-component-with-jest-echartelement-is-null
9-
// let spy: any;
10-
11-
// beforeAll(() => {
12-
// console.log(`*** TEST 1`);
13-
// spy = jest.spyOn(echarts, 'getInstanceByDom').mockImplementation(
14-
// () =>
15-
// ({
16-
// hideLoading: jest.fn(),
17-
// setOption: jest.fn(),
18-
// showLoading: jest.fn()
19-
// }) as any
20-
// );
21-
// });
22-
//
23-
// afterAll(() => {
24-
// console.log(`*** TEST 2`);
25-
// spy.mockRestore();
26-
// });
6+
beforeEach(() => {
7+
jest.resetAllMocks();
8+
jest.mock('echarts');
9+
setupJestCanvasMock();
10+
});
2711

2812
const data = [
2913
{
@@ -80,26 +64,39 @@ const links = [
8064
];
8165

8266
const props: any = {
67+
height: 400,
68+
id: 'sankey-chart',
8369
option: {
8470
series: [{ data, links }],
85-
title: 'This is a Sankey chart'
86-
}
71+
title: {
72+
text: 'This is a Sankey chart'
73+
}
74+
},
75+
width: 800
8776
};
8877

89-
// Encountering an "Unexpected token" error
90-
// See https://github.com/hustcc/echarts-for-react/issues/495
78+
// Remove dynamic _echarts_instance_ ID
79+
const removeInstanceID = (fragment) => {
80+
fragment.getElementById('sankey-chart').removeAttribute('_echarts_instance_');
81+
return fragment;
82+
};
83+
84+
test('renders component', () => {
85+
const { asFragment } = render(<Sankey {...props} />);
86+
expect(removeInstanceID(asFragment())).toMatchSnapshot();
87+
});
9188

92-
test('should initialize ECharts', () => {
89+
test('renders title', async () => {
9390
render(<Sankey {...props} />);
94-
expect(echarts.init).toHaveBeenCalled();
91+
92+
const title = await screen.findByText(props.option.title.text);
93+
expect(title).toMatchSnapshot();
9594
});
9695

97-
// test('renders component', () => {
98-
// const { asFragment } = render(<Sankey {...props} />);
99-
// expect(asFragment()).toMatchSnapshot();
100-
// });
96+
test('renders height and width', async () => {
97+
const { asFragment } = render(<Sankey {...props} />);
10198

102-
// test('renders title', () => {
103-
// const { asFragment } = render(<Sankey {...props} />);
104-
// expect(screen.getByText(props.option.title)).toMatchSnapshot();
105-
// });
99+
const svg = asFragment().querySelector('svg');
100+
expect(svg).toHaveAttribute('height', `${props.height}`);
101+
expect(svg).toHaveAttribute('width', `${props.width}`);
102+
});

‎packages/react-charts/src/echarts/components/Sankey/__tests__/__snapshots__/Sankey.test.tsx.snap

Lines changed: 219 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,219 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
exports[`renders component 1`] = `
4+
<DocumentFragment>
5+
<div
6+
class="pf-v6-c-chart"
7+
id="sankey-chart"
8+
style="height: 400px; width: 800px; position: relative;"
9+
>
10+
<div
11+
style="position: relative; overflow: hidden; width: 800px; height: 400px;"
12+
>
13+
<svg
14+
baseProfile="full"
15+
height="400"
16+
style="position: absolute; left: 0px; top: 0px; user-select: none;"
17+
version="1.1"
18+
width="800"
19+
xmlns="http://www.w3.org/2000/svg"
20+
xmlns:xlink="http://www.w3.org/1999/xlink"
21+
>
22+
<rect
23+
fill="rgb(0,0,0)"
24+
fill-opacity="0"
25+
height="400"
26+
width="800"
27+
x="0"
28+
y="0"
29+
/>
30+
<g>
31+
<g
32+
clip-path="url(#zr0-c0)"
33+
>
34+
<path
35+
d="M20 0C300 0 300 68.0881 580 68.0881L580 160.7197C300 160.7197 300 92.6316 20 92.6316Z"
36+
fill="#0066cc"
37+
fill-opacity="0.6"
38+
transform="translate(40 20)"
39+
/>
40+
<path
41+
d="M20 148.2105C300 148.2105 300 187.246 580 187.246L580 242.8249C300 242.8249 300 203.7895 20 203.7895Z"
42+
fill="#0066cc"
43+
fill-opacity="0.6"
44+
transform="translate(40 20)"
45+
/>
46+
<path
47+
d="M20 211.7895C155 211.7895 155 186.1865 290 186.1865L290 334.397C155 334.397 155 360 20 360Z"
48+
fill="#92c5f9"
49+
fill-opacity="0.6"
50+
transform="translate(40 20)"
51+
/>
52+
<path
53+
d="M20 92.6316C155 92.6316 155 130.6075 290 130.6075L290 186.1865C155 186.1865 155 148.2105 20 148.2105Z"
54+
fill="#0066cc"
55+
fill-opacity="0.6"
56+
transform="translate(40 20)"
57+
/>
58+
<path
59+
d="M310 130.6075C445 130.6075 445 160.7197 580 160.7197L580 179.246C445 179.246 445 149.1338 310 149.1338Z"
60+
fill="#004d99"
61+
fill-opacity="0.6"
62+
transform="translate(40 20)"
63+
/>
64+
<path
65+
d="M310 149.1338C445 149.1338 445 250.8249 580 250.8249L580 287.8776C445 287.8776 445 186.1865 310 186.1865Z"
66+
fill="#004d99"
67+
fill-opacity="0.6"
68+
transform="translate(40 20)"
69+
/>
70+
<path
71+
d="M0 0l20 0l0 203.7895l-20 0Z"
72+
fill="#0066cc"
73+
stroke="#c7c7c7"
74+
stroke-width="0"
75+
transform="translate(40 20)"
76+
/>
77+
<path
78+
d="M0 211.7895l20 0l0 148.2105l-20 0Z"
79+
fill="#92c5f9"
80+
stroke="#c7c7c7"
81+
stroke-width="0"
82+
transform="translate(40 20)"
83+
/>
84+
<path
85+
d="M580 68.0881l20 0l0 111.1579l-20 0Z"
86+
fill="#003366"
87+
stroke="#c7c7c7"
88+
stroke-width="0"
89+
transform="translate(40 20)"
90+
/>
91+
<path
92+
d="M580 187.246l20 0l0 55.5789l-20 0Z"
93+
fill="#4394e5"
94+
stroke="#c7c7c7"
95+
stroke-width="0"
96+
transform="translate(40 20)"
97+
/>
98+
<path
99+
d="M290 130.6075l20 0l0 203.7895l-20 0Z"
100+
fill="#004d99"
101+
stroke="#c7c7c7"
102+
stroke-width="0"
103+
transform="translate(40 20)"
104+
/>
105+
<path
106+
d="M580 250.8249l20 0l0 37.0526l-20 0Z"
107+
fill="#0066cc"
108+
stroke="#c7c7c7"
109+
stroke-width="0"
110+
transform="translate(40 20)"
111+
/>
112+
<text
113+
dominant-baseline="central"
114+
fill="#1f1f1f"
115+
style="font-size: 12px; font-family: sans-serif;"
116+
text-anchor="start"
117+
transform="translate(65 121.8947)"
118+
>
119+
a
120+
</text>
121+
<text
122+
dominant-baseline="central"
123+
fill="#1f1f1f"
124+
style="font-size: 12px; font-family: sans-serif;"
125+
text-anchor="start"
126+
transform="translate(65 305.8947)"
127+
>
128+
b
129+
</text>
130+
<text
131+
dominant-baseline="central"
132+
fill="#1f1f1f"
133+
style="font-size: 12px; font-family: sans-serif;"
134+
text-anchor="start"
135+
transform="translate(645 143.667)"
136+
>
137+
a1
138+
</text>
139+
<text
140+
dominant-baseline="central"
141+
fill="#1f1f1f"
142+
style="font-size: 12px; font-family: sans-serif;"
143+
text-anchor="start"
144+
transform="translate(645 235.0355)"
145+
>
146+
a2
147+
</text>
148+
<text
149+
dominant-baseline="central"
150+
fill="#1f1f1f"
151+
style="font-size: 12px; font-family: sans-serif;"
152+
text-anchor="start"
153+
transform="translate(355 252.5022)"
154+
>
155+
b1
156+
</text>
157+
<text
158+
dominant-baseline="central"
159+
fill="#1f1f1f"
160+
style="font-size: 12px; font-family: sans-serif;"
161+
text-anchor="start"
162+
transform="translate(645 289.3513)"
163+
>
164+
c
165+
</text>
166+
</g>
167+
<path
168+
d="M-5 -5l32 0l0 11l-32 0Z"
169+
fill="rgb(0,0,0)"
170+
fill-opacity="0"
171+
stroke="#ccc"
172+
stroke-width="0"
173+
transform="translate(5 5)"
174+
/>
175+
<text
176+
dominant-baseline="central"
177+
fill="#1f1f1f"
178+
style="font-size: 18px; font-family: sans-serif; font-weight: bold;"
179+
text-anchor="start"
180+
transform="translate(5 5)"
181+
xml:space="preserve"
182+
y="0.5"
183+
>
184+
This is a Sankey chart
185+
</text>
186+
</g>
187+
<defs>
188+
<clippath
189+
id="zr0-c0"
190+
>
191+
<path
192+
d="M-10 -10l0 0l0 380l0 0Z"
193+
fill="#000"
194+
transform="translate(40 20)"
195+
/>
196+
</clippath>
197+
</defs>
198+
</svg>
199+
</div>
200+
<div
201+
class=""
202+
/>
203+
</div>
204+
</DocumentFragment>
205+
`;
206+
207+
exports[`renders title 1`] = `
208+
<text
209+
dominant-baseline="central"
210+
fill="#1f1f1f"
211+
style="font-size: 18px; font-family: sans-serif; font-weight: bold;"
212+
text-anchor="start"
213+
transform="translate(5 5)"
214+
xml:space="preserve"
215+
y="0.5"
216+
>
217+
This is a Sankey chart
218+
</text>
219+
`;

‎packages/react-charts/src/echarts/components/Sankey/examples/Basic.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,7 @@ export const Basic: React.FunctionComponent = () => {
6464
option={{
6565
series: [{ data, links }],
6666
title: {
67-
subtext: 'This is a Sankey chart',
67+
text: 'This is a Sankey chart',
6868
left: 'center'
6969
},
7070
tooltip: {

0 commit comments

Comments
 (0)