From abb2dc5195c3e36c0f80e1a7fd4a7ebbdcb01f10 Mon Sep 17 00:00:00 2001 From: Oleksandr Fediashov Date: Thu, 16 Nov 2023 17:11:20 +0100 Subject: [PATCH] Revert "Horizontal bar chart with axis - component Tests (#29064)" (#29859) This reverts commit 8cb0e0373f04d3130354a1c4d0993260816b6ef9. --- .../ComponentTests.md | 51 - .../HorizontalBarChartWithAxisRTL.test.tsx | 463 --- ...orizontalBarChartWithAxisRTL.test.tsx.snap | 2623 ----------------- 3 files changed, 3137 deletions(-) delete mode 100644 packages/react-charting/docs/TestPlans/HorizontalBarChartWithAxis/ComponentTests.md delete mode 100644 packages/react-charting/src/components/HorizontalBarChartWithAxis/HorizontalBarChartWithAxisRTL.test.tsx delete mode 100644 packages/react-charting/src/components/HorizontalBarChartWithAxis/__snapshots__/HorizontalBarChartWithAxisRTL.test.tsx.snap diff --git a/packages/react-charting/docs/TestPlans/HorizontalBarChartWithAxis/ComponentTests.md b/packages/react-charting/docs/TestPlans/HorizontalBarChartWithAxis/ComponentTests.md deleted file mode 100644 index c6b76cb923149..0000000000000 --- a/packages/react-charting/docs/TestPlans/HorizontalBarChartWithAxis/ComponentTests.md +++ /dev/null @@ -1,51 +0,0 @@ -**Horizontal Bar Chart With Axis – Component test plan** - -**Sub-components: Bar, Callout, Labels, Legend** - -1. **Bar: Bar data, Bar color, bar label** -1. **Callout: Default/custom callout** -1. **Labels: Default/Custom labels** -1. **Legend: show/hide legends, highlight the corresponding bars on legend hover** - -| **Test steps** | **Validation** | **Tool used** | -| :-----------------------------------------------------------------------------------: | :---------------------------------------------------------------: | :-----------: | -| Test 1: [Snapshot testing] | | | -| - With only data prop, string data on y-axis. | Should render horizontal bar chart with axis correctly | RTL | -| - With only data prop, numeric data on y-axis. | Should render horizontal bar chart with axis correctly | RTL | -| - With showToolTipForYAxisLabels set to “true” | Should show Y axis labels tooltip correctly | Enzyme | -| - With showYAxisLabels set to “true” | Should show Y axis titles properly | Enzyme | -| Test 2: Basic props testing | | | -| - HideTooltip prop set to “true” | Should not mount callout when hideTootip is true | Enzyme | -| - HideTooltip prop set to “false” | Should mount callout when hideTootip is false | Enzyme | -| - With HideLegend prop set to “true” | Should hide legends | Enzyme | -| - With HideLegend prop set to “false” | Should display legends | Enzyme | -| - HideLabels prop set to “true” | Should not render bar labels when hideLabels is true | RTL | -| Test 3: Render calling with respective to props | | | -| - No prop changes: Mount HorizontalBarChartWithAxis and then set the same props again | Render function should have been called twice | Enzyme | -| - Prop changes: Mount HorizontalBarChartWithAxis chart and then set some other prop | Render function should have been called twice | Enzyme | -| Test 4: Mouse events | | | -| - Mouse over on a bar | Should render callout correctly on mouseover | Enzyme | -| - Mouse move from one bar to other bar | Should render callout correctly on mouse move | RTL | -| - Mouse over on a bar with customized callout | Should render customized callout on mouseover | RTL | -| Test 5: [Sub-Component]: Bar | | | -| - Specify bar color | Should render bar with the specified color | RTL | -| - With single color | Should render all the bars with same color | RTL | -| - setbarHeight to “x” | Should render bars with specified height | RTL | -| Test 6: [Sub-Component]: Legend | | | -| - Hover mouse over bar legends | Should highlight the corresponding bar on mouse over on legend | RTL | -| - Mouse leave on legends | Should reset the highlighted bar on mouse leave on legends | RTL | -| - Single mouse click on legends | Should select legend on single mouse click on respective legend | RTL | -| - Double mouse click on legends | Should deselect legend on double mouse click on respective legend | RTL | -| Test 7: [Sub-Component]: Callout | | | -| - Hover mouse over a bar | Should call the handler on mouse over bar | RTL | -| - Hover mouse over a bar to display callout | Should show the default callout over that bar | RTL | -| - Specify custom callout and hover mouse over a bar | Should show the custom callout over that bar | RTL | -| - Specify numeric axis data to display in callout | Should show the callout with axis data on it | RTL | -| - Specify string yaxis data and numeric xaxis data to display it in callout | Should show the callout data based on axis data | RTL | -| Test 8: [Sub-Component]: Labels | | | -| - Set showYAxisLabelTooTip to “true” and mouse hover on Yaxis label | Should show y axis tooltip when mouse hover on it | RTL | -| - Set showYAxisLabels to “true” | Should show y axis labels data without truncating | RTL | -| Test 9: [Sub-Component]: Screen resolution | | | -| - Increase the screen resolution (zoom in) | Should remain unchanged on zoom in | RTL | -| - Decrease the screen resolution (zoom out) | Should remain unchanged on zoom out | RTL | -| Test 10: Theme changed to Dark Theme | Should reflect theme change | RTL | diff --git a/packages/react-charting/src/components/HorizontalBarChartWithAxis/HorizontalBarChartWithAxisRTL.test.tsx b/packages/react-charting/src/components/HorizontalBarChartWithAxis/HorizontalBarChartWithAxisRTL.test.tsx deleted file mode 100644 index e418bbcac01f9..0000000000000 --- a/packages/react-charting/src/components/HorizontalBarChartWithAxis/HorizontalBarChartWithAxisRTL.test.tsx +++ /dev/null @@ -1,463 +0,0 @@ -import { render, screen, fireEvent, act } from '@testing-library/react'; -import * as React from 'react'; -import { DarkTheme } from '@fluentui/theme-samples'; -import { ThemeProvider } from '@fluentui/react'; -import { DefaultPalette } from '@fluentui/react/lib/Styling'; -import { HorizontalBarChartWithAxis } from './HorizontalBarChartWithAxis'; -import { getByClass, getById, testWithWait, testWithoutWait } from '../../utilities/TestUtility.test'; -import { HorizontalBarChartWithAxisBase } from './HorizontalBarChartWithAxis.base'; -import { IHorizontalBarChartWithAxisDataPoint } from '../../HorizontalBarChart'; - -const chartPoints: IHorizontalBarChartWithAxisDataPoint[] = [ - { - x: 10000, - y: 5000, - legend: 'Oranges', - color: DefaultPalette.accent, - yAxisCalloutData: '2020/04/30', - xAxisCalloutData: '10%', - }, - { - x: 20000, - y: 50000, - legend: 'Grapes', - color: DefaultPalette.blueDark, - yAxisCalloutData: '2020/04/30', - xAxisCalloutData: '20%', - }, - { - x: 25000, - y: 30000, - legend: 'Apples', - color: DefaultPalette.blueMid, - yAxisCalloutData: '2020/04/30', - xAxisCalloutData: '37%', - }, - - { - x: 40000, - y: 13000, - legend: 'Bananas', - color: DefaultPalette.blueLight, - yAxisCalloutData: '2020/04/30', - xAxisCalloutData: '88%', - }, -]; - -const chartPointsWithStringYAxis: IHorizontalBarChartWithAxisDataPoint[] = [ - { - y: 'String One', - x: 1000, - color: DefaultPalette.accent, - }, - { - y: 'String Two', - x: 5000, - color: DefaultPalette.blueDark, - }, - { - y: 'String Three', - x: 3000, - color: DefaultPalette.blueMid, - }, - { - y: 'String Four', - x: 2000, - color: DefaultPalette.blue, - }, -]; - -const chartPointsWithAxisToolTip: IHorizontalBarChartWithAxisDataPoint[] = [ - { - x: 1000, - y: 1000, - color: DefaultPalette.accent, - }, - { - x: 2000, - y: 5000, - color: DefaultPalette.blueDark, - }, - { - x: 3000, - y: 3000, - color: DefaultPalette.blueMid, - }, - { - x: 4000, - y: 2000, - color: DefaultPalette.blue, - }, -]; - -describe('Horizontal bar chart with axis rendering', () => { - testWithoutWait( - 'Should render the Horizontal bar chart with axis with numaric yaxis data', - HorizontalBarChartWithAxis, - { data: chartPoints }, - container => { - // Assert - expect(container).toMatchSnapshot(); - }, - ); - - testWithoutWait( - 'Should render the Horizontal bar chart with axis with string yaxis data', - HorizontalBarChartWithAxis, - { data: chartPointsWithStringYAxis }, - container => { - // Assert - expect(container).toMatchSnapshot(); - }, - ); -}); - -describe('Horizontal bar chart with axis - Subcomponent bar', () => { - testWithWait( - 'Should render the bars with the specified colors', - HorizontalBarChartWithAxis, - { data: chartPoints }, - container => { - // colors mentioned in the data points itself - // Assert - const bars = screen.getAllByText((content, element) => element!.tagName.toLowerCase() === 'rect'); - expect(bars).toHaveLength(4); - expect(bars[0].getAttribute('fill')).toEqual('#002050'); - expect(bars[1].getAttribute('fill')).toEqual('#00188f'); - expect(bars[2].getAttribute('fill')).toEqual('#00bcf2'); - expect(bars[3].getAttribute('fill')).toEqual('#0078d4'); - }, - ); - - testWithWait( - 'Should render the bars with the single color', - HorizontalBarChartWithAxis, - { data: chartPoints, useSingleColor: true }, - container => { - // colors mentioned in the data points itself - // Assert - const bars = screen.getAllByText((content, element) => element!.tagName.toLowerCase() === 'rect'); - expect(bars).toHaveLength(4); - expect(bars[0].getAttribute('fill')).toEqual('#e3008c'); - expect(bars[1].getAttribute('fill')).toEqual('#e3008c'); - expect(bars[2].getAttribute('fill')).toEqual('#e3008c'); - expect(bars[3].getAttribute('fill')).toEqual('#e3008c'); - }, - ); - - testWithWait( - 'Should render the bar with the given height', - HorizontalBarChartWithAxis, - { data: chartPoints, barHeight: 50 }, - container => { - // Assert - const bars = screen.getAllByText((content, element) => element!.tagName.toLowerCase() === 'rect'); - expect(bars).toHaveLength(4); - expect(bars[0].getAttribute('height')).toEqual('50'); - expect(bars[1].getAttribute('height')).toEqual('50'); - expect(bars[2].getAttribute('height')).toEqual('50'); - expect(bars[3].getAttribute('height')).toEqual('50'); - }, - ); -}); - -describe('Horizontal bar chart with axis- Subcomponent Legends', () => { - testWithoutWait( - 'Should not show any rendered legends when hideLegend is true', - HorizontalBarChartWithAxis, - { data: chartPoints, hideLegend: true }, - container => { - // Assert - // Legends have 'rect' as a part of their classname - expect(getByClass(container, /legend/i)).toHaveLength(0); - }, - ); - - testWithWait( - 'Should reduce the opacity of the other bars on mouse over a bar legend', - HorizontalBarChartWithAxis, - { data: chartPoints }, - async container => { - const legends = screen.getAllByText((content, element) => element!.tagName.toLowerCase() === 'button'); - fireEvent.mouseOver(legends[0]); - await new Promise(resolve => setTimeout(resolve)); - const bars = screen.getAllByText((content, element) => element!.tagName.toLowerCase() === 'rect'); - // Assert - expect(bars).toHaveLength(4); - expect(bars[0]).toHaveStyle('opacity: 0.1'); - expect(bars[1]).toHaveStyle('opacity: 0.1'); - expect(bars[2]).toHaveStyle('opacity: 0.1'); - expect(bars[3]).not.toHaveAttribute('opacity'); - }, - ); - - testWithWait( - 'Should reset the opacity of the bars on mouse leave a bar legend', - HorizontalBarChartWithAxis, - { data: chartPoints }, - async container => { - // Arrange - const legends = screen.getAllByText((content, element) => element!.tagName.toLowerCase() === 'button'); - fireEvent.mouseOver(legends![0]); - await new Promise(resolve => setTimeout(resolve)); - fireEvent.mouseLeave(legends![0]); - await new Promise(resolve => setTimeout(resolve)); - const bars = screen.getAllByText((content, element) => element!.tagName.toLowerCase() === 'rect'); - // Assert - expect(bars[0]).not.toHaveAttribute('opacity'); - expect(bars[1]).not.toHaveAttribute('opacity'); - expect(bars[2]).not.toHaveAttribute('opacity'); - expect(bars[3]).not.toHaveAttribute('opacity'); - }, - ); - - testWithWait( - 'Should select legend on single mouse click on legends', - HorizontalBarChartWithAxis, - { data: chartPoints }, - container => { - const legends = screen.getAllByText((content, element) => element!.tagName.toLowerCase() === 'button'); - fireEvent.click(legends![1]); - const legendsAfterClickEvent = screen.getAllByText( - (content, element) => element!.tagName.toLowerCase() === 'button', - ); - // Assert - expect(legendsAfterClickEvent[0]).toHaveAttribute('aria-selected', 'false'); - expect(legendsAfterClickEvent[1]).toHaveAttribute('aria-selected', 'true'); - expect(legendsAfterClickEvent[2]).toHaveAttribute('aria-selected', 'false'); - expect(legendsAfterClickEvent[3]).toHaveAttribute('aria-selected', 'false'); - }, - ); - - testWithWait( - 'Should deselect legend on double mouse click on legends', - HorizontalBarChartWithAxis, - { data: chartPoints }, - container => { - const legends = screen.getAllByText((content, element) => element!.tagName.toLowerCase() === 'button'); - fireEvent.click(legends![1]); - fireEvent.click(legends![1]); - const legendsAfterClickEvent = screen.getAllByText( - (content, element) => element!.tagName.toLowerCase() === 'button', - ); - // Assert - expect(legendsAfterClickEvent[0]).toHaveAttribute('aria-selected', 'false'); - expect(legendsAfterClickEvent[1]).toHaveAttribute('aria-selected', 'false'); - expect(legendsAfterClickEvent[2]).toHaveAttribute('aria-selected', 'false'); - expect(legendsAfterClickEvent[3]).toHaveAttribute('aria-selected', 'false'); - }, - ); -}); - -describe('Horizontal bar chart with axis - Subcomponent callout', () => { - testWithWait( - 'Should call the handler on mouse over bar and on mouse leave from bar', - HorizontalBarChartWithAxis, - { data: chartPoints, calloutProps: { doNotLayer: true } }, - container => { - // eslint-disable-next-line - const handleMouseOver = jest.spyOn(HorizontalBarChartWithAxisBase.prototype as any, '_onBarHover'); - const bars = screen.getAllByText((content, element) => element!.tagName.toLowerCase() === 'rect'); - // Assert - expect(bars).toHaveLength(4); - fireEvent.mouseOver(bars[0]); - expect(handleMouseOver).toHaveBeenCalled(); - }, - ); - - testWithWait( - 'Should show the callout over the bar on mouse over', - HorizontalBarChartWithAxis, - { data: chartPoints, calloutProps: { doNotLayer: true } }, - container => { - // Arrange - const bars = screen.getAllByText((content, element) => element!.tagName.toLowerCase() === 'rect'); - fireEvent.mouseOver(bars[0]); - // Assert - expect(getById(container, /toolTipcallout/i)).toBeDefined(); - const xAxisCallOutData = getByClass(container, /calloutContentX/i); - expect(xAxisCallOutData).toBeDefined(); - expect(xAxisCallOutData[0].textContent).toEqual('2020/04/30 '); - }, - ); - - testWithWait( - 'Should show the callout properly when mouse moves from one bar to another bar', - HorizontalBarChartWithAxis, - { data: chartPointsWithStringYAxis, calloutProps: { doNotLayer: true } }, - container => { - // Arrange - const bars = screen.getAllByText((content, element) => element!.tagName.toLowerCase() === 'rect'); - fireEvent.mouseOver(bars[0]); - // Assert - expect(getById(container, /toolTipcallout/i)).toBeDefined(); - const xAxisCallOutData = getByClass(container, /calloutContentX/i); - expect(xAxisCallOutData).toBeDefined(); - expect(xAxisCallOutData[0].textContent).toEqual('String One '); - fireEvent.mouseOver(bars[1]); - const xAxisCallOutDataFoSecondBar = getByClass(container, /calloutContentX/i); - expect(xAxisCallOutDataFoSecondBar).toBeDefined(); - expect(xAxisCallOutDataFoSecondBar[0].textContent).toEqual('String Two '); - }, - ); - - testWithWait( - 'Should show the custom callout over the bar on mouse over', - HorizontalBarChartWithAxis, - { - data: chartPoints, - calloutProps: { doNotLayer: true }, - onRenderCalloutPerDataPoint: (props: IHorizontalBarChartWithAxisDataPoint) => - props ? ( -
-

Custom Callout Content

-
- ) : null, - }, - container => { - const bars = screen.getAllByText((content, element) => element!.tagName.toLowerCase() === 'rect'); - fireEvent.mouseOver(bars[0]); - // Assert - expect(getById(container, /toolTipcallout/i)).toBeDefined(); - expect(screen.queryByText('Custom Callout Content')).not.toBeNull(); - }, - ); - - testWithWait( - 'Should show the callout with axis tooltip data', - HorizontalBarChartWithAxis, - { data: chartPointsWithAxisToolTip, calloutProps: { doNotLayer: true } }, - async container => { - // Arrange - const bars = screen.getAllByText((content, element) => element!.tagName.toLowerCase() === 'rect'); - fireEvent.mouseOver(bars[0]); - await new Promise(resolve => setTimeout(resolve)); - // Assert - expect(getById(container, /toolTipcallout/i)).toBeDefined(); - expect(getByClass(container, /calloutDateTimeContainer/i)).toBeDefined(); - const xAxisCallOutData = getByClass(container, /calloutContentX/i); - expect(xAxisCallOutData).toBeDefined(); - expect(xAxisCallOutData[0].textContent).toEqual('5000 '); - const yAxisCallOutData = getByClass(container, /calloutContentY/i); - expect(yAxisCallOutData).toBeDefined(); - expect(yAxisCallOutData[0].textContent).toEqual('2,000'); - }, - ); - - testWithWait( - 'Should show the callout with string yaxis tooltip data', - HorizontalBarChartWithAxis, - { data: chartPointsWithStringYAxis, calloutProps: { doNotLayer: true } }, - async container => { - // Arrange - const bars = screen.getAllByText((content, element) => element!.tagName.toLowerCase() === 'rect'); - fireEvent.mouseOver(bars[0]); - await new Promise(resolve => setTimeout(resolve)); - // Assert - expect(getById(container, /toolTipcallout/i)).toBeDefined(); - expect(getByClass(container, /calloutDateTimeContainer/i)).toBeDefined(); - const xAxisCallOutData = getByClass(container, /calloutContentX/i); - expect(xAxisCallOutData).toBeDefined(); - expect(xAxisCallOutData[0].textContent).toEqual('String One '); - const yAxisCallOutData = getByClass(container, /calloutContentY/i); - expect(yAxisCallOutData).toBeDefined(); - expect(yAxisCallOutData[0].textContent).toEqual('1,000'); - }, - ); -}); - -describe('Horizontal bar chart with axis - Subcomponent Labels', () => { - testWithWait( - 'Should render the bars with labels hidden', - HorizontalBarChartWithAxis, - { data: chartPoints, hideLabels: true }, - container => { - // Assert - expect(getByClass(container, /barLabel/i)).toHaveLength(0); - }, - ); - - testWithWait( - 'Should show y axis label tooltip when showYAxisLablesTooltip is true', - HorizontalBarChartWithAxis, - { data: chartPointsWithStringYAxis, showYAxisLablesTooltip: true }, - async container => { - await new Promise(resolve => setTimeout(resolve)); - // Assert - expect(getById(container, /showDots/i)).toHaveLength(4); - expect(getById(container, /showDots/i)[0]!.textContent!).toEqual('Stri...'); - }, - ); - - testWithWait( - 'Should expand y axis label when showYAxisLables is true', - HorizontalBarChartWithAxis, - { data: chartPointsWithStringYAxis, showYAxisLables: true }, - async container => { - await new Promise(resolve => setTimeout(resolve)); - // Assert - expect(screen.queryByText('String One')).not.toBeNull(); - expect(screen.queryByText('String Two')).not.toBeNull(); - }, - ); -}); - -describe('Horizontal bar chart with axis - Screen resolution', () => { - beforeEach(() => { - jest.spyOn(global.Math, 'random').mockReturnValue(0.1); - }); - - const originalInnerWidth = global.innerWidth; - const originalInnerHeight = global.innerHeight; - afterEach(() => { - jest.spyOn(global.Math, 'random').mockRestore(); - global.innerWidth = originalInnerWidth; - global.innerHeight = originalInnerHeight; - act(() => { - global.dispatchEvent(new Event('resize')); - }); - }); - - testWithWait( - 'Should remain unchanged on zoom in', - HorizontalBarChartWithAxis, - { data: chartPoints, width: 300, height: 300 }, - container => { - global.innerWidth = window.innerWidth / 2; - global.innerHeight = window.innerHeight / 2; - act(() => { - global.dispatchEvent(new Event('resize')); - }); - // Assert - expect(container).toMatchSnapshot(); - }, - ); - - testWithWait( - 'Should remain unchanged on zoom out', - HorizontalBarChartWithAxis, - { data: chartPoints, width: 300, height: 300 }, - container => { - global.innerWidth = window.innerWidth * 2; - global.innerHeight = window.innerHeight * 2; - act(() => { - global.dispatchEvent(new Event('resize')); - }); - // Assert - expect(container).toMatchSnapshot(); - }, - ); -}); - -describe('Horizontal bar chart with axis - Theme', () => { - test('Should reflect theme change', () => { - // Arrange - const { container } = render( - - - , - ); - // Assert - expect(container).toMatchSnapshot(); - }); -}); diff --git a/packages/react-charting/src/components/HorizontalBarChartWithAxis/__snapshots__/HorizontalBarChartWithAxisRTL.test.tsx.snap b/packages/react-charting/src/components/HorizontalBarChartWithAxis/__snapshots__/HorizontalBarChartWithAxisRTL.test.tsx.snap deleted file mode 100644 index 64c975a7fd611..0000000000000 --- a/packages/react-charting/src/components/HorizontalBarChartWithAxis/__snapshots__/HorizontalBarChartWithAxisRTL.test.tsx.snap +++ /dev/null @@ -1,2623 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`Horizontal bar chart with axis - Screen resolution Should remain unchanged on zoom in 1`] = ` -
- -
-`; - -exports[`Horizontal bar chart with axis - Screen resolution Should remain unchanged on zoom out 1`] = ` -
- -
-`; - -exports[`Horizontal bar chart with axis - Theme Should reflect theme change 1`] = ` -
-
- -
-
-`; - -exports[`Horizontal bar chart with axis rendering Should render the Horizontal bar chart with axis with numaric yaxis data 1`] = ` -
- -
-`; - -exports[`Horizontal bar chart with axis rendering Should render the Horizontal bar chart with axis with string yaxis data 1`] = ` -
- -
-`;