From b1467fe4ee2e60f5761543978be7d50e2cc6c8fc Mon Sep 17 00:00:00 2001 From: Shubhabrata Ghosh Date: Thu, 21 Dec 2023 01:09:53 +0530 Subject: [PATCH 1/3] Tests added --- .../src/components/DonutChart/DonutChartRTL.test.tsx | 11 +++++++++++ .../HorizontalBarChart/HorizontalBarChartRTL.test.tsx | 11 +++++++++++ .../VerticalStackedBarChartRTL.test.tsx | 11 +++++++++++ 3 files changed, 33 insertions(+) diff --git a/packages/react-charting/src/components/DonutChart/DonutChartRTL.test.tsx b/packages/react-charting/src/components/DonutChart/DonutChartRTL.test.tsx index 78c00c84b2c38..52df940fd15d0 100644 --- a/packages/react-charting/src/components/DonutChart/DonutChartRTL.test.tsx +++ b/packages/react-charting/src/components/DonutChart/DonutChartRTL.test.tsx @@ -6,6 +6,9 @@ import { DarkTheme } from '@fluentui/theme-samples'; import { ThemeProvider } from '@fluentui/react'; import * as utils from '../../utilities/utilities'; import { resetIds } from '../../Utilities'; +import { axe, toHaveNoViolations } from 'jest-axe'; + +expect.extend(toHaveNoViolations); describe('Donut chart interactions', () => { beforeEach(() => { @@ -178,3 +181,11 @@ describe('Donut chart interactions', () => { expect(container).toMatchSnapshot(); }); }); + +describe('Donut 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/HorizontalBarChart/HorizontalBarChartRTL.test.tsx b/packages/react-charting/src/components/HorizontalBarChart/HorizontalBarChartRTL.test.tsx index 6b6a22257af2f..ae9ca7464db4d 100644 --- a/packages/react-charting/src/components/HorizontalBarChart/HorizontalBarChartRTL.test.tsx +++ b/packages/react-charting/src/components/HorizontalBarChart/HorizontalBarChartRTL.test.tsx @@ -7,6 +7,9 @@ import { HorizontalBarChart } from './HorizontalBarChart'; import { getByClass, getById, testWithWait, testWithoutWait } from '../../utilities/TestUtility.test'; import { HorizontalBarChartBase } from './HorizontalBarChart.base'; import { HorizontalBarChartVariant, IChartProps } from './index'; +import { axe, toHaveNoViolations } from 'jest-axe'; + +expect.extend(toHaveNoViolations); const chartPoints: IChartProps[] = [ { @@ -348,3 +351,11 @@ describe('Horizontal bar chart re-rendering', () => { }); }); }); + +describe('Vertical Stacked Bar 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/VerticalStackedBarChart/VerticalStackedBarChartRTL.test.tsx b/packages/react-charting/src/components/VerticalStackedBarChart/VerticalStackedBarChartRTL.test.tsx index fd6b98cd2dc4e..0fa639c1c0e01 100644 --- a/packages/react-charting/src/components/VerticalStackedBarChart/VerticalStackedBarChartRTL.test.tsx +++ b/packages/react-charting/src/components/VerticalStackedBarChart/VerticalStackedBarChartRTL.test.tsx @@ -8,6 +8,9 @@ import { IVSChartDataPoint } from '../../index'; import { VerticalStackedBarChart } from './VerticalStackedBarChart'; import { getByClass, getById, testWithWait, testWithoutWait } from '../../utilities/TestUtility.test'; import { VerticalStackedBarChartBase } from './VerticalStackedBarChart.base'; +import { axe, toHaveNoViolations } from 'jest-axe'; + +expect.extend(toHaveNoViolations); const firstChartPoints: IVSChartDataPoint[] = [ { legend: 'Metadata1', data: 2, color: DefaultPalette.blue }, @@ -491,3 +494,11 @@ describe('Vertical stacked bar chart - Theme', () => { expect(container).toMatchSnapshot(); }); }); + +describe('Vertical Stacked Bar Chart - axe-core', () => { + test('Should pass accessibility tests', async () => { + const { container } = render(); + const axeResults = await axe(container); + expect(axeResults).toHaveNoViolations(); + }, 10000); +}); From d25e2cd819d0d5bddcfa5b7e12303377ba8b4872 Mon Sep 17 00:00:00 2001 From: Shubhabrata Ghosh Date: Thu, 21 Dec 2023 02:19:12 +0530 Subject: [PATCH 2/3] Tests added --- .../GroupedVerticalBarChartRTL.test.tsx | 11 +++++++++++ .../HorizontalBarChartRTL.test.tsx | 2 +- .../HorizontalBarChartWithAxis.test.tsx | 12 ++++++++++++ 3 files changed, 24 insertions(+), 1 deletion(-) diff --git a/packages/react-charting/src/components/GroupedVerticalBarChart/GroupedVerticalBarChartRTL.test.tsx b/packages/react-charting/src/components/GroupedVerticalBarChart/GroupedVerticalBarChartRTL.test.tsx index 4a10f9807d9d0..c0542ca1acf0b 100644 --- a/packages/react-charting/src/components/GroupedVerticalBarChart/GroupedVerticalBarChartRTL.test.tsx +++ b/packages/react-charting/src/components/GroupedVerticalBarChart/GroupedVerticalBarChartRTL.test.tsx @@ -8,6 +8,9 @@ import { getByClass, getById, testWithWait, testWithoutWait } from '../../utilit import { IGroupedVerticalBarChartData, IVSChartDataPoint } from '../../index'; import { DarkTheme } from '@fluentui/theme-samples'; import { ThemeProvider } from '@fluentui/react'; +import { axe, toHaveNoViolations } from 'jest-axe'; + +expect.extend(toHaveNoViolations); const accessibilityDataPoints: IGroupedVerticalBarChartData[] = [ { @@ -481,3 +484,11 @@ testWithWait( expect(bars[1].getAttribute('width')).toEqual('16'); }, ); + +describe('Grouped Vertical Bar 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/HorizontalBarChart/HorizontalBarChartRTL.test.tsx b/packages/react-charting/src/components/HorizontalBarChart/HorizontalBarChartRTL.test.tsx index ae9ca7464db4d..fdea2dc10da9d 100644 --- a/packages/react-charting/src/components/HorizontalBarChart/HorizontalBarChartRTL.test.tsx +++ b/packages/react-charting/src/components/HorizontalBarChart/HorizontalBarChartRTL.test.tsx @@ -352,7 +352,7 @@ describe('Horizontal bar chart re-rendering', () => { }); }); -describe('Vertical Stacked Bar Chart - axe-core', () => { +describe('Horizontal Bar Chart - axe-core', () => { test('Should pass accessibility tests', async () => { const { container } = render(); const axeResults = await axe(container); diff --git a/packages/react-charting/src/components/HorizontalBarChartWithAxis/HorizontalBarChartWithAxis.test.tsx b/packages/react-charting/src/components/HorizontalBarChartWithAxis/HorizontalBarChartWithAxis.test.tsx index 0a327a9a8b052..218022f8983fb 100644 --- a/packages/react-charting/src/components/HorizontalBarChartWithAxis/HorizontalBarChartWithAxis.test.tsx +++ b/packages/react-charting/src/components/HorizontalBarChartWithAxis/HorizontalBarChartWithAxis.test.tsx @@ -7,6 +7,10 @@ import { HorizontalBarChartWithAxis, IHorizontalBarChartWithAxisProps } from '.. import { IHorizontalBarChartWithAxisState, HorizontalBarChartWithAxisBase } from './HorizontalBarChartWithAxis.base'; import { resetIds } from '@fluentui/react'; import toJson from 'enzyme-to-json'; +import { axe, toHaveNoViolations } from 'jest-axe'; +import { render } from '@testing-library/react'; + +expect.extend(toHaveNoViolations); let wrapper: | ReactWrapper @@ -192,3 +196,11 @@ describe('HorizontalBarChartWithAxis - mouse events', () => { expect(tree).toMatchSnapshot(); }); }); + +describe('Horizontal Bar Chart With Axis - axe-core', () => { + test('Should pass accessibility tests', async () => { + const { container } = render(); + const axeResults = await axe(container); + expect(axeResults).toHaveNoViolations(); + }, 10000); +}); From 1c747915dca1c162c9346678a6f712077ba8f024 Mon Sep 17 00:00:00 2001 From: Shubhabrata Ghosh Date: Thu, 21 Dec 2023 03:08:49 +0530 Subject: [PATCH 3/3] Tests added --- .../StackedBarChart/MultiStackedBarChartRTL.test.tsx | 11 +++++++++++ .../StackedBarChart/StackedBarChartRTL.test.tsx | 11 +++++++++++ 2 files changed, 22 insertions(+) diff --git a/packages/react-charting/src/components/StackedBarChart/MultiStackedBarChartRTL.test.tsx b/packages/react-charting/src/components/StackedBarChart/MultiStackedBarChartRTL.test.tsx index 28de7dad47c19..053d5f8dfbda3 100644 --- a/packages/react-charting/src/components/StackedBarChart/MultiStackedBarChartRTL.test.tsx +++ b/packages/react-charting/src/components/StackedBarChart/MultiStackedBarChartRTL.test.tsx @@ -13,6 +13,9 @@ import { DefaultPalette, ThemeProvider } from '@fluentui/react'; import { fireEvent, render, screen, waitFor } from '@testing-library/react'; import { DarkTheme } from '@fluentui/theme-samples'; import { MultiStackedBarChartBase } from './MultiStackedBarChart.base'; +import { axe, toHaveNoViolations } from 'jest-axe'; + +expect.extend(toHaveNoViolations); const firstChartPoints: IChartDataPoint[] = [ { @@ -375,3 +378,11 @@ test('Should reflect theme change', () => { // Assert expect(container).toMatchSnapshot(); }); + +describe('Multi Stacked Bar 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/StackedBarChart/StackedBarChartRTL.test.tsx b/packages/react-charting/src/components/StackedBarChart/StackedBarChartRTL.test.tsx index 89ade9272c3b0..f305dabc432c4 100644 --- a/packages/react-charting/src/components/StackedBarChart/StackedBarChartRTL.test.tsx +++ b/packages/react-charting/src/components/StackedBarChart/StackedBarChartRTL.test.tsx @@ -13,6 +13,9 @@ import { DefaultPalette, ThemeProvider } from '@fluentui/react'; import { fireEvent, render, screen, waitFor } from '@testing-library/react'; import { StackedBarChartBase } from './StackedBarChart.base'; import { DarkTheme } from '@fluentui/theme-samples'; +import { axe, toHaveNoViolations } from 'jest-axe'; + +expect.extend(toHaveNoViolations); const points: IChartDataPoint[] = [ { @@ -383,3 +386,11 @@ test('Should reflect theme change', () => { // Assert expect(container).toMatchSnapshot(); }); + +describe('Stacked Bar Chart - axe-core', () => { + test('Should pass accessibility tests', async () => { + const { container } = render(); + const axeResults = await axe(container); + expect(axeResults).toHaveNoViolations(); + }, 10000); +});