Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Vertical Bar Chart - Component tests #28013

Merged
merged 19 commits into from
Jul 11, 2023
Merged

Vertical Bar Chart - Component tests #28013

Show file tree
Hide file tree
Changes from 8 commits
Commits
Show all changes
19 commits
Select commit Hold shift + click to select a range
b9c6b44
Adding component tests for vertical bar chart
srmukher May 26, 2023
0bc56ce
Merge branch 'master' of https://github.com/microsoft/fluentui into u…
srmukher May 26, 2023
1036fd4
Adding the component test plan for vertical bar chart
srmukher May 26, 2023
6cb259c
Adding the component test plan for vertical bar chart
srmukher May 26, 2023
42f17ea
Change file
srmukher May 26, 2023
932dd00
Merge branch 'users/srmukher/ComponentTestsVBC' of https://github.com…
srmukher May 26, 2023
aa54a5c
Merge branch 'master' of https://github.com/microsoft/fluentui into u…
srmukher May 26, 2023
6c75c00
Merge branch 'master' of https://github.com/microsoft/fluentui into u…
srmukher May 29, 2023
5ee2683
Update tests
srmukher Jun 1, 2023
4682cb3
Adding peer dependency for fixing build error
srmukher Jun 1, 2023
0d85104
Merging master
srmukher Jun 1, 2023
8c2859a
Refactored the tests
srmukher Jun 2, 2023
db3af23
Added test utility
srmukher Jun 4, 2023
9db4484
Resolving PR comments
srmukher Jul 7, 2023
932d5e8
Merging master
srmukher Jul 10, 2023
3afe902
Merging master
srmukher Jul 11, 2023
5ecbf43
Updating typo
srmukher Jul 11, 2023
0b88330
Merging master
srmukher Jul 11, 2023
2f6418b
Fixing build errors
srmukher Jul 11, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions change/@fluentui-react-charting-1ff12240-f722-4a36-a1d7-9aa7f5fcd495.json
View file
Open in desktop
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"
}
67 changes: 67 additions & 0 deletions packages/react-charting/docs/TestPlans/VerticalBarChart/ComponentTests.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,67 @@
**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 |
srmukher marked this conversation as resolved.
Show resolved Hide resolved
| - 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 given | Should not render onRenderCalloutPerDataPoint | Enzyme |
srmukher marked this conversation as resolved.
Show resolved Hide resolved
| 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 | | |
| - No prop changes: Mount vertical bar chart with non-empty data and then set the same props again | Render function should have been called twice | Enzyme |
srmukher marked this conversation as resolved.
Show resolved Hide resolved
| - 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 |
| - Hover mouse over the line | Should show the default callout over that line | RTL |
srmukher marked this conversation as resolved.
Show resolved Hide resolved
| - 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 |
2 changes: 2 additions & 0 deletions packages/react-charting/src/components/VerticalBarChart/VerticalBarChart.base.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -239,6 +239,7 @@ export class VerticalBarChartBase extends React.Component<IVerticalBarChartProps
if (lineBorderWidth > 0) {
line.push(
<path
key={getId('_VBC_line_')}
opacity={shouldHighlight ? 1 : 0.1}
d={linePath(lineData)!}
fill="transparent"
Expand All @@ -250,6 +251,7 @@ export class VerticalBarChartBase extends React.Component<IVerticalBarChartProps
}
line.push(
<path
key={getId('_VBC_line_')}
opacity={shouldHighlight ? 1 : 0.1}
d={linePath(lineData)!}
fill="transparent"
Expand Down
2 changes: 1 addition & 1 deletion packages/react-charting/src/components/VerticalBarChart/VerticalBarChart.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ function sharedAfterEach() {
}
}

const chartPoints = [
export const chartPoints = [
{
x: 0,
y: 10000,
Expand Down
Loading
Loading