Add tests for hover states #24390

krkshitij · 2022-08-16T18:35:39Z

Current Behavior

Tests for hover states do not exist

New Behavior

Tests if hovering over the charts renders a callout correctly

codesandbox-ci · 2022-08-16T18:44:45Z

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit cc08b01:

Sandbox	Source
@fluentui/react 8 starter	Configuration
@fluentui/react-components 9 starter	Configuration

size-auditor · 2022-08-16T18:53:00Z

Asset size changes

Size Auditor did not detect a change in bundle size for any component!

Baseline commit: 9e86978c43db785ec3f40ee9e0bd35693e26189d (build)

fabricteam · 2022-08-16T18:54:29Z

Perf Analysis (`@fluentui/react-components`)

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations
Avatar	mount	1300	1312	5000
Button	mount	952	958	5000
FluentProvider	mount	1593	1593	5000
FluentProviderWithTheme	mount	641	637	10
FluentProviderWithTheme	virtual-rerender	591	602	10
FluentProviderWithTheme	virtual-rerender-with-unmount	626	643	10
MakeStyles	mount	1903	1932	50000
SpinButton	mount	2529	2543	5000

fabricteam · 2022-08-16T18:59:36Z

Perf Analysis (`@fluentui/react-northstar`)

Perf tests with no regressions

Scenario	Current PR Ticks	Baseline Ticks	Ratio
ButtonMinimalPerf.default	177	151	1.17:1
FormMinimalPerf.default	422	378	1.12:1
TreeWith60ListItems.default	173	155	1.12:1
FlexMinimalPerf.default	312	284	1.1:1
PortalMinimalPerf.default	180	163	1.1:1
ToolbarMinimalPerf.default	961	886	1.08:1
IconMinimalPerf.default	683	637	1.07:1
DropdownManyItemsPerf.default	714	675	1.06:1
ImageMinimalPerf.default	383	360	1.06:1
ListWith60ListItems.default	649	610	1.06:1
ChatDuplicateMessagesPerf.default	309	293	1.05:1
SegmentMinimalPerf.default	353	337	1.05:1
LayoutMinimalPerf.default	361	346	1.04:1
ListMinimalPerf.default	517	496	1.04:1
RefMinimalPerf.default	216	207	1.04:1
SkeletonMinimalPerf.default	353	338	1.04:1
SliderMinimalPerf.default	1716	1655	1.04:1
TextAreaMinimalPerf.default	468	449	1.04:1
AnimationMinimalPerf.default	554	538	1.03:1
ButtonSlotsPerf.default	545	531	1.03:1
DropdownMinimalPerf.default	3278	3194	1.03:1
HeaderSlotsPerf.default	760	736	1.03:1
SplitButtonMinimalPerf.default	4497	4374	1.03:1
DividerMinimalPerf.default	368	361	1.02:1
MenuMinimalPerf.default	855	841	1.02:1
PopupMinimalPerf.default	651	640	1.02:1
TableManyItemsPerf.default	1979	1944	1.02:1
TreeMinimalPerf.default	842	826	1.02:1
AlertMinimalPerf.default	288	284	1.01:1
AttachmentMinimalPerf.default	145	144	1.01:1
ButtonOverridesMissPerf.default	1510	1493	1.01:1
DatepickerMinimalPerf.default	5964	5927	1.01:1
EmbedMinimalPerf.default	4185	4149	1.01:1
InputMinimalPerf.default	1318	1308	1.01:1
ListCommonPerf.default	637	629	1.01:1
ListNestedPerf.default	551	544	1.01:1
RadioGroupMinimalPerf.default	456	450	1.01:1
LabelMinimalPerf.default	391	392	1:1
MenuButtonMinimalPerf.default	1724	1721	1:1
StatusMinimalPerf.default	668	671	1:1
VideoMinimalPerf.default	720	722	1:1
AttachmentSlotsPerf.default	1117	1133	0.99:1
AvatarMinimalPerf.default	194	196	0.99:1
ChatWithPopoverPerf.default	386	390	0.99:1
DialogMinimalPerf.default	763	768	0.99:1
ItemLayoutMinimalPerf.default	1212	1227	0.99:1
ProviderMergeThemesPerf.default	1290	1303	0.99:1
ProviderMinimalPerf.default	397	399	0.99:1
TextMinimalPerf.default	342	346	0.99:1
CustomToolbarPrototype.default	2927	2949	0.99:1
ChatMinimalPerf.default	731	745	0.98:1
CheckboxMinimalPerf.default	2707	2761	0.98:1
HeaderMinimalPerf.default	351	359	0.98:1
TableMinimalPerf.default	396	403	0.98:1
AccordionMinimalPerf.default	144	149	0.97:1
BoxMinimalPerf.default	323	332	0.97:1
CardMinimalPerf.default	543	557	0.97:1
CarouselMinimalPerf.default	466	482	0.97:1
GridMinimalPerf.default	324	333	0.97:1
LoaderMinimalPerf.default	696	720	0.97:1
RosterPerf.default	2091	2160	0.97:1
TooltipMinimalPerf.default	2340	2477	0.94:1
ReactionMinimalPerf.default	357	390	0.92:1

