diff --git a/packages/components/src/menu/test/index.tsx b/packages/components/src/menu/test/index.tsx index 60276cdb2379a..42e1516d94bbb 100644 --- a/packages/components/src/menu/test/index.tsx +++ b/packages/components/src/menu/test/index.tsx @@ -18,17 +18,28 @@ const delay = ( delayInMs: number ) => { return new Promise( ( resolve ) => setTimeout( resolve, delayInMs ) ); }; +// Open dropdown => open menu +// Submenu trigger item => open submenu + describe( 'Menu', () => { // See https://www.w3.org/WAI/ARIA/apg/patterns/menu-button/ it( 'should follow the WAI-ARIA spec', async () => { render( - Open dropdown }> - Menu item - - Submenu trigger item }> - Submenu item 1 - Submenu item 2 - + + Open dropdown + + Menu item + + + + Submenu trigger item + + + Submenu item 1 + Submenu item 2 + + + ); @@ -84,8 +95,11 @@ describe( 'Menu', () => { describe( 'pointer and keyboard interactions', () => { it( 'should open and focus the menu when clicking the trigger', async () => { render( - Open dropdown }> - Menu item + + Open dropdown + + Menu item + ); @@ -105,10 +119,13 @@ describe( 'Menu', () => { it( 'should open and focus the first item when pressing the arrow down key on the trigger', async () => { render( - Open dropdown }> - First item - Second item - Third item + + Open dropdown + + First item + Second item + Third item + ); @@ -135,10 +152,13 @@ describe( 'Menu', () => { it( 'should open and focus the first item when pressing the space key on the trigger', async () => { render( - Open dropdown }> - First item - Second item - Third item + + Open dropdown + + First item + Second item + Third item + ); @@ -165,8 +185,11 @@ describe( 'Menu', () => { it( 'should close when pressing the escape key', async () => { render( - Open dropdown }> - Menu item + + Open dropdown + + Menu item + ); @@ -194,8 +217,11 @@ describe( 'Menu', () => { it( 'should close when clicking outside of the content', async () => { render( - Open dropdown }> - Menu item + + Open dropdown + + Menu item + ); @@ -209,8 +235,11 @@ describe( 'Menu', () => { it( 'should close when clicking on a menu item', async () => { render( - Open dropdown }> - Menu item + + Open dropdown + + Menu item + ); @@ -224,8 +253,11 @@ describe( 'Menu', () => { it( 'should not close when clicking on a menu item when the `hideOnClick` prop is set to `false`', async () => { render( - Open dropdown }> - Menu item + + Open dropdown + + Menu item + ); @@ -239,8 +271,11 @@ describe( 'Menu', () => { it( 'should not close when clicking on a disabled menu item', async () => { render( - Open dropdown }> - Menu item + + Open dropdown + + Menu item + ); @@ -254,16 +289,22 @@ describe( 'Menu', () => { it( 'should reveal submenu content when hovering over the submenu trigger', async () => { render( - Open dropdown }> - Menu item 1 - Menu item 2 - Submenu trigger item } - > - Submenu item 1 - Submenu item 2 - - Menu item 3 + + Open dropdown + + Menu item 1 + Menu item 2 + + + Submenu trigger item + + + Submenu item 1 + Submenu item 2 + + + Menu item 3 + ); @@ -288,16 +329,22 @@ describe( 'Menu', () => { it( 'should navigate menu items and subitems using the arrow, spacebar and enter keys', async () => { render( - Open dropdown }> - Menu item 1 - Menu item 2 - Submenu trigger item } - > - Submenu item 1 - Submenu item 2 - - Menu item 3 + + Open dropdown + + Menu item 1 + Menu item 2 + + + Submenu trigger item + + + Submenu item 1 + Submenu item 2 + + + Menu item 3 + ); @@ -407,25 +454,28 @@ describe( 'Menu', () => { setRadioValue( e.target.value ); }; return ( - Open dropdown }> - - - Radio item one - - - Radio item two - - + + Open dropdown + + + + Radio item one + + + Radio item two + + + ); }; @@ -484,28 +534,31 @@ describe( 'Menu', () => { it( 'should check radio items and keep the menu open when clicking (uncontrolled)', async () => { const onRadioValueChangeSpy = jest.fn(); render( - Open dropdown }> - - - onRadioValueChangeSpy( e.target.value ) - } - > - Radio item one - - - onRadioValueChangeSpy( e.target.value ) - } - > - Radio item two - - + + Open dropdown + + + + onRadioValueChangeSpy( e.target.value ) + } + > + Radio item one + + + onRadioValueChangeSpy( e.target.value ) + } + > + Radio item two + + + ); @@ -568,38 +621,41 @@ describe( 'Menu', () => { useState< boolean >(); return ( - Open dropdown }> - { - onCheckboxValueChangeSpy( - e.target.name, - e.target.value, - e.target.checked - ); - setItemOneChecked( e.target.checked ); - } } - > - Checkbox item one - - - { - onCheckboxValueChangeSpy( - e.target.name, - e.target.value, - e.target.checked - ); - setItemTwoChecked( e.target.checked ); - } } - > - Checkbox item two - + + Open dropdown + + { + onCheckboxValueChangeSpy( + e.target.name, + e.target.value, + e.target.checked + ); + setItemOneChecked( e.target.checked ); + } } + > + Checkbox item one + + + { + onCheckboxValueChangeSpy( + e.target.name, + e.target.value, + e.target.checked + ); + setItemTwoChecked( e.target.checked ); + } } + > + Checkbox item two + + ); }; @@ -691,35 +747,38 @@ describe( 'Menu', () => { const onCheckboxValueChangeSpy = jest.fn(); render( - Open dropdown }> - { - onCheckboxValueChangeSpy( - e.target.name, - e.target.value, - e.target.checked - ); - } } - > - Checkbox item one - - - { - onCheckboxValueChangeSpy( - e.target.name, - e.target.value, - e.target.checked - ); - } } - > - Checkbox item two - + + Open dropdown + + { + onCheckboxValueChangeSpy( + e.target.name, + e.target.value, + e.target.checked + ); + } } + > + Checkbox item one + + + { + onCheckboxValueChangeSpy( + e.target.name, + e.target.value, + e.target.checked + ); + } } + > + Checkbox item two + + ); @@ -809,8 +868,11 @@ describe( 'Menu', () => { it( 'should be modal by default', async () => { render( <> - Open dropdown }> - Menu item + + Open dropdown + + Menu item + @@ -836,11 +898,11 @@ describe( 'Menu', () => { it( 'should not be modal when the `modal` prop is set to `false`', async () => { render( <> - Open dropdown } - modal={ false } - > - Menu item + + Open dropdown + + Menu item + @@ -873,8 +935,13 @@ describe( 'Menu', () => { describe( 'items prefix and suffix', () => { it( 'should display a prefix on regular items', async () => { render( - Open dropdown }> - Item prefix }>Menu item + + Open dropdown + + Item prefix }> + Menu item + + ); @@ -895,8 +962,13 @@ describe( 'Menu', () => { it( 'should display a suffix on regular items', async () => { render( - Open dropdown }> - Item suffix }>Menu item + + Open dropdown + + Item suffix }> + Menu item + + ); @@ -917,14 +989,17 @@ describe( 'Menu', () => { it( 'should display a suffix on radio items', async () => { render( - Open dropdown }> - - Radio item one - + + Open dropdown + + + Radio item one + + ); @@ -945,14 +1020,17 @@ describe( 'Menu', () => { it( 'should display a suffix on checkbox items', async () => { render( - Open dropdown }> - - Checkbox item one - + + Open dropdown + + + Checkbox item one + + ); @@ -975,9 +1053,12 @@ describe( 'Menu', () => { describe( 'typeahead', () => { it( 'should highlight matching item', async () => { render( - Open dropdown }> - One - Two + + Open dropdown + + One + Two + ); @@ -1008,9 +1089,12 @@ describe( 'Menu', () => { it( 'should keep previous focus when no matches are found', async () => { render( - Open dropdown }> - One - Two + + Open dropdown + + One + Two + );