test(fluentui/react): fix initial global leaks that were causing OOM issues #27661

Hotell · 2023-04-24T07:41:17Z

Previous Behavior

Both v0 and v8 tests contain memory leaks and consume above 2GB of memory per test !!!

discovered while executing via raw jest instead gulp

A worker process has failed to exit gracefully and has been force exited. This is likely caused by tests leaking due to improper teardown. Try running with --detectOpenHandles to find leaks. Active timers can also cause this, ensure that .unref() was called on them.

New Behavior

some amount of v8 tests leak fixed.

With this PR, test for v8 didn't go over 2GB heap.

Speed metrics:

Run type (node --expose-gc ../../node_modules/.bin/jest --runInBand --logHeapUsage --no-cache )	max heap size (MB)	delta
conformance	2029 MB
fixed leaks attempt 1 + conformance	1954 MB	4%

Related Issue(s)

Fixes partially Epic: road to faster CI/CD #27359
Pre-requirement of ci: migrate to node 16 #27660

…issues

packages/style-utilities/src/styles/theme.test.ts

codesandbox-ci · 2023-04-24T07:53:08Z

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 cd8ba24:

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

packages/style-utilities/src/styles/theme.test.ts

fabricteam · 2023-04-24T07:55:19Z

📊 Bundle size report

Unchanged fixtures

Package & Exports	Size (minified/GZIP)
`react-accordion` Accordion (including children components)	`88.891 kB` `26.6 kB`
`react-alert` Alert	`95.74 kB` `23.13 kB`
`react-avatar` Avatar	`59.494 kB` `15.587 kB`
`react-avatar` AvatarGroup	`18.223 kB` `6.7 kB`
`react-avatar` AvatarGroupItem	`75.719 kB` `20.079 kB`
`react-badge` Badge	`26.099 kB` `7.632 kB`
`react-badge` CounterBadge	`27.084 kB` `7.943 kB`
`react-badge` PresenceBadge	`34.573 kB` `8.739 kB`
`react-button` Button	`39.864 kB` `9.996 kB`
`react-button` CompoundButton	`47.012 kB` `11.471 kB`
`react-button` MenuButton	`44.55 kB` `11.357 kB`
`react-button` SplitButton	`52.961 kB` `12.932 kB`
`react-button` ToggleButton	`58.243 kB` `11.927 kB`
`react-card` Card - All	`86.061 kB` `24.345 kB`
`react-card` Card	`80.997 kB` `22.895 kB`
`react-card` CardFooter	`9.158 kB` `3.844 kB`
`react-card` CardHeader	`11.048 kB` `4.538 kB`
`react-card` CardPreview	`9.963 kB` `4.192 kB`
`react-checkbox` Checkbox	`37.083 kB` `11.285 kB`
`react-combobox` Combobox (including child components)	`89.775 kB` `28.537 kB`
`react-combobox` Dropdown (including child components)	`88.459 kB` `28.262 kB`
`react-components` react-components: Button, FluentProvider & webLightTheme	`67.986 kB` `18.429 kB`
`react-components` react-components: Accordion, Button, FluentProvider, Image, Menu, Popover	`207.27 kB` `57.634 kB`
`react-components` react-components: FluentProvider & webLightTheme	`38.773 kB` `12.375 kB`
`react-datepicker-compat` DatePicker Compat	`223.13 kB` `58.944 kB`
`react-dialog` Dialog (including children components)	`93.747 kB` `27.527 kB`
`react-divider` Divider	`20.072 kB` `6.742 kB`
`react-field` Field	`21.537 kB` `7.454 kB`
`react-image` Image	`14.067 kB` `5.012 kB`
`react-infobutton` InfoButton	`130.761 kB` `39.509 kB`
`react-infobutton` InfoLabel	`133.987 kB` `40.517 kB`
`react-input` Input	`26.806 kB` `8.151 kB`
`react-label` Label	`12.693 kB` `4.626 kB`
`react-link` Link	`12.357 kB` `5.091 kB`
`react-menu` Menu (including children components)	`131.068 kB` `39.705 kB`
`react-menu` Menu (including selectable components)	`134.074 kB` `40.243 kB`
`react-persona` Persona	`66.426 kB` `17.533 kB`
`react-popover` Popover	`117.744 kB` `35.886 kB`
`react-portal` Portal	`11.649 kB` `4.263 kB`
`react-portal-compat` PortalCompatProvider	`6.446 kB` `2.185 kB`
`react-progress` ProgressBar	`16.445 kB` `5.865 kB`
`react-provider` FluentProvider	`20.72 kB` `7.14 kB`
`react-radio` Radio	`29.897 kB` `9.112 kB`
`react-radio` RadioGroup	`13.984 kB` `5.154 kB`
`react-select` Select	`28.03 kB` `9.235 kB`
`react-slider` Slider	`36.947 kB` `11.506 kB`
`react-spinbutton` SpinButton	`36.718 kB` `10.802 kB`
`react-spinner` Spinner	`23.498 kB` `7.244 kB`
`react-switch` Switch	`32.503 kB` `9.732 kB`
`react-table` DataGrid	`150.617 kB` `41.075 kB`
`react-table` Table (Primitives only)	`47.03 kB` `12.784 kB`
`react-table` Table as DataGrid	`133.181 kB` `33.644 kB`
`react-table` Table (Selection only)	`81.092 kB` `19.641 kB`
`react-table` Table (Sort only)	`80.422 kB` `19.453 kB`
`react-text` Text - Default	`15.08 kB` `5.353 kB`
`react-text` Text - Wrappers	`15.63 kB` `5.25 kB`
`react-textarea` Textarea	`30.235 kB` `9.521 kB`
`react-tooltip` Tooltip	`49.492 kB` `16.862 kB`

