test: add conformance test for static classes by layershifter · Pull Request #20383 · microsoft/fluentui

layershifter · 2021-10-27T13:28:35Z

Pull request checklist

Addresses an existing issue: Fixes v9: Each component should have classname? #19937
Include a change request file using $ yarn change

Description of changes

This PR adds a new conformance test and asserts for:

each component has applied className, for example fui-ComponentName
matching constants are exported for each component, for example componentNameClassName
tests are applied only for v9 components

I left changes for Input component in this PR to be an example. For all other components it was already applied in separate PRs.

fabricteam · 2021-10-27T13:36:12Z

📊 Bundle size report

Package & Exports	Baseline (minified/GZIP)	PR	Change
`react-input` Input	`13.83 kB` `4.958 kB`	`13.842 kB` `4.965 kB`	`12 B` `7 B`

Unchanged fixtures

Package & Exports	Size (minified/GZIP)
`react-accordion` Accordion (including children components)	`56.753 kB` `17.873 kB`
`react-avatar` Avatar	`54.097 kB` `15.331 kB`
`react-badge` Badge	`22.394 kB` `6.707 kB`
`react-badge` CounterBadge	`24.773 kB` `7.387 kB`
`react-badge` PresenceBadge	`29.768 kB` `8.517 kB`
`react-button` Button	`24.651 kB` `7.462 kB`
`react-button` CompoundButton	`29.939 kB` `8.418 kB`
`react-button` MenuButton	`27.046 kB` `8.227 kB`
`react-button` SplitButton	`33.261 kB` `9.328 kB`
`react-button` ToggleButton	`33.78 kB` `8.065 kB`
`react-card` Card - All	`48.534 kB` `14.421 kB`
`react-card` Card	`43.954 kB` `13.196 kB`
`react-card` CardFooter	`7.418 kB` `3.182 kB`
`react-card` CardHeader	`8.778 kB` `3.64 kB`
`react-card` CardPreview	`7.682 kB` `3.341 kB`
`react-components` react-components: Accordion, Button, FluentProvider, Image, Menu, Popover	`166.267 kB` `47.598 kB`
`react-components` react-components: FluentProvider & webLightTheme	`31.058 kB` `10.346 kB`
`react-divider` Divider	`14.828 kB` `5.375 kB`
`react-image` Image	`9.041 kB` `3.734 kB`
`react-label` Label	`8.177 kB` `3.445 kB`
`react-link` Link	`10.883 kB` `4.449 kB`
`react-menu` Menu (including children components)	`103.644 kB` `31.979 kB`
`react-menu` Menu (including selectable components)	`106.032 kB` `32.349 kB`
`react-popover` Popover	`99.149 kB` `30.108 kB`
`react-portal` Portal	`6.621 kB` `2.226 kB`
`react-provider` FluentProvider	`14.056 kB` `5.267 kB`
`react-slider` RangedSlider	`39.807 kB` `11.454 kB`
`react-slider` Slider	`33.204 kB` `10.302 kB`
`react-switch` Switch	`25.311 kB` `8.143 kB`
`react-text` Text - Default	`10.603 kB` `4.172 kB`
`react-text` Text - Wrappers	`13.899 kB` `4.513 kB`
`react-tooltip` Tooltip	`43.871 kB` `15.165 kB`

_{🤖 This report was generated against 0204aabaa1e20f1c2fca4b6ff9bedd48ea577961}

size-auditor · 2021-10-27T13:43:52Z

Asset size changes

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

Baseline commit: 0204aabaa1e20f1c2fca4b6ff9bedd48ea577961 (build)

codesandbox-ci · 2021-10-27T14:00:18Z

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

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

fabricteam · 2021-10-27T15:08:50Z

Perf Analysis (`@fluentui/react`)

