Axe-core integration into react-charting #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);
+});