Skip to content

Commit

Permalink
Vertical Bar Chart - Component tests (#28013)
Browse files Browse the repository at this point in the history 
* Adding component tests for vertical bar chart

* Adding the component test plan for vertical bar chart

* Adding the component test plan for vertical bar chart

* Change file

* Update tests

* Adding peer dependency for fixing build error

* Refactored the tests

* Added test utility

* Resolving PR comments

* Updating typo

* Fixing build errors
  • Loading branch information
@srmukher
srmukher committed Jul 11, 2023
1 parent 8d1440d commit 9c0267d
Show file tree
Hide file tree
Showing 9 changed files with 2,847 additions and 19 deletions.
7 changes: 7 additions & 0 deletions change/@fluentui-react-charting-1ff12240-f722-4a36-a1d7-9aa7f5fcd495.json
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{
"type": "none",
"comment": "Added component tests for Vertical bar chart",
"packageName": "@fluentui/react-charting",
"email": "srmukher@microsoft.com",
"dependentChangeType": "none"
}
13 changes: 13 additions & 0 deletions packages/react-charting/docs/TestPlans/TestingGuide.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
This document highlights few common testing practices for any new tests that are being added to the charting library.

1. Any new test should always be added using React Testing Library.
2. The utility functions like `testWithoutWait`, `testWithWait` and `testScreenResolutionChanges` can be used in writing the component tests which will reduce the number of lines of code.
3. `testWithWait` is needed when we are either trying to provide any prop and update or we are trying to extract any sub-sub svg element like bars within the vertical bar chart.
4. Order of imports is important while writing tests. Following is an example:
Importing the test data before importing the render function from the '@testing-library/react' results in erroneous rendering of the chart.
For example: for Vertical bar charts, improper sequencing of the imports results in the following output:
`import { chartPoints } from '../VerticalBarChart/VerticalBarChart.test';`
`import { render, screen, queryAllByAttribute, fireEvent, act } from '@testing-library/react';`
However, reordering the import sequence results in the correct rendering as follows:
`import { render, screen, queryAllByAttribute } from '@testing-library/react';`
`import { chartPoints } from './VerticalBarChart.test';`
65 changes: 65 additions & 0 deletions packages/react-charting/docs/TestPlans/VerticalBarChart/ComponentTests.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,65 @@
**Vertical Bar Chart – Component test plan**

**Sub-components: Bar, Line, Legends, Callout, Labels**

1. **Bar: bar data, bar color (single/multi colors), bar label (show/hide)**
1. **Line: show/hide line, highlight data point on line and show callout**
1. **Legends: show/hide legends, highlight the corresponding bar/line on legend hover**
1. **Callout: Default/custom callout**
1. **Labels: x-Axis labels default/rotated**

| **Test steps** | **Validation** | **Tool used** |
| :-----------------------------------------------------------------------------: | :------------------------------------------------------------------------------------------------------------------------------------: | :-----------: |
| Test 1: [Snapshot testing] | | |
| - With only data prop, numerical data on x-axis. | Renders vertical bar chart correctly | Enzyme |
| - With only data prop, string data on x-axis. | Renders vertical bar chart correctly | RTL |
| - With HideLegend prop set to “true” | Should hide legends | Enzyme |
| - With HideTooltip prop set to “true” | Should hide the tooltip in chart | Enzyme |
| - With EnabledLegendsWrapLines set to “true” | Should enable the legends to wrap lines if there is not enough space to show all legends on a single line | Enzyme |
| - With ShowXAxisLablesTooltip set to “true” | Should truncate x axis labels and show tooltip on x axis labels | Enzyme |
| - With WrapXAxisLables set to “true” | Should wrap x axis label values | Enzyme |
| - With yAxisTickFormat set to “%d” | <p>Should render the y-axis ticks in the format specified</p><p></p> | Enzyme |
| - With HideLabels set to “true” | Should hide the bar labels | Enzyme |
| Test 2: Basic props testing | | |
| - HideLegend prop set to “false” | Should mount legend when hideLegend is false | Enzyme |
| - HideTooltip prop set to “false” | Should mount callout when hideTootip is false | Enzyme |
| - onRenderCalloutPerStack prop is not given | Should not render onRenderCalloutPerStack | Enzyme |
| - onRenderCalloutPerDataPoint is given | Should render onRenderCalloutPerDataPoint | Enzyme |
| - onRenderCalloutPerDataPoint is not given | Should not render onRenderCalloutPerDataPoint | Enzyme |
| Test 3: Render calling with respective to props | | |
| - No prop changes: Mount vertical bar chart and then set the same props again | Render function should have been called twice | Enzyme |
| - Prop changes: Mount vertical bar chart and then set the 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 over on a bar with customized callout | Should render customized callout on mouseover | Enzyme |
| Test 5: Render empty chart aria label div when chart is empty | | |
| - Vertical bar chart mounted with non-empty data | No empty chart aria label div rendered | Enzyme |
| - Vertical bar chart mounted with empty data | Empty chart aria label div rendered | Enzyme |
| Test 6: Render empty chart calling with respective to props | | |
| - prop changes: Mount vertical bar chart with empty data and then set the props | Render function should have been called 3 times | Enzyme |
| Test 7: [Sub-Component]: Vertical Bar | | |
| - Specify bar width | Should render the bar with the given width | RTL |
| - Specify bar colors (multiple) | Should render the bars with the specified colors | RTL |
| - Specify to use a single color for all bars | Should render the bars with the single specified color | RTL |
| - Hide the bar labels | Should render the bars with labels hidden | RTL |
| - Provide xAxisPadding between the bars | Should render the bars with the given padding between bar's or lines in the graph | E2E |
| - Localize the numbers of the bars with a given culture | Should render the bars with the numbers localized in the given culture | E2E |
| Test 8: [Sub-Component]: Line | | |
| - Specify line data | Should render line with the data provided | RTL |
| - Hover mouse over the data points | Should highlight the data points (No callout is rendered when we hover only on the line. Callout appears on hover over the bars only.) | RTL |
| Test 9: [Sub-Component]: Legends | | |
| - Hide legends | Should not show any rendered legends | RTL |
| - Hover mouse over bar legends | Should reduce the opacity of the other bars/lines and their legends | RTL |
| - Hover mouse over line legends | Should reduce the opacity of the other bars/lines and their legends | RTL |
| Test 10: [Sub-Component]: Callout | | |
| - Hover mouse over a bar | Should call the handler on mouse over bar | RTL |
| - Hover mouse over a bar | 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 custom callout and hover mouse over the line | Should not show the custom callout over that line as custom callout is rendered only on mouse over on the bars. | RTL |
| Test 11: [Sub-Component]: x-axis labels | | |
| - Truncate x-axis labels | Should show the x-axis labels tooltip when hovered | RTL |
| - Rotate x-axis labels | Should rotate the x-axis labels by 45 degrees | RTL |
| Test 12: [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 13: Theme changed to Dark Theme | Should reflect theme change | RTL |
1 change: 1 addition & 0 deletions packages/react-charting/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -65,6 +65,7 @@
},
"peerDependencies": {
"@fluentui/react": "^8.110.8",
"@testing-library/react": "12.1.2",
"@types/react": ">=16.8.0 <19.0.0",
"@types/react-dom": ">=16.8.0 <19.0.0",
"react": ">=16.8.0 <19.0.0",
Expand Down
7 changes: 7 additions & 0 deletions packages/react-charting/src/components/VerticalBarChart/VerticalBarChart.base.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -232,6 +232,8 @@ export class VerticalBarChartBase extends React.Component<IVerticalBarChartProps
if (lineBorderWidth > 0) {
line.push(
<path
key={getId('_VBC_line_')}
id={getId('_VBC_line_')}
opacity={shouldHighlight ? 1 : 0.1}
d={linePath(lineData)!}
fill="transparent"
Expand All @@ -243,6 +245,8 @@ export class VerticalBarChartBase extends React.Component<IVerticalBarChartProps
}
line.push(
<path
key={getId('_VBC_line_')}
id={getId('_VBC_line_')}
opacity={shouldHighlight ? 1 : 0.1}
d={linePath(lineData)!}
fill="transparent"
Expand All @@ -266,6 +270,7 @@ export class VerticalBarChartBase extends React.Component<IVerticalBarChartProps
return (
<circle
key={index}
id={getId('_VBC_point_')}
cx={!isNumericAxis ? xBarScale(item.x) + 0.5 * xBarScale.bandwidth() : xScale(item.x)}
cy={item.useSecondaryYScale && yScaleSecondary ? yScaleSecondary(item.y) : yScale(item.y)}
onMouseOver={this._onBarHover.bind(this, item.point, colorScale(item.y))}
Expand Down Expand Up @@ -537,6 +542,7 @@ export class VerticalBarChartBase extends React.Component<IVerticalBarChartProps
return (
<g key={point.x}>
<rect
id={getId('_VBC_bar_')}
x={xPoint}
className={this._classNames.opacityChangeOnHover}
y={yPoint}
Expand Down Expand Up @@ -596,6 +602,7 @@ export class VerticalBarChartBase extends React.Component<IVerticalBarChartProps
return (
<g key={point.x} transform={`translate(${0.5 * (xBarScale.bandwidth() - this._barWidth)}, 0)`}>
<rect
id={getId('_VBC_bar_')}
x={xPoint}
y={yPoint}
width={this._barWidth}
Expand Down
Loading

0 comments on commit 9c0267d

Please sign in to comment.