From 8ed087da65d0e23769a4f9d5f71a53e684a918ef Mon Sep 17 00:00:00 2001 From: srmukher Date: Thu, 2 Mar 2023 15:41:16 +0530 Subject: [PATCH 1/6] Donut chart component testing --- ...-053d3178-4089-4eb8-af55-9706b4484337.json | 7 + .../docs/Component tests/BasicDonutChart.png | Bin 0 -> 12801 bytes .../Component tests/DonutChartTestPlan.md | 48 + packages/react-charting/jest.config.js | 2 +- .../components/DonutChart/DonutChart.test.tsx | 24 +- .../DonutChart/DonutChartRTL.test.tsx | 108 + .../__snapshots__/DonutChartRTL.test.tsx.snap | 2660 +++++++++++++++++ packages/react-charting/tsconfig.json | 2 +- 8 files changed, 2848 insertions(+), 3 deletions(-) create mode 100644 change/@fluentui-react-charting-053d3178-4089-4eb8-af55-9706b4484337.json create mode 100644 packages/react-charting/docs/Component tests/BasicDonutChart.png create mode 100644 packages/react-charting/docs/Component tests/DonutChartTestPlan.md create mode 100644 packages/react-charting/src/components/DonutChart/DonutChartRTL.test.tsx create mode 100644 packages/react-charting/src/components/DonutChart/__snapshots__/DonutChartRTL.test.tsx.snap diff --git a/change/@fluentui-react-charting-053d3178-4089-4eb8-af55-9706b4484337.json b/change/@fluentui-react-charting-053d3178-4089-4eb8-af55-9706b4484337.json new file mode 100644 index 0000000000000..a48947a68702c --- /dev/null +++ b/change/@fluentui-react-charting-053d3178-4089-4eb8-af55-9706b4484337.json @@ -0,0 +1,7 @@ +{ + "type": "none", + "comment": "Added component tests for donut chart", + "packageName": "@fluentui/react-charting", + "email": "srmukher@microsoft.com", + "dependentChangeType": "none" +} diff --git a/packages/react-charting/docs/Component tests/BasicDonutChart.png b/packages/react-charting/docs/Component tests/BasicDonutChart.png new file mode 100644 index 0000000000000000000000000000000000000000..847d9ffb767fd2aa4ac2ba98074384ee3d642d35 GIT binary patch literal 12801 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 literal 0 HcmV?d00001 diff --git a/packages/react-charting/docs/Component tests/DonutChartTestPlan.md b/packages/react-charting/docs/Component tests/DonutChartTestPlan.md new file mode 100644 index 0000000000000..e8371067bb6cd --- /dev/null +++ b/packages/react-charting/docs/Component tests/DonutChartTestPlan.md @@ -0,0 +1,48 @@ +
+ +# Component testing - Donut chart test plan + +![Alt text](BasicDonutChart.png) + +## Subcomponents: Pie and Legend + +## Library used: jest and (enzyme or react testing library) + +
+ +### Test case 1: [Snapshot testing] [Component] + +- Renders donut chart correctly with data. - [enzyme] + +### Test case 2: [Snapshot testing] [Individual Props] Renders donut chart with: + +- HideTooltip prop set to “true”. - [enzyme] +- HideLegend prop set to “true”. - [enzyme] +- EnabledLegendsWrapLines prop set to “true”. - [enzyme] +- ValueInsideDonut set to a string / number. - [enzyme] + +### Test case 3: [Specific DOM elements] Renders individual elements on a prop change: + +- Should mount legend when hideLegend prop is set to “false”. - [enzyme] +- Should mount callout when hideTootip prop is set to “false”. - [enzyme] +- Should not render onRenderCalloutPerStack with just data as a prop. - [enzyme] +- Should render onRenderCalloutPerDataPoint when the prop is given otherwise should not render onRenderCalloutPerDataPoint. - [enzyme] + +### Test case 4: [Mouse events – Donut chart] Renders individual elements on mouse events: + +- On mouseOver on the donut chart should render callout. - [enzyme] +- On mouseMove on Pie 1 (step 1) -> mouseLeave (step 2) -> mouseMove on Pie 2 (step 3), html in step 1 should not be the same as in step 3. - [enzyme] +- On mouseover with onRenderCalloutPerDataPoint prop provided, should render the custom callout. [enzyme] +- On mouseOver, callout should be defined, on mouseLeave, callout should disappear. - [enzyme] + +### Test case 5: [Mouse events – Legends] Renders individual elements on mouse events: + +- On mouseOver should highlight the corresponding pie. - [RTL] +- On mouseOver should change the value inside donut with the legend value. - [enzyme] +- On click should highlight the corresponding pie with aria-selected set to “true” and tabIndex set to 0. - [RTL] +- On mouseOut after mouseOver on first legend, should have opacity 0.1 for second Pie initially (during mouseOver on first legend) and opacity set to 1 for both the Pies on mouseOut. - [RTL] + +### Test case 6: [Keyboard events – Donut chart] Renders individual elements on keyboard events: + +- On focus should render the corresponding callout. - [RTL] +- On blur should remove focus from the corresponding Pie. - [RTL] diff --git a/packages/react-charting/jest.config.js b/packages/react-charting/jest.config.js index b70cd24668eeb..45c4007353a3c 100644 --- a/packages/react-charting/jest.config.js +++ b/packages/react-charting/jest.config.js @@ -19,7 +19,7 @@ function getEsmOnlyPackagesToCjsMapping() { const config = createConfig({ setupFiles: ['./config/tests.js'], snapshotSerializers: ['@fluentui/jest-serializer-merge-styles', 'enzyme-to-json/serializer'], - + setupFilesAfterEnv: ['@testing-library/jest-dom/extend-expect'], moduleNameMapper: { ...getEsmOnlyPackagesToCjsMapping(), }, diff --git a/packages/react-charting/src/components/DonutChart/DonutChart.test.tsx b/packages/react-charting/src/components/DonutChart/DonutChart.test.tsx index 1477ef848e737..c5434c24f05a3 100644 --- a/packages/react-charting/src/components/DonutChart/DonutChart.test.tsx +++ b/packages/react-charting/src/components/DonutChart/DonutChart.test.tsx @@ -36,7 +36,7 @@ const points: IChartDataPoint[] = [ const chartTitle = 'Stacked Bar chart example'; -const chartPoints: IChartProps = { +export const chartPoints: IChartProps = { chartTitle: chartTitle, chartData: points, }; @@ -159,4 +159,26 @@ describe('DonutChart - mouse events', () => { const tree = toJson(wrapper, { mode: 'deep' }); expect(tree).toMatchSnapshot(); }); + + it('Should change value inside donut with the legend value on mouseOver legend ', () => { + // Arrange + wrapper = mount(); + + // Act + wrapper.find('LegendsBase').find('button').at(0).simulate('mouseover'); + + // Assert + expect( + wrapper + .findWhere(node => node.hasClass(/insideDonutString.*?/)) + .at(0) + .text(), + ).toBe('20,000'); + expect( + wrapper + .findWhere(node => node.hasClass(/insideDonutString.*?/)) + .at(1) + .text(), + ).toBe('20,000'); + }); }); diff --git a/packages/react-charting/src/components/DonutChart/DonutChartRTL.test.tsx b/packages/react-charting/src/components/DonutChart/DonutChartRTL.test.tsx new file mode 100644 index 0000000000000..f1d2a11cc6d9d --- /dev/null +++ b/packages/react-charting/src/components/DonutChart/DonutChartRTL.test.tsx @@ -0,0 +1,108 @@ +import { render, screen, queryAllByAttribute, fireEvent } from '@testing-library/react'; +import { chartPoints } from './DonutChart.test'; +import { DonutChart } from './index'; +import * as React from 'react'; + +test('Should hide callout on mouse leave', () => { + // Arrange + const { container } = render(); + + // Act + const getById = queryAllByAttribute.bind(null, 'id'); + fireEvent.mouseOver(getById(container, /Pie/i)[0]); + expect(getById(container, /callout/i)[0]).toBeDefined(); + fireEvent.mouseLeave(getById(container, /Pie/i)[0]); + + // Assert + expect(getById(container, /callout/i)[0]).toHaveStyle('opacity: 0'); +}); + +test('Should show callout on focus', () => { + // Arrange + const { container } = render(); + + // Act + const getById = queryAllByAttribute.bind(null, 'id'); + fireEvent.focus(getById(container, /Pie/i)[0]); + + // Assert + expect(getById(container, /focusRing/i)).toBeDefined(); +}); + +test('Should remove focus on blur', () => { + // Arrange + const { container } = render(); + + // Act + const getById = queryAllByAttribute.bind(null, 'id'); + fireEvent.blur(getById(container, /Pie/i)[0]); + + // Assert + const value = getById(container, /Pie/i)[0].getAttribute('id'); + expect(value).not.toContain('focusRing'); +}); + +test('Should highlight the corresponding Pie on mouse over on legends', () => { + // Arrange + const { container } = render(); + + // Act + const legend = screen.queryByText('first'); + fireEvent.mouseOver(legend!); + + // Assert + const getById = queryAllByAttribute.bind(null, 'id'); + expect(getById(container, /Pie.*?second/i)[0]).toHaveAttribute('opacity', '0.1'); +}); + +test('Should select legend on single mouse click on legends', () => { + // Arrange + const { container } = render(); + + // Act + const legend = screen.queryByText('first'); + fireEvent.click(legend!); + + // Assert + const getById = queryAllByAttribute.bind(null, 'id'); + expect(getById(container, /Pie.*?second/i)[0]).toHaveAttribute('opacity', '0.1'); + const firstLegend = screen.queryByText('first')?.closest('button'); + expect(firstLegend).toHaveAttribute('aria-selected', 'true'); + expect(firstLegend).toHaveAttribute('tabIndex', '0'); +}); + +test('Should deselect legend on double mouse click on legends', () => { + // Arrange + const { container } = render(); + + // Act + const legend = screen.queryByText('first'); + //single click on first legend + fireEvent.click(legend!); + const getById = queryAllByAttribute.bind(null, 'id'); + expect(getById(container, /Pie.*?second/i)[0]).toHaveAttribute('opacity', '0.1'); + const firstLegend = screen.queryByText('first')?.closest('button'); + expect(firstLegend).toHaveAttribute('aria-selected', 'true'); + expect(firstLegend).toHaveAttribute('tabIndex', '0'); + // double click on same first legend + fireEvent.click(legend!); + + // Assert + expect(firstLegend).toHaveAttribute('aria-selected', 'false'); +}); + +test('Should show Pies with same opacity on mouse out of legends', () => { + // Arrange + const { container } = render(); + + // Act + const legend = screen.queryByText('first'); + fireEvent.mouseOver(legend!); + const getById = queryAllByAttribute.bind(null, 'id'); + expect(getById(container, /Pie.*?second/i)[0]).toHaveAttribute('opacity', '0.1'); + fireEvent.mouseOut(legend!); + + // Assert + expect(getById(container, /Pie.*?first/i)[0]).toHaveAttribute('opacity', '1'); + expect(getById(container, /Pie.*?second/i)[0]).toHaveAttribute('opacity', '1'); +}); diff --git a/packages/react-charting/src/components/DonutChart/__snapshots__/DonutChartRTL.test.tsx.snap b/packages/react-charting/src/components/DonutChart/__snapshots__/DonutChartRTL.test.tsx.snap new file mode 100644 index 0000000000000..2b9bd2d1f049c --- /dev/null +++ b/packages/react-charting/src/components/DonutChart/__snapshots__/DonutChartRTL.test.tsx.snap @@ -0,0 +1,2660 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`DonutChart - mouse events Should render callout correctly on mouseover 1`] = ` +
+
+
+ + + + + + + + + + + + +
+
+
+ +
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
+
+
+
+
+`; + +exports[`DonutChart - mouse events Should render customized callout on mouseover 1`] = ` +
+
+
+ + + + + + + + + + + + +
+
+
+ +
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
+
+
+
+
+`; + +exports[`DonutChart snapShot testing renders DonutChart correctly 1`] = ` +
+
+
+ + + + + + + + + + + + +
+
+ +
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
+
+
+
+
+`; + +exports[`DonutChart snapShot testing renders enabledLegendsWrapLines correctly 1`] = ` +
+
+
+ + + + + + + + + + + + +
+
+ +
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
+
+
+
+
+`; + +exports[`DonutChart snapShot testing renders hideLegend correctly 1`] = ` +
+
+
+ + + + + + + + + + + + +
+
+ +
+`; + +exports[`DonutChart snapShot testing renders hideTooltip correctly 1`] = ` +
+
+
+ + + + + + + + + + + + +
+
+ +
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
+
+
+
+
+`; + +exports[`DonutChart snapShot testing renders value inside onf the pie 1`] = ` +
+
+
+ + + + + + 1,000 + + + + + + 1,000 + + + + +
+
+ +
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
+
+
+
+
+`; diff --git a/packages/react-charting/tsconfig.json b/packages/react-charting/tsconfig.json index d9e220a59c215..0c2581357d8c0 100644 --- a/packages/react-charting/tsconfig.json +++ b/packages/react-charting/tsconfig.json @@ -19,7 +19,7 @@ "skipLibCheck": true, "lib": ["es5", "dom"], "typeRoots": ["../../node_modules/@types", "../../typings"], - "types": ["jest", "custom-global"], + "types": ["jest", "custom-global", "@testing-library/jest-dom"], "isolatedModules": true }, "include": ["src"] From c73df2832aeb78972548557b52681ce95e209744 Mon Sep 17 00:00:00 2001 From: srmukher Date: Mon, 27 Mar 2023 15:22:22 +0530 Subject: [PATCH 2/6] Resolving PR comments --- .../BasicDonutChart.png | Bin .../DonutChartTestPlan.md | 0 .../components/DonutChart/DonutChart.test.tsx | 23 +- .../DonutChart/DonutChartRTL.test.tsx | 93 +- .../__snapshots__/DonutChart.test.tsx.snap | 899 ++++- .../__snapshots__/DonutChartRTL.test.tsx.snap | 3040 ++++++++++++++++- 6 files changed, 3951 insertions(+), 104 deletions(-) rename packages/react-charting/docs/{Component tests => ComponentTests}/BasicDonutChart.png (100%) rename packages/react-charting/docs/{Component tests => ComponentTests}/DonutChartTestPlan.md (100%) diff --git a/packages/react-charting/docs/Component tests/BasicDonutChart.png b/packages/react-charting/docs/ComponentTests/BasicDonutChart.png similarity index 100% rename from packages/react-charting/docs/Component tests/BasicDonutChart.png rename to packages/react-charting/docs/ComponentTests/BasicDonutChart.png diff --git a/packages/react-charting/docs/Component tests/DonutChartTestPlan.md b/packages/react-charting/docs/ComponentTests/DonutChartTestPlan.md similarity index 100% rename from packages/react-charting/docs/Component tests/DonutChartTestPlan.md rename to packages/react-charting/docs/ComponentTests/DonutChartTestPlan.md diff --git a/packages/react-charting/src/components/DonutChart/DonutChart.test.tsx b/packages/react-charting/src/components/DonutChart/DonutChart.test.tsx index c5434c24f05a3..470b92ad9ca31 100644 --- a/packages/react-charting/src/components/DonutChart/DonutChart.test.tsx +++ b/packages/react-charting/src/components/DonutChart/DonutChart.test.tsx @@ -32,6 +32,7 @@ function sharedAfterEach() { const points: IChartDataPoint[] = [ { legend: 'first', data: 20000, color: '#E5E5E5', xAxisCalloutData: '2020/04/30' }, { legend: 'second', data: 39000, color: '#0078D4', xAxisCalloutData: '2020/04/20' }, + { legend: 'third', data: 45000, color: '#DADADA', xAxisCalloutData: '2020/04/25' }, ]; const chartTitle = 'Stacked Bar chart example'; @@ -159,26 +160,4 @@ describe('DonutChart - mouse events', () => { const tree = toJson(wrapper, { mode: 'deep' }); expect(tree).toMatchSnapshot(); }); - - it('Should change value inside donut with the legend value on mouseOver legend ', () => { - // Arrange - wrapper = mount(); - - // Act - wrapper.find('LegendsBase').find('button').at(0).simulate('mouseover'); - - // Assert - expect( - wrapper - .findWhere(node => node.hasClass(/insideDonutString.*?/)) - .at(0) - .text(), - ).toBe('20,000'); - expect( - wrapper - .findWhere(node => node.hasClass(/insideDonutString.*?/)) - .at(1) - .text(), - ).toBe('20,000'); - }); }); diff --git a/packages/react-charting/src/components/DonutChart/DonutChartRTL.test.tsx b/packages/react-charting/src/components/DonutChart/DonutChartRTL.test.tsx index f1d2a11cc6d9d..30a88ca90f8ec 100644 --- a/packages/react-charting/src/components/DonutChart/DonutChartRTL.test.tsx +++ b/packages/react-charting/src/components/DonutChart/DonutChartRTL.test.tsx @@ -1,7 +1,10 @@ -import { render, screen, queryAllByAttribute, fireEvent } from '@testing-library/react'; +import { render, screen, queryAllByAttribute, fireEvent, act } from '@testing-library/react'; import { chartPoints } from './DonutChart.test'; import { DonutChart } from './index'; import * as React from 'react'; +import { DarkTheme } from '@fluentui/theme-samples'; +import { ThemeProvider } from '@fluentui/react'; +import * as utils from '../../utilities/utilities'; test('Should hide callout on mouse leave', () => { // Arrange @@ -15,6 +18,7 @@ test('Should hide callout on mouse leave', () => { // Assert expect(getById(container, /callout/i)[0]).toHaveStyle('opacity: 0'); + expect(container).toMatchSnapshot(); }); test('Should show callout on focus', () => { @@ -106,3 +110,90 @@ test('Should show Pies with same opacity on mouse out of legends', () => { expect(getById(container, /Pie.*?first/i)[0]).toHaveAttribute('opacity', '1'); expect(getById(container, /Pie.*?second/i)[0]).toHaveAttribute('opacity', '1'); }); + +test('Should display correct callout data on mouse move', () => { + // Arrange + const { container } = render(); + + // Act + const getById = queryAllByAttribute.bind(null, 'id'); + fireEvent.mouseOver(getById(container, /Pie/i)[0]); + expect(getById(container, /callout/i)[0]).toHaveTextContent('20,000'); + fireEvent.mouseLeave(getById(container, /Pie/i)[0]); + fireEvent.mouseOver(getById(container, /Pie/i)[1]); + + // Assert + expect(getById(container, /callout/i)[0]).toHaveTextContent('39,000'); +}); + +test('Should reflect theme change', () => { + // Arrange + const { container } = render( + + + , + ); + + // Assert + expect(container).toMatchSnapshot(); +}); + +describe('Screen resolution', () => { + const originalInnerWidth = global.innerWidth; + const originalInnerHeight = global.innerHeight; + afterEach(() => { + global.innerWidth = originalInnerWidth; + global.innerHeight = originalInnerHeight; + act(() => { + global.dispatchEvent(new Event('resize')); + }); + }); + + test('Should remain unchanged on zoom in', () => { + // Arrange + const { container } = render(); + + // Act + global.innerWidth = window.innerWidth / 2; + global.innerHeight = window.innerHeight / 2; + act(() => { + global.dispatchEvent(new Event('resize')); + }); + + // Assert + expect(container).toMatchSnapshot(); + }); + + test('Should remain unchanged on zoom out', () => { + // Arrange + const { container } = render(); + + // Act + global.innerWidth = window.innerWidth * 2; + global.innerHeight = window.innerHeight * 2; + act(() => { + global.dispatchEvent(new Event('resize')); + }); + + // Assert + expect(container).toMatchSnapshot(); + }); +}); + +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( + , + ); + const getByClass = queryAllByAttribute.bind(null, 'class'); + + // Act + fireEvent.mouseOver(screen.getByText('first')); + + // Assert + expect(getByClass(container, /insideDonutString.*?/)[0].textContent).toBe('20,000'); + expect(getByClass(container, /insideDonutString.*?/)[1].textContent).toBe('20,000'); +}); diff --git a/packages/react-charting/src/components/DonutChart/__snapshots__/DonutChart.test.tsx.snap b/packages/react-charting/src/components/DonutChart/__snapshots__/DonutChart.test.tsx.snap index 2b9bd2d1f049c..5936d7e68ef54 100644 --- a/packages/react-charting/src/components/DonutChart/__snapshots__/DonutChart.test.tsx.snap +++ b/packages/react-charting/src/components/DonutChart/__snapshots__/DonutChart.test.tsx.snap @@ -59,7 +59,7 @@ exports[`DonutChart - mouse events Should render callout correctly on mouseover &::-moz-focus-inner { border: 0; } - d="M0.5499908333791704,-54.99725002291659A55,55,0,0,1,46.728934607128515,29.007010712631306L0,0Z" + d="M0.5499908333791704,-54.99725002291659A55,55,0,0,1,51.395827471597144,-19.582362434339235L0,0Z" data-is-focusable={true} id="_Pie_1first20000" onBlur={[Function]} @@ -98,7 +98,7 @@ exports[`DonutChart - mouse events Should render callout correctly on mouseover &::-moz-focus-inner { border: 0; } - d="M46.13948759271731,29.935725892008794A55,55,0,1,1,-0.5499908333792137,-54.99725002291659L0,0Z" + d="M51.7771697881295,-18.550598069367183A55,55,0,0,1,-22.36997379463645,50.245241291362895L0,0Z" data-is-focusable={true} id="_Pie_1second39000" onBlur={[Function]} @@ -123,6 +123,45 @@ exports[`DonutChart - mouse events Should render callout correctly on mouseover y={5} /> + + + + @@ -365,7 +404,7 @@ exports[`DonutChart - mouse events Should render callout correctly on mouseover aria-label="first selected" aria-posinset={1} aria-selected={false} - aria-setsize={2} + aria-setsize={3} className= { @@ -456,7 +495,7 @@ exports[`DonutChart - mouse events Should render callout correctly on mouseover aria-label="second selected" aria-posinset={2} aria-selected={false} - aria-setsize={2} + aria-setsize={3} className= { @@ -533,6 +572,97 @@ exports[`DonutChart - mouse events Should render callout correctly on mouseover +
+ +
@@ -602,7 +732,7 @@ exports[`DonutChart - mouse events Should render customized callout on mouseover &::-moz-focus-inner { border: 0; } - d="M0.5499908333791704,-54.99725002291659A55,55,0,0,1,46.728934607128515,29.007010712631306L0,0Z" + d="M0.5499908333791704,-54.99725002291659A55,55,0,0,1,51.395827471597144,-19.582362434339235L0,0Z" data-is-focusable={true} id="_Pie_1first20000" onBlur={[Function]} @@ -641,7 +771,7 @@ exports[`DonutChart - mouse events Should render customized callout on mouseover &::-moz-focus-inner { border: 0; } - d="M46.13948759271731,29.935725892008794A55,55,0,1,1,-0.5499908333792137,-54.99725002291659L0,0Z" + d="M51.7771697881295,-18.550598069367183A55,55,0,0,1,-22.36997379463645,50.245241291362895L0,0Z" data-is-focusable={true} id="_Pie_1second39000" onBlur={[Function]} @@ -666,6 +796,45 @@ exports[`DonutChart - mouse events Should render customized callout on mouseover y={5} /> + + + + @@ -826,7 +995,7 @@ exports[`DonutChart - mouse events Should render customized callout on mouseover aria-label="first selected" aria-posinset={1} aria-selected={false} - aria-setsize={2} + aria-setsize={3} className= { @@ -917,7 +1086,7 @@ exports[`DonutChart - mouse events Should render customized callout on mouseover aria-label="second selected" aria-posinset={2} aria-selected={false} - aria-setsize={2} + aria-setsize={3} className= { @@ -994,6 +1163,97 @@ exports[`DonutChart - mouse events Should render customized callout on mouseover +
+ +
@@ -1061,7 +1321,7 @@ exports[`DonutChart snapShot testing renders DonutChart correctly 1`] = ` &::-moz-focus-inner { border: 0; } - d="M0.5499908333791704,-54.99725002291659A55,55,0,0,1,46.728934607128515,29.007010712631306L0,0Z" + d="M0.5499908333791704,-54.99725002291659A55,55,0,0,1,51.395827471597144,-19.582362434339235L0,0Z" data-is-focusable={true} id="_Pie_1first20000" onBlur={[Function]} @@ -1100,7 +1360,7 @@ exports[`DonutChart snapShot testing renders DonutChart correctly 1`] = ` &::-moz-focus-inner { border: 0; } - d="M46.13948759271731,29.935725892008794A55,55,0,1,1,-0.5499908333792137,-54.99725002291659L0,0Z" + d="M51.7771697881295,-18.550598069367183A55,55,0,0,1,-22.36997379463645,50.245241291362895L0,0Z" data-is-focusable={true} id="_Pie_1second39000" onBlur={[Function]} @@ -1125,23 +1385,62 @@ exports[`DonutChart snapShot testing renders DonutChart correctly 1`] = ` y={5} /> - - - - - -
-
+ + + + + +
+
+ +
+
+
+ +
@@ -1505,6 +1894,45 @@ exports[`DonutChart snapShot testing renders enabledLegendsWrapLines correctly 1 y={5} /> + + + + @@ -1587,7 +2015,7 @@ exports[`DonutChart snapShot testing renders enabledLegendsWrapLines correctly 1 aria-label="first selected" aria-posinset={1} aria-selected={false} - aria-setsize={2} + aria-setsize={3} className= { @@ -1677,7 +2105,7 @@ exports[`DonutChart snapShot testing renders enabledLegendsWrapLines correctly 1 aria-label="second selected" aria-posinset={2} aria-selected={false} - aria-setsize={2} + aria-setsize={3} className= { @@ -1754,6 +2182,96 @@ exports[`DonutChart snapShot testing renders enabledLegendsWrapLines correctly 1 +
+ +
@@ -1809,12 +2327,51 @@ exports[`DonutChart snapShot testing renders hideLegend correctly 1`] = ` > + + + + + + + + @@ -2098,7 +2694,7 @@ exports[`DonutChart snapShot testing renders hideTooltip correctly 1`] = ` aria-label="first selected" aria-posinset={1} aria-selected={false} - aria-setsize={2} + aria-setsize={3} className= { @@ -2188,7 +2784,7 @@ exports[`DonutChart snapShot testing renders hideTooltip correctly 1`] = ` aria-label="second selected" aria-posinset={2} aria-selected={false} - aria-setsize={2} + aria-setsize={3} className= { @@ -2265,6 +2861,96 @@ exports[`DonutChart snapShot testing renders hideTooltip correctly 1`] = ` +
+ +
@@ -2400,6 +3086,47 @@ exports[`DonutChart snapShot testing renders value inside onf the pie 1`] = ` 1,000 + + + + 1,000 + + @@ -2482,7 +3209,7 @@ exports[`DonutChart snapShot testing renders value inside onf the pie 1`] = ` aria-label="first selected" aria-posinset={1} aria-selected={false} - aria-setsize={2} + aria-setsize={3} className= { @@ -2572,7 +3299,7 @@ exports[`DonutChart snapShot testing renders value inside onf the pie 1`] = ` aria-label="second selected" aria-posinset={2} aria-selected={false} - aria-setsize={2} + aria-setsize={3} className= { @@ -2649,6 +3376,96 @@ exports[`DonutChart snapShot testing renders value inside onf the pie 1`] = ` +
+ +
diff --git a/packages/react-charting/src/components/DonutChart/__snapshots__/DonutChartRTL.test.tsx.snap b/packages/react-charting/src/components/DonutChart/__snapshots__/DonutChartRTL.test.tsx.snap index 2b9bd2d1f049c..1f94f55f62171 100644 --- a/packages/react-charting/src/components/DonutChart/__snapshots__/DonutChartRTL.test.tsx.snap +++ b/packages/react-charting/src/components/DonutChart/__snapshots__/DonutChartRTL.test.tsx.snap @@ -59,7 +59,7 @@ exports[`DonutChart - mouse events Should render callout correctly on mouseover &::-moz-focus-inner { border: 0; } - d="M0.5499908333791704,-54.99725002291659A55,55,0,0,1,46.728934607128515,29.007010712631306L0,0Z" + d="M0.5499908333791704,-54.99725002291659A55,55,0,0,1,51.395827471597144,-19.582362434339235L0,0Z" data-is-focusable={true} id="_Pie_1first20000" onBlur={[Function]} @@ -98,7 +98,7 @@ exports[`DonutChart - mouse events Should render callout correctly on mouseover &::-moz-focus-inner { border: 0; } - d="M46.13948759271731,29.935725892008794A55,55,0,1,1,-0.5499908333792137,-54.99725002291659L0,0Z" + d="M51.7771697881295,-18.550598069367183A55,55,0,0,1,-22.36997379463645,50.245241291362895L0,0Z" data-is-focusable={true} id="_Pie_1second39000" onBlur={[Function]} @@ -123,6 +123,45 @@ exports[`DonutChart - mouse events Should render callout correctly on mouseover y={5} /> + + + + @@ -365,7 +404,7 @@ exports[`DonutChart - mouse events Should render callout correctly on mouseover aria-label="first selected" aria-posinset={1} aria-selected={false} - aria-setsize={2} + aria-setsize={3} className= { @@ -456,7 +495,7 @@ exports[`DonutChart - mouse events Should render callout correctly on mouseover aria-label="second selected" aria-posinset={2} aria-selected={false} - aria-setsize={2} + aria-setsize={3} className= { @@ -533,6 +572,97 @@ exports[`DonutChart - mouse events Should render callout correctly on mouseover +
+ +
@@ -602,7 +732,7 @@ exports[`DonutChart - mouse events Should render customized callout on mouseover &::-moz-focus-inner { border: 0; } - d="M0.5499908333791704,-54.99725002291659A55,55,0,0,1,46.728934607128515,29.007010712631306L0,0Z" + d="M0.5499908333791704,-54.99725002291659A55,55,0,0,1,51.395827471597144,-19.582362434339235L0,0Z" data-is-focusable={true} id="_Pie_1first20000" onBlur={[Function]} @@ -641,7 +771,7 @@ exports[`DonutChart - mouse events Should render customized callout on mouseover &::-moz-focus-inner { border: 0; } - d="M46.13948759271731,29.935725892008794A55,55,0,1,1,-0.5499908333792137,-54.99725002291659L0,0Z" + d="M51.7771697881295,-18.550598069367183A55,55,0,0,1,-22.36997379463645,50.245241291362895L0,0Z" data-is-focusable={true} id="_Pie_1second39000" onBlur={[Function]} @@ -666,6 +796,45 @@ exports[`DonutChart - mouse events Should render customized callout on mouseover y={5} /> + + + + @@ -826,7 +995,7 @@ exports[`DonutChart - mouse events Should render customized callout on mouseover aria-label="first selected" aria-posinset={1} aria-selected={false} - aria-setsize={2} + aria-setsize={3} className= { @@ -917,7 +1086,7 @@ exports[`DonutChart - mouse events Should render customized callout on mouseover aria-label="second selected" aria-posinset={2} aria-selected={false} - aria-setsize={2} + aria-setsize={3} className= { @@ -994,6 +1163,97 @@ exports[`DonutChart - mouse events Should render customized callout on mouseover +
+ +
@@ -1061,7 +1321,7 @@ exports[`DonutChart snapShot testing renders DonutChart correctly 1`] = ` &::-moz-focus-inner { border: 0; } - d="M0.5499908333791704,-54.99725002291659A55,55,0,0,1,46.728934607128515,29.007010712631306L0,0Z" + d="M0.5499908333791704,-54.99725002291659A55,55,0,0,1,51.395827471597144,-19.582362434339235L0,0Z" data-is-focusable={true} id="_Pie_1first20000" onBlur={[Function]} @@ -1100,7 +1360,7 @@ exports[`DonutChart snapShot testing renders DonutChart correctly 1`] = ` &::-moz-focus-inner { border: 0; } - d="M46.13948759271731,29.935725892008794A55,55,0,1,1,-0.5499908333792137,-54.99725002291659L0,0Z" + d="M51.7771697881295,-18.550598069367183A55,55,0,0,1,-22.36997379463645,50.245241291362895L0,0Z" data-is-focusable={true} id="_Pie_1second39000" onBlur={[Function]} @@ -1125,23 +1385,62 @@ exports[`DonutChart snapShot testing renders DonutChart correctly 1`] = ` y={5} /> - - - - - -
-
+ + + + + +
+
+ +
+
+
+ +
@@ -1505,6 +1894,45 @@ exports[`DonutChart snapShot testing renders enabledLegendsWrapLines correctly 1 y={5} /> + + + + @@ -1587,7 +2015,7 @@ exports[`DonutChart snapShot testing renders enabledLegendsWrapLines correctly 1 aria-label="first selected" aria-posinset={1} aria-selected={false} - aria-setsize={2} + aria-setsize={3} className= { @@ -1677,7 +2105,7 @@ exports[`DonutChart snapShot testing renders enabledLegendsWrapLines correctly 1 aria-label="second selected" aria-posinset={2} aria-selected={false} - aria-setsize={2} + aria-setsize={3} className= { @@ -1754,6 +2182,96 @@ exports[`DonutChart snapShot testing renders enabledLegendsWrapLines correctly 1 +
+ +
@@ -1885,11 +2403,50 @@ exports[`DonutChart snapShot testing renders hideLegend correctly 1`] = ` y={5} /> - - - - - + + + + + + + + @@ -2016,6 +2573,45 @@ exports[`DonutChart snapShot testing renders hideTooltip correctly 1`] = ` y={5} /> + + + + @@ -2098,7 +2694,7 @@ exports[`DonutChart snapShot testing renders hideTooltip correctly 1`] = ` aria-label="first selected" aria-posinset={1} aria-selected={false} - aria-setsize={2} + aria-setsize={3} className= { @@ -2188,7 +2784,7 @@ exports[`DonutChart snapShot testing renders hideTooltip correctly 1`] = ` aria-label="second selected" aria-posinset={2} aria-selected={false} - aria-setsize={2} + aria-setsize={3} className= { @@ -2265,6 +2861,96 @@ exports[`DonutChart snapShot testing renders hideTooltip correctly 1`] = ` +
+ +
@@ -2400,6 +3086,47 @@ exports[`DonutChart snapShot testing renders value inside onf the pie 1`] = ` 1,000 + + + + 1,000 + + @@ -2482,7 +3209,7 @@ exports[`DonutChart snapShot testing renders value inside onf the pie 1`] = ` aria-label="first selected" aria-posinset={1} aria-selected={false} - aria-setsize={2} + aria-setsize={3} className= { @@ -2572,7 +3299,7 @@ exports[`DonutChart snapShot testing renders value inside onf the pie 1`] = ` aria-label="second selected" aria-posinset={2} aria-selected={false} - aria-setsize={2} + aria-setsize={3} className= { @@ -2649,6 +3376,2239 @@ exports[`DonutChart snapShot testing renders value inside onf the pie 1`] = ` +
+ +
+ + + + + + + + +`; + +exports[`Screen resolution Should remain unchanged on zoom in 1`] = ` +
+
+
+
+ + + + + + + + + + + + + + + + + + + + + + +
+
+ +
+
+
+
+
+
+
+
+ +
+
+ +
+
+ +
+
+
+
+
+
+
+
+
+
+`; + +exports[`Screen resolution Should remain unchanged on zoom out 1`] = ` +
+
+
+
+ + + + + + + + + + + + + + + + + + + + + + +
+
+ +
+
+
+
+
+
+
+
+ +
+
+ +
+
+ +
+
+
+
+
+
+
+
+
+
+`; + +exports[`Should hide callout on mouse leave 1`] = ` +
+
+
+
+ + + + + + + + + + + + + + + + + + + + + + +
+
+ +
+
+
+
+
+
+
+
+ +
+
+ +
+
+ +
+
+
+
+
+
+
+
+
+
+`; + +exports[`Should reflect theme change 1`] = ` +
+
+
+
+
+ + + + + + + + + + + + + + + + + + + + + + +
+
+ +
+
+
+
+
+
+
+
+ +
+
+ +
+
+ +
+
+
From 90dd8b1bb5db2a37a90656e5487816008dc28925 Mon Sep 17 00:00:00 2001 From: srmukher Date: Thu, 13 Apr 2023 16:33:58 +0530 Subject: [PATCH 3/6] Rearranged and modified tests and test plan --- .../BasicDonutChart.png | Bin .../DonutChart/ComponentTests.md} | 16 +++++++++------- .../DonutChart/DonutChartRTL.test.tsx | 6 ++++++ 3 files changed, 15 insertions(+), 7 deletions(-) rename packages/react-charting/docs/{ComponentTests => TestPlans}/BasicDonutChart.png (100%) rename packages/react-charting/docs/{ComponentTests/DonutChartTestPlan.md => TestPlans/DonutChart/ComponentTests.md} (63%) diff --git a/packages/react-charting/docs/ComponentTests/BasicDonutChart.png b/packages/react-charting/docs/TestPlans/BasicDonutChart.png similarity index 100% rename from packages/react-charting/docs/ComponentTests/BasicDonutChart.png rename to packages/react-charting/docs/TestPlans/BasicDonutChart.png diff --git a/packages/react-charting/docs/ComponentTests/DonutChartTestPlan.md b/packages/react-charting/docs/TestPlans/DonutChart/ComponentTests.md similarity index 63% rename from packages/react-charting/docs/ComponentTests/DonutChartTestPlan.md rename to packages/react-charting/docs/TestPlans/DonutChart/ComponentTests.md index e8371067bb6cd..c6cb9bb6d3655 100644 --- a/packages/react-charting/docs/ComponentTests/DonutChartTestPlan.md +++ b/packages/react-charting/docs/TestPlans/DonutChart/ComponentTests.md @@ -20,6 +20,8 @@ - HideLegend prop set to “true”. - [enzyme] - EnabledLegendsWrapLines prop set to “true”. - [enzyme] - ValueInsideDonut set to a string / number. - [enzyme] +- HideLabels prop set to "false". - [enzyme] +- HideLabels prop set to "false" and ShowLabelsInPercent prop set to "true". - [enzyme] ### Test case 3: [Specific DOM elements] Renders individual elements on a prop change: @@ -30,17 +32,17 @@ ### Test case 4: [Mouse events – Donut chart] Renders individual elements on mouse events: -- On mouseOver on the donut chart should render callout. - [enzyme] -- On mouseMove on Pie 1 (step 1) -> mouseLeave (step 2) -> mouseMove on Pie 2 (step 3), html in step 1 should not be the same as in step 3. - [enzyme] -- On mouseover with onRenderCalloutPerDataPoint prop provided, should render the custom callout. [enzyme] -- On mouseOver, callout should be defined, on mouseLeave, callout should disappear. - [enzyme] +- On mouse over on the donut chart should render callout. - [enzyme] +- On mouse move on Pie 1 (step 1) -> mouse leave (step 2) -> mouse move on Pie 2 (step 3), html in step 1 should not be the same as in step 3. - [enzyme] +- On mouse over with onRenderCalloutPerDataPoint prop provided, should render the custom callout. [enzyme] +- On mouse over, callout should be defined, on mouse leave, callout should disappear. - [enzyme] ### Test case 5: [Mouse events – Legends] Renders individual elements on mouse events: -- On mouseOver should highlight the corresponding pie. - [RTL] -- On mouseOver should change the value inside donut with the legend value. - [enzyme] +- On mouse over on legends should highlight the corresponding pie. - [RTL] +- On mouse over on legends should change the value inside donut with the legend value. - [enzyme] - On click should highlight the corresponding pie with aria-selected set to “true” and tabIndex set to 0. - [RTL] -- On mouseOut after mouseOver on first legend, should have opacity 0.1 for second Pie initially (during mouseOver on first legend) and opacity set to 1 for both the Pies on mouseOut. - [RTL] +- On mouse out after mouse over on first legend, should have opacity 0.1 for second Pie initially (during mouseOver on first legend) and opacity set to 1 for both the Pies on mouse out. - [RTL] ### Test case 6: [Keyboard events – Donut chart] Renders individual elements on keyboard events: diff --git a/packages/react-charting/src/components/DonutChart/DonutChartRTL.test.tsx b/packages/react-charting/src/components/DonutChart/DonutChartRTL.test.tsx index fe0b8fb31ef04..d0e65307484d4 100644 --- a/packages/react-charting/src/components/DonutChart/DonutChartRTL.test.tsx +++ b/packages/react-charting/src/components/DonutChart/DonutChartRTL.test.tsx @@ -52,11 +52,13 @@ test('Should highlight the corresponding Pie on mouse over on legends', () => { // Act const legend = screen.queryByText('first'); + expect(legend).toBeDefined(); fireEvent.mouseOver(legend!); // Assert const getById = queryAllByAttribute.bind(null, 'id'); expect(getById(container, /Pie.*?second/i)[0]).toHaveAttribute('opacity', '0.1'); + expect(getById(container, /Pie.*?third/i)[0]).toHaveAttribute('opacity', '0.1'); }); test('Should select legend on single mouse click on legends', () => { @@ -65,6 +67,7 @@ test('Should select legend on single mouse click on legends', () => { // Act const legend = screen.queryByText('first'); + expect(legend).toBeDefined(); fireEvent.click(legend!); // Assert @@ -81,6 +84,8 @@ test('Should deselect legend on double mouse click on legends', () => { // Act const legend = screen.queryByText('first'); + expect(legend).toBeDefined(); + //single click on first legend fireEvent.click(legend!); const getById = queryAllByAttribute.bind(null, 'id'); @@ -101,6 +106,7 @@ test('Should show Pies with same opacity on mouse out of legends', () => { // Act const legend = screen.queryByText('first'); + expect(legend).toBeDefined(); fireEvent.mouseOver(legend!); const getById = queryAllByAttribute.bind(null, 'id'); expect(getById(container, /Pie.*?second/i)[0]).toHaveAttribute('opacity', '0.1'); From 8689225231213bd879a95d182c6869e69f857371 Mon Sep 17 00:00:00 2001 From: srmukher Date: Mon, 17 Apr 2023 12:56:28 +0530 Subject: [PATCH 4/6] Converting component test plan to a table --- .../TestPlans/DonutChart/ComponentTests.md | 51 ++++--------------- 1 file changed, 11 insertions(+), 40 deletions(-) diff --git a/packages/react-charting/docs/TestPlans/DonutChart/ComponentTests.md b/packages/react-charting/docs/TestPlans/DonutChart/ComponentTests.md index c6cb9bb6d3655..efbbd2bf28a2e 100644 --- a/packages/react-charting/docs/TestPlans/DonutChart/ComponentTests.md +++ b/packages/react-charting/docs/TestPlans/DonutChart/ComponentTests.md @@ -4,47 +4,18 @@ ![Alt text](BasicDonutChart.png) -## Subcomponents: Pie and Legend +### Subcomponents: Pie and Legend -## Library used: jest and (enzyme or react testing library) +### Library used: jest and (enzyme or react testing library)
-### Test case 1: [Snapshot testing] [Component] - -- Renders donut chart correctly with data. - [enzyme] - -### Test case 2: [Snapshot testing] [Individual Props] Renders donut chart with: - -- HideTooltip prop set to “true”. - [enzyme] -- HideLegend prop set to “true”. - [enzyme] -- EnabledLegendsWrapLines prop set to “true”. - [enzyme] -- ValueInsideDonut set to a string / number. - [enzyme] -- HideLabels prop set to "false". - [enzyme] -- HideLabels prop set to "false" and ShowLabelsInPercent prop set to "true". - [enzyme] - -### Test case 3: [Specific DOM elements] Renders individual elements on a prop change: - -- Should mount legend when hideLegend prop is set to “false”. - [enzyme] -- Should mount callout when hideTootip prop is set to “false”. - [enzyme] -- Should not render onRenderCalloutPerStack with just data as a prop. - [enzyme] -- Should render onRenderCalloutPerDataPoint when the prop is given otherwise should not render onRenderCalloutPerDataPoint. - [enzyme] - -### Test case 4: [Mouse events – Donut chart] Renders individual elements on mouse events: - -- On mouse over on the donut chart should render callout. - [enzyme] -- On mouse move on Pie 1 (step 1) -> mouse leave (step 2) -> mouse move on Pie 2 (step 3), html in step 1 should not be the same as in step 3. - [enzyme] -- On mouse over with onRenderCalloutPerDataPoint prop provided, should render the custom callout. [enzyme] -- On mouse over, callout should be defined, on mouse leave, callout should disappear. - [enzyme] - -### Test case 5: [Mouse events – Legends] Renders individual elements on mouse events: - -- On mouse over on legends should highlight the corresponding pie. - [RTL] -- On mouse over on legends should change the value inside donut with the legend value. - [enzyme] -- On click should highlight the corresponding pie with aria-selected set to “true” and tabIndex set to 0. - [RTL] -- On mouse out after mouse over on first legend, should have opacity 0.1 for second Pie initially (during mouseOver on first legend) and opacity set to 1 for both the Pies on mouse out. - [RTL] - -### Test case 6: [Keyboard events – Donut chart] Renders individual elements on keyboard events: - -- On focus should render the corresponding callout. - [RTL] -- On blur should remove focus from the corresponding Pie. - [RTL] +| Test case | Execution steps | Validation steps | Library used | +| --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| Test case 1: [Snapshot testing] [Component] Renders donut chart with dataDonut chart renders correctlyEnzyme | Test case 2: [Snapshot testing] [Individual Props] Renders donut chart with:
  • HideTooltip prop set to “true”.
Donut chart renders correctlyEnzyme | +|
  • HideLegend prop set to “true”.
Donut chart renders correctlyEnzyme |
  • EnabledLegendsWrapLines prop set to “true”.
Donut chart renders correctlyEnzyme |
  • ValueInsideDonut set to a string / number.
Donut chart renders correctlyEnzyme |
  • HideLabels prop set to "false".
Donut chart renders correctlyEnzyme | +|
  • HideLabels prop set to "false" and ShowLabelsInPercent prop set to "true".
Donut chart renders correctlyEnzyme | Test case 3: [Specific DOM elements] Renders individual elements on a prop change:
  • HideLegend prop is set to “false”.
Legend mounts correctlyEnzyme |
  • HideTootip prop is set to “false”.
Callout mounts correctlyEnzyme |
  • onRenderCalloutPerStack prop is not given.
Should not render onRenderCalloutPerStackEnzyme | +|
  • onRenderCalloutPerDataPoint prop is given.
Should render onRenderCalloutPerDataPoint correctlyEnzyme | +| Test case 4: [Mouse events – Donut chart] Renders individual elements on mouse events:
  • On mouse over on the donut chart.
Should render calloutEnzyme |
  • On mouse move on Pie 1 (step 1) -> mouse leave (step 2) -> mouse move on Pie 2 (step 3).
Html in step 1 should not be the same as in step 3Enzyme |
  • On mouse over with onRenderCalloutPerDataPoint prop provided.
Should render the custom calloutEnzyme |
  • On mouse over, followed by mouse leave on callout.
On mouse over, callout should be defined, on mouse leave, callout should disappear.Enzyme | +| Test case 5: [Mouse events – Legends] Renders individual elements on mouse events:
  • On mouse over on legends.
Should highlight the corresponding pieRTL |
  • On mouse over on legends.
Should change the value inside donut with the legend valueEnzyme |
  • On click on Pie.
Should highlight the corresponding pie with aria-selected set to “true” and tabIndex set to 0.RTL |
  • On mouse out after mouse over on first legend.
Should have opacity 0.1 for second Pie initially (during mouseOver on first legend) and opacity set to 1 for both the Pies on mouse out.RTL | +| Test case 6: [Keyboard events – Donut chart] Renders individual elements on keyboard events:
  • On focus on a Pie.
Should render the corresponding calloutRTL |
  • On blur on a Pie.
Should remove focus from the corresponding PieRTL | From 11e91c2bf2a323acf17537774c7c019b7e46aca8 Mon Sep 17 00:00:00 2001 From: srmukher Date: Mon, 17 Apr 2023 13:26:18 +0530 Subject: [PATCH 5/6] Removing setup change for extend-expect --- .../TestPlans/DonutChart/ComponentTests.md | 32 +++++++++++++------ packages/react-charting/jest.config.js | 2 +- packages/react-charting/package.json | 1 + .../DonutChart/DonutChartRTL.test.tsx | 1 + 4 files changed, 26 insertions(+), 10 deletions(-) diff --git a/packages/react-charting/docs/TestPlans/DonutChart/ComponentTests.md b/packages/react-charting/docs/TestPlans/DonutChart/ComponentTests.md index efbbd2bf28a2e..0c4434f9bc9d6 100644 --- a/packages/react-charting/docs/TestPlans/DonutChart/ComponentTests.md +++ b/packages/react-charting/docs/TestPlans/DonutChart/ComponentTests.md @@ -10,12 +10,26 @@
-| Test case | Execution steps | Validation steps | Library used | -| --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| Test case 1: [Snapshot testing] [Component] Renders donut chart with dataDonut chart renders correctlyEnzyme | Test case 2: [Snapshot testing] [Individual Props] Renders donut chart with:
  • HideTooltip prop set to “true”.
Donut chart renders correctlyEnzyme | -|
  • HideLegend prop set to “true”.
Donut chart renders correctlyEnzyme |
  • EnabledLegendsWrapLines prop set to “true”.
Donut chart renders correctlyEnzyme |
  • ValueInsideDonut set to a string / number.
Donut chart renders correctlyEnzyme |
  • HideLabels prop set to "false".
Donut chart renders correctlyEnzyme | -|
  • HideLabels prop set to "false" and ShowLabelsInPercent prop set to "true".
Donut chart renders correctlyEnzyme | Test case 3: [Specific DOM elements] Renders individual elements on a prop change:
  • HideLegend prop is set to “false”.
Legend mounts correctlyEnzyme |
  • HideTootip prop is set to “false”.
Callout mounts correctlyEnzyme |
  • onRenderCalloutPerStack prop is not given.
Should not render onRenderCalloutPerStackEnzyme | -|
  • onRenderCalloutPerDataPoint prop is given.
Should render onRenderCalloutPerDataPoint correctlyEnzyme | -| Test case 4: [Mouse events – Donut chart] Renders individual elements on mouse events:
  • On mouse over on the donut chart.
Should render calloutEnzyme |
  • On mouse move on Pie 1 (step 1) -> mouse leave (step 2) -> mouse move on Pie 2 (step 3).
Html in step 1 should not be the same as in step 3Enzyme |
  • On mouse over with onRenderCalloutPerDataPoint prop provided.
Should render the custom calloutEnzyme |
  • On mouse over, followed by mouse leave on callout.
On mouse over, callout should be defined, on mouse leave, callout should disappear.Enzyme | -| Test case 5: [Mouse events – Legends] Renders individual elements on mouse events:
  • On mouse over on legends.
Should highlight the corresponding pieRTL |
  • On mouse over on legends.
Should change the value inside donut with the legend valueEnzyme |
  • On click on Pie.
Should highlight the corresponding pie with aria-selected set to “true” and tabIndex set to 0.RTL |
  • On mouse out after mouse over on first legend.
Should have opacity 0.1 for second Pie initially (during mouseOver on first legend) and opacity set to 1 for both the Pies on mouse out.RTL | -| Test case 6: [Keyboard events – Donut chart] Renders individual elements on keyboard events:
  • On focus on a Pie.
Should render the corresponding calloutRTL |
  • On blur on a Pie.
Should remove focus from the corresponding PieRTL | +| Test case | Execution steps | Validation steps | Library used | +| -------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------- | ------------ | +| Test case 1: [Snapshot testing] [Component] |
  • Renders donut chart with data.
| Donut chart renders correctly | Enzyme | +| Test case 2: [Snapshot testing] [Individual Props] | Renders donut chart with:
  • HideTooltip prop set to “true”.
| Donut chart renders correctly | Enzyme | +| |
  • HideLegend prop set to “true”.
| Donut chart renders correctly | Enzyme | +| |
  • EnabledLegendsWrapLines prop set to “true”.
| Donut chart renders correctly | Enzyme | +| |
  • ValueInsideDonut set to a string / number.
| Donut chart renders correctly | Enzyme | +| |
  • HideLabels prop set to "false".
| Donut chart renders correctly | Enzyme | +| |
  • HideLabels prop set to "false" and ShowLabelsInPercent prop set to "true".
| Donut chart renders correctly | Enzyme | +| Test case 3: [Specific DOM elements] Renders individual elements on a prop change: |
  • HideLegend prop is set to “false”.
| Legend mounts correctly | Enzyme | +| |
  • HideTootip prop is set to “false”.
| Callout mounts correctly | Enzyme | +| |
  • onRenderCalloutPerStack prop is not given.
| Should not render onRenderCalloutPerStack | Enzyme | +| |
  • onRenderCalloutPerDataPoint prop is given.
| Should render onRenderCalloutPerDataPoint correctly | Enzyme | +| Test case 4: [Mouse events – Donut chart] Renders individual elements on mouse events: |
  • On mouse over on the donut chart.
| Should render callout | Enzyme | +| |
  • On mouse move on Pie 1 (step 1) -> mouse leave (step 2) -> mouse move on Pie 2 (step 3).
| Html in step 1 should not be the same as in step 3 | Enzyme | +| |
  • On mouse over with onRenderCalloutPerDataPoint prop provided.
| Should render the custom callout | Enzyme | +| |
  • On mouse over, followed by mouse leave on callout.
| On mouse over, callout should be defined, on mouse leave, callout should disappear. | Enzyme | +| Test case 5: [Mouse events – Legends] Renders individual elements on mouse events: |
  • On mouse over on legends.
| Should highlight the corresponding pie | RTL | +| |
  • On mouse over on legends.
| Should change the value inside donut with the legend value | Enzyme | +| |
  • On click on Pie.
| Should highlight the corresponding pie with aria-selected set to “true” and tabIndex set to 0. | RTL | +| |
  • On mouse out after mouse over on first legend.
| Should have opacity 0.1 for second Pie initially (during mouseOver on first legend) and opacity set to 1 for both the Pies on mouse out. | RTL | +| Test case 6: [Keyboard events – Donut chart] Renders individual elements on keyboard events: |
  • On focus on a Pie.
| Should render the corresponding callout | RTL | +| |
  • On blur on a Pie.
| Should remove focus from the corresponding Pie | RTL | diff --git a/packages/react-charting/jest.config.js b/packages/react-charting/jest.config.js index 45c4007353a3c..b70cd24668eeb 100644 --- a/packages/react-charting/jest.config.js +++ b/packages/react-charting/jest.config.js @@ -19,7 +19,7 @@ function getEsmOnlyPackagesToCjsMapping() { const config = createConfig({ setupFiles: ['./config/tests.js'], snapshotSerializers: ['@fluentui/jest-serializer-merge-styles', 'enzyme-to-json/serializer'], - setupFilesAfterEnv: ['@testing-library/jest-dom/extend-expect'], + moduleNameMapper: { ...getEsmOnlyPackagesToCjsMapping(), }, diff --git a/packages/react-charting/package.json b/packages/react-charting/package.json index 751a629f002bb..4ba26638bda6e 100644 --- a/packages/react-charting/package.json +++ b/packages/react-charting/package.json @@ -37,6 +37,7 @@ }, "dependencies": { "@fluentui/react-focus": "^8.8.19", + "@fluentui/theme-samples": "^8.7.70", "@microsoft/load-themed-styles": "^1.10.26", "@types/d3-array": "1.2.1", "@types/d3-axis": "1.0.10", diff --git a/packages/react-charting/src/components/DonutChart/DonutChartRTL.test.tsx b/packages/react-charting/src/components/DonutChart/DonutChartRTL.test.tsx index d0e65307484d4..4e4c146927e11 100644 --- a/packages/react-charting/src/components/DonutChart/DonutChartRTL.test.tsx +++ b/packages/react-charting/src/components/DonutChart/DonutChartRTL.test.tsx @@ -5,6 +5,7 @@ import * as React from 'react'; import { DarkTheme } from '@fluentui/theme-samples'; import { ThemeProvider } from '@fluentui/react'; import * as utils from '../../utilities/utilities'; +import '@testing-library/jest-dom'; test('Should hide callout on mouse leave', () => { // Arrange From 20970f0cdf35ad8123ca3e770bc55a7be97436ec Mon Sep 17 00:00:00 2001 From: srmukher Date: Tue, 2 May 2023 17:06:36 +0530 Subject: [PATCH 6/6] Changing the setup for jest-dom in config --- packages/react-charting/config/setup-env.js | 1 + packages/react-charting/jest.config.js | 2 +- .../src/components/DonutChart/DonutChartRTL.test.tsx | 1 - 3 files changed, 2 insertions(+), 2 deletions(-) create mode 100644 packages/react-charting/config/setup-env.js diff --git a/packages/react-charting/config/setup-env.js b/packages/react-charting/config/setup-env.js new file mode 100644 index 0000000000000..093264800d8c6 --- /dev/null +++ b/packages/react-charting/config/setup-env.js @@ -0,0 +1 @@ +require('@testing-library/jest-dom'); diff --git a/packages/react-charting/jest.config.js b/packages/react-charting/jest.config.js index b70cd24668eeb..0ac954180f24e 100644 --- a/packages/react-charting/jest.config.js +++ b/packages/react-charting/jest.config.js @@ -19,7 +19,7 @@ function getEsmOnlyPackagesToCjsMapping() { const config = createConfig({ setupFiles: ['./config/tests.js'], snapshotSerializers: ['@fluentui/jest-serializer-merge-styles', 'enzyme-to-json/serializer'], - + setupFilesAfterEnv: ['./config/setup-env.js'], moduleNameMapper: { ...getEsmOnlyPackagesToCjsMapping(), }, diff --git a/packages/react-charting/src/components/DonutChart/DonutChartRTL.test.tsx b/packages/react-charting/src/components/DonutChart/DonutChartRTL.test.tsx index 4e4c146927e11..d0e65307484d4 100644 --- a/packages/react-charting/src/components/DonutChart/DonutChartRTL.test.tsx +++ b/packages/react-charting/src/components/DonutChart/DonutChartRTL.test.tsx @@ -5,7 +5,6 @@ import * as React from 'react'; import { DarkTheme } from '@fluentui/theme-samples'; import { ThemeProvider } from '@fluentui/react'; import * as utils from '../../utilities/utilities'; -import '@testing-library/jest-dom'; test('Should hide callout on mouse leave', () => { // Arrange