Scenario	Render type	Master Ticks	PR Ticks	Iterations	Status
FluentProviderWithTheme	virtual-rerender	126	124	10	Possible regression

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations	Status
Avatar	mount	1229	1113	5000
BaseButton	mount	1162	1139	5000
Breadcrumb	mount	3065	3154	1000
ButtonNext	mount	644	600	5000
Checkbox	mount	1853	1975	5000
CheckboxBase	mount	1607	1592	5000
ChoiceGroup	mount	5867	5956	5000
ComboBox	mount	1368	1225	1000
CommandBar	mount	12593	12644	1000
ContextualMenu	mount	7994	7746	1000
DefaultButton	mount	1514	1504	5000
DetailsRow	mount	4703	4747	5000
DetailsRowFast	mount	4675	4374	5000
DetailsRowNoStyles	mount	4347	4528	5000
Dialog	mount	3238	3111	1000
DocumentCardTitle	mount	259	200	1000
Dropdown	mount	3999	4072	5000
FluentProviderNext	mount	4281	4295	5000
FluentProviderWithTheme	mount	259	251	10
FluentProviderWithTheme	virtual-rerender	126	124	10	Possible regression
FluentProviderWithTheme	virtual-rerender-with-unmount	339	306	10
FocusTrapZone	mount	2259	2188	5000
FocusZone	mount	2216	2179	5000
IconButton	mount	2192	2207	5000
Label	mount	434	413	5000
Layer	mount	3683	3702	5000
Link	mount	647	682	5000
MakeStyles	mount	2094	2252	50000
MenuButton	mount	1824	1879	5000
MessageBar	mount	2313	2317	5000
Nav	mount	4343	4133	1000
OverflowSet	mount	1389	1379	5000
Panel	mount	2828	3039	1000
Persona	mount	996	1136	1000
Pivot	mount	1758	1776	1000
PrimaryButton	mount	1792	1588	5000
Rating	mount	9665	9992	5000
SearchBox	mount	1671	1651	5000
Shimmer	mount	3247	3174	5000
Slider	mount	2352	2500	5000
SpinButton	mount	6382	6235	5000
Spinner	mount	524	500	5000
SplitButton	mount	3985	4012	5000
Stack	mount	666	614	5000
StackWithIntrinsicChildren	mount	2268	2108	5000
StackWithTextChildren	mount	5947	6078	5000
SwatchColorPicker	mount	13243	13055	5000
TagPicker	mount	3309	3203	5000
TeachingBubble	mount	15752	15799	5000
Text	mount	554	516	5000
TextField	mount	1715	1855	5000
ThemeProvider	mount	1506	1422	5000
ThemeProvider	virtual-rerender	726	724	5000
ThemeProvider	virtual-rerender-with-unmount	2284	2341	5000
Toggle	mount	1066	1001	5000
buttonNative	mount	170	179	5000

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

Perf tests with no regressions

