Skip to content

test(react-link): remove enzyme#20337

Merged
msft-fluent-ui-bot merged 3 commits intomicrosoft:masterfrom
ndresx:react-link-tests-rtl
Oct 25, 2021
Merged

test(react-link): remove enzyme#20337
msft-fluent-ui-bot merged 3 commits intomicrosoft:masterfrom
ndresx:react-link-tests-rtl

Conversation

@ndresx
Copy link
Contributor

@ndresx ndresx commented Oct 25, 2021

Pull request checklist

Description of changes

Replaces react-link's enzyme tests with @testing-library/react. Also migrated the existing react-test-renderer tests due to the DOM dependencies (e.g., document.activeElement).

PS: I have noticed that ComponentTestFacade itself is still using enzyme, and it's manipulating the DOM for its behavioral checks. Therefore, I needed to add this reset line in the tests (there could be a class function to clean up its changes).

@codesandbox-ci
Copy link

codesandbox-ci bot commented Oct 25, 2021

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

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

@fabricteam
Copy link
Collaborator

fabricteam commented Oct 25, 2021

📊 Bundle size report

Unchanged fixtures
Package & Exports Size (minified/GZIP)
react-components
react-components: Accordion, Button, FluentProvider, Image, Menu, Popover
169.335 kB
48.057 kB
react-components
react-components: FluentProvider & webLightTheme
32.188 kB
10.658 kB
react-link
Link
11.646 kB
4.699 kB
🤖 This report was generated against 8cee28054c8667836c0a7ffd69587b4da370658c

@size-auditor
Copy link

size-auditor bot commented Oct 25, 2021

Asset size changes

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

Baseline commit: 8cee28054c8667836c0a7ffd69587b4da370658c (build)

@fabricteam
Copy link
Collaborator

fabricteam commented Oct 25, 2021

Perf Analysis (@fluentui/react)

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 1001 1040 5000
BaseButton mount 1007 1092 5000
Breadcrumb mount 2661 2707 1000
ButtonNext mount 529 515 5000
Checkbox mount 1768 1699 5000
CheckboxBase mount 1438 1594 5000
ChoiceGroup mount 5188 5038 5000
ComboBox mount 1047 1060 1000
CommandBar mount 10126 10350 1000
ContextualMenu mount 6646 6837 1000
DefaultButton mount 1215 1196 5000
DetailsRow mount 3877 4007 5000
DetailsRowFast mount 3866 4194 5000
DetailsRowNoStyles mount 3768 3806 5000
Dialog mount 2680 2689 1000
DocumentCardTitle mount 175 165 1000
Dropdown mount 3496 3477 5000
FluentProviderNext mount 3492 3293 5000
FluentProviderWithTheme mount 217 196 10
FluentProviderWithTheme virtual-rerender 112 117 10
FluentProviderWithTheme virtual-rerender-with-unmount 240 232 10
FocusTrapZone mount 1861 1836 5000
FocusZone mount 1902 1828 5000
IconButton mount 1979 2064 5000
Label mount 369 373 5000
Layer mount 3347 3377 5000
Link mount 541 548 5000
MakeStyles mount 1995 1990 50000
MenuButton mount 1765 1735 5000
MessageBar mount 2204 2266 5000
Nav mount 3617 3678 1000
OverflowSet mount 1217 1241 5000
Panel mount 2706 2774 1000
Persona mount 956 1007 1000
Pivot mount 1579 1630 1000
PrimaryButton mount 1397 1422 5000
Rating mount 8954 9022 5000
SearchBox mount 1569 1513 5000
Shimmer mount 2828 2747 5000
Slider mount 2129 2150 5000
SpinButton mount 5457 5477 5000
Spinner mount 513 469 5000
SplitButton mount 3481 3419 5000
Stack mount 557 582 5000
StackWithIntrinsicChildren mount 1868 1985 5000
StackWithTextChildren mount 5239 5296 5000
SwatchColorPicker mount 12238 11226 5000
Tabs mount 1578 1578 1000
TagPicker mount 2856 2951 5000
TeachingBubble mount 13459 13738 5000
Text mount 488 477 5000
TextField mount 1532 1502 5000
ThemeProvider mount 1260 1215 5000
ThemeProvider virtual-rerender 680 638 5000
ThemeProvider virtual-rerender-with-unmount 2051 2149 5000
Toggle mount 898 857 5000
buttonNative mount 144 145 5000