fabricteam · 2022-08-16T19:00:39Z

📊 Bundle size report

Unchanged fixtures

Package & Exports	Size (minified/GZIP)
`global-context` createContext	`533 B` `341 B`
`global-context` createContextSelector	`554 B` `348 B`
`priority-overflow` createOverflowManager	`2.936 kB` `1.212 kB`
`react-accordion` Accordion (including children components)	`79.349 kB` `24.053 kB`
`react-alert` Alert	`83.79 kB` `20.841 kB`
`react-avatar` Avatar	`48.283 kB` `13.644 kB`
`react-avatar` AvatarGroup	`14.85 kB` `5.942 kB`
`react-avatar` AvatarGroupItem	`68.251 kB` `18.987 kB`
`react-badge` Badge	`22.503 kB` `7.153 kB`
`react-badge` CounterBadge	`23.406 kB` `7.449 kB`
`react-badge` PresenceBadge	`23.947 kB` `7.022 kB`
`react-button` Button	`36.396 kB` `9.579 kB`
`react-button` CompoundButton	`43.469 kB` `10.812 kB`
`react-button` MenuButton	`39.014 kB` `10.456 kB`
`react-button` SplitButton	`46.544 kB` `11.84 kB`
`react-button` ToggleButton	`51.91 kB` `11.003 kB`
`react-card` Card - All	`67.458 kB` `19.264 kB`
`react-card` Card	`63.14 kB` `18.176 kB`
`react-card` CardFooter	`8.461 kB` `3.555 kB`
`react-card` CardHeader	`9.504 kB` `3.896 kB`
`react-card` CardPreview	`8.562 kB` `3.61 kB`
`react-combobox` Combobox (including child components)	`72.549 kB` `23.686 kB`
`react-combobox` Dropdown (including child components)	`71.741 kB` `23.559 kB`
`react-components` react-components: Accordion, Button, FluentProvider, Image, Menu, Popover	`188.818 kB` `51.901 kB`
`react-components` react-components: FluentProvider & webLightTheme	`33.19 kB` `10.921 kB`
`react-dialog` Dialog (including children components)	`85.361 kB` `25.458 kB`
`react-divider` Divider	`16.359 kB` `5.853 kB`
`react-image` Image	`10.68 kB` `4.215 kB`
`react-input` Input	`23.498 kB` `7.617 kB`
`react-label` Label	`9.238 kB` `3.815 kB`
`react-link` Link	`12.231 kB` `4.925 kB`
`react-menu` Menu (including children components)	`115.697 kB` `35.316 kB`
`react-menu` Menu (including selectable components)	`118.896 kB` `35.806 kB`
`react-overflow` hooks only	`10.685 kB` `4.104 kB`
`react-popover` Popover	`102.837 kB` `31.496 kB`
`react-portal` Portal	`10.576 kB` `3.875 kB`
`react-positioning` usePositioning	`19.7 kB` `7.404 kB`
`react-provider` FluentProvider	`15.655 kB` `5.835 kB`
`react-radio` Radio	`36.025 kB` `11.914 kB`
`react-radio` RadioGroup	`14.148 kB` `5.654 kB`
`react-select` Select	`20.746 kB` `7.299 kB`
`react-slider` Slider	`32.07 kB` `10.033 kB`
`react-spinbutton` SpinButton	`43.843 kB` `12.336 kB`
`react-spinner` Spinner	`19.855 kB` `6.384 kB`
`react-switch` Switch	`32.562 kB` `10.253 kB`
`react-text` Text - Default	`11.682 kB` `4.561 kB`
`react-text` Text - Wrappers	`14.992 kB` `4.995 kB`
`react-textarea` Textarea	`23.674 kB` `7.83 kB`
`react-theme` Single theme token import	`69 B` `89 B`
`react-theme` Teams: all themes	`29.479 kB` `6.396 kB`
`react-theme` Teams: Light theme	`17.385 kB` `5.024 kB`
`react-tooltip` Tooltip	`41.504 kB` `14.622 kB`
`react-utilities` SSRProvider	`180 B` `159 B`

