Text - Add VR tests

[theerebuss]

Pull request checklist

- Addresses an existing issue: Fixes #0000
- Include a change request file using $ yarn change

Description of changes

Added visual regression tests for react-text

• A test for each Text prop
• A test for each wrapper

[fabricteam]

📊 Bundle size report

_{🤖 This report was generated against 9ac8b044a6a524d6ce55f3f801ce0189a8087e85}

[codesandbox-ci]

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 07387d0:

Sandbox	Source
Fluent UI React Starter	Configuration

[size-auditor]

Asset size changes

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

Baseline commit: 9ac8b044a6a524d6ce55f3f801ce0189a8087e85 (build)

[fabricteam]

Perf Analysis (@fluentui/react)

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations	Status
Avatar	mount	960	932	5000
BaseButton	mount	979	950	5000
Breadcrumb	mount	2655	2631	1000
ButtonNext	mount	440	456	5000
Checkbox	mount	1678	1654	5000
CheckboxBase	mount	1418	1446	5000
ChoiceGroup	mount	4966	4945	5000
ComboBox	mount	1026	976	1000
CommandBar	mount	10497	10433	1000
ContextualMenu	mount	6273	6391	1000
DefaultButton	mount	1183	1192	5000
DetailsRow	mount	4126	3918	5000
DetailsRowFast	mount	3934	4001	5000
DetailsRowNoStyles	mount	3717	3778	5000
Dialog	mount	2231	2261	1000
DocumentCardTitle	mount	163	148	1000
Dropdown	mount	3372	3373	5000
FluentProviderNext	mount	7162	7121	5000
FocusTrapZone	mount	1906	1833	5000
FocusZone	mount	1873	1814	5000
IconButton	mount	1903	1871	5000
Label	mount	352	358	5000
Layer	mount	1946	1923	5000
Link	mount	504	487	5000
MakeStyles	mount	1875	1853	50000
MenuButton	mount	1608	1568	5000
MessageBar	mount	2067	2137	5000
Nav	mount	3504	3412	1000
OverflowSet	mount	1117	1050	5000
Panel	mount	2134	2159	1000
Persona	mount	851	845	1000
Pivot	mount	1480	1573	1000
PrimaryButton	mount	1391	1424	5000
Rating	mount	8140	8205	5000
SearchBox	mount	1446	1406	5000
Shimmer	mount	2639	2702	5000
Slider	mount	2031	1981	5000
SpinButton	mount	5271	5226	5000
Spinner	mount	444	438	5000
SplitButton	mount	3320	3368	5000
Stack	mount	513	531	5000
StackWithIntrinsicChildren	mount	1643	1709	5000
StackWithTextChildren	mount	4950	4909	5000
SwatchColorPicker	mount	11011	11115	5000
Tabs	mount	1508	1441	1000
TagPicker	mount	2765	2751	5000
TeachingBubble	mount	12411	12230	5000
Text	mount	447	451	5000
TextField	mount	1502	1441	5000
ThemeProvider	mount	1210	1196	5000
ThemeProvider	virtual-rerender	613	597	5000
Toggle	mount	858	827	5000
buttonNative	mount	122	108	5000

Perf Analysis (@fluentui/react-northstar)

Perf tests with no regressions