_{🤖 This report was generated against 505433ac64f144c9cca456097413d6af4582e5ee}

fabricteam · 2023-04-24T07:59:34Z

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

Scenario	Render type	Master Ticks	PR Ticks	Iterations	Status
FluentProviderWithTheme	virtual-rerender-with-unmount	104	114	10	Possible regression
InfoButton	mount	17	22	5000	Possible regression

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations	Status
Avatar	mount	692	706	5000
Button	mount	379	373	5000
Field	mount	1261	1280	5000
FluentProvider	mount	898	904	5000
FluentProviderWithTheme	mount	113	113	10
FluentProviderWithTheme	virtual-rerender	89	94	10
FluentProviderWithTheme	virtual-rerender-with-unmount	104	114	10	Possible regression
InfoButton	mount	17	22	5000	Possible regression
MakeStyles	mount	1114	1121	50000
Persona	mount	1969	1960	5000
SpinButton	mount	1591	1571	5000

packages/react/src/components/DetailsList/DetailsList.test.tsx

fabricteam · 2023-04-24T08:03:32Z

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

Perf tests with no regressions

Scenario	Current PR Ticks	Baseline Ticks	Ratio
LabelMinimalPerf.default	314	292	1.08:1
TreeWith60ListItems.default	115	106	1.08:1
ButtonMinimalPerf.default	118	110	1.07:1
RefMinimalPerf.default	148	140	1.06:1
ChatWithPopoverPerf.default	247	236	1.05:1
DividerMinimalPerf.default	279	266	1.05:1
RadioGroupMinimalPerf.default	370	353	1.05:1
AvatarMinimalPerf.default	145	139	1.04:1
DropdownManyItemsPerf.default	489	469	1.04:1
HeaderSlotsPerf.default	628	601	1.04:1
SkeletonMinimalPerf.default	277	266	1.04:1
CardMinimalPerf.default	404	394	1.03:1
ListWith60ListItems.default	476	461	1.03:1
PortalMinimalPerf.default	119	116	1.03:1
TreeMinimalPerf.default	614	596	1.03:1
AccordionMinimalPerf.default	116	114	1.02:1
AlertMinimalPerf.default	200	197	1.02:1
AnimationMinimalPerf.default	391	383	1.02:1
AttachmentMinimalPerf.default	106	104	1.02:1
AttachmentSlotsPerf.default	797	783	1.02:1
ButtonOverridesMissPerf.default	780	762	1.02:1
DropdownMinimalPerf.default	1793	1758	1.02:1
HeaderMinimalPerf.default	286	280	1.02:1
MenuMinimalPerf.default	649	635	1.02:1
ProviderMinimalPerf.default	260	255	1.02:1
TableMinimalPerf.default	323	316	1.02:1
ToolbarMinimalPerf.default	691	678	1.02:1
ListNestedPerf.default	412	406	1.01:1
RosterPerf.default	1630	1607	1.01:1
ReactionMinimalPerf.default	285	281	1.01:1
SliderMinimalPerf.default	848	838	1.01:1
StatusMinimalPerf.default	543	539	1.01:1
TextMinimalPerf.default	262	259	1.01:1
TooltipMinimalPerf.default	1595	1578	1.01:1
BoxMinimalPerf.default	265	264	1:1
CarouselMinimalPerf.default	317	317	1:1
ChatMinimalPerf.default	561	562	1:1
LayoutMinimalPerf.default	285	284	1:1
ListMinimalPerf.default	410	410	1:1
MenuButtonMinimalPerf.default	1188	1188	1:1
ProviderMergeThemesPerf.default	846	849	1:1
SegmentMinimalPerf.default	270	270	1:1
SplitButtonMinimalPerf.default	2747	2750	1:1
ButtonSlotsPerf.default	372	374	0.99:1
CheckboxMinimalPerf.default	1345	1359	0.99:1
DatepickerMinimalPerf.default	4316	4381	0.99:1
DialogMinimalPerf.default	606	610	0.99:1
EmbedMinimalPerf.default	2054	2075	0.99:1
GridMinimalPerf.default	262	265	0.99:1
InputMinimalPerf.default	654	662	0.99:1
ItemLayoutMinimalPerf.default	878	884	0.99:1
ListCommonPerf.default	498	504	0.99:1
PopupMinimalPerf.default	475	479	0.99:1
TableManyItemsPerf.default	1403	1413	0.99:1
CustomToolbarPrototype.default	1794	1812	0.99:1
ImageMinimalPerf.default	298	303	0.98:1
LoaderMinimalPerf.default	228	232	0.98:1
TextAreaMinimalPerf.default	356	363	0.98:1
ChatDuplicateMessagesPerf.default	183	188	0.97:1
IconMinimalPerf.default	474	490	0.97:1
FormMinimalPerf.default	281	293	0.96:1
VideoMinimalPerf.default	518	538	0.96:1
FlexMinimalPerf.default	209	219	0.95:1

