Update tests for MUI 5

__tests__/src/components/IIIFAuthentication.test.js

@@ -33,17 +33,15 @@ describe('IIIFAuthentication', () => {
   describe('without an auth service', () => {
     it('renders nothing', () => {
       createWrapper({ authServiceId: null });
-      expect(screen.queryByText('login', { selector: 'span' })).not.toBeInTheDocument();
+      expect(screen.queryByRole('button', { name: 'login' })).not.toBeInTheDocument();
       expect(screen.queryByRole('button')).not.toBeInTheDocument();
     });
   });
   describe('with an available auth service', () => {
     it('renders a login bar', async () => {
       const handleAuthInteraction = jest.fn();
       createWrapper({ handleAuthInteraction });
-      const confirmBtn = screen.getByText('login', { selector: 'span' });
-      expect(confirmBtn).toBeInTheDocument();
-      await user.click(confirmBtn);
+      await user.click(screen.getByRole('button', { name: 'login' }));
       expect(handleAuthInteraction).toHaveBeenCalledWith('w', 'http://example.com/auth');
     });
     it('renders nothing for a non-interactive login', () => {
@@ -55,7 +53,8 @@ describe('IIIFAuthentication', () => {
     it('renders with an error message', async () => {
       const handleAuthInteraction = jest.fn();
       createWrapper({ handleAuthInteraction, status: 'failed' });
-      const confirmBtn = await screen.findByText('retry', { selector: 'span' });
+      await user.click(screen.getByRole('button', { name: 'continue' }));
+      const confirmBtn = screen.getByRole('button', { name: /retry/ });
       expect(screen.getByText('Login failed')).toBeInTheDocument();
       expect(screen.getByText('cancel')).toBeInTheDocument();
       expect(screen.getByText('... and this is why.')).toBeInTheDocument();
@@ -71,7 +70,7 @@ describe('IIIFAuthentication', () => {
       window.open = mockWindowOpen;
       const resolveCookieMock = jest.fn();
       createWrapper({ resolveAuthenticationRequest: resolveCookieMock, status: 'cookie' });
-      expect(screen.getByText('login', { selector: 'span' })).toBeInTheDocument();
+      expect(screen.getByRole('button', { name: 'login' })).toBeInTheDocument();
       expect(mockWindowOpen).toHaveBeenCalledWith(`http://example.com/auth?origin=${window.origin}`, 'IiifLoginSender', 'centerscreen');
       mockWindow.closed = true;
       jest.runOnlyPendingTimers();
@@ -81,7 +80,7 @@ describe('IIIFAuthentication', () => {
     it('does the IIIF access token behavior', async () => {
       const resolveTokenMock = jest.fn();
       createWrapper({ resolveAccessTokenRequest: resolveTokenMock, status: 'token' });
-      expect(screen.getByText('login', { selector: 'span' })).toBeInTheDocument();
+      expect(screen.getByRole('button', { name: 'login' })).toBeInTheDocument();
       window.dispatchEvent(new MessageEvent('message', {
         data: { messageId: 'http://example.com/token' },
       }));
@@ -100,7 +99,7 @@ describe('IIIFAuthentication', () => {
         resetAuthenticationState,
         status: 'ok',
       });
-      const confirmBtn = await screen.findByText('exit', { selector: 'span' });
+      const confirmBtn = await screen.findByRole('button', { name: 'exit' });
       await user.click(confirmBtn);
       await waitFor(() => expect(resetAuthenticationState).toHaveBeenCalledWith({
         authServiceId: 'http://example.com/auth', tokenServiceId: 'http://example.com/token',

__tests__/src/components/LanguageSettings.test.js

@@ -35,13 +35,6 @@ describe('LanguageSettings', () => {
     expect(screen.getAllByRole('menuitem')).toHaveLength(2);
   });
 
-  it('non-active list items are buttons (and active are not)', () => {
-    createWrapper({ languages });
-
-    expect(screen.getByRole('menuitem', { name: 'Deutsch' })).not.toHaveClass('MuiButtonBase-root');
-    expect(screen.getByRole('menuitem', { name: 'English' })).toHaveClass('MuiButtonBase-root');
-  });
-
   it('renders the check icon when the active prop returns true', () => {
     createWrapper({ languages });
 

__tests__/src/components/SearchPanel.test.js

@@ -54,7 +54,7 @@ describe('SearchPanel', () => {
   it('has the SearchPanelControls component', () => {
     createWrapper();
 
-    expect(screen.getByRole('textbox', { name: 'searchInputLabel' })).toBeInTheDocument();
+    expect(screen.getByRole('combobox', { name: 'searchInputLabel' })).toBeInTheDocument();
     expect(screen.getByRole('button', { name: 'searchSubmitAria' })).toBeInTheDocument();
   });
 

__tests__/src/components/SearchPanelControls.test.js

@@ -33,7 +33,7 @@ describe('SearchPanelControls', () => {
       searchService: { id: 'http://example.com/search', options: { resource: { id: 'abc' } } },
     });
 
-    await user.click(screen.getByRole('textbox'));
+    await user.click(screen.getByRole('combobox'));
     await user.keyboard('somestring');
     await user.click(await screen.findByText('somestring 12345'));
     expect(fetchSearch).toHaveBeenCalledWith('window', 'cw', 'http://example.com/search?q=somestring+12345', 'somestring 12345');
@@ -44,7 +44,7 @@ describe('SearchPanelControls', () => {
   it('renders a text input through the renderInput prop', () => {
     createWrapper();
 
-    expect(screen.getByRole('textbox')).toHaveAttribute('id', 'search-cw');
+    expect(screen.getByRole('combobox')).toHaveAttribute('id', 'search-cw');
   });
   it('endAdornment is a SearchIcon (with no CircularProgress indicator)', () => {
     createWrapper();
@@ -67,7 +67,7 @@ describe('SearchPanelControls', () => {
     };
     createWrapper({ fetchSearch, query: 'asdf', searchService });
 
-    await user.clear(screen.getByRole('textbox'));
+    await user.clear(screen.getByRole('combobox'));
     await user.keyboard('yolo');
     await user.click(screen.getByRole('button'));
 
@@ -84,20 +84,20 @@ describe('SearchPanelControls', () => {
 
     createWrapper({ fetchSearch, query: '', searchService });
 
-    await user.clear(screen.getByRole('textbox'));
+    await user.clear(screen.getByRole('combobox'));
     await user.click(screen.getByRole('button', { name: 'searchSubmitAria' }));
     expect(fetchSearch).not.toHaveBeenCalled();
   });
 
   describe('input', () => {
     it('has the query prop has the input value on intial render', () => {
       createWrapper({ query: 'Wolpertinger' });
-      expect(screen.getByRole('textbox')).toHaveValue('Wolpertinger');
+      expect(screen.getByRole('combobox')).toHaveValue('Wolpertinger');
     });
 
     it('clears the local search state/input when the incoming query prop has been cleared', () => {
       const wrapper = createWrapper({ query: 'Wolpertinger' });
-      expect(screen.getByRole('textbox')).toHaveValue('Wolpertinger');
+      expect(screen.getByRole('combobox')).toHaveValue('Wolpertinger');
 
       wrapper.rerender((
         <SearchPanelControls
@@ -107,7 +107,7 @@ describe('SearchPanelControls', () => {
         />
       ));
 
-      expect(screen.getByRole('textbox')).toHaveValue('');
+      expect(screen.getByRole('combobox')).toHaveValue('');
     });
   });
 });

__tests__/src/components/WindowAuthenticationBar.test.js

@@ -37,38 +37,36 @@ describe('AuthenticationControl', () => {
   it('renders a non-collapsing version if there is no description', () => {
     createWrapper({ description: undefined, header: undefined });
     expect(screen.getByText('Log in to see more', { selector: 'span' })).toBeInTheDocument();
-    expect(screen.getByText('Login', { selector: 'span' })).toBeInTheDocument();
+    expect(screen.getByRole('button')).toHaveTextContent('Login');
   });
 
   it('renders a collapsable version if there is a description', async () => {
     createWrapper({ description: 'long description', header: 'Login to Example Institution' });
     const continueBtn = document.querySelectorAll('.MuiButtonBase-root')[0];
-    const cancelBtn = screen.getByText('cancel', { selector: 'span' }).closest('button');
-    const loginBtn = screen.getByText('Login', { selector: 'span' });
     const collapseEl = document.querySelector('.MuiCollapse-hidden');
 
     // disable transition animations for easier testing of the Mui Collapse open/close state
     config.disabled = true;
     // initial collapsed state: Presence of continue button text. Hidden cancelBtn, loginBtn, and description
     expect(screen.getByText('continue')).toBeInTheDocument();
-    expect(cancelBtn).not.toBeVisible();
-    expect(loginBtn).not.toBeVisible();
+    expect(screen.queryByRole('button', { name: 'cancel' })).not.toBeInTheDocument();
+    expect(screen.queryByRole('button', { name: 'Login' })).not.toBeInTheDocument();
     expect(within(collapseEl).getByText('long description')).not.toBeVisible();
     // click to expand
     await user.click(continueBtn);
     // expanded state: Removal of continue button text from DOM. Visible cancelBtn, loginBtn, and description
     expect(screen.queryByText('continue')).not.toBeInTheDocument();
-    expect(cancelBtn).toBeVisible();
-    expect(loginBtn).toBeVisible();
+    expect(screen.getByRole('button', { name: 'cancel' })).toBeVisible();
+    expect(screen.getByRole('button', { name: 'Login' })).toBeVisible();
     expect(within(collapseEl).getByText('long description')).toBeVisible();
     expect(collapseEl).toHaveClass('MuiCollapse-entered');
 
     // click the cancel button to collapse
-    await user.click(cancelBtn);
+    await user.click(screen.getByRole('button', { name: 'cancel' }));
     // collapsed state: Presence of continue button text. Hidden cancelBtn, loginBtn, and description
     expect(screen.getByText('continue')).toBeInTheDocument();
-    expect(cancelBtn).not.toBeVisible();
-    expect(loginBtn).not.toBeVisible();
+    expect(screen.queryByRole('button', { name: 'cancel' })).not.toBeInTheDocument();
+    expect(screen.queryByRole('button', { name: 'Login' })).not.toBeInTheDocument();
     expect(within(collapseEl).getByText('long description')).not.toBeVisible();
     // re-enable transition animation
     config.disabled = false;
@@ -77,7 +75,7 @@ describe('AuthenticationControl', () => {
   it('triggers an action when the confirm button is clicked', async () => {
     const onConfirm = jest.fn();
     createWrapper({ onConfirm });
-    await user.click(screen.getByText('Login', { selector: 'span' }).closest('button'));
+    await user.click(screen.getByRole('button', { name: 'Login' }));
     expect(onConfirm).toHaveBeenCalled();
   });
 

src/components/ErrorDialog.js

@@ -29,7 +29,7 @@ export class ErrorDialog extends Component {
         open={hasError}
       >
         <DialogTitle id="error-dialog-title">
-          <Typography variant="h2">{t('errorDialogTitle')}</Typography>
+          {t('errorDialogTitle')}
         </DialogTitle>
         <DialogContent>
           <DialogContentText variant="body2" noWrap color="inherit">

src/components/LanguageSettings.js

@@ -23,7 +23,6 @@ export class LanguageSettings extends Component {
         {
           languages.map(language => (
             <MenuItem
-              button={!language.current}
               key={language.locale}
               onClick={() => { handleClick(language.locale); }}
             >

src/components/MinimalWindow.js

@@ -62,7 +62,7 @@ export class MinimalWindow extends Component {
                 className={cn(classes.button, ns('window-close'))}
                 onClick={removeWindow}
                 TooltipProps={{
-                  tabIndex: ariaLabel ? '0' : '-1',
+                  tabIndex: ariaLabel ? 0 : -1,
                 }}
               >
                 <CloseIcon />

src/components/ScrollTo.js

@@ -104,7 +104,7 @@ export class ScrollTo extends Component {
   */
   render() {
     const {
-      children, containerRef, offsetTop, scrollTo, ...otherProps
+      children, containerRef, offsetTop, scrollTo, nodeId, ...otherProps
     } = this.props;
 
     if (!scrollTo) return children;

src/components/SidebarIndexTableOfContents.js

@@ -51,20 +51,13 @@ export class SidebarIndexTableOfContents extends Component {
   }
 
   /** */
-  handleKeyPressed(event, nodeId) {
+  handleNodeSelect(event, nodeId) {
     const { toggleNode } = this.props;
 
-    if (event.key === 'Enter') {
-      this.selectTreeItem(nodeId);
-    }
-
     if (event.key === ' ' || event.key === 'Spacebar') {
       toggleNode(nodeId);
     }
-  }
 
-  /** */
-  handleNodeSelect(_event, nodeId) {
     this.selectTreeItem(nodeId);
   }
 
@@ -120,7 +113,6 @@ export class SidebarIndexTableOfContents extends Component {
             root: classes.treeItemRoot,
             selected: classes.selected,
           }}
-          onKeyDown={e => this.handleKeyPressed(e, node.id)}
           label={(
             <div
               className={clsx({

src/components/WindowThumbnailSettings.js

@@ -39,7 +39,7 @@ export class WindowThumbnailSettings extends Component {
 
     return (
       <>
-        <ListSubheader role="presentation" disableSticky tabIndex="-1">{t('thumbnails')}</ListSubheader>
+        <ListSubheader role="presentation" disableSticky tabIndex={-1}>{t('thumbnails')}</ListSubheader>
 
         <MenuItem className={classes.MenuItem} onClick={() => { this.handleChange('off'); handleClose(); }}>
           <FormControlLabel

src/components/WindowTopMenu.js

@@ -11,7 +11,7 @@ function PluginHookWithHeader(props) {
   const { PluginComponents, t } = props; // eslint-disable-line react/prop-types
   return PluginComponents ? (
     <>
-      <ListSubheader role="presentation" disableSticky tabIndex="-1">{t('windowPluginButtons')}</ListSubheader>
+      <ListSubheader role="presentation" disableSticky tabIndex={-1}>{t('windowPluginButtons')}</ListSubheader>
       <PluginHook {...props} />
     </>
   ) : null;

src/components/WindowViewSettings.js

@@ -68,7 +68,7 @@ export class WindowViewSettings extends Component {
     if (viewTypes.length === 0) return null;
     return (
       <>
-        <ListSubheader role="presentation" disableSticky tabIndex="-1">{t('view')}</ListSubheader>
+        <ListSubheader role="presentation" disableSticky tabIndex={-1}>{t('view')}</ListSubheader>
         { viewTypes.map(value => menuItem({ Icon: iconMap[value], value })) }
       </>
     );

src/containers/ManifestListItem.js

@@ -73,7 +73,12 @@ const styles = theme => ({
     backgroundColor: theme.palette.grey[300],
   },
   root: {
-    ...theme.mixins.gutters(),
+    paddingLeft: theme.spacing(2),
+    paddingRight: theme.spacing(2),
+    [theme.breakpoints.up('sm')]: {
+      paddingLeft: theme.spacing(3),
+      paddingRight: theme.spacing(3),
+    },
     '&$active': {
       borderLeft: `4px solid ${theme.palette.primary.main}`,
     },

src/containers/WorkspaceAdd.js

@@ -42,7 +42,12 @@ const styles = theme => ({
     right: theme.spacing(2),
   },
   form: {
-    ...theme.mixins.gutters(),
+    paddingLeft: theme.spacing(2),
+    paddingRight: theme.spacing(2),
+    [theme.breakpoints.up('sm')]: {
+      paddingLeft: theme.spacing(3),
+      paddingRight: theme.spacing(3),
+    },
     left: '0',
     marginTop: 48,
     paddingBottom: theme.spacing(2),