Axe-core integration into react-charting microsoft#3 (microsoft#30157)

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<IGaugeChartProps, IGaugeChartState, GaugeChartBase> | 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(<GaugeChart segments={segments} chartValue={25} />);
+ const axeResults = await axe(container);
+ expect(axeResults).toHaveNoViolations();
+ }, 10000);
+});

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(
+ <HeatMapChart
+ data={HeatMapData}
+ domainValuesForColorScale={[0, 600]}
+ rangeValuesForColorScale={['lightblue', 'darkblue']}
+ />,
+ );
+ const axeResults = await axe(container);
+ expect(axeResults).toHaveNoViolations();
+ }, 10000);
+});

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(<PieChart data={chartPoints} colors={colors} />);
+ const axeResults = await axe(container);
+ expect(axeResults).toHaveNoViolations();
+ }, 10000);
+});

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(<SankeyChart data={chartPointsWithStringNodeId} />);
+ const axeResults = await axe(container);
+ expect(axeResults).toHaveNoViolations();
+ }, 10000);
+});

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(<Sparkline data={sparkline1Points} />);
+ const axeResults = await axe(container);
+ expect(axeResults).toHaveNoViolations();
+ }, 10000);
+});

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(<TreeChart treeData={threeLayerChart} />);
+ const axeResults = await axe(container);
+ expect(axeResults).toHaveNoViolations();
+ }, 10000);
+});