Scenario	Current PR Ticks	Baseline Ticks	Ratio
CardMinimalPerf.default	790	667	1.18:1
CarouselMinimalPerf.default	643	544	1.18:1
AttachmentMinimalPerf.default	225	192	1.17:1
ChatWithPopoverPerf.default	514	443	1.16:1
BoxMinimalPerf.default	486	423	1.15:1
ChatDuplicateMessagesPerf.default	387	350	1.11:1
ProviderMinimalPerf.default	1540	1389	1.11:1
ButtonMinimalPerf.default	239	220	1.09:1
ListWith60ListItems.default	826	757	1.09:1
TableManyItemsPerf.default	2496	2330	1.07:1
AttachmentSlotsPerf.default	1375	1296	1.06:1
StatusMinimalPerf.default	900	847	1.06:1
CustomToolbarPrototype.default	5221	4922	1.06:1
DividerMinimalPerf.default	461	441	1.05:1
EmbedMinimalPerf.default	5437	5188	1.05:1
InputMinimalPerf.default	1608	1535	1.05:1
SliderMinimalPerf.default	2084	1979	1.05:1
AvatarMinimalPerf.default	249	240	1.04:1
ButtonSlotsPerf.default	785	761	1.03:1
ChatMinimalPerf.default	819	795	1.03:1
SplitButtonMinimalPerf.default	5321	5158	1.03:1
TextMinimalPerf.default	444	431	1.03:1
TreeWith60ListItems.default	232	225	1.03:1
HeaderSlotsPerf.default	999	982	1.02:1
LayoutMinimalPerf.default	447	440	1.02:1
AccordionMinimalPerf.default	195	193	1.01:1
CheckboxMinimalPerf.default	3372	3343	1.01:1
DialogMinimalPerf.default	968	954	1.01:1
FlexMinimalPerf.default	331	329	1.01:1
VideoMinimalPerf.default	815	808	1.01:1
AnimationMinimalPerf.default	516	518	1:1
GridMinimalPerf.default	427	425	1:1
ListCommonPerf.default	816	815	1:1
PopupMinimalPerf.default	710	710	1:1
IconMinimalPerf.default	790	787	1:1
RosterPerf.default	1434	1448	0.99:1
TooltipMinimalPerf.default	1251	1269	0.99:1
DatepickerMinimalPerf.default	6890	7027	0.98:1
DropdownMinimalPerf.default	3877	3951	0.98:1
ListMinimalPerf.default	634	647	0.98:1
LoaderMinimalPerf.default	859	880	0.98:1
RadioGroupMinimalPerf.default	542	554	0.98:1
ButtonOverridesMissPerf.default	2126	2203	0.97:1
HeaderMinimalPerf.default	505	520	0.97:1
ProviderMergeThemesPerf.default	1980	2034	0.97:1
ReactionMinimalPerf.default	490	509	0.96:1
RefMinimalPerf.default	289	301	0.96:1
TreeMinimalPerf.default	952	994	0.96:1
FormMinimalPerf.default	492	520	0.95:1
ImageMinimalPerf.default	498	523	0.95:1
SkeletonMinimalPerf.default	424	444	0.95:1
MenuButtonMinimalPerf.default	2007	2130	0.94:1
ToolbarMinimalPerf.default	1186	1258	0.94:1
AlertMinimalPerf.default	339	364	0.93:1
ListNestedPerf.default	712	769	0.93:1
TableMinimalPerf.default	483	524	0.92:1
DropdownManyItemsPerf.default	836	914	0.91:1
ItemLayoutMinimalPerf.default	1566	1714	0.91:1
LabelMinimalPerf.default	495	541	0.91:1
SegmentMinimalPerf.default	426	477	0.89:1
PortalMinimalPerf.default	212	244	0.87:1
MenuMinimalPerf.default	1018	1183	0.86:1
TextAreaMinimalPerf.default	617	723	0.85:1

DustyTheBot · 2021-10-29T09:32:18Z

	Warnings
⚠️	There are no updates provided to CHANGELOG. Ensure there are no publicly visible changes introduced by this PR.

Generated by 🚫 dangerJS against ae04dee

ecraig12345

Minor suggestions but generally looks good.

ecraig12345 · 2021-11-06T03:48:05Z

+    const { componentPath, displayName } = testInfo;
+    const { testErrorInfo, resolveInfo, testErrorPath } = errorMessageColors;
+
+    const rootPath = componentPath.replace(/[\\/]src[\\/].*/, '');


