Skip to content

Commit 4f2a71e

Browse files
annacmcjboland88
authored andcommitted
Chart library: Improve overall test coverage (#41449)
* add tooltip tests * add legend testing * changelog * add additional legend tests
1 parent 7e5f030 commit 4f2a71e

File tree

4 files changed

+140
-2
lines changed

4 files changed

+140
-2
lines changed
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
Significance: minor
2+
Type: added
3+
4+
Charts: add additional testing for library

projects/js-packages/charts/src/components/legend/base-legend.tsx

+10-2
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@ export const BaseLegend: FC< LegendProps > = ( {
3232
<div
3333
className={ clsx( styles.legend, styles[ `legend--${ orientation }` ], className ) }
3434
role="list"
35+
data-testid={ `legend-${ orientation }` }
3536
>
3637
<LegendOrdinal
3738
scale={ legendScale }
@@ -44,13 +45,20 @@ export const BaseLegend: FC< LegendProps > = ( {
4445
{ labels => (
4546
<div className={ styles[ `legend--${ orientation }` ] }>
4647
{ labels.map( label => (
47-
<div key={ label.text } className={ styles[ 'legend-item' ] }>
48-
<svg width={ 16 } height={ 16 }>
48+
<div
49+
key={ label.text }
50+
className={ styles[ 'legend-item' ] }
51+
role="listitem"
52+
data-testid="legend-item"
53+
>
54+
<svg width={ 16 } height={ 16 } role="img">
4955
<rect
5056
width={ 16 }
5157
height={ 16 }
5258
fill={ label.value }
5359
className={ styles[ 'legend-item-swatch' ] }
60+
data-testid="legend-marker"
61+
role="presentation"
5462
/>
5563
</svg>
5664
<span className={ styles[ 'legend-item-label' ] }>
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
import { render, screen } from '@testing-library/react';
2+
import { BaseLegend } from './base-legend';
3+
4+
describe( 'BaseLegend', () => {
5+
const defaultItems = [
6+
{ label: 'Item 1', value: '50%', color: '#ff0000' },
7+
{ label: 'Item 2', value: '30%', color: '#00ff00' },
8+
];
9+
10+
test( 'renders horizontal legend items', () => {
11+
render( <BaseLegend items={ defaultItems } orientation="horizontal" /> );
12+
expect( screen.getByText( 'Item 1' ) ).toBeInTheDocument();
13+
expect( screen.getByText( 'Item 2' ) ).toBeInTheDocument();
14+
expect( screen.getByText( '50%' ) ).toBeInTheDocument();
15+
expect( screen.getByText( '30%' ) ).toBeInTheDocument();
16+
} );
17+
18+
test( 'renders vertical legend items', () => {
19+
render( <BaseLegend items={ defaultItems } orientation="vertical" /> );
20+
const items = screen.getAllByText( /Item \d/ );
21+
expect( items ).toHaveLength( 2 );
22+
} );
23+
24+
test( 'applies color styles to legend markers', () => {
25+
render( <BaseLegend items={ defaultItems } orientation="horizontal" /> );
26+
const markers = screen.getAllByTestId( 'legend-marker' );
27+
expect( markers[ 0 ] ).toHaveAttribute( 'fill', '#ff0000' );
28+
expect( markers[ 1 ] ).toHaveAttribute( 'fill', '#00ff00' );
29+
} );
30+
31+
test( 'handles empty items array', () => {
32+
render( <BaseLegend items={ [] } orientation="horizontal" /> );
33+
const legendItems = screen.queryAllByRole( 'listitem' );
34+
expect( legendItems ).toHaveLength( 0 );
35+
} );
36+
37+
test( 'handles missing values', () => {
38+
const itemsWithoutValues = [
39+
{ label: 'Item 1', color: '#ff0000', value: undefined },
40+
{ label: 'Item 2', color: '#00ff00', value: undefined },
41+
];
42+
render( <BaseLegend items={ itemsWithoutValues } orientation="horizontal" /> );
43+
expect( screen.getByText( 'Item 1' ) ).toBeInTheDocument();
44+
expect( screen.getByText( 'Item 2' ) ).toBeInTheDocument();
45+
} );
46+
47+
test( 'applies custom className', () => {
48+
render(
49+
<BaseLegend items={ defaultItems } className="custom-legend" orientation="horizontal" />
50+
);
51+
expect( screen.getByRole( 'list' ) ).toHaveClass( 'custom-legend' );
52+
} );
53+
54+
test( 'renders with correct orientation styles', () => {
55+
const { rerender } = render( <BaseLegend items={ defaultItems } orientation="horizontal" /> );
56+
expect( screen.getByTestId( 'legend-horizontal' ) ).toBeInTheDocument();
57+
58+
rerender( <BaseLegend items={ defaultItems } orientation="vertical" /> );
59+
expect( screen.getByTestId( 'legend-vertical' ) ).toBeInTheDocument();
60+
} );
61+
62+
test( 'renders legend items with correct spacing', () => {
63+
render( <BaseLegend items={ defaultItems } orientation="horizontal" /> );
64+
const items = screen.getAllByTestId( 'legend-item' );
65+
expect( items ).toHaveLength( 2 );
66+
} );
67+
68+
test( 'handles items with long labels', () => {
69+
const itemsWithLongLabels = [
70+
{ label: 'Very Long Label That Should Still Display', value: '50%', color: '#ff0000' },
71+
{ label: 'Another Long Label for Testing', value: '30%', color: '#00ff00' },
72+
];
73+
render( <BaseLegend items={ itemsWithLongLabels } orientation="horizontal" /> );
74+
expect( screen.getByText( 'Very Long Label That Should Still Display' ) ).toBeInTheDocument();
75+
} );
76+
} );
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
import { render, screen } from '@testing-library/react';
2+
import { BaseTooltip } from '../base-tooltip';
3+
4+
describe( 'BaseTooltip', () => {
5+
const defaultProps = {
6+
data: {
7+
label: 'Test Label',
8+
value: 100,
9+
valueDisplay: '100%',
10+
},
11+
top: 100,
12+
left: 200,
13+
};
14+
15+
test( 'renders default tooltip content', () => {
16+
render( <BaseTooltip { ...defaultProps } /> );
17+
expect( screen.getByText( 'Test Label: 100%' ) ).toBeInTheDocument();
18+
expect( screen.getByRole( 'tooltip' ) ).toBeInTheDocument();
19+
} );
20+
21+
test( 'renders children instead of data when provided', () => {
22+
render(
23+
<BaseTooltip top={ 100 } left={ 200 }>
24+
<div>Custom Child Content</div>
25+
</BaseTooltip>
26+
);
27+
expect( screen.getByText( 'Custom Child Content' ) ).toBeInTheDocument();
28+
} );
29+
30+
test( 'applies correct positioning styles', () => {
31+
render( <BaseTooltip { ...defaultProps } /> );
32+
const tooltip = screen.getByRole( 'tooltip' );
33+
expect( tooltip ).toHaveStyle( {
34+
top: '100px',
35+
left: '200px',
36+
} );
37+
} );
38+
39+
test( 'handles missing valueDisplay', () => {
40+
const propsWithoutDisplay = {
41+
...defaultProps,
42+
data: {
43+
label: 'Test',
44+
value: 50,
45+
},
46+
};
47+
render( <BaseTooltip { ...propsWithoutDisplay } /> );
48+
expect( screen.getByText( 'Test: 50' ) ).toBeInTheDocument();
49+
} );
50+
} );

0 commit comments

Comments
 (0)