_{🤖 This report was generated against 9e86978c43db785ec3f40ee9e0bd35693e26189d}

fabricteam · 2022-08-16T19:08:10Z

Perf Analysis (`@fluentui/react`)

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations
BaseButton	mount	749	783	5000
Breadcrumb	mount	2426	2422	1000
Checkbox	mount	2200	2211	5000
CheckboxBase	mount	1955	1908	5000
ChoiceGroup	mount	3955	3950	5000
ComboBox	mount	829	861	1000
CommandBar	mount	9084	9057	1000
ContextualMenu	mount	10550	10464	1000
DefaultButton	mount	955	971	5000
DetailsRow	mount	3222	3242	5000
DetailsRowFast	mount	3245	3180	5000
DetailsRowNoStyles	mount	3104	3090	5000
Dialog	mount	2604	2696	1000
DocumentCardTitle	mount	153	146	1000
Dropdown	mount	2817	2825	5000
FocusTrapZone	mount	1600	1567	5000
FocusZone	mount	1535	1573	5000
IconButton	mount	1478	1481	5000
Label	mount	302	324	5000
Layer	mount	3871	3825	5000
Link	mount	412	404	5000
MenuButton	mount	1238	1231	5000
MessageBar	mount	1807	1835	5000
Nav	mount	2842	2817	1000
OverflowSet	mount	941	939	5000
Panel	mount	2133	2079	1000
Persona	mount	837	858	1000
Pivot	mount	1203	1225	1000
PrimaryButton	mount	1098	1109	5000
Rating	mount	6542	6650	5000
SearchBox	mount	1088	1075	5000
Shimmer	mount	2467	2436	5000
Slider	mount	1649	1646	5000
SpinButton	mount	4580	4252	5000
Spinner	mount	383	381	5000
SplitButton	mount	2662	2690	5000
Stack	mount	435	436	5000
StackWithIntrinsicChildren	mount	1979	1980	5000
StackWithTextChildren	mount	4398	4353	5000
SwatchColorPicker	mount	10107	10150	5000
TagPicker	mount	2218	2235	5000
TeachingBubble	mount	85285	84665	5000
Text	mount	360	360	5000
TextField	mount	1180	1186	5000
ThemeProvider	mount	1093	1098	5000
ThemeProvider	virtual-rerender	642	651	5000
ThemeProvider	virtual-rerender-with-unmount	1738	1722	5000
Toggle	mount	688	694	5000
buttonNative	mount	112	126	5000

AtishayMsft · 2022-08-17T08:24:02Z

packages/react-charting/src/components/AreaChart/AreaChart.base.tsx

