ComponentTests
Stacked Bar Chart – Component test plan
Sub-components: Bar, Legends, Callout, Benchmark
- Bar: bar data, bar background color
- Legends: show/hide legends, highlight the corresponding bar on legend hover
- Callout: Default/custom callout
- Benchmark: Show benchmark
- Screen resolution changes, theme changes
| Test steps | Validation | Tool used |
|---|---|---|
| Test 1: [Snapshot testing] | ||
| - With only data prop, non-empty data | Renders stacked bar chart correctly | Enzyme |
| - With empty data | Renders stacked 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 HideNumberDisplay set to “true” | Should not show number/ratio on top of bar | Enzyme |
| - With HideDenominator set to “true” | Should not show the denominator for the ratio above the chart | Enzyme |
| - With IgnoreFixStyle set to “true” | Should ignore the fixed display pattern for less than 2 data points 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 |
| 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 |
| - HideDenominator set to “false” | Should not mount callout | 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 |
| - Mouse move on a bar | Should render callout correctly on mousemove | Enzyme |
| Test 5: Render empty chart aria label div when chart is empty | ||
| - Stacked bar chart mounted with non-empty data | No empty chart aria label div rendered | Enzyme |
| - Stacked bar chart mounted with empty data | Empty chart aria label div rendered | Enzyme |
| Test 6: [Sub-Component]: Stacked Bar | ||
| - Specify bar height | Should render the bar with the given height | RTL |
| - Specify bar background color | Should render the empty bars with the specified color | RTL |
| - Localize the numbers of the bars with a given culture | Should render the bars with the numbers localized in the given culture | E2E |
| - Specify the href for the stacked bar | Should redirect to the Url to upon clicking on the stacked bar chart | E2E |
| - Specify data with only one single data point | Should render the number on top of the bar with only one data point | RTL |
| - Specify data with two data points | Should render the ratio on top of the bar with only two data points | RTL |
| - Specify data with more than two data points | Should not render the ratio on top of the bar with data points count greater than two | RTL |
| - Specify target data prop | Should render a coloured arrow on top when target data is specified | RTL |
| - Specify chartDataAccessibilityData prop when data contains two data points | Should enable chartDataAccessibilityData prop only if ratio or numbers are enabled to be shown | RTL |
| Test 7: [Sub-Component]: Benchmarking | ||
| - Specify the benchmark data point | Should render the benchmark triangle | RTL |
| Test 8: [Sub-Component]: Legends | ||
| - Hover mouse over bar legends | Should reduce the opacity of the other bars/lines and their legends | RTL |
| - Hover mouse over benchmark legends | Should not reduce the opacity of the other bars/lines and their legends | RTL |
| - Mouse out from a bar legend | Should change the opacity of the other bars and their legends on mouse out action from a bar legend | RTL |
| - Click on a bar legend | Should reduce the opacity of the other bars and their legends on mouse click a bar legend | RTL |
| - Legends overflow scenario | Overflow button should contain the additional legends | E2E |
| - Specify placeholder as true for a data point | Should not show legend if data is marked as placeholder | RTL |
| Test 9: [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 |
| Test 10: [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 11: Theme changed to Dark Theme | Should reflect theme change | RTL |