Perf Analysis (@fluentui/react-northstar)

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
SkeletonMinimalPerf.default 428 385 1.11:1
AttachmentMinimalPerf.default 191 174 1.1:1
TextMinimalPerf.default 414 381 1.09:1
VideoMinimalPerf.default 740 679 1.09:1
ButtonSlotsPerf.default 660 611 1.08:1
ListWith60ListItems.default 774 714 1.08:1
MenuMinimalPerf.default 980 908 1.08:1
TreeMinimalPerf.default 912 848 1.08:1
ButtonMinimalPerf.default 201 188 1.07:1
CardMinimalPerf.default 656 614 1.07:1
FormMinimalPerf.default 495 462 1.07:1
GridMinimalPerf.default 383 358 1.07:1
AnimationMinimalPerf.default 455 428 1.06:1
BoxMinimalPerf.default 397 375 1.06:1
ChatMinimalPerf.default 752 708 1.06:1
DropdownMinimalPerf.default 3488 3305 1.06:1
HeaderSlotsPerf.default 894 843 1.06:1
EmbedMinimalPerf.default 4927 4677 1.05:1
ListNestedPerf.default 657 624 1.05:1
RefMinimalPerf.default 255 242 1.05:1
AttachmentSlotsPerf.default 1187 1138 1.04:1
ProviderMinimalPerf.default 1276 1232 1.04:1
ToolbarMinimalPerf.default 1078 1041 1.04:1
DividerMinimalPerf.default 420 406 1.03:1
HeaderMinimalPerf.default 393 382 1.03:1
ListMinimalPerf.default 621 603 1.03:1
MenuButtonMinimalPerf.default 1822 1772 1.03:1
PopupMinimalPerf.default 625 608 1.03:1
RadioGroupMinimalPerf.default 509 492 1.03:1
IconMinimalPerf.default 707 688 1.03:1
TableMinimalPerf.default 450 439 1.03:1
ChatWithPopoverPerf.default 444 437 1.02:1
DatepickerMinimalPerf.default 5888 5788 1.02:1
TableManyItemsPerf.default 2138 2099 1.02:1
AlertMinimalPerf.default 309 307 1.01:1
ButtonOverridesMissPerf.default 1907 1884 1.01:1
CheckboxMinimalPerf.default 2927 2895 1.01:1
FlexMinimalPerf.default 314 310 1.01:1
LayoutMinimalPerf.default 404 399 1.01:1
SliderMinimalPerf.default 1861 1844 1.01:1
TooltipMinimalPerf.default 1154 1144 1.01:1
AvatarMinimalPerf.default 228 227 1:1
CarouselMinimalPerf.default 528 530 1:1
DialogMinimalPerf.default 799 801 1:1
InputMinimalPerf.default 1381 1382 1:1
RosterPerf.default 1355 1358 1:1
ProviderMergeThemesPerf.default 1765 1762 1:1
StatusMinimalPerf.default 746 747 1:1
TextAreaMinimalPerf.default 571 572 1:1
ImageMinimalPerf.default 424 427 0.99:1
SplitButtonMinimalPerf.default 4693 4757 0.99:1
ItemLayoutMinimalPerf.default 1349 1382 0.98:1
ReactionMinimalPerf.default 431 440 0.98:1
CustomToolbarPrototype.default 4547 4652 0.98:1
TreeWith60ListItems.default 212 216 0.98:1
AccordionMinimalPerf.default 162 167 0.97:1
LoaderMinimalPerf.default 743 768 0.97:1
ChatDuplicateMessagesPerf.default 314 336 0.93:1
PortalMinimalPerf.default 184 197 0.93:1
LabelMinimalPerf.default 434 472 0.92:1
DropdownManyItemsPerf.default 773 846 0.91:1
SegmentMinimalPerf.default 388 425 0.91:1
ListCommonPerf.default 687 787 0.87:1


const tree = component.toJSON();
expect(tree).toMatchSnapshot();
expect(result).toMatchSnapshot();
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think all of these should check for result.container:

Suggested change
expect(result).toMatchSnapshot();
expect(result.container).toMatchSnapshot();

Copy link
Member

@khmakoto khmakoto left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM! Thanks for doing this!

@msft-fluent-ui-bot
Copy link
Collaborator

Hello @khmakoto!

Because this pull request has the AutoMerge label, I will be glad to assist with helping to merge this pull request once all check-in policies pass.

p.s. you can customize the way I help with merging this pull request, such as holding this pull request until a specific person approves. Simply @mention me (@msft-fluent-ui-bot) and give me an instruction to get started! Learn more here.

@msft-fluent-ui-bot msft-fluent-ui-bot merged commit 63b209c into microsoft:master Oct 25, 2021
mlp73 pushed a commit to mlp73/fluentui that referenced this pull request Jan 17, 2022
#### Pull request checklist

- [x] Addresses an existing issue: Fixes microsoft#19940
- [x] Include a change request file using `$ yarn change`

#### Description of changes

Replaces `react-link`'s `enzyme` tests with `@testing-library/react`. Also migrated the existing `react-test-renderer` tests due to the DOM dependencies (e.g., `document.activeElement`).

PS: I have noticed that `ComponentTestFacade` itself is still using `enzyme`, and it's manipulating the DOM for its behavioral checks. Therefore, I needed to add this reset line in the tests (there could be a class function to clean up its changes).
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

react-link uses enzyme for parts of its testing

5 participants