diff --git a/packages/react-charting/src/components/GaugeChart/GaugeChart.test.tsx b/packages/react-charting/src/components/GaugeChart/GaugeChart.test.tsx index 3170b57a0f262c..f8aa3312a98e4c 100644 --- a/packages/react-charting/src/components/GaugeChart/GaugeChart.test.tsx +++ b/packages/react-charting/src/components/GaugeChart/GaugeChart.test.tsx @@ -8,6 +8,9 @@ import toJson from 'enzyme-to-json'; import { render, screen, fireEvent } from '@testing-library/react'; import { ThemeProvider } from '@fluentui/react'; import { DarkTheme } from '@fluentui/theme-samples'; +import { axe, toHaveNoViolations } from 'jest-axe'; + +expect.extend(toHaveNoViolations); // Wrapper of the GaugeChart to be tested. let wrapper: ReactWrapper | undefined; @@ -308,3 +311,25 @@ describe('GaugeChart - event listeners testing', () => { expect(container.querySelector('.ms-Callout')).toBeNull(); }); }); + +describe('Gauge Chart - axe-core', () => { + beforeEach(() => { + sharedBeforeEach(); + + originalGetComputedTextLength = SVGElement.prototype.getComputedTextLength; + SVGElement.prototype.getComputedTextLength = () => { + return 0; + }; + }); + + afterEach(() => { + sharedAfterEach(); + + SVGElement.prototype.getComputedTextLength = originalGetComputedTextLength; + }); + it('Should pass accessibility tests', async () => { + const { container } = render(); + const axeResults = await axe(container); + expect(axeResults).toHaveNoViolations(); + }, 10000); +}); diff --git a/packages/react-charting/src/components/HeatMapChart/HeatMapChartRTL.test.tsx b/packages/react-charting/src/components/HeatMapChart/HeatMapChartRTL.test.tsx index 484a8a314dbd99..92786c5e64647a 100644 --- a/packages/react-charting/src/components/HeatMapChart/HeatMapChartRTL.test.tsx +++ b/packages/react-charting/src/components/HeatMapChart/HeatMapChartRTL.test.tsx @@ -1,6 +1,9 @@ import * as React from 'react'; import { queryAllByAttribute, render, waitFor } from '@testing-library/react'; import { HeatMapChart, IHeatMapChartProps } from './index'; +import { axe, toHaveNoViolations } from 'jest-axe'; + +expect.extend(toHaveNoViolations); const yPoint: string[] = ['p1', 'p2']; @@ -60,3 +63,17 @@ describe('HeatMap chart rendering', () => { }); }); }); + +describe('Heat Map Chart - axe-core', () => { + test('Should pass accessibility tests', async () => { + const { container } = render( + , + ); + const axeResults = await axe(container); + expect(axeResults).toHaveNoViolations(); + }, 10000); +}); diff --git a/packages/react-charting/src/components/PieChart/PieChartRTL.test.tsx b/packages/react-charting/src/components/PieChart/PieChartRTL.test.tsx index 368b785f66405e..633e0f753c4a25 100644 --- a/packages/react-charting/src/components/PieChart/PieChartRTL.test.tsx +++ b/packages/react-charting/src/components/PieChart/PieChartRTL.test.tsx @@ -3,6 +3,9 @@ import { queryAllByAttribute, render, waitFor } from '@testing-library/react'; import { PieChart } from './index'; import { chartPoints, colors } from './PieChart.test'; import * as utils from '../../utilities/utilities'; +import { axe, toHaveNoViolations } from 'jest-axe'; + +expect.extend(toHaveNoViolations); describe('Pie chart rendering', () => { test('Should re-render the Pie chart with data', async () => { @@ -26,3 +29,14 @@ describe('Pie chart rendering', () => { }); }); }); + +describe('Pie Chart - axe-core', () => { + test('Should pass accessibility tests', async () => { + // Mock the implementation of wrapContent as it internally calls a Browser Function like + // getComputedTextLength() which will otherwise lead to a crash if mounted + jest.spyOn(utils, 'wrapContent').mockImplementation(() => false); + const { container } = render(); + const axeResults = await axe(container); + expect(axeResults).toHaveNoViolations(); + }, 10000); +}); diff --git a/packages/react-charting/src/components/SankeyChart/SankeyChartRTL.test.tsx b/packages/react-charting/src/components/SankeyChart/SankeyChartRTL.test.tsx index b90727b090ebc1..c11db30b0c4217 100644 --- a/packages/react-charting/src/components/SankeyChart/SankeyChartRTL.test.tsx +++ b/packages/react-charting/src/components/SankeyChart/SankeyChartRTL.test.tsx @@ -6,6 +6,9 @@ import { resetIds } from '../../Utilities'; import { getByClass, testWithWait, testWithoutWait } from '../../utilities/TestUtility.test'; import { DarkTheme } from '@fluentui/theme-samples'; import { ThemeProvider } from '@fluentui/react'; +import { axe, toHaveNoViolations } from 'jest-axe'; + +expect.extend(toHaveNoViolations); const chartPointsWithStringNodeId: IChartProps = { chartTitle: 'Sankey Chart', @@ -142,3 +145,13 @@ describe('Sankey chart rendering', () => { }); }); }); + +describe('Sankey Chart - axe-core', () => { + beforeEach(sharedBeforeEach); + + test('Should pass accessibility tests', async () => { + const { container } = render(); + const axeResults = await axe(container); + expect(axeResults).toHaveNoViolations(); + }, 10000); +}); diff --git a/packages/react-charting/src/components/Sparkline/SparklineRTL.test.tsx b/packages/react-charting/src/components/Sparkline/SparklineRTL.test.tsx index 264467b29faaea..5bf59c84e10c69 100644 --- a/packages/react-charting/src/components/Sparkline/SparklineRTL.test.tsx +++ b/packages/react-charting/src/components/Sparkline/SparklineRTL.test.tsx @@ -2,6 +2,9 @@ import * as React from 'react'; import { queryAllByAttribute, render, waitFor } from '@testing-library/react'; import { emptySparklinePoints, sparkline1Points } from './Sparkline.test'; import { Sparkline } from './index'; +import { axe, toHaveNoViolations } from 'jest-axe'; + +expect.extend(toHaveNoViolations); describe('Sparkline chart rendering', () => { test('Should re-render the Sparkline chart with data', async () => { @@ -20,3 +23,11 @@ describe('Sparkline chart rendering', () => { }); }); }); + +describe('Sparkline Chart - axe-core', () => { + test('Should pass accessibility tests', async () => { + const { container } = render(); + const axeResults = await axe(container); + expect(axeResults).toHaveNoViolations(); + }, 10000); +}); diff --git a/packages/react-charting/src/components/TreeChart/TreeChart.test.tsx b/packages/react-charting/src/components/TreeChart/TreeChart.test.tsx index 7e929e17234130..f0b9b1f44c9c8e 100644 --- a/packages/react-charting/src/components/TreeChart/TreeChart.test.tsx +++ b/packages/react-charting/src/components/TreeChart/TreeChart.test.tsx @@ -5,6 +5,10 @@ import { mount, ReactWrapper } from 'enzyme'; import { ITreeChartDataPoint, ITreeProps, TreeChart } from './index'; import { TreeChartBase } from './TreeChart.base'; import { resetIds } from '@fluentui/react/lib/Utilities'; +import { render } from '@testing-library/react'; +import { axe, toHaveNoViolations } from 'jest-axe'; + +expect.extend(toHaveNoViolations); const twoLayerChart: ITreeChartDataPoint = { name: 'Root Node', @@ -194,3 +198,11 @@ describe('Render calling with respective to props', () => { renderMock.mockRestore(); }); }); + +describe('Tree Chart - axe-core', () => { + test('Should pass accessibility tests', async () => { + const { container } = render(); + const axeResults = await axe(container); + expect(axeResults).toHaveNoViolations(); + }, 10000); +});