Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Button: Adding visual regression tests for focused scenarios #13832

Merged
merged 1 commit into from Jun 30, 2020

Conversation

khmakoto
Copy link
Member

Pull request checklist

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

Description of changes

This PR adds visual regression tests for scenarios where the Button has been focused.

Focus areas to test

(optional)

@codesandbox-ci
Copy link

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

Sandbox Source
Fluent UI Button Configuration

@msft-github-bot
Copy link
Contributor

Perf Analysis

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
BaseButton mount 975 955 5000
ButtonNext mount 591 599 5000
Checkbox mount 1690 1760 5000
CheckboxBase mount 1540 1388 5000
CheckboxNext mount 1662 1697 5000
ChoiceGroup mount 5503 5527 5000
ComboBox mount 1021 984 1000
CommandBar mount 8165 8211 1000
ContextualMenu mount 14211 14085 1000
DefaultButton mount 1204 1251 5000
DetailsRow mount 3792 3819 5000
DetailsRowFast mount 3845 3835 5000
DetailsRowNoStyles mount 3669 3690 5000
Dialog mount 1619 1601 1000
DocumentCardTitle mount 1871 1877 1000
Dropdown mount 2788 2779 5000
FocusZone mount 1856 1863 5000
IconButton mount 1965 1904 5000
Label mount 380 377 5000
Link mount 481 481 5000
LinkNext mount 476 521 5000
MenuButton mount 1590 1619 5000
Nav mount 3542 3458 1000
Panel mount 1563 1567 1000
Persona mount 907 914 1000
Pivot mount 1520 1501 1000
PivotNext mount 1461 1466 1000
PrimaryButton mount 1364 1354 5000
SearchBox mount 1401 1390 5000
SearchBoxNext mount 1425 1471 5000
Slider mount 1649 1681 5000
SliderNext mount 2084 2150 5000
Spinner mount 475 438 5000
SplitButton mount 3424 3381 5000
Stack mount 551 581 5000
StackWithIntrinsicChildren mount 2044 1957 5000
StackWithTextChildren mount 5445 5453 5000
TagPicker mount 3084 2999 5000
Text mount 462 452 5000
TextField mount 1594 1584 5000
ThemeProvider mount 2869 2981 5000
ThemeProvider virtual-rerender 508 543 5000
Toggle mount 945 935 5000
ToggleNext mount 938 931 5000
button mount 116 123 5000

Perf Analysis (Fluent)

Perf comparison
Status Scenario Fluent TPI Fabric TPI Ratio Iterations Ticks
🎯 Avatar.Fluent 0.46 0.54 0.85:1 2000 917
🦄 Button.Fluent 0.12 0.21 0.57:1 5000 586
🔧 Checkbox.Fluent 0.68 0.38 1.79:1 1000 679
🎯 Dialog.Fluent 0.16 0.23 0.7:1 5000 794
🔧 Dropdown.Fluent 3.39 0.5 6.78:1 1000 3391
🔧 Icon.Fluent 0.15 0.06 2.5:1 5000 774
🦄 Image.Fluent 0.08 0.12 0.67:1 5000 395
🔧 Slider.Fluent 1.6 0.37 4.32:1 1000 1603
🔧 Text.Fluent 0.07 0.03 2.33:1 5000 369
🦄 Tooltip.Fluent 0.1 18.18 0.01:1 5000 503

