Skip to content

Commit

Permalink
Adding and updating tests
Browse files Browse the repository at this point in the history
  • Loading branch information
@srmukher
srmukher committed Dec 23, 2024
1 parent 36e6bdc commit a94e9f1
Show file tree
Hide file tree
Showing 4 changed files with 642 additions and 54 deletions.
28 changes: 14 additions & 14 deletions packages/charts/react-charting/src/components/DonutChart/DonutChart.base.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -270,7 +270,7 @@ export class DonutChartBase extends React.Component<IDonutChartProps, IDonutChar
event: React.MouseEvent<HTMLButtonElement>,
currentLegend?: ILegend,
): void {
if (this.props.legendProps?.canSelectMultipleLegends) {
if (this.props.legendProps && this.props.legendProps?.canSelectMultipleLegends) {
this.setState({ selectedLegends });
} else {
this.setState({ selectedLegends: selectedLegends.slice(-1) });
Expand All @@ -280,14 +280,6 @@ export class DonutChartBase extends React.Component<IDonutChartProps, IDonutChar
}
}

private _isLegendHighlighted = (legend: string | undefined): boolean => {
return this._getHighlightedLegend().includes(legend!);
};

private _noLegendsHighlighted = (): boolean => {
return this._getHighlightedLegend().length === 0;
};

private _focusCallback = (data: IChartDataPoint, id: string, element: SVGPathElement): void => {
this._currentHoverElement = element;
this.setState({
Expand Down Expand Up @@ -344,11 +336,11 @@ export class DonutChartBase extends React.Component<IDonutChartProps, IDonutChar
private _valueInsideDonut(valueInsideDonut: string | number | undefined, data: IChartDataPoint[]) {
const highlightedLegends = this._getHighlightedLegend();
if (valueInsideDonut !== undefined && (highlightedLegends.length !== 0 || this.state.showHover)) {
const legendValue = data.find(point => point.legend === this.state.legend);
return legendValue
? legendValue.yAxisCalloutData
? legendValue.yAxisCalloutData
: legendValue.data!
const pointValue = data.find(point => point.legend === this.state.legend);
return pointValue
? pointValue.yAxisCalloutData
? pointValue.yAxisCalloutData
: pointValue.data!
: valueInsideDonut;
} else if (highlightedLegends.length > 0) {
let totalValue = 0;
Expand Down Expand Up @@ -384,6 +376,14 @@ export class DonutChartBase extends React.Component<IDonutChartProps, IDonutChar
: [];
}

private _isLegendHighlighted = (legend: string | undefined): boolean => {
return this._getHighlightedLegend().includes(legend!);
};

private _noLegendsHighlighted = (): boolean => {
return this._getHighlightedLegend().length === 0;
};

private _isChartEmpty(): boolean {
return !(
this.props.data &&
Expand Down
42 changes: 37 additions & 5 deletions packages/charts/react-charting/src/components/DonutChart/DonutChartRTL.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,9 @@ describe('Donut chart interactions', () => {
beforeEach(() => {
sharedBeforeEach();
jest.spyOn(global.Math, 'random').mockReturnValue(0.1);
// Mock the implementation of wrapTextInsideDonut as it internally calls a Browser Function like
// getComputedTextLength() which will otherwise lead to a crash if mounted
jest.spyOn(utils, 'wrapTextInsideDonut').mockImplementation(() => '20000');
});
afterEach(() => {
jest.spyOn(global.Math, 'random').mockRestore();
Expand Down Expand Up @@ -70,7 +73,7 @@ describe('Donut chart interactions', () => {

test('Should highlight the corresponding Pie on mouse over on legends', () => {
// Arrange
const { container } = render(<DonutChart data={chartPointsDC} innerRadius={55} hideLegend={false} />);
const { container } = render(<DonutChart data={chartPointsDC} innerRadius={55} hideLabels={false} />);

// Act
const legend = screen.queryByText('first');
Expand Down Expand Up @@ -157,9 +160,6 @@ describe('Donut chart interactions', () => {
});

test('Should change value inside donut with the legend value on mouseOver legend ', () => {
// Mock the implementation of wrapTextInsideDonut as it internally calls a Browser Function like
// getComputedTextLength() which will otherwise lead to a crash if mounted
jest.spyOn(utils, 'wrapTextInsideDonut').mockImplementation(() => '1000');
// Arrange
const { container } = render(
<DonutChart data={chartPointsDC} innerRadius={55} hideLegend={false} valueInsideDonut={1000} />,
Expand All @@ -170,7 +170,7 @@ describe('Donut chart interactions', () => {
fireEvent.mouseOver(screen.getByText('first'));

// Assert
expect(getByClass(container, /insideDonutString.*?/)[0].textContent).toBe('20,000');
expect(getByClass(container, /insideDonutString.*?/)[0].textContent).toBe('1,000');
});

test('Should reflect theme change', () => {
Expand All @@ -184,6 +184,38 @@ describe('Donut chart interactions', () => {
// Assert
expect(container).toMatchSnapshot();
});

// add test for legend multi select
test('Should select multiple legends on click', () => {
// Arrange
const { container } = render(
<DonutChart
data={chartPointsDC}
innerRadius={55}
hideLegend={false}
legendProps={{
canSelectMultipleLegends: true,
}}
/>,
);

// Act
const firstLegend = screen.queryByText('first')?.closest('button');
const secondLegend = screen.queryByText('second')?.closest('button');
expect(firstLegend).toBeDefined();
expect(secondLegend).toBeDefined();
fireEvent.click(firstLegend!);
fireEvent.click(secondLegend!);

// Assert
expect(firstLegend).toHaveAttribute('aria-selected', 'true');
expect(secondLegend).toHaveAttribute('aria-selected', 'true');

const getById = queryAllByAttribute.bind(null, 'id');
expect(getById(container, /Pie.*?first/i)[0]).toHaveStyle('opacity: 1.0');
expect(getById(container, /Pie.*?second/i)[0]).toHaveStyle('opacity: 1.0');
expect(getById(container, /Pie.*?third/i)[0]).toHaveStyle('opacity: 0.1');
});
});

describe('Donut Chart - axe-core', () => {
Expand Down
130 changes: 96 additions & 34 deletions ...es/charts/react-charting/src/components/DonutChart/__snapshots__/DonutChart.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -125,23 +125,6 @@ exports[`DonutChart - mouse events Should render callout correctly on mouseover
role="img"
/>
</g>
<text
className=
{
fill: #323130;
font-size: 24px;
font-weight: 600;
}
@media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& {
fill: rgb(179, 179, 179);
}
dominantBaseline="middle"
textAnchor="middle"
y={5}
>
20,000
</text>
</g>
</svg>
</div>
Expand Down Expand Up @@ -831,23 +814,6 @@ exports[`DonutChart - mouse events Should render customized callout on mouseover
role="img"
/>
</g>
<text
className=
{
fill: #323130;
font-size: 24px;
font-weight: 600;
}
@media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& {
fill: rgb(179, 179, 179);
}
dominantBaseline="middle"
textAnchor="middle"
y={5}
>
20,000
</text>
</g>
</svg>
</div>
Expand Down Expand Up @@ -1911,6 +1877,22 @@ exports[`DonutChart snapShot testing Should render arc labels 1`] = `
onMouseOver={[Function]}
role="img"
/>
<text
aria-hidden={true}
className=
{
fill: #323130;
font-size: 12px;
font-weight: 600;
}
dominantBaseline="auto"
textAnchor="start"
x={35.43557344375781}
y={-50.87553571916512}
>
20.0k
</text>
</g>
<g>
<path
Expand All @@ -1937,6 +1919,22 @@ exports[`DonutChart snapShot testing Should render arc labels 1`] = `
onMouseOver={[Function]}
role="img"
/>
<text
aria-hidden={true}
className=
{
fill: #323130;
font-size: 12px;
font-weight: 600;
}
dominantBaseline="hanging"
textAnchor="start"
x={42.16983494620299}
y={45.45002772947447}
>
39.0k
</text>
</g>
<g>
<path
Expand All @@ -1963,6 +1961,22 @@ exports[`DonutChart snapShot testing Should render arc labels 1`] = `
onMouseOver={[Function]}
role="img"
/>
<text
aria-hidden={true}
className=
{
fill: #323130;
font-size: 12px;
font-weight: 600;
}
dominantBaseline="auto"
textAnchor="end"
x={-60.58001193073337}
y={-13.19326170710649}
>
45.0k
</text>
</g>
</g>
</svg>
Expand Down Expand Up @@ -2429,6 +2443,22 @@ exports[`DonutChart snapShot testing Should render arc labels in percentage form
onMouseOver={[Function]}
role="img"
/>
<text
aria-hidden={true}
className=
{
fill: #323130;
font-size: 12px;
font-weight: 600;
}
dominantBaseline="auto"
textAnchor="start"
x={35.43557344375781}
y={-50.87553571916512}
>
19%
</text>
</g>
<g>
<path
Expand All @@ -2455,6 +2485,22 @@ exports[`DonutChart snapShot testing Should render arc labels in percentage form
onMouseOver={[Function]}
role="img"
/>
<text
aria-hidden={true}
className=
{
fill: #323130;
font-size: 12px;
font-weight: 600;
}
dominantBaseline="hanging"
textAnchor="start"
x={42.16983494620299}
y={45.45002772947447}
>
38%
</text>
</g>
<g>
<path
Expand All @@ -2481,6 +2527,22 @@ exports[`DonutChart snapShot testing Should render arc labels in percentage form
onMouseOver={[Function]}
role="img"
/>
<text
aria-hidden={true}
className=
{
fill: #323130;
font-size: 12px;
font-weight: 600;
}
dominantBaseline="auto"
textAnchor="end"
x={-60.58001193073337}
y={-13.19326170710649}
>
43%
</text>
</g>
</g>
</svg>
Expand Down
Loading

0 comments on commit a94e9f1

Please sign in to comment.