Scenario	Current PR Ticks	Baseline Ticks	Ratio
HeaderMinimalPerf.default	432	393	1.1:1
AlertMinimalPerf.default	318	295	1.08:1
ImageMinimalPerf.default	422	389	1.08:1
SkeletonMinimalPerf.default	398	368	1.08:1
AvatarMinimalPerf.default	209	195	1.07:1
LabelMinimalPerf.default	441	412	1.07:1
TextAreaMinimalPerf.default	592	554	1.07:1
ListWith60ListItems.default	719	677	1.06:1
ChatMinimalPerf.default	721	687	1.05:1
DialogMinimalPerf.default	835	799	1.05:1
PortalMinimalPerf.default	182	173	1.05:1
AttachmentMinimalPerf.default	176	169	1.04:1
DividerMinimalPerf.default	403	387	1.04:1
LayoutMinimalPerf.default	408	392	1.04:1
ChatDuplicateMessagesPerf.default	312	304	1.03:1
ListNestedPerf.default	609	590	1.03:1
MenuButtonMinimalPerf.default	1763	1717	1.03:1
StatusMinimalPerf.default	748	729	1.03:1
TableMinimalPerf.default	451	438	1.03:1
AnimationMinimalPerf.default	457	450	1.02:1
AttachmentSlotsPerf.default	1167	1149	1.02:1
CarouselMinimalPerf.default	510	501	1.02:1
ListMinimalPerf.default	577	568	1.02:1
LoaderMinimalPerf.default	736	721	1.02:1
PopupMinimalPerf.default	655	643	1.02:1
ProviderMinimalPerf.default	1054	1036	1.02:1
SegmentMinimalPerf.default	373	366	1.02:1
SliderMinimalPerf.default	1675	1635	1.02:1
IconMinimalPerf.default	672	661	1.02:1
TextMinimalPerf.default	396	388	1.02:1
ToolbarMinimalPerf.default	995	976	1.02:1
AccordionMinimalPerf.default	170	169	1.01:1
ButtonMinimalPerf.default	178	176	1.01:1
ButtonSlotsPerf.default	584	577	1.01:1
ChatWithPopoverPerf.default	381	377	1.01:1
DropdownMinimalPerf.default	3155	3123	1.01:1
HeaderSlotsPerf.default	836	830	1.01:1
InputMinimalPerf.default	1325	1317	1.01:1
ListCommonPerf.default	692	687	1.01:1
MenuMinimalPerf.default	914	909	1.01:1
RefMinimalPerf.default	232	229	1.01:1
TableManyItemsPerf.default	2112	2092	1.01:1
CustomToolbarPrototype.default	4005	3950	1.01:1
TreeMinimalPerf.default	842	831	1.01:1
ButtonOverridesMissPerf.default	1776	1782	1:1
DatepickerMinimalPerf.default	5707	5704	1:1
DropdownManyItemsPerf.default	739	741	1:1
GridMinimalPerf.default	379	379	1:1
RadioGroupMinimalPerf.default	483	481	1:1
ReactionMinimalPerf.default	417	416	1:1
CardMinimalPerf.default	589	592	0.99:1
CheckboxMinimalPerf.default	2818	2848	0.99:1
EmbedMinimalPerf.default	4302	4361	0.99:1
VideoMinimalPerf.default	673	687	0.98:1
ItemLayoutMinimalPerf.default	1303	1345	0.97:1
ProviderMergeThemesPerf.default	1648	1691	0.97:1
SplitButtonMinimalPerf.default	4005	4140	0.97:1
TreeWith60ListItems.default	179	184	0.97:1
BoxMinimalPerf.default	368	382	0.96:1
FormMinimalPerf.default	449	466	0.96:1
TooltipMinimalPerf.default	1077	1122	0.96:1
RosterPerf.default	1268	1329	0.95:1
FlexMinimalPerf.default	300	323	0.93:1

[theerebuss]

/azp run

[azure-pipelines]

Azure Pipelines successfully started running 3 pipeline(s).

[theerebuss]

Screener seems to not be updating the Github check with the latest result. For some reason, the first run showed a change in the v8 button (only god knows why 🤷), but all the new runs were successful. I've ran it twice after the failure but to no avail.

[Hotell]

For some reason, the first run showed a change in the v8 button (only god knows why 🤷)

any thoughts @ling1726 @ecraig12345 ?

[ecraig12345]

@khmakoto would be a better person to ask about Button.

[theerebuss]

@khmakoto Makoto Morimoto Burgos FTE would be a better person to ask about Button.

@ecraig12345 issue is not with Button, I've checked the implementation and there's no correlation to converged Text. Seems to have been a random issue?

[Hotell]

regarding the VR test change

something is wrong with the coloring (looks like active state is being triggered or something) - wondering if this was not caused by our provider being added as decorator ? 👀

[theerebuss]

regarding the VR test change

something is wrong with the coloring (looks like active state is being triggered or something) - wondering if this was not caused by our provider being added as decorator ? 👀

@Hotell I'm investigating that right now, for some reason this is failing but locally when I test it (both master and PR branch) it's working properly.

My guess would be that it's Screener timings? Unsure what we should do here to further investigate, honestly.

[theerebuss]

Seems like this issue has happened before with #16434.
The plot thickens 🕵️

[theerebuss]

It pains me to say that I haven't found the problem, but a working solution.
After painstakingly testing Screener locally, I've noticed that the problem only appears when multiple addStory() calls are done for one storiesOf().

As a quick fix, I've created a singular story for each scenario (Text and the typography styles).
From tests, it seems like it's working, which means the problem is much more obscure than imagined.

I'll go ahead and keep this solution for now as it works and unblocks us to get Text ready for Beta, but this definitely needs some more attention.

I'll also share these findings in the issue we have open with a similar problem. Any help is as always appreciated.

[Hotell]

I'll also share these findings in the issue we have open with a similar problem. Any help is as always appreciated.

"cool" stuff @andrefcdias ! thanks for driving this to finish line! I added that issue to VBuild project for better tracking.

thx