Skip to content

Commit fcd1473

Browse files
sidram05sidram05
authored
test(MicroBarChart): rewrite test using react-testing-library (#907)
1 parent ce9b2f5 commit fcd1473

2 files changed

Lines changed: 114 additions & 113 deletions

File tree

‎packages/charts/src/components/MicroBarChart/MicroBarChart.test.tsx‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import { mount } from 'enzyme';
21
import * as React from 'react';
32
import { render, screen, fireEvent } from '@shared/tests/index';
43
import { MicroBarChart } from '@ui5/webcomponents-react-charts/lib/MicroBarChart';
@@ -106,7 +105,7 @@ describe('Micro Bar Chart', () => {
106105
});
107106

108107
test('loading placeholder', () => {
109-
const wrapper = mount(<MicroBarChart style={{ width: '50%' }} dimension={null} measure={null} />);
110-
expect(wrapper.render()).toMatchSnapshot();
108+
const { asFragment } = render(<MicroBarChart style={{ width: '50%' }} dimension={null} measure={null} />);
109+
expect(asFragment()).toMatchSnapshot();
111110
});
112111
});

‎packages/charts/src/components/MicroBarChart/__snapshots__/MicroBarChart.test.tsx.snap‎

Lines changed: 112 additions & 110 deletions
Original file line numberDiff line numberDiff line change
@@ -219,124 +219,126 @@ exports[`Micro Bar Chart With custom colors 1`] = `
219219
`;
220220

221221
exports[`Micro Bar Chart loading placeholder 1`] = `
222-
<div
223-
style="font-family: var(--sapFontFamily); width: 50%; height: 400px; position: relative;"
224-
>
225-
<svg
226-
aria-labelledby="TITLE_ARIA_ID"
227-
height="100%"
228-
preserveAspectRatio="xMidYMid meet"
229-
role="img"
230-
viewBox="0 0 165 145"
231-
width="100%"
222+
<DocumentFragment>
223+
<div
224+
style="font-family: var(--sapFontFamily); width: 50%; height: 400px; position: relative;"
232225
>
233-
<title
234-
id="TITLE_ARIA_ID"
235-
>
236-
Loading...
237-
</title>
238-
<rect
239-
clip-path="STYLE-URL"
226+
<svg
227+
aria-labelledby="TITLE_ARIA_ID"
240228
height="100%"
241-
role="presentation"
242-
style="fill: STYLE-URL;"
229+
preserveAspectRatio="xMidYMid meet"
230+
role="img"
231+
viewBox="0 0 165 145"
243232
width="100%"
244-
x="0"
245-
y="0"
246-
/>
247-
<defs
248-
role="presentation"
249233
>
250-
<clipPath
251-
id="DIFF_ID"
234+
<title
235+
id="TITLE_ARIA_ID"
252236
>
253-
<rect
254-
height="135"
255-
width="1"
256-
x="20"
257-
y="10"
258-
/>
259-
<rect
260-
height="15"
261-
width="85"
262-
x="20"
263-
y="20"
264-
/>
265-
<rect
266-
height="15"
267-
width="117"
268-
x="20"
269-
y="40"
270-
/>
271-
<rect
272-
height="15"
273-
width="67"
274-
x="20"
275-
y="60"
276-
/>
277-
<rect
278-
height="15"
279-
width="75"
280-
x="20"
281-
y="80"
282-
/>
283-
<rect
284-
height="15"
285-
width="125"
286-
x="20"
287-
y="100"
288-
/>
289-
<rect
290-
height="15"
291-
width="60"
292-
x="20"
293-
y="120"
294-
/>
295-
</clipPath>
296-
<linearGradient
297-
id="DIFF_ID"
237+
Loading...
238+
</title>
239+
<rect
240+
clip-path="STYLE-URL"
241+
height="100%"
242+
role="presentation"
243+
style="fill: STYLE-URL;"
244+
width="100%"
245+
x="0"
246+
y="0"
247+
/>
248+
<defs
249+
role="presentation"
298250
>
299-
<stop
300-
offset="0%"
301-
stop-color="var(--sapContent_ImagePlaceholderBackground)"
302-
stop-opacity="var(--sapContent_DisabledOpacity)"
251+
<clippath
252+
id="DIFF_ID"
303253
>
304-
<animate
305-
attributeName="offset"
306-
dur="2s"
307-
keyTimes="0; 0.25; 1"
308-
repeatCount="indefinite"
309-
values="-2; -2; 1"
254+
<rect
255+
height="135"
256+
width="1"
257+
x="20"
258+
y="10"
310259
/>
311-
</stop>
312-
<stop
313-
offset="50%"
314-
stop-color="var(--sapContent_ImagePlaceholderForegroundColor)"
315-
stop-opacity="1"
316-
>
317-
<animate
318-
attributeName="offset"
319-
dur="2s"
320-
keyTimes="0; 0.25; 1"
321-
repeatCount="indefinite"
322-
values="-1; -1; 2"
260+
<rect
261+
height="15"
262+
width="85"
263+
x="20"
264+
y="20"
323265
/>
324-
</stop>
325-
<stop
326-
offset="100%"
327-
stop-color="var(--sapContent_ImagePlaceholderBackground)"
328-
stop-opacity="var(--sapContent_DisabledOpacity)"
329-
>
330-
<animate
331-
attributeName="offset"
332-
dur="2s"
333-
keyTimes="0; 0.25; 1"
334-
repeatCount="indefinite"
335-
values="0; 0; 3"
266+
<rect
267+
height="15"
268+
width="117"
269+
x="20"
270+
y="40"
271+
/>
272+
<rect
273+
height="15"
274+
width="67"
275+
x="20"
276+
y="60"
277+
/>
278+
<rect
279+
height="15"
280+
width="75"
281+
x="20"
282+
y="80"
283+
/>
284+
<rect
285+
height="15"
286+
width="125"
287+
x="20"
288+
y="100"
289+
/>
290+
<rect
291+
height="15"
292+
width="60"
293+
x="20"
294+
y="120"
336295
/>
337-
</stop>
338-
</linearGradient>
339-
</defs>
340-
</svg>
341-
</div>
296+
</clippath>
297+
<lineargradient
298+
id="DIFF_ID"
299+
>
300+
<stop
301+
offset="0%"
302+
stop-color="var(--sapContent_ImagePlaceholderBackground)"
303+
stop-opacity="var(--sapContent_DisabledOpacity)"
304+
>
305+
<animate
306+
attributeName="offset"
307+
dur="2s"
308+
keyTimes="0; 0.25; 1"
309+
repeatCount="indefinite"
310+
values="-2; -2; 1"
311+
/>
312+
</stop>
313+
<stop
314+
offset="50%"
315+
stop-color="var(--sapContent_ImagePlaceholderForegroundColor)"
316+
stop-opacity="1"
317+
>
318+
<animate
319+
attributeName="offset"
320+
dur="2s"
321+
keyTimes="0; 0.25; 1"
322+
repeatCount="indefinite"
323+
values="-1; -1; 2"
324+
/>
325+
</stop>
326+
<stop
327+
offset="100%"
328+
stop-color="var(--sapContent_ImagePlaceholderBackground)"
329+
stop-opacity="var(--sapContent_DisabledOpacity)"
330+
>
331+
<animate
332+
attributeName="offset"
333+
dur="2s"
334+
keyTimes="0; 0.25; 1"
335+
repeatCount="indefinite"
336+
values="0; 0; 3"
337+
/>
338+
</stop>
339+
</lineargradient>
340+
</defs>
341+
</svg>
342+
</div>
343+
</DocumentFragment>
342344
`;

0 commit comments

Comments
 (0)