🔧 Needs work     🎯 On target     🦄 Amazing

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
DividerMinimalPerf.default 394 356 1.11:1
PortalMinimalPerf.default 126 116 1.09:1
TextAreaMinimalPerf.default 539 499 1.08:1
FlexMinimalPerf.default 304 285 1.07:1
HierarchicalTreeMinimalPerf.default 457 433 1.06:1
TextMinimalPerf.default 371 349 1.06:1
AttachmentSlotsPerf.default 1218 1155 1.05:1
ButtonSlotsPerf.default 647 616 1.05:1
ChatWithPopoverPerf.default 509 485 1.05:1
Checkbox.Fluent 679 647 1.05:1
AttachmentMinimalPerf.default 164 157 1.04:1
HeaderMinimalPerf.default 372 358 1.04:1
ProviderMinimalPerf.default 907 870 1.04:1
SegmentMinimalPerf.default 373 359 1.04:1
Button.Fluent 586 565 1.04:1
AvatarMinimalPerf.default 514 500 1.03:1
ChatMinimalPerf.default 634 615 1.03:1
EmbedMinimalPerf.default 2062 2001 1.03:1
GridMinimalPerf.default 781 755 1.03:1
ImageMinimalPerf.default 391 379 1.03:1
ListCommonPerf.default 1007 982 1.03:1
ListWith60ListItems.default 1153 1117 1.03:1
ProviderMergeThemesPerf.default 1945 1892 1.03:1
TreeMinimalPerf.default 933 908 1.03:1
TreeWith60ListItems.default 232 225 1.03:1
Icon.Fluent 774 755 1.03:1
AlertMinimalPerf.default 322 316 1.02:1
CardMinimalPerf.default 605 595 1.02:1
LayoutMinimalPerf.default 418 410 1.02:1
MenuButtonMinimalPerf.default 1616 1587 1.02:1
PopupMinimalPerf.default 688 677 1.02:1
ReactionMinimalPerf.default 408 401 1.02:1
Dialog.Fluent 794 778 1.02:1
Image.Fluent 395 387 1.02:1
Text.Fluent 369 360 1.02:1
CarouselMinimalPerf.default 481 475 1.01:1
DropdownManyItemsPerf.default 1440 1425 1.01:1
RefMinimalPerf.default 207 204 1.01:1
SplitButtonMinimalPerf.default 3909 3876 1.01:1
StatusMinimalPerf.default 718 712 1.01:1
IconMinimalPerf.default 746 742 1.01:1
ChatDuplicateMessagesPerf.default 448 450 1:1
DropdownMinimalPerf.default 3392 3385 1:1
ListMinimalPerf.default 496 496 1:1
ListNestedPerf.default 923 921 1:1
LoaderMinimalPerf.default 766 764 1:1
CustomToolbarPrototype.default 3789 3771 1:1
ToolbarMinimalPerf.default 1018 1022 1:1
Avatar.Fluent 917 918 1:1
ButtonMinimalPerf.default 179 181 0.99:1
DialogMinimalPerf.default 770 781 0.99:1
LabelMinimalPerf.default 418 424 0.99:1
RadioGroupMinimalPerf.default 453 459 0.99:1
TableMinimalPerf.default 433 438 0.99:1
Dropdown.Fluent 3391 3415 0.99:1
AccordionMinimalPerf.default 147 150 0.98:1
MenuMinimalPerf.default 878 900 0.98:1
SliderMinimalPerf.default 1616 1645 0.98:1
TableManyItemsPerf.default 2384 2424 0.98:1
Slider.Fluent 1603 1633 0.98:1
Tooltip.Fluent 503 512 0.98:1
CheckboxMinimalPerf.default 2913 2993 0.97:1
InputMinimalPerf.default 1048 1080 0.97:1
ItemLayoutMinimalPerf.default 1315 1355 0.97:1
BoxMinimalPerf.default 352 365 0.96:1
HeaderSlotsPerf.default 832 869 0.96:1
VideoMinimalPerf.default 659 684 0.96:1
AnimationMinimalPerf.default 379 401 0.95:1
FormMinimalPerf.default 435 466 0.93:1
TooltipMinimalPerf.default 788 920 0.86:1

@size-auditor
Copy link

size-auditor bot commented Jun 27, 2020

Asset size changes

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

Baseline commit: 796868d7faad91ca11150b9c8c5c3efb80e543ac (build)

"document.getElementsByClassName('testWrapper')[0].classList.add('ms-Fabric--isFocusVisible')",
)
.executeScript("document.getElementsByTagName('button')[0].focus()")
.snapshot('focus', { cropTo: '.testWrapper' })
Copy link
Contributor

Choose a reason for hiding this comment

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

i don't see new screener screenshots for the focus step?

Copy link
Member Author

Choose a reason for hiding this comment

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

What do you mean? If you click on the screener results they are there:

image

Copy link
Contributor

Choose a reason for hiding this comment

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

I'm blind :). approved!

@msft-github-bot
Copy link
Contributor

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-github-bot) and give me an instruction to get started! Learn more here.

@msft-github-bot msft-github-bot merged commit a41ab1f into microsoft:master Jun 30, 2020
@khmakoto khmakoto deleted the buttonFocusVRTest branch June 30, 2020 01:55
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.

None yet

4 participants