If this is an absolute path, you'll need to ensure you're replacing the last instance of src (we've had issues in the past where people put all their git repos in an src folder)

I copied this from exported-top-level, is there anything wrong with it?

@ecraig12345 I will address a problem if it exists in a follow up PR 👍

It looks like there's a fix for this in defaultTests.tsx but not defaultErrorMessages.tsx

So actually the exported-top-level error message would be wrong as well, but that would only be noticed if someone using src for their repos was developing a new component and the test failed. (I think Levi was one of the people using this naming convention.)

Co-authored-by: ling1726 <[email protected]>

Co-authored-by: Elizabeth Craig <[email protected]>

* add conformance test * fix API file * Update packages/react-conformance/src/defaultErrorMessages.tsx Co-authored-by: ling1726 <[email protected]> * Update packages/react-conformance/src/defaultErrorMessages.tsx Co-authored-by: ling1726 <[email protected]> * Update packages/react-conformance/src/defaultErrorMessages.tsx Co-authored-by: ling1726 <[email protected]> * Update packages/react-conformance/src/defaultErrorMessages.tsx Co-authored-by: Elizabeth Craig <[email protected]> * Update packages/react-conformance/src/defaultErrorMessages.tsx Co-authored-by: Elizabeth Craig <[email protected]> * fix fmt * rename assertion Co-authored-by: ling1726 <[email protected]> Co-authored-by: Elizabeth Craig <[email protected]>

msft-fluent-ui-bot assigned bsunderhus Oct 27, 2021

layershifter added Fluent UI react-components (v9) Priority 1: High labels Oct 27, 2021

layershifter mentioned this pull request Oct 27, 2021

chore: add missing .babelrc.json to @fluentui/react-input #20385

Merged

2 tasks

layershifter force-pushed the test/conformance-classname branch from 49f8212 to 0189c7a Compare October 29, 2021 09:18

layershifter force-pushed the test/conformance-classname branch from 7f91451 to a6117da Compare November 2, 2021 09:56

layershifter force-pushed the test/conformance-classname branch from a6117da to c34b97d Compare November 3, 2021 16:28

add conformance test

689cf14

layershifter force-pushed the test/conformance-classname branch from c34b97d to 689cf14 Compare November 4, 2021 09:41

fix API file

0a8fa0d

layershifter marked this pull request as ready for review November 4, 2021 14:21

layershifter requested review from ecraig12345, jurokapsiar, khmakoto, ling1726, miroslavstastny and pompomon as code owners November 4, 2021 14:21

layershifter requested a review from a team as a code owner November 4, 2021 14:21

ling1726 reviewed Nov 5, 2021

View reviewed changes

Comment thread packages/react-conformance/src/defaultErrorMessages.tsx Outdated

ling1726 reviewed Nov 5, 2021

View reviewed changes

Comment thread packages/react-conformance/src/defaultErrorMessages.tsx Outdated

ling1726 reviewed Nov 5, 2021

View reviewed changes

Comment thread packages/react-conformance/src/defaultErrorMessages.tsx Outdated

ling1726 approved these changes Nov 5, 2021

View reviewed changes

ecraig12345 approved these changes Nov 6, 2021

View reviewed changes

layershifter and others added 7 commits November 8, 2021 11:37

Update packages/react-conformance/src/defaultErrorMessages.tsx

bbce67c

Co-authored-by: ling1726 <[email protected]>

Update packages/react-conformance/src/defaultErrorMessages.tsx

00fdb0f

Co-authored-by: ling1726 <[email protected]>

Update packages/react-conformance/src/defaultErrorMessages.tsx

8d882a6

Co-authored-by: ling1726 <[email protected]>

Update packages/react-conformance/src/defaultErrorMessages.tsx

1991ac5

Co-authored-by: Elizabeth Craig <[email protected]>

Update packages/react-conformance/src/defaultErrorMessages.tsx

a0499cb

Co-authored-by: Elizabeth Craig <[email protected]>

fix fmt

92b51c1

rename assertion

ae04dee

khmakoto approved these changes Nov 9, 2021

View reviewed changes

layershifter merged commit 254c94e into master Nov 9, 2021

layershifter deleted the test/conformance-classname branch November 9, 2021 11:24

layershifter mentioned this pull request Nov 11, 2021

fix(react-conformance): update paths generated in defaultErrorMessages #20580

Merged

2 tasks

Uh oh!

Conversation

layershifter commented Oct 27, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Pull request checklist

Description of changes

Uh oh!

fabricteam commented Oct 27, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📊 Bundle size report

Uh oh!

size-auditor Bot commented Oct 27, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Asset size changes

Uh oh!

codesandbox-ci Bot commented Oct 27, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

fabricteam commented Oct 27, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Perf Analysis (@fluentui/react)

Perf Analysis (@fluentui/react-northstar)

Uh oh!

DustyTheBot commented Oct 29, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

ecraig12345 left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

ecraig12345 Nov 6, 2021

Choose a reason for hiding this comment

Uh oh!

layershifter Nov 8, 2021

Choose a reason for hiding this comment

Uh oh!

layershifter Nov 9, 2021

Choose a reason for hiding this comment

Uh oh!

ecraig12345 Nov 9, 2021

Choose a reason for hiding this comment

Uh oh!

ecraig12345 Nov 9, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

7 participants

layershifter commented Oct 27, 2021 •

edited

Loading

fabricteam commented Oct 27, 2021 •

edited

Loading

size-auditor Bot commented Oct 27, 2021 •

edited

Loading

codesandbox-ci Bot commented Oct 27, 2021 •

edited

Loading

fabricteam commented Oct 27, 2021 •

edited

Loading

Perf Analysis (`@fluentui/react`)

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

DustyTheBot commented Oct 29, 2021 •

edited

Loading

ecraig12345 Nov 9, 2021 •

edited

Loading