size-auditor · 2023-04-24T08:10:46Z

Asset size changes

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

Baseline commit: 505433ac64f144c9cca456097413d6af4582e5ee (build)

fabricteam · 2023-04-24T08:15:44Z

Perf Analysis (`@fluentui/react`)

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations
BaseButton	mount	808	781	5000
Breadcrumb	mount	2105	2049	1000
Checkbox	mount	2077	2087	5000
CheckboxBase	mount	1829	1827	5000
ChoiceGroup	mount	3582	3548	5000
ComboBox	mount	794	800	1000
CommandBar	mount	7741	7742	1000
ContextualMenu	mount	15598	14006	1000
DefaultButton	mount	925	937	5000
DetailsRow	mount	2646	2628	5000
DetailsRowFast	mount	2618	2630	5000
DetailsRowNoStyles	mount	2409	2435	5000
Dialog	mount	3256	3283	1000
DocumentCardTitle	mount	291	286	1000
Dropdown	mount	2456	2429	5000
FocusTrapZone	mount	1402	1403	5000
FocusZone	mount	1393	1390	5000
GroupedList	mount	45327	45818	2
GroupedList	virtual-rerender	20133	22389	2
GroupedList	virtual-rerender-with-unmount	62368	63149	2
GroupedListV2	mount	287	297	2
GroupedListV2	virtual-rerender	270	275	2
GroupedListV2	virtual-rerender-with-unmount	288	297	2
IconButton	mount	1309	1305	5000
Label	mount	448	444	5000
Layer	mount	3378	3363	5000
Link	mount	527	529	5000
MenuButton	mount	1175	1138	5000
MessageBar	mount	26107	26395	5000
Nav	mount	2367	2344	1000
OverflowSet	mount	1051	1004	5000
Panel	mount	2171	2172	1000
Persona	mount	910	907	1000
Pivot	mount	1085	1061	1000
PrimaryButton	mount	1043	1055	5000
Rating	mount	5700	5754	5000
SearchBox	mount	1113	1130	5000
Shimmer	mount	2359	2349	5000
Slider	mount	1675	1658	5000
SpinButton	mount	3378	3428	5000
Spinner	mount	529	513	5000
SplitButton	mount	2153	2134	5000
Stack	mount	531	529	5000
StackWithIntrinsicChildren	mount	1107	1082	5000
StackWithTextChildren	mount	3366	3375	5000
SwatchColorPicker	mount	7397	7441	5000
TagPicker	mount	1733	1745	5000
Text	mount	490	490	5000
TextField	mount	1146	1139	5000
ThemeProvider	mount	1013	1011	5000
ThemeProvider	virtual-rerender	803	801	5000
ThemeProvider	virtual-rerender-with-unmount	1557	1556	5000
Toggle	mount	800	815	5000
buttonNative	mount	242	244	5000