+        if (points.length === index) {
+          return;
+        }
+        singleStackedData.forEach((singlePoint: IDPointType, pointIndex: number) => {


Is there a better way than looping through all points here

Other charts dont use isShowCalloutPending state at all. Let me see if there is a better way.

I went through the code again but I am not able to find any better solution because of circleId

AtishayMsft · 2022-08-17T08:27:43Z

packages/react-charting/src/components/CommonComponents/CartesianChart.base.tsx

@@ -487,25 +487,29 @@ export class CartesianChartBase extends React.Component<IModifiedCartesianChartP
        // If there is no legend, need not to allocate some space from total chart space.
        legendContainerHeight = 0;
      } else {
-        const legendContainerComputedStyles = getComputedStyle(this.legendContainer);
+        const legendContainerComputedStyles = this.legendContainer && getComputedStyle(this.legendContainer);


why is this change needed

Otherwise, I got the following error when I used wait after mount:

AtishayMsft · 2022-08-17T08:29:22Z

packages/react-charting/src/components/GroupedVerticalBarChart/GroupedVerticalBarChart.test.tsx

+
+  it('Should render callout on hover', () => {
+    wrapper = mount(<GroupedVerticalBarChart data={chartPoints} calloutProps={{ doNotLayer: true }} />);
+    wrapper.find('rect').at(0).simulate('mouseover');


are you able to simulate mouseover at different x, y coordinates as well

I can simulate mouseover on different rect but not at different x, y coordinates as they depend on the viewport

AtishayMsft · 2022-08-17T08:32:49Z

packages/react-charting/src/components/VerticalBarChart/VerticalBarChart.test.tsx

+      <VerticalBarChart data={chartPoints} calloutProps={{ doNotLayer: true }} enabledLegendsWrapLines />,
+    );
+
+    // Wait for the chart to be resized


why is this wait needed

Without wait, the bars are not rendered because the barHeight stays 0

AtishayMsft · 2022-08-17T08:34:30Z

packages/react-charting/src/components/AreaChart/AreaChart.test.tsx

+    wrapper = mount(<AreaChart data={chartPoints} calloutProps={{ doNotLayer: true }} />, { attachTo: root });
+    wrapper.find('rect').simulate('mouseover');
+    const tree = toJson(wrapper, { mode: 'deep' });
+    expect(tree).toMatchSnapshot();


Also test callout for stack and custom callouts

Try moving the mouse hover and observe the callout changing positions and values.

AtishayMsft · 2022-08-23T05:57:54Z

packages/react-charting/src/components/AreaChart/AreaChart.test.tsx

+      { attachTo: root },
+    );
+    wrapper.find('rect').simulate('mouseover');
+    expect(wrapper.exists('.custom-callout')).toBe(true);


can you match snapshot here

Yes, I can. But the callout will only render a div without props, so should I match snapshot just to check that?

AtishayMsft · 2022-08-23T05:59:44Z

packages/react-charting/src/components/DonutChart/DonutChart.test.tsx

+    wrapper.find('path[id^="_Pie_"]').at(0).simulate('mouseleave');
+    wrapper.find('path[id^="_Pie_"]').at(1).simulate('mousemove');
+    const textContent2 = wrapper.find('.ms-Callout').hostNodes().text();
+    expect(textContent1).not.toBe(textContent2);


Add a comment on what is the expected text

AtishayMsft · 2022-08-23T08:12:01Z

packages/react-charting/src/components/VerticalStackedBarChart/VerticalStackedBarChart.test.tsx

+    );
+    await new Promise(resolve => setTimeout(resolve));
+    wrapper.update();
+    wrapper.find('rect').at(2).simulate('mousemove');


what does 2 and 3 represent

There are multiple rect in the chart, so .at(2) and .at(3) selects the 3rd and 4th rect respectively

Hotell · 2022-08-29T11:06:24Z

packages/react-charting/package.json

@@ -31,7 +31,8 @@
    "@fluentui/react": "^8.91.1",
    "@types/react-addons-test-utils": "0.14.18",
    "@fluentui/scripts": "^1.0.0",
-    "@fluentui/jest-serializer-merge-styles": "^8.0.20"
+    "@fluentui/jest-serializer-merge-styles": "^8.0.20",
+    "enzyme-to-json": "3.6.2"


can you please move this to root package.json devDependency ? we are in the process to adhere to single version policy approach for devDependencies, thus this violates that. ty

yarn.lock

* master: (28 commits) Fix value font-weight inside heatmap chart (microsoft#24726) Fix legend overflow-indication-text role (microsoft#24756) Support custom locale in date axis (microsoft#24753) Cleanup env variables (microsoft#24739) ci(github): add GH Action to add issue labels based on new GH issue template (microsoft#24788) Update disallowedChangeTypes for newly created packages, to allow only 'prerelease' change types by default (microsoft#24763) feat(react-components): Adding missing AvatarGroup exports (microsoft#24770) remove unnecessary nohoist (microsoft#24760) feat(react-dialog): supports 1st rule of ARIA (microsoft#24525) BREAKING: TableCell layouts are handled by layout components (microsoft#24762) feat: Implement table cell layout components (microsoft#24773) applying package updates fix: remove readonly from DetailsList (microsoft#24615) chore: Cleaning up tokens in Button components so they better adhere to the design spec (microsoft#24732) fix: react-combobox listbox popup width matches trigger width (microsoft#24733) fix: react-combobox Option focus outline only shows with keyboard nav (microsoft#24700) feat: Publish react-field package, and export from react-components/unstable (microsoft#24235) fix: Replacing bottom border styles with text decoration underline in Link (microsoft#24734) docs(react-theme): Update readme (microsoft#24755) Add tests for hover states (microsoft#24390) ...

msft-fluent-ui-bot assigned layershifter Aug 16, 2022

AtishayMsft reviewed Aug 17, 2022

View reviewed changes

krkshitij requested a review from AtishayMsft August 19, 2022 14:16

AtishayMsft reviewed Aug 23, 2022

View reviewed changes

krkshitij force-pushed the usr/krkshitij/test-hover-state branch 2 times, most recently from b858e1d to 09cbca0 Compare August 25, 2022 05:42

krkshitij added 12 commits August 25, 2022 11:58

Add test case for AreaChart hover state

7c5d794

Add enzyme-to-json package

d650523

Remove _rectRef

0a82a7a

Add test case for DonutChart hover state

12a9372

Update callout snapshot

c878e09

Add test case for LineChart hover state

640ab3d

Add test case for GroupedBarChart hover state

2c1d88b

Add test case for HeatMapChart hover state

637319a

Add test case for HorizontalBarChart hover state

589749d

Add test case for StackedBarChart hover state

690badc

Add test case for VerticalBarChart hover state

9a7b5db

Add test case for VertStackedBarChart hover state

06fbaa6

krkshitij added 10 commits August 25, 2022 11:58

Mock Math.random()

e91497d

Remove Legends measurement snapshot

ee760fe

Add comments

78d9b93

Add change file

abe3170

Add more test cases

d24adea

Remove duplicate code

d161618

Update snapshots

41aaf48

Replace callout text with complete HTML comparison

cc6ef04

Update Math.random() mock

84da7b8

Update snapshots

131d65b

krkshitij force-pushed the usr/krkshitij/test-hover-state branch from 09cbca0 to 131d65b Compare August 25, 2022 07:49

krkshitij marked this pull request as ready for review August 25, 2022 08:41

krkshitij requested review from a team as code owners August 25, 2022 08:41

AtishayMsft approved these changes Aug 25, 2022

View reviewed changes

tudorpopams requested a review from Hotell August 25, 2022 12:19

Hotell reviewed Aug 29, 2022

View reviewed changes

krkshitij added 2 commits August 29, 2022 18:42

Move dependency to root

380c32b

Update @types/enzyme

cc08b01

krkshitij force-pushed the usr/krkshitij/test-hover-state branch from a15380c to cc08b01 Compare August 29, 2022 18:54

krkshitij requested a review from Hotell August 29, 2022 19:34

Hotell approved these changes Sep 12, 2022

View reviewed changes

AtishayMsft merged commit 8c22e07 into microsoft:master Sep 12, 2022

Hotell mentioned this pull request Sep 15, 2022

test(react-charting): update obsolete snapshots #24808

Merged

krkshitij deleted the usr/krkshitij/test-hover-state branch September 15, 2022 12:34

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add tests for hover states #24390

Add tests for hover states #24390

krkshitij commented Aug 16, 2022

codesandbox-ci bot commented Aug 16, 2022 •

edited

Loading

size-auditor bot commented Aug 16, 2022 •

edited

Loading

fabricteam commented Aug 16, 2022 •

edited

Loading

fabricteam commented Aug 16, 2022 •

edited

Loading

fabricteam commented Aug 16, 2022 •

edited

Loading

fabricteam commented Aug 16, 2022 •

edited

Loading

AtishayMsft Aug 17, 2022

krkshitij Aug 17, 2022

krkshitij Aug 19, 2022

AtishayMsft Aug 17, 2022

krkshitij Aug 17, 2022 •

edited

Loading

AtishayMsft Aug 17, 2022

krkshitij Aug 17, 2022

AtishayMsft Aug 17, 2022

krkshitij Aug 17, 2022

AtishayMsft Aug 17, 2022

AtishayMsft Aug 17, 2022

krkshitij Aug 17, 2022

AtishayMsft Aug 23, 2022

krkshitij Aug 23, 2022

AtishayMsft Aug 23, 2022

krkshitij Aug 23, 2022

AtishayMsft Aug 23, 2022

krkshitij Aug 23, 2022

Hotell Aug 29, 2022

krkshitij Aug 29, 2022

Add tests for hover states #24390

Add tests for hover states #24390

Conversation

krkshitij commented Aug 16, 2022

Current Behavior

New Behavior

codesandbox-ci bot commented Aug 16, 2022 • edited Loading

size-auditor bot commented Aug 16, 2022 • edited Loading

Asset size changes

fabricteam commented Aug 16, 2022 • edited Loading

fabricteam commented Aug 16, 2022 • edited Loading

Perf Analysis (@fluentui/react-northstar)

fabricteam commented Aug 16, 2022 • edited Loading

📊 Bundle size report

fabricteam commented Aug 16, 2022 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

krkshitij Aug 17, 2022 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

codesandbox-ci bot commented Aug 16, 2022 •

edited

Loading

size-auditor bot commented Aug 16, 2022 •

edited

Loading

fabricteam commented Aug 16, 2022 •

edited

Loading

fabricteam commented Aug 16, 2022 •

edited

Loading

Perf Analysis (`@fluentui/react-northstar`)

fabricteam commented Aug 16, 2022 •

edited

Loading

fabricteam commented Aug 16, 2022 •

edited

Loading

krkshitij Aug 17, 2022 •

edited

Loading