tests: fix tests

Author: Fabian Stoehr

__tests__/src/components/WindowTopMenu.test.js

@@ -33,16 +33,21 @@ describe('WindowTopMenu', () => {
 
     const menuSections = within(screen.getByRole('menu')).getAllByRole('presentation');
     expect(menuSections).toHaveLength(2);
+
     expect(menuSections[0]).toHaveTextContent('View');
-    expect(menuSections[1]).toHaveTextContent('Thumbnails');
+    const menus = within(screen.getByRole('menu')).getAllByRole('menubar');
 
-    const menuItems = screen.getAllByRole('menuitem');
-    expect(menuItems).toHaveLength(5);
-    expect(menuItems[0]).toHaveTextContent('Single');
-    expect(menuItems[1]).toHaveTextContent('Gallery');
-    expect(menuItems[2]).toHaveTextContent('Off');
-    expect(menuItems[3]).toHaveTextContent('Bottom');
-    expect(menuItems[4]).toHaveTextContent('Right');
+    const viewItems = within(menus[0]).getAllByRole('menuitemradio');
+    expect(viewItems).toHaveLength(2);
+    expect(viewItems[0]).toHaveTextContent('Single');
+    expect(viewItems[1]).toHaveTextContent('Gallery');
+
+    expect(menuSections[1]).toHaveTextContent('Thumbnails');
+    const thumbnailItems = within(menus[1]).getAllByRole('menuitemradio');
+    expect(thumbnailItems).toHaveLength(3);
+    expect(thumbnailItems[0]).toHaveTextContent('Off');
+    expect(thumbnailItems[1]).toHaveTextContent('Bottom');
+    expect(thumbnailItems[2]).toHaveTextContent('Right');
   });
 
   it('does not display unless open', () => {
@@ -66,7 +71,7 @@ describe('WindowTopMenu', () => {
     />);
 
     // click a menu item should close the menu
-    const menuItems = screen.getAllByRole('menuitem');
+    const menuItems = screen.getAllByRole('menuitemradio');
     await user.click(menuItems[0]);
     expect(handleClose).toHaveBeenCalledTimes(1);
     expect(toggleDraggingEnabled).toHaveBeenCalledTimes(1);

__tests__/src/components/WindowViewSettings.test.js

@@ -20,7 +20,7 @@ describe('WindowViewSettings', () => {
   it('renders all elements correctly', () => {
     createWrapper();
     expect(screen.getByRole('presentation', { selector: 'li' })).toBeInTheDocument();
-    const menuItems = screen.queryAllByRole('menuitem');
+    const menuItems = screen.queryAllByRole('menuitemradio');
     expect(menuItems.length).toBe(4);
     expect(menuItems[0]).toHaveTextContent(/Single/i);
     expect(menuItems[1]).toHaveTextContent(/Book/i);
@@ -29,29 +29,29 @@ describe('WindowViewSettings', () => {
   });
   it('single should set the correct label active (by setting the secondary color)', () => {
     createWrapper({ windowViewType: 'single' });
-    expect(screen.getByRole('menuitem', { name: /Single/ }).querySelector('svg')).toHaveClass('MuiSvgIcon-colorSecondary'); // eslint-disable-line testing-library/no-node-access
-    expect(screen.getByRole('menuitem', { name: /Book/ }).querySelector('svg')).not.toHaveClass('MuiSvgIcon-colorSecondary'); // eslint-disable-line testing-library/no-node-access
+    expect(screen.getByRole('menuitemradio', { name: /Single/ }).querySelector('svg')).toHaveClass('MuiSvgIcon-colorSecondary'); // eslint-disable-line testing-library/no-node-access
+    expect(screen.getByRole('menuitemradio', { name: /Book/ }).querySelector('svg')).not.toHaveClass('MuiSvgIcon-colorSecondary'); // eslint-disable-line testing-library/no-node-access
   });
   it('book should set the correct label active (by setting the secondary color)', () => {
     createWrapper({ windowViewType: 'book' });
-    expect(screen.getByRole('menuitem', { name: /Book/ }).querySelector('svg')).toHaveClass('MuiSvgIcon-colorSecondary'); // eslint-disable-line testing-library/no-node-access
-    expect(screen.getByRole('menuitem', { name: /Single/ }).querySelector('svg')).not.toHaveClass('MuiSvgIcon-colorSecondary'); // eslint-disable-line testing-library/no-node-access
+    expect(screen.getByRole('menuitemradio', { name: /Book/ }).querySelector('svg')).toHaveClass('MuiSvgIcon-colorSecondary'); // eslint-disable-line testing-library/no-node-access
+    expect(screen.getByRole('menuitemradio', { name: /Single/ }).querySelector('svg')).not.toHaveClass('MuiSvgIcon-colorSecondary'); // eslint-disable-line testing-library/no-node-access
   });
   it('scroll should set the correct label active (by setting the secondary color)', () => {
     createWrapper({ windowViewType: 'scroll' });
-    expect(screen.getByRole('menuitem', { name: /Scroll/ }).querySelector('svg')).toHaveClass('MuiSvgIcon-colorSecondary'); // eslint-disable-line testing-library/no-node-access
-    expect(screen.getByRole('menuitem', { name: /Single/ }).querySelector('svg')).not.toHaveClass('MuiSvgIcon-colorSecondary'); // eslint-disable-line testing-library/no-node-access
+    expect(screen.getByRole('menuitemradio', { name: /Scroll/ }).querySelector('svg')).toHaveClass('MuiSvgIcon-colorSecondary'); // eslint-disable-line testing-library/no-node-access
+    expect(screen.getByRole('menuitemradio', { name: /Single/ }).querySelector('svg')).not.toHaveClass('MuiSvgIcon-colorSecondary'); // eslint-disable-line testing-library/no-node-access
   });
   it('gallery should set the correct label active (by setting the secondary color)', () => {
     createWrapper({ windowViewType: 'gallery' });
-    expect(screen.getByRole('menuitem', { name: /Gallery/ }).querySelector('svg')).toHaveClass('MuiSvgIcon-colorSecondary'); // eslint-disable-line testing-library/no-node-access
-    expect(screen.getByRole('menuitem', { name: /Single/ }).querySelector('svg')).not.toHaveClass('MuiSvgIcon-colorSecondary'); // eslint-disable-line testing-library/no-node-access
+    expect(screen.getByRole('menuitemradio', { name: /Gallery/ }).querySelector('svg')).toHaveClass('MuiSvgIcon-colorSecondary'); // eslint-disable-line testing-library/no-node-access
+    expect(screen.getByRole('menuitemradio', { name: /Single/ }).querySelector('svg')).not.toHaveClass('MuiSvgIcon-colorSecondary'); // eslint-disable-line testing-library/no-node-access
   });
   it('updates state when the view config selection changes', async () => {
     const setWindowViewType = vi.fn();
     createWrapper({ setWindowViewType });
     const user = userEvent.setup();
-    const menuItems = screen.queryAllByRole('menuitem');
+    const menuItems = screen.queryAllByRole('menuitemradio');
     expect(menuItems.length).toBe(4);
     await user.click(menuItems[0]);
     expect(setWindowViewType).toHaveBeenCalledWith('xyz', 'single');

src/components/WindowThumbnailSettings.js

@@ -47,10 +47,11 @@ export function WindowThumbnailSettings({
       <ListSubheader role="presentation" disableSticky>{t('thumbnails')}</ListSubheader>
       <StyledMenuList role="menubar">
         <ThumbnailOption
-          aria-selected={thumbnailNavigationPosition === 'off'}
+          aria-checked={thumbnailNavigationPosition === 'off'}
           autoFocus={thumbnailNavigationPosition === 'off'}
           key="off"
           onClick={() => { handleChange('off'); }}
+          role="menuitemradio"
           selected={thumbnailNavigationPosition === 'off'}
         >
           <FormControlLabel
@@ -63,10 +64,11 @@ export function WindowThumbnailSettings({
           />
         </ThumbnailOption>
         <ThumbnailOption
-          aria-selected={thumbnailNavigationPosition === 'far-bottom'}
+          aria-checked={thumbnailNavigationPosition === 'far-bottom'}
           autoFocus={thumbnailNavigationPosition === 'far-bottom'}
           key="far-bottom"
           onClick={() => { handleChange('far-bottom'); }}
+          role="menuitemradio"
           selected={thumbnailNavigationPosition === 'far-bottom'}
         >
           <FormControlLabel
@@ -79,10 +81,11 @@ export function WindowThumbnailSettings({
           />
         </ThumbnailOption>
         <ThumbnailOption
-          aria-selected={thumbnailNavigationPosition === 'far-right'}
+          aria-checked={thumbnailNavigationPosition === 'far-right'}
           autoFocus={thumbnailNavigationPosition === 'far-right'}
           key="far-right"
           onClick={() => { handleChange('far-right'); }}
+          role="menuitemradio"
           selected={thumbnailNavigationPosition === 'far-right'}
         >
           <FormControlLabel

src/components/WindowViewSettings.js

@@ -61,8 +61,8 @@ export function WindowViewSettings({
       autoFocus={windowViewType === value}
       key={value}
       onClick={() => { handleChange(value); handleClose(); }}
-      selected={windowViewType === value}
       role="menuitemradio"
+      selected={windowViewType === value}
     >
       <FormControlLabel
         value={value}