chore: bootstrap @fluentui/scripts-test-ssr #27444

layershifter · 2023-04-05T09:27:47Z

New Behavior

This PR bootstraps @fluentui/scripts-test-ssr to create a new runner for SSR tests instead of @fluentui/ssr-tests-v9.

Goals:

be able to run tests per package like bundle-size
improve DX (it's clear in which package an error happens)

Next steps

Update generator to add test-ssr script to matching packages
Add implementation to @fluentui/scripts-test-ssr
Drop testing logic from @fluentui/ssr-tests-v9

fabricteam · 2023-04-05T09:39:37Z

📊 Bundle size report

Unchanged fixtures

Package & Exports	Size (minified/GZIP)
`global-context` createContext	`533 B` `341 B`
`global-context` createContextSelector	`560 B` `352 B`
`priority-overflow` createOverflowManager	`3.194 kB` `1.314 kB`
`react-accordion` Accordion (including children components)	`88.882 kB` `26.551 kB`
`react-alert` Alert	`96.647 kB` `23.133 kB`
`react-avatar` Avatar	`60.312 kB` `15.579 kB`
`react-avatar` AvatarGroup	`18.178 kB` `6.683 kB`
`react-avatar` AvatarGroupItem	`76.573 kB` `20.086 kB`
`react-badge` Badge	`25.85 kB` `7.585 kB`
`react-badge` CounterBadge	`26.833 kB` `7.889 kB`
`react-badge` PresenceBadge	`34.458 kB` `8.693 kB`
`react-button` Button	`39.749 kB` `9.959 kB`
`react-button` CompoundButton	`46.921 kB` `11.428 kB`
`react-button` MenuButton	`44.437 kB` `11.306 kB`
`react-button` SplitButton	`52.931 kB` `12.872 kB`
`react-button` ToggleButton	`58.121 kB` `11.878 kB`
`react-card` Card - All	`83.489 kB` `23.894 kB`
`react-card` Card	`78.308 kB` `22.431 kB`
`react-card` CardFooter	`9.035 kB` `3.799 kB`
`react-card` CardHeader	`10.959 kB` `4.503 kB`
`react-card` CardPreview	`9.84 kB` `4.153 kB`
`react-checkbox` Checkbox	`37.02 kB` `11.255 kB`
`react-combobox` Combobox (including child components)	`89.718 kB` `28.49 kB`
`react-combobox` Dropdown (including child components)	`88.402 kB` `28.217 kB`
`react-components` react-components: Button, FluentProvider & webLightTheme	`67.994 kB` `18.395 kB`
`react-components` react-components: Accordion, Button, FluentProvider, Image, Menu, Popover	`207.512 kB` `57.555 kB`
`react-components` react-components: FluentProvider & webLightTheme	`38.819 kB` `12.351 kB`
`react-datepicker-compat` DatePicker Compat	`251.272 kB` `67.329 kB`
`react-dialog` Dialog (including children components)	`93.388 kB` `27.408 kB`
`react-divider` Divider	`19.863 kB` `6.697 kB`
`react-field` Field	`21.509 kB` `7.408 kB`
`react-image` Image	`14.011 kB` `4.993 kB`
`react-infobutton` InfoButton	`130.577 kB` `39.439 kB`
`react-infobutton` InfoLabel	`133.874 kB` `40.488 kB`
`react-input` Input	`26.707 kB` `8.113 kB`
`react-label` Label	`12.57 kB` `4.586 kB`
`react-link` Link	`12.301 kB` `5.07 kB`
`react-menu` Menu (including children components)	`131.038 kB` `39.653 kB`
`react-menu` Menu (including selectable components)	`134.174 kB` `40.187 kB`
`react-overflow` hooks only	`11.214 kB` `4.271 kB`
`react-persona` Persona	`67.338 kB` `17.524 kB`
`react-popover` Popover	`117.58 kB` `35.828 kB`
`react-portal` Portal	`11.649 kB` `4.263 kB`
`react-portal-compat` PortalCompatProvider	`6.446 kB` `2.185 kB`
`react-positioning` usePositioning	`24.008 kB` `8.798 kB`
`react-progress` ProgressBar	`16.322 kB` `5.822 kB`
`react-provider` FluentProvider	`20.766 kB` `7.119 kB`
`react-radio` Radio	`35.48 kB` `11.126 kB`
`react-radio` RadioGroup	`18.889 kB` `6.929 kB`
`react-select` Select	`27.915 kB` `9.189 kB`
`react-slider` Slider	`36.845 kB` `11.474 kB`
`react-spinbutton` SpinButton	`36.598 kB` `10.752 kB`
`react-spinner` Spinner	`23.425 kB` `7.195 kB`
`react-switch` Switch	`32.438 kB` `9.706 kB`
`react-table` DataGrid	`150.829 kB` `41.052 kB`
`react-table` Table (Primitives only)	`47.119 kB` `12.703 kB`
`react-table` Table as DataGrid	`138.971 kB` `35.722 kB`
`react-table` Table (Selection only)	`86.8 kB` `21.742 kB`
`react-table` Table (Sort only)	`86.13 kB` `21.549 kB`
`react-text` Text - Default	`15.018 kB` `5.327 kB`
`react-text` Text - Wrappers	`15.572 kB` `5.23 kB`
`react-textarea` Textarea	`30.108 kB` `9.478 kB`
`react-theme` Single theme token import	`69 B` `89 B`
`react-theme` Teams: all themes	`31.33 kB` `6.764 kB`
`react-theme` Teams: Light theme	`17.895 kB` `5.162 kB`
`react-tooltip` Tooltip	`49.388 kB` `16.815 kB`
`react-utilities` SSRProvider	`180 B` `159 B`

_{🤖 This report was generated against edb55877485f2b92243c228abb107fda615c1c19}

fabricteam · 2023-04-05T09:44:51Z

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

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations
Avatar	mount	690	698	5000
Button	mount	393	391	5000
Field	mount	1196	1235	5000
FluentProvider	mount	752	778	5000
FluentProviderWithTheme	mount	108	115	10
FluentProviderWithTheme	virtual-rerender	96	93	10
FluentProviderWithTheme	virtual-rerender-with-unmount	102	103	10
InfoButton	mount	17	18	5000
MakeStyles	mount	1172	1185	50000
Persona	mount	1911	1843	5000
SpinButton	mount	1475	1451	5000

codesandbox-ci · 2023-04-05T09:51:11Z

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 952e210:

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

size-auditor · 2023-04-05T09:51:46Z

Asset size changes

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

Baseline commit: edb55877485f2b92243c228abb107fda615c1c19 (build)

fabricteam · 2023-04-05T09:53:07Z

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

Perf tests with no regressions

Scenario	Current PR Ticks	Baseline Ticks	Ratio
ButtonMinimalPerf.default	118	100	1.18:1
AttachmentMinimalPerf.default	104	93	1.12:1
RefMinimalPerf.default	149	138	1.08:1
ReactionMinimalPerf.default	275	258	1.07:1
PortalMinimalPerf.default	124	117	1.06:1
CarouselMinimalPerf.default	353	337	1.05:1
ChatWithPopoverPerf.default	258	245	1.05:1
LabelMinimalPerf.default	286	272	1.05:1
TextAreaMinimalPerf.default	363	347	1.05:1
CardMinimalPerf.default	385	371	1.04:1
AccordionMinimalPerf.default	108	105	1.03:1
AlertMinimalPerf.default	195	190	1.03:1
ChatMinimalPerf.default	541	523	1.03:1
DividerMinimalPerf.default	266	259	1.03:1
HeaderMinimalPerf.default	268	259	1.03:1
LoaderMinimalPerf.default	257	250	1.03:1
TooltipMinimalPerf.default	1649	1604	1.03:1
ListNestedPerf.default	412	405	1.02:1
ListWith60ListItems.default	486	476	1.02:1
ToolbarMinimalPerf.default	674	658	1.02:1
TreeMinimalPerf.default	608	595	1.02:1
CheckboxMinimalPerf.default	1583	1569	1.01:1
DialogMinimalPerf.default	576	573	1.01:1
DropdownManyItemsPerf.default	502	495	1.01:1
DropdownMinimalPerf.default	1829	1815	1.01:1
HeaderSlotsPerf.default	579	574	1.01:1
InputMinimalPerf.default	739	733	1.01:1
ProviderMinimalPerf.default	275	272	1.01:1
SkeletonMinimalPerf.default	247	245	1.01:1
SliderMinimalPerf.default	915	904	1.01:1
StatusMinimalPerf.default	508	504	1.01:1
VideoMinimalPerf.default	523	518	1.01:1
BoxMinimalPerf.default	249	249	1:1
ButtonOverridesMissPerf.default	841	845	1:1
ButtonSlotsPerf.default	415	415	1:1
DatepickerMinimalPerf.default	4628	4607	1:1
EmbedMinimalPerf.default	2390	2380	1:1
FormMinimalPerf.default	283	282	1:1
GridMinimalPerf.default	247	247	1:1
ListCommonPerf.default	497	497	1:1
ListMinimalPerf.default	387	387	1:1
MenuButtonMinimalPerf.default	1257	1263	1:1
RosterPerf.default	1823	1818	1:1
PopupMinimalPerf.default	452	451	1:1
ProviderMergeThemesPerf.default	980	980	1:1
RadioGroupMinimalPerf.default	329	330	1:1
SegmentMinimalPerf.default	250	251	1:1
SplitButtonMinimalPerf.default	3030	3016	1:1
TableManyItemsPerf.default	1421	1423	1:1
AnimationMinimalPerf.default	364	367	0.99:1
AttachmentSlotsPerf.default	851	857	0.99:1
ItemLayoutMinimalPerf.default	894	905	0.99:1
LayoutMinimalPerf.default	266	269	0.99:1
MenuMinimalPerf.default	621	625	0.99:1
ImageMinimalPerf.default	279	286	0.98:1
IconMinimalPerf.default	450	458	0.98:1
TableMinimalPerf.default	296	303	0.98:1
TextMinimalPerf.default	247	251	0.98:1
ChatDuplicateMessagesPerf.default	196	203	0.97:1
FlexMinimalPerf.default	200	207	0.97:1
AvatarMinimalPerf.default	126	131	0.96:1
CustomToolbarPrototype.default	1907	1982	0.96:1
TreeWith60ListItems.default	105	111	0.95:1

fabricteam · 2023-04-05T10:01:10Z

Perf Analysis (`@fluentui/react`)

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations
BaseButton	mount	807	782	5000
Breadcrumb	mount	2033	2060	1000
Checkbox	mount	2075	2089	5000
CheckboxBase	mount	1830	1819	5000
ChoiceGroup	mount	3508	3564	5000
ComboBox	mount	798	787	1000
CommandBar	mount	7679	7619	1000
ContextualMenu	mount	12320	12139	1000
DefaultButton	mount	925	929	5000
DetailsRow	mount	2666	2607	5000
DetailsRowFast	mount	2630	2616	5000
DetailsRowNoStyles	mount	2459	2422	5000
Dialog	mount	3227	3222	1000
DocumentCardTitle	mount	275	291	1000
Dropdown	mount	2452	2439	5000
FocusTrapZone	mount	1411	1409	5000
FocusZone	mount	1381	1358	5000
GroupedList	mount	45408	45314	2
GroupedList	virtual-rerender	19974	22051	2
GroupedList	virtual-rerender-with-unmount	62293	62222	2
GroupedListV2	mount	270	277	2
GroupedListV2	virtual-rerender	269	260	2
GroupedListV2	virtual-rerender-with-unmount	271	280	2
IconButton	mount	1323	1308	5000
Label	mount	447	438	5000
Layer	mount	3360	3366	5000
Link	mount	526	516	5000
MenuButton	mount	1131	1152	5000
MessageBar	mount	25716	25670	5000
Nav	mount	2302	2299	1000
OverflowSet	mount	1013	1007	5000
Panel	mount	2137	2181	1000
Persona	mount	914	901	1000
Pivot	mount	1060	1066	1000
PrimaryButton	mount	1029	1031	5000
Rating	mount	5769	5792	5000
SearchBox	mount	1110	1096	5000
Shimmer	mount	2304	2289	5000
Slider	mount	1675	1675	5000
SpinButton	mount	3383	3384	5000
Spinner	mount	515	517	5000
SplitButton	mount	2189	2158	5000
Stack	mount	533	532	5000
StackWithIntrinsicChildren	mount	1100	1076	5000
StackWithTextChildren	mount	3405	3381	5000
SwatchColorPicker	mount	7383	7300	5000
TagPicker	mount	1726	1715	5000
Text	mount	485	489	5000
TextField	mount	1164	1122	5000
ThemeProvider	mount	1002	995	5000
ThemeProvider	virtual-rerender	791	787	5000
ThemeProvider	virtual-rerender-with-unmount	1553	1562	5000
Toggle	mount	795	779	5000
buttonNative	mount	242	251	5000

.github/CODEOWNERS

fabricteam · 2023-04-05T10:15:10Z

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

fabricteam · 2023-04-05T10:15:29Z

🕵 fluentuiv9 No visual regressions between this PR and main

Hotell

🙌

msft-fluent-ui-bot assigned miroslavstastny Apr 5, 2023

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

layershifter force-pushed the chore/test-ssr branch from c50ef6b to b8fb2bb Compare April 5, 2023 09:39

chore: bootstrap @fluentui/test-ssr

e83eabe

layershifter force-pushed the chore/test-ssr branch from b8fb2bb to e83eabe Compare April 5, 2023 09:51

layershifter changed the title ~~chore: bootstrap @fluentui/test-ssr~~ chore: bootstrap @fluentui/scripts-test-ssr Apr 5, 2023

layershifter unassigned miroslavstastny Apr 5, 2023

fabricteam reviewed Apr 5, 2023

View reviewed changes

.github/CODEOWNERS Show resolved Hide resolved

layershifter marked this pull request as ready for review April 5, 2023 11:35

layershifter requested review from a team, JustSlone, jurokapsiar and tudorpopams as code owners April 5, 2023 11:35

tudorpopams requested a review from Hotell April 5, 2023 12:06

Hotell approved these changes Apr 5, 2023

View reviewed changes

tudorpopams approved these changes Apr 5, 2023

View reviewed changes

Merge branch 'master' into chore/test-ssr

952e210

layershifter enabled auto-merge (squash) April 5, 2023 12:36

layershifter merged commit 1071a2a into microsoft:master Apr 5, 2023

layershifter mentioned this pull request Apr 25, 2023

chore: add test-ssr script to v9 packages #27690

Merged

layershifter mentioned this pull request May 18, 2023

chore: add test-ssr to buildci script #27899

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

chore: bootstrap @fluentui/scripts-test-ssr #27444

chore: bootstrap @fluentui/scripts-test-ssr #27444

Uh oh!

layershifter commented Apr 5, 2023 •

edited

Loading

Uh oh!

fabricteam commented Apr 5, 2023 •

edited

Loading

Uh oh!

fabricteam commented Apr 5, 2023 •

edited

Loading

Uh oh!

codesandbox-ci bot commented Apr 5, 2023 •

edited

Loading

Uh oh!

size-auditor bot commented Apr 5, 2023 •

edited

Loading

Uh oh!

fabricteam commented Apr 5, 2023 •

edited

Loading

Uh oh!

fabricteam commented Apr 5, 2023 •

edited

Loading

Uh oh!

Uh oh!

fabricteam commented Apr 5, 2023 •

edited

Loading

Uh oh!

fabricteam commented Apr 5, 2023 •

edited

Loading

Uh oh!

Hotell left a comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

chore: bootstrap @fluentui/scripts-test-ssr #27444

chore: bootstrap @fluentui/scripts-test-ssr #27444

Uh oh!

Conversation

layershifter commented Apr 5, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

New Behavior

Next steps

Uh oh!

fabricteam commented Apr 5, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📊 Bundle size report

Uh oh!

fabricteam commented Apr 5, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Perf Analysis (@fluentui/react-components)

Uh oh!

codesandbox-ci bot commented Apr 5, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

size-auditor bot commented Apr 5, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Asset size changes

Uh oh!

fabricteam commented Apr 5, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Perf Analysis (@fluentui/react-northstar)

Uh oh!

fabricteam commented Apr 5, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Perf Analysis (@fluentui/react)

Uh oh!

Uh oh!

fabricteam commented Apr 5, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

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

Uh oh!

fabricteam commented Apr 5, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🕵 fluentuiv9 No visual regressions between this PR and main

Uh oh!

Hotell left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

layershifter commented Apr 5, 2023 •

edited

Loading

fabricteam commented Apr 5, 2023 •

edited

Loading

fabricteam commented Apr 5, 2023 •

edited

Loading

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

codesandbox-ci bot commented Apr 5, 2023 •

edited

Loading

size-auditor bot commented Apr 5, 2023 •

edited

Loading

fabricteam commented Apr 5, 2023 •

edited

Loading

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

fabricteam commented Apr 5, 2023 •

edited

Loading

Perf Analysis (`@fluentui/react`)

fabricteam commented Apr 5, 2023 •

edited

Loading

fabricteam commented Apr 5, 2023 •

edited

Loading