fabricteam · 2023-04-24T08:23:14Z

🕵 fluentuiv9 No visual regressions between this PR and main

fabricteam · 2023-04-24T08:23:59Z

🕵 FluentUI-v0 No visual regressions between this PR and main

* master: chore: enforce files naming to use .styles.ts [cxe-prg files] (microsoft#27707) chore: migrate to NodeJS v16 (microsoft#27711) remove react-avatar-context package (microsoft#27709) test: migrate all v9 libraries to use new conformance setup which improves test execution by approx 46% (microsoft#27669) chore: Add caret to react-datepicker-compat dependencies (microsoft#27671) test(fluentui/react): fix initial global leaks that were causing OOM issues (microsoft#27661) chore(react-utilities): simplifies useControllableState hook internals (microsoft#27702) chore: enforce files naming to use .styles.ts (microsoft#27698) feat: adds lazy loading example (microsoft#27587) feat: react-combobox space conditionally inserts character when freeform is true (microsoft#27025) chore(react-tree): updates useOpenItemsState internals (microsoft#27697) feat(tools): add conformance setup migration to migrate-converged-pkg generator (microsoft#27668) test: use `isolatedModules` for all ts-jest configs to lower memory footprint on CI (microsoft#27670) chore: bump @griffel/eslint-plugin & enable @griffel/hook-naming (microsoft#27687) feat(react-tree): makes useFlatTree generic (microsoft#27682) Enable export to codepen for charting library (microsoft#27539) Overflow: added useOverflowCount to exports (microsoft#27678) fix: Menu should not steal focus on re-render (microsoft#27688) feat(react-conformance): add new TS config api to be able to specify configName and configDir (microsoft#27664)

* feat/drawer-components: (28 commits) docs: update API feat: add style overrides for upcoming drawer components feat: add support to override drawer styles fix: prevent elements from stretching chore: upgrade devcontainer node version to 16 (microsoft#27716) fix: rename styles file to use the newer naming conventions test: add cypress tests for scroll positions chore: enforce files naming to use .styles.ts [cxe-prg files] (microsoft#27707) feat: add support to override drawer body styles chore: migrate to NodeJS v16 (microsoft#27711) remove react-avatar-context package (microsoft#27709) test: migrate all v9 libraries to use new conformance setup which improves test execution by approx 46% (microsoft#27669) chore: Add caret to react-datepicker-compat dependencies (microsoft#27671) test(fluentui/react): fix initial global leaks that were causing OOM issues (microsoft#27661) chore(react-utilities): simplifies useControllableState hook internals (microsoft#27702) chore: enforce files naming to use .styles.ts (microsoft#27698) feat: adds lazy loading example (microsoft#27587) feat: react-combobox space conditionally inserts character when freeform is true (microsoft#27025) chore(react-tree): updates useOpenItemsState internals (microsoft#27697) feat(tools): add conformance setup migration to migrate-converged-pkg generator (microsoft#27668) ...

test(fluentui/react): fix initial global leaks that were causing OOM …

9739796

…issues

msft-fluent-ui-bot assigned ling1726 Apr 24, 2023

github-actions bot added this to the April Project Cycle Q2 2023 milestone Apr 24, 2023

Hotell unassigned ling1726 Apr 24, 2023

Hotell commented Apr 24, 2023

View reviewed changes

packages/style-utilities/src/styles/theme.test.ts Show resolved Hide resolved

Hotell commented Apr 24, 2023

View reviewed changes

packages/style-utilities/src/styles/theme.test.ts Show resolved Hide resolved

--amend

cd8ba24

fabricteam reviewed Apr 24, 2023

View reviewed changes

packages/react/src/components/DetailsList/DetailsList.test.tsx Show resolved Hide resolved

Hotell added Area: Testing Fluent UI react (v8) Issues about @fluentui/react (v8) CI labels Apr 24, 2023

Hotell marked this pull request as ready for review April 24, 2023 13:38

Hotell requested review from a team, ThomasMichon, phkuo and dzearing as code owners April 24, 2023 13:38

This was referenced Apr 24, 2023

ci: migrate to node 16 #27660

Closed

Epic: road to faster CI/CD #27359

Open

chore: unify jest maxWorkers usage on CI and turn off code coverage #27680

Merged

tudorpopams self-requested a review April 25, 2023 12:14

ling1726 approved these changes Apr 26, 2023

View reviewed changes

dzearing approved these changes Apr 26, 2023

View reviewed changes

micahgodbolt approved these changes Apr 26, 2023

View reviewed changes

Hotell merged commit d67287c into microsoft:master Apr 26, 2023

Hotell deleted the hotell/build/faster-ci/v8-test-leaks-fix branch April 26, 2023 17:02

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

test(fluentui/react): fix initial global leaks that were causing OOM issues #27661

test(fluentui/react): fix initial global leaks that were causing OOM issues #27661

Hotell commented Apr 24, 2023 •

edited

Loading

codesandbox-ci bot commented Apr 24, 2023 •

edited

Loading

fabricteam commented Apr 24, 2023 •

edited

Loading

fabricteam commented Apr 24, 2023 •

edited

Loading

fabricteam commented Apr 24, 2023 •

edited

Loading

size-auditor bot commented Apr 24, 2023

fabricteam commented Apr 24, 2023 •

edited

Loading

fabricteam commented Apr 24, 2023

fabricteam commented Apr 24, 2023

test(fluentui/react): fix initial global leaks that were causing OOM issues #27661

test(fluentui/react): fix initial global leaks that were causing OOM issues #27661

Conversation

Hotell commented Apr 24, 2023 • edited Loading

Previous Behavior

New Behavior

Related Issue(s)

codesandbox-ci bot commented Apr 24, 2023 • edited Loading

fabricteam commented Apr 24, 2023 • edited Loading

📊 Bundle size report

fabricteam commented Apr 24, 2023 • edited Loading

Perf Analysis (@fluentui/react-components)

fabricteam commented Apr 24, 2023 • edited Loading

Perf Analysis (@fluentui/react-northstar)

size-auditor bot commented Apr 24, 2023

Asset size changes

fabricteam commented Apr 24, 2023 • edited Loading

Perf Analysis (@fluentui/react)

fabricteam commented Apr 24, 2023

🕵 fluentuiv9 No visual regressions between this PR and main

fabricteam commented Apr 24, 2023

🕵 FluentUI-v0 No visual regressions between this PR and main

Hotell commented Apr 24, 2023 •

edited

Loading

codesandbox-ci bot commented Apr 24, 2023 •

edited

Loading

fabricteam commented Apr 24, 2023 •

edited

Loading

fabricteam commented Apr 24, 2023 •

edited

Loading

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

fabricteam commented Apr 24, 2023 •

edited

Loading

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

fabricteam commented Apr 24, 2023 •

edited

Loading

Perf Analysis (`@fluentui/react`)