test(react-menu): add hook-level regression tests for react-menu components#36080
Open
mainframev wants to merge 2 commits intomicrosoft:masterfrom
Open
test(react-menu): add hook-level regression tests for react-menu components#36080mainframev wants to merge 2 commits intomicrosoft:masterfrom
mainframev wants to merge 2 commits intomicrosoft:masterfrom
Conversation
f0f630a to
d00173f
Compare
|
Pull request demo site: URL |
📊 Bundle size report✅ No changes found |
| @@ -0,0 +1,280 @@ | |||
| import * as React from 'react'; | |||
There was a problem hiding this comment.
🕵🏾♀️ visual changes to review in the Visual Change Report
vr-tests-react-components/Charts-DonutChart 2 screenshots
| Image Name | Diff(in Pixels) | Image Type |
|---|---|---|
| vr-tests-react-components/Charts-DonutChart.Dynamic - Dark Mode.default.chromium.png | 7530 | Changed |
| vr-tests-react-components/Charts-DonutChart.Dynamic.default.chromium.png | 5581 | Changed |
vr-tests-react-components/Menu Converged - submenuIndicator slotted content 2 screenshots
| Image Name | Diff(in Pixels) | Image Type |
|---|---|---|
| vr-tests-react-components/Menu Converged - submenuIndicator slotted content.default - RTL.submenus open.chromium.png | 404 | Changed |
| vr-tests-react-components/Menu Converged - submenuIndicator slotted content.default.submenus open.chromium.png | 606 | Changed |
vr-tests-react-components/Positioning 2 screenshots
| Image Name | Diff(in Pixels) | Image Type |
|---|---|---|
| vr-tests-react-components/Positioning.Positioning end.updated 2 times.chromium.png | 616 | Changed |
| vr-tests-react-components/Positioning.Positioning end.chromium.png | 611 | Changed |
vr-tests-react-components/ProgressBar converged 2 screenshots
| Image Name | Diff(in Pixels) | Image Type |
|---|---|---|
| vr-tests-react-components/ProgressBar converged.Indeterminate + thickness - Dark Mode.default.chromium.png | 67 | Changed |
| vr-tests-react-components/ProgressBar converged.Indeterminate + thickness - High Contrast.default.chromium.png | 191 | Changed |
vr-tests-react-components/Skeleton converged 1 screenshots
| Image Name | Diff(in Pixels) | Image Type |
|---|---|---|
| vr-tests-react-components/Skeleton converged.Opaque Skeleton with rectangle - Dark Mode.default.chromium.png | 13 | Changed |
vr-tests-react-components/TagPicker 3 screenshots
| Image Name | Diff(in Pixels) | Image Type |
|---|---|---|
| vr-tests-react-components/TagPicker.disabled - High Contrast.disabled input hover.chromium.png | 1319 | Changed |
| vr-tests-react-components/TagPicker.disabled - RTL.disabled input hover.chromium.png | 635 | Changed |
| vr-tests-react-components/TagPicker.disabled.disabled input hover.chromium.png | 677 | Changed |
There were 3 duplicate changes discarded. Check the build logs for more information.
47a9813 to
ffaee3d
Compare
…eMenuItemCheckbox, useMenuItemRadio, useMenuItemSwitch
ffaee3d to
b0fb267
Compare
78ba3f7 to
786c266
Compare
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Added unit tests to Menu components to support #36087 (should be merged first) and make sure that base hook delegation produces identical output and do not cause regression.
useMenu_unstable(19 tests)surfaceMotionslot exposed and configured with motion defaults derived fromopenopenOnHoverdefaults totruefor submenus; explicit prop winsmenuTrigger+menuPopover; single child →menuPopoveronlyopencontrolled / uncontrolled /defaultOpensemantics;setOpenexposedtriggerIdis non-empty and stable across re-rendersdefaultCheckedValueshonored on first render;checkedValues(controlled) wins;onCheckedValueChangefires on toggleisSubmenuisfalseat root,trueinside aMenuListparent contextuseMenuList_unstable(16 tests)componentsshape androotdiv slot;root.role = "menu";aria-labelledbyfromMenuContext.triggerIdclassNameandaria-labelspread ontoroothasIcons/hasCheckmarksdefault tofalseand are inherited fromMenuContexthasMenuContextflag toggles based on the surroundingMenuContextcheckedValuescontrolled / uncontrolled /defaultCheckedValuessemantics (folded in from the legacyuseMenuList.test.ts)setFocusByFirstCharacterfinds next item circularly and is case-insensitivetoggleCheckboxandselectRadiowork uncontrolleduseMenuPopover_unstable(20 tests)componentsshape with div root;role="presentation"alwaysinline,mountNode,safeZoneforwarded fromMenuContext(with documented defaults)restoreFocusSourceattributes spread ontorootonMouseEnter: original handler still called; opens menu whenopenOnHoveror when rendered as a submenu; no-op otherwiseonKeyDown: original handler still called; closes menu onEscape(target inside popover, menu open, notdefaultPrevented); no-op when closed or whenprevented; closes submenu on
ArrowLeft(ltr) /ArrowRight(rtl); honorsMenuListContext.shouldCloseOnArrowLeft;Tabcloses menu and focuses trigger(root) or just closes (submenu)
useMenuItem_unstable(18 tests)componentsshape (root, icon, checkmark, submenuIndicator, content, secondaryContent, subText);disableddefaults tofalsepersistOnClickfalls back toMenuContext.persistOnItemClickwhen prop omittedroot.role = "menuitem";className/aria-labelspread throughhasSubmenuderivation:MenuTriggerContextcontrols the value; explicit prop winssubmenuIndicatordefault chevron injection:undefinedwhenhasSubmenu=false; defined whentrue; ltr vs rtl chevrons differ; user-providedsubmenuIndicator.childrenoverride the defaulticon/checkmarkrenderByDefaultfromMenuListContext: present iffhasIcons/hasCheckmarksistrue(or the prop is supplied)useMenuItemLink_unstable(9 tests)rootoverridden to"a"while inheriting all otherMenuItemslotsroot.role = "menuitem";href,className,aria-label,tabIndexspread throughuseMenuItem: inheritspersistOnClickfromMenuContext.persistOnItemClick,hasSubmenufromMenuTriggerContext, anddisabledfrom props
useMenuItemCheckbox_unstable(11 tests)componentsshape androot/checkmarkslot presence (renderByDefault: trueforcheckmark)root.role = "menuitemcheckbox";aria-checkedreflectscheckedValues[name].includes(value)persistOnClick = trueregardless ofMenuContext.persistOnItemClickname/valueexposed on statecheckmarkdefault-icon injection:Checkmark16Filledinjected when nocheckmark.children; user-provided children winuseMenuItemRadio_unstable(10 tests)root.role = "menuitemradio"aria-checkedreflectscheckedValues[name].includes(value)name/valueexposed;Checkmark16Filleddefault-icon injection with user overrideuseMenuItemSwitch_unstable(12 tests)componentsshape includesswitchIndicator: "span";switchIndicatoralways present (renderByDefault: true)MenuItemCheckboxsemantics:root.role = "menuitemcheckbox",aria-checkedfromcheckedValues[name]checkmarkslot leaks through from theMenuItemCheckboxBasecomposition (it is not part of the publicSwitchtype andhas no default children) — pinned by a test so an unintentional change is caught
switchIndicatordefault-icon injection:CircleFilledinjected when noswitchIndicator.children; user-provided children win