Skip to content

test(react-menu): add hook-level regression tests for react-menu components#36080

Open
mainframev wants to merge 2 commits intomicrosoft:masterfrom
mainframev:test/test-react-menu-hook-regression-tests
Open

test(react-menu): add hook-level regression tests for react-menu components#36080
mainframev wants to merge 2 commits intomicrosoft:masterfrom
mainframev:test/test-react-menu-hook-regression-tests

Conversation

@mainframev
Copy link
Copy Markdown
Contributor

@mainframev mainframev commented Apr 30, 2026

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)

  • surfaceMotion slot exposed and configured with motion defaults derived from open
  • Documented default values applied when no props are provided
  • openOnHover defaults to true for submenus; explicit prop wins
  • Two children → menuTrigger + menuPopover; single child → menuPopover only
  • open controlled / uncontrolled / defaultOpen semantics; setOpen exposed
  • triggerId is non-empty and stable across re-renders
  • defaultCheckedValues honored on first render; checkedValues (controlled) wins; onCheckedValueChange fires on toggle
  • isSubmenu is false at root, true inside a MenuList parent context

useMenuList_unstable (16 tests)

  • components shape and root div slot; root.role = "menu"; aria-labelledby from MenuContext.triggerId
  • className and aria-label spread onto root
  • hasIcons / hasCheckmarks default to false and are inherited from MenuContext
  • hasMenuContext flag toggles based on the surrounding MenuContext
  • checkedValues controlled / uncontrolled / defaultCheckedValues semantics (folded in from the legacy useMenuList.test.ts)
  • setFocusByFirstCharacter finds next item circularly and is case-insensitive
  • toggleCheckbox and selectRadio work uncontrolled

useMenuPopover_unstable (20 tests)

  • components shape with div root; role="presentation" always
  • inline, mountNode, safeZone forwarded from MenuContext (with documented defaults)
  • restoreFocusSource attributes spread onto root
  • onMouseEnter: original handler still called; opens menu when openOnHover or when rendered as a submenu; no-op otherwise
  • onKeyDown: original handler still called; closes menu on Escape (target inside popover, menu open, not defaultPrevented); no-op when closed or when
    prevented; closes submenu on ArrowLeft (ltr) / ArrowRight (rtl); honors MenuListContext.shouldCloseOnArrowLeft; Tab closes menu and focuses trigger
    (root) or just closes (submenu)
  • Does not throw on unmount

useMenuItem_unstable (18 tests)

  • components shape (root, icon, checkmark, submenuIndicator, content, secondaryContent, subText); disabled defaults to false
  • persistOnClick falls back to MenuContext.persistOnItemClick when prop omitted
  • root.role = "menuitem"; className / aria-label spread through
  • hasSubmenu derivation: MenuTriggerContext controls the value; explicit prop wins
  • submenuIndicator default chevron injection: undefined when hasSubmenu=false; defined when true; ltr vs rtl chevrons differ; user-provided
    submenuIndicator.children override the default
  • icon / checkmark renderByDefault from MenuListContext: present iff hasIcons / hasCheckmarks is true (or the prop is supplied)

useMenuItemLink_unstable (9 tests)

  • root overridden to "a" while inheriting all other MenuItem slots
  • root.role = "menuitem"; href, className, aria-label, tabIndex spread through
  • Composition with useMenuItem: inherits persistOnClick from MenuContext.persistOnItemClick, hasSubmenu from MenuTriggerContext, and disabled
    from props

useMenuItemCheckbox_unstable (11 tests)

  • components shape and root/checkmark slot presence (renderByDefault: true for checkmark)
  • root.role = "menuitemcheckbox"; aria-checked reflects checkedValues[name].includes(value)
  • persistOnClick = true regardless of MenuContext.persistOnItemClick
  • name / value exposed on state
  • checkmark default-icon injection: Checkmark16Filled injected when no checkmark.children; user-provided children win

useMenuItemRadio_unstable (10 tests)

  • Same shape/slot expectations as Checkbox, but root.role = "menuitemradio"
  • aria-checked reflects checkedValues[name].includes(value)
  • name / value exposed; Checkmark16Filled default-icon injection with user override

useMenuItemSwitch_unstable (12 tests)

  • components shape includes switchIndicator: "span"; switchIndicator always present (renderByDefault: true)
  • Reuses MenuItemCheckbox semantics: root.role = "menuitemcheckbox", aria-checked from checkedValues[name]
  • Documented runtime quirk: a checkmark slot leaks through from the MenuItemCheckboxBase composition (it is not part of the public Switch type and
    has no default children) — pinned by a test so an unintentional change is caught
  • switchIndicator default-icon injection: CircleFilled injected when no switchIndicator.children; user-provided children win

@mainframev mainframev force-pushed the test/test-react-menu-hook-regression-tests branch from f0f630a to d00173f Compare April 30, 2026 11:12
@github-actions
Copy link
Copy Markdown

Pull request demo site: URL

@mainframev mainframev changed the title test(react-menu): add hook-level regression tests for useMenuItem, us… test(react-menu): add hook-level regression tests for react-menu components Apr 30, 2026
@github-actions
Copy link
Copy Markdown

github-actions Bot commented Apr 30, 2026

📊 Bundle size report

✅ No changes found

@@ -0,0 +1,280 @@
import * as React from 'react';
Copy link
Copy Markdown

@github-actions github-actions Bot Apr 30, 2026

Choose a reason for hiding this comment

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

🕵🏾‍♀️ 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.

@mainframev mainframev self-assigned this Apr 30, 2026
@mainframev mainframev force-pushed the test/test-react-menu-hook-regression-tests branch 2 times, most recently from 47a9813 to ffaee3d Compare April 30, 2026 21:06
…eMenuItemCheckbox, useMenuItemRadio, useMenuItemSwitch
@mainframev mainframev force-pushed the test/test-react-menu-hook-regression-tests branch from ffaee3d to b0fb267 Compare May 5, 2026 09:21
@mainframev mainframev marked this pull request as ready for review May 5, 2026 09:46
@mainframev mainframev requested a review from a team as a code owner May 5, 2026 09:46
@mainframev mainframev force-pushed the test/test-react-menu-hook-regression-tests branch from 78ba3f7 to 786c266 Compare May 5, 2026 14:04
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.

1 participant