Add unit test

Aljullu · Aljullu · commit 6b5c7f7b7965 · 2026-03-05T11:00:42.000+01:00
diff --git a/packages/components/src/menu/test/index.tsx b/packages/components/src/menu/test/index.tsx
@@ -611,6 +611,99 @@ describe( 'Menu', () => {
 			).toBeChecked();
 		} );
 
+		it( 'should allow resetting checked radio items from outside the menu', async () => {
+			const ControlledRadioMenus = () => {
+				const [ selectedOption, setSelectedOption ] = useState<
+					'menu-a-option' | 'menu-b-option'
+				>( 'menu-a-option' );
+
+				return (
+					<>
+						<Menu>
+							<Menu.TriggerButton>Open menu A</Menu.TriggerButton>
+							<Menu.Popover>
+								<Menu.Group>
+									<Menu.RadioItem
+										name="menu-a"
+										value="menu-a-option"
+										checked={
+											selectedOption === 'menu-a-option'
+										}
+										onChange={ () =>
+											setSelectedOption( 'menu-a-option' )
+										}
+									>
+										Menu A option
+									</Menu.RadioItem>
+								</Menu.Group>
+							</Menu.Popover>
+						</Menu>
+
+						<Menu>
+							<Menu.TriggerButton>Open menu B</Menu.TriggerButton>
+							<Menu.Popover>
+								<Menu.Group>
+									<Menu.RadioItem
+										name="menu-b"
+										value="menu-b-option"
+										checked={
+											selectedOption === 'menu-b-option'
+										}
+										onChange={ () =>
+											setSelectedOption( 'menu-b-option' )
+										}
+									>
+										Menu B option
+									</Menu.RadioItem>
+								</Menu.Group>
+							</Menu.Popover>
+						</Menu>
+					</>
+				);
+			};
+
+			render( <ControlledRadioMenus /> );
+
+			const openMenuAMenu = screen.getByRole( 'button', {
+				name: 'Open menu A',
+			} );
+			const openMenuBMenu = screen.getByRole( 'button', {
+				name: 'Open menu B',
+			} );
+
+			// Open the first menu and verify its checked state.
+			await click( openMenuAMenu );
+			const menuAOptionInitial = screen.getByRole( 'menuitemradio', {
+				name: 'Menu A option',
+			} );
+			expect( menuAOptionInitial ).toBeChecked();
+
+			// Close the first menu.
+			await click( document.body );
+
+			// Open the second menu, change the selection there.
+			await click( openMenuBMenu );
+			const menuBOption = screen.getByRole( 'menuitemradio', {
+				name: 'Menu B option',
+			} );
+			expect( menuBOption ).not.toBeChecked();
+
+			await click( menuBOption );
+			expect( menuBOption ).toBeChecked();
+
+			// Close the second menu.
+			await click( document.body );
+
+			// Reopen the first menu: its radio item should now reflect the
+			// updated external state and be unchecked.
+			await click( openMenuAMenu );
+
+			const menuAOption = screen.getByRole( 'menuitemradio', {
+				name: 'Menu A option',
+			} );
+			expect( menuAOption ).not.toBeChecked();
+		} );
+
 		it( 'should check checkbox items and keep the menu open when clicking (controlled)', async () => {
 			const onCheckboxValueChangeSpy = jest.fn();
 
