Mui5 test fixups

.github/workflows/node.js.yml

@@ -7,7 +7,7 @@ on:
   push:
     branches: [ master ]
   pull_request:
-    branches: [ master ]
+    branches: [ master, mui5 ]
 
 jobs:
   build:

__tests__/src/components/LocalePicker.test.js

@@ -26,15 +26,15 @@ describe('LocalePicker', () => {
   it('renders a select with the current value', () => {
     createWrapper({ availableLocales: ['en', 'de'], locale: 'en' });
 
-    expect(screen.getByRole('button')).toHaveTextContent('en');
+    expect(screen.getByRole('combobox')).toHaveTextContent('en');
   });
 
   it('renders a select with a list item for each language passed in props', async () => {
     const user = userEvent.setup();
 
     createWrapper({ availableLocales: ['en', 'de'], locale: 'en' });
 
-    await user.click(screen.getByRole('button'));
+    await user.click(screen.getByRole('combobox'));
 
     expect(screen.getAllByRole('option')).toHaveLength(2);
     expect(screen.getByRole('option', { name: 'en' })).toBeInTheDocument();
@@ -51,7 +51,7 @@ describe('LocalePicker', () => {
       setLocale,
     });
 
-    await user.click(screen.getByRole('button'));
+    await user.click(screen.getByRole('combobox'));
     await user.click(screen.getByRole('option', { name: 'de' }));
 
     expect(setLocale).toHaveBeenCalledTimes(1);

__tests__/src/components/ManifestListItem.test.js

@@ -23,12 +23,14 @@ describe('ManifestListItem', () => {
     createWrapper({ buttonRef: 'ref' });
 
     expect(screen.getByRole('listitem')).toHaveAttribute('data-manifestid', 'http://example.com');
+    expect(screen.getByRole('listitem')).toHaveClass('MuiListItem-root');
     expect(screen.getByRole('button')).toHaveTextContent('xyz');
   });
   it('adds a class when the item is active', () => {
     createWrapper({ active: true, classes: { active: 'active' } });
 
     expect(screen.getByRole('listitem')).toHaveClass('active');
+    expect(screen.getByRole('listitem')).toHaveClass('Mui-selected');
   });
   it('renders a placeholder element until real data is available', () => {
     const { container } = createWrapper({ ready: false });

__tests__/src/components/WindowSideBarCanvasPanel.test.js

@@ -65,7 +65,7 @@ describe('WindowSideBarCanvasPanel', () => {
     createWrapper({ multipleSequences: true, updateSequence });
 
     expect(screen.getByTestId('sequence-select')).toHaveTextContent('a');
-    await user.click(within(screen.getByTestId('sequence-select')).getByRole('button'));
+    await user.click(within(screen.getByTestId('sequence-select')).getByRole('combobox'));
 
     const listbox = within(screen.getByRole('listbox'));
     expect(listbox.getAllByRole('option')).toHaveLength(2);

src/components/CompanionArea.js

@@ -39,6 +39,13 @@ const StyledToggleButton = styled(MiradorMenuButton)({
 
 /** */
 export class CompanionArea extends Component {
+  /** */
+  areaLayoutClass() {
+    const { classes, position } = this.props;
+
+    return (position === 'bottom' || position === 'far-bottom') ? classes.horizontal : null;
+  }
+
   /** */
   collapseIcon() {
     const { companionAreaOpen, direction } = this.props;
@@ -75,7 +82,7 @@ export class CompanionArea extends Component {
       companionWindowIds, companionAreaOpen, setCompanionAreaOpen,
       position, sideBarOpen, t, windowId,
     } = this.props;
-
+    const className = [this.areaLayoutClass(), ns(`companion-area-${position}`)].join(' ');
     return (
       <StyledRoot
         sx={{
@@ -84,7 +91,7 @@ export class CompanionArea extends Component {
             width: '100%',
           }),
         }}
-        className={`companion-area-${position}`}
+        className={className}
       >
         <Slide in={companionAreaOpen} direction={this.slideDirection()}>
           <StyledWrapper
@@ -120,6 +127,7 @@ export class CompanionArea extends Component {
 }
 
 CompanionArea.propTypes = {
+  classes: PropTypes.objectOf(PropTypes.string),
   companionAreaOpen: PropTypes.bool.isRequired,
   companionWindowIds: PropTypes.arrayOf(PropTypes.string).isRequired,
   direction: PropTypes.string.isRequired,
@@ -131,6 +139,7 @@ CompanionArea.propTypes = {
 };
 
 CompanionArea.defaultProps = {
+  classes: {},
   setCompanionAreaOpen: () => {},
   sideBarOpen: false,
 };

src/components/CompanionWindow.js

@@ -91,7 +91,7 @@ export class CompanionWindow extends Component {
    */
   render() {
     const {
-      ariaLabel, paperClassName, onCloseClick, updateCompanionWindow, isDisplayed,
+      ariaLabel, classes, paperClassName, onCloseClick, updateCompanionWindow, isDisplayed,
       position, t, title, children, titleControls, size,
       defaultSidebarPanelWidth, defaultSidebarPanelHeight,
     } = this.props;
@@ -135,7 +135,7 @@ export class CompanionWindow extends Component {
           display: isDisplayed ? null : 'none',
           order: position === 'left' ? -1 : null,
         }}
-        className={[ns(`companion-window-${position}`), paperClassName].join(' ')}
+        className={[ns(`companion-window-${position}`), paperClassName, position === 'bottom' ? classes.horizontal : classes.vertical].join(' ')}
         square
         component="aside"
         aria-label={ariaLabel || title}
@@ -161,7 +161,7 @@ export class CompanionWindow extends Component {
               minHeight: 'max-content',
               paddingLeft: 2,
             }}
-            className={ns('companion-window-header')}
+            className={[ns('companion-window-header'), size.width < 370 ? classes.small : null].join(' ')}
             disableGutters
           >
             <Typography
@@ -247,6 +247,7 @@ export class CompanionWindow extends Component {
 CompanionWindow.propTypes = {
   ariaLabel: PropTypes.string,
   children: PropTypes.node,
+  classes: PropTypes.objectOf(PropTypes.string),
   defaultSidebarPanelHeight: PropTypes.number,
   defaultSidebarPanelWidth: PropTypes.number,
   direction: PropTypes.string.isRequired,
@@ -267,6 +268,7 @@ CompanionWindow.propTypes = {
 CompanionWindow.defaultProps = {
   ariaLabel: undefined,
   children: undefined,
+  classes: {},
   defaultSidebarPanelHeight: 201,
   defaultSidebarPanelWidth: 235,
   isDisplayed: false,

src/components/GalleryViewThumbnail.js

@@ -122,6 +122,7 @@ export class GalleryViewThumbnail extends Component {
       <InView onChange={this.handleIntersection}>
         <StyledGalleryViewItem
           key={canvas.index}
+          className={selected ? 'selected' : ''}
           sx={{
             '&:focus': {
               outline: 'none',

src/components/ManifestListItem.js

@@ -99,6 +99,8 @@ export class ManifestListItem extends Component {
       return (
         <ListItem
           divider
+          selected={active}
+          className={active ? 'active' : ''}
           sx={theme => ({
             '&:hover,&:focus-within': {
               backgroundColor: theme.palette.action.hover,
@@ -123,6 +125,8 @@ export class ManifestListItem extends Component {
     return (
       <ListItem
         divider
+        selected={active}
+        className={active ? 'active' : ''}
         sx={theme => ({
           '&:hover,&:focus-within': {
             backgroundColor: theme.palette.action.hover,

src/components/SanitizedHtml.js

@@ -14,7 +14,7 @@ export class SanitizedHtml extends Component {
   */
   render() {
     const {
-      htmlString, ruleSet, ...props
+      classes, htmlString, ruleSet, ...props
     } = this.props;
 
     // Add a hook to make all links open a new window
@@ -35,7 +35,7 @@ export class SanitizedHtml extends Component {
             textDecoration: 'underline',
           },
         }}
-        className={[ns('third-party-html')].join(' ')}
+        className={[ns('third-party-html'), classes.root].join(' ')}
         dangerouslySetInnerHTML={{ // eslint-disable-line react/no-danger
           __html: DOMPurify.sanitize(htmlString, htmlRules[ruleSet]),
         }}
@@ -46,6 +46,11 @@ export class SanitizedHtml extends Component {
 }
 
 SanitizedHtml.propTypes = {
+  classes: PropTypes.objectOf(PropTypes.string),
   htmlString: PropTypes.string.isRequired,
   ruleSet: PropTypes.string.isRequired,
 };
+
+SanitizedHtml.defaultProps = {
+  classes: {},
+};

src/components/ScrollIndicatedDialogContent.js

@@ -6,7 +6,8 @@ import DialogContent from '@mui/material/DialogContent';
  *                                to indicate there is scrollable content
 */
 export function ScrollIndicatedDialogContent(props) {
-  const { className, ...otherProps } = props;
+  const { classes, className, ...otherProps } = props;
+  const ourClassName = [className, classes.shadowScrollDialog].join(' ');
 
   return (
     <DialogContent
@@ -29,16 +30,20 @@ export function ScrollIndicatedDialogContent(props) {
         backgroundSize: '100% 40px, 100% 40px, 100% 14px, 100% 14px',
         overflowY: 'auto',
       }}
-      className={className}
+      className={ourClassName}
       {...otherProps}
     />
   );
 }
 
 ScrollIndicatedDialogContent.propTypes = {
+  classes: PropTypes.shape({
+    shadowScrollDialog: PropTypes.string,
+  }),
   className: PropTypes.string,
 };
 
 ScrollIndicatedDialogContent.defaultProps = {
+  classes: {},
   className: '',
 };

src/components/SearchHit.js

@@ -101,6 +101,7 @@ export class SearchHit extends Component {
         scrollTo={windowSelected && !focused}
       >
         <ListItem
+          className={windowSelected ? 'windowSelected' : ''}
           sx={{
             '&.Mui-focused': {
               '&:hover': {

src/components/Window.js

@@ -1,7 +1,6 @@
 import { Component } from 'react';
 import PropTypes from 'prop-types';
 import { styled } from '@mui/material/styles';
-import cn from 'classnames';
 import Paper from '@mui/material/Paper';
 import { MosaicWindowContext } from 'react-mosaic-component/lib/contextTypes';
 import ns from '../config/css-ns';
@@ -134,7 +133,7 @@ export class Window extends Component {
             zIndex: theme.zIndex.modal - 1,
           }),
         })}
-        className={cn(ns('window'))}
+        className={ns('window')}
         aria-label={t('window', { label })}
       >
         {this.wrappedTopBar()}

src/components/WindowSideBar.js

@@ -13,12 +13,13 @@ export class WindowSideBar extends Component {
    */
   render() {
     const {
-      direction, t, windowId, sideBarOpen,
+      classes, direction, t, windowId, sideBarOpen,
     } = this.props;
 
     return (
       <Drawer
         variant="persistent"
+        className={classes.drawer}
         sx={theme => ({
           flexShrink: 0,
           height: '100%',
@@ -48,12 +49,14 @@ export class WindowSideBar extends Component {
 }
 
 WindowSideBar.propTypes = {
+  classes: PropTypes.objectOf(PropTypes.string),
   direction: PropTypes.string.isRequired,
   sideBarOpen: PropTypes.bool,
   t: PropTypes.func.isRequired,
   windowId: PropTypes.string.isRequired,
 };
 
 WindowSideBar.defaultProps = {
+  classes: {},
   sideBarOpen: false,
 };

src/components/WindowTopMenuButton.js

@@ -49,7 +49,7 @@ export class WindowTopMenuButton extends Component {
    */
   render() {
     const {
-      t, windowId,
+      classes, t, windowId,
     } = this.props;
     const { open, anchorEl } = this.state;
     const menuId = `window-menu_${windowId}`;
@@ -59,6 +59,7 @@ export class WindowTopMenuButton extends Component {
           aria-haspopup="true"
           aria-label={t('windowMenu')}
           aria-owns={open ? menuId : undefined}
+          className={open ? classes.ctrlBtnSelected : undefined}
           sx={{
             margin: 1,
             ...(open && {
@@ -82,10 +83,12 @@ export class WindowTopMenuButton extends Component {
 }
 
 WindowTopMenuButton.propTypes = {
+  classes: PropTypes.objectOf(PropTypes.string),
   t: PropTypes.func,
   windowId: PropTypes.string.isRequired,
 };
 
 WindowTopMenuButton.defaultProps = {
+  classes: {},
   t: key => key,
 };

src/components/WorkspaceArea.js

@@ -12,7 +12,7 @@ const StyledMain = styled('main')(({ theme }) => {
   const getBackgroundColor = theme.palette.mode === 'light' ? darken : lighten;
 
   return {
-    background: getBackgroundColor(theme.palette.shades.light, 0.1),
+    background: getBackgroundColor(theme.palette.grey.A200, 0.1),
     bottom: 0,
     left: 0,
     overflow: 'hidden',

src/components/WorkspaceElasticWindow.js

@@ -19,6 +19,7 @@ class WorkspaceElasticWindow extends Component {
    */
   render() {
     const {
+      classes,
       companionWindowDimensions,
       focused,
       focusWindow,
@@ -33,6 +34,7 @@ class WorkspaceElasticWindow extends Component {
     return (
       <StyledRnd
         focused={focused}
+        className={focused ? classes.focused : undefined}
         key={`${layout.windowId}-${workspace.id}`}
         size={{
           height: layout.height + companionWindowDimensions.height,
@@ -67,6 +69,7 @@ class WorkspaceElasticWindow extends Component {
 }
 
 WorkspaceElasticWindow.propTypes = {
+  classes: PropTypes.objectOf(PropTypes.string),
   companionWindowDimensions: PropTypes.shape({
     height: PropTypes.number,
     width: PropTypes.number,
@@ -86,6 +89,7 @@ WorkspaceElasticWindow.propTypes = {
 };
 
 WorkspaceElasticWindow.defaultProps = {
+  classes: {},
   companionWindowDimensions: { height: 0, width: 0 },
   focused: false,
   focusWindow: () => {},

src/components/ZoomControls.js

@@ -61,7 +61,7 @@ export class ZoomControls extends Component {
    */
   render() {
     const {
-      displayDivider, showZoomControls, t, zoomToWorld,
+      classes, displayDivider, showZoomControls, t, zoomToWorld,
     } = this.props;
 
     if (!showZoomControls) {
@@ -81,13 +81,14 @@ export class ZoomControls extends Component {
         <MiradorMenuButton aria-label={t('zoomReset')} onClick={() => zoomToWorld(false)}>
           <RestoreZoomIcon />
         </MiradorMenuButton>
-        {displayDivider && <Box component="span" sx={dividerStyle} />}
+        {displayDivider && <Box component="span" sx={dividerStyle} className={classes?.divider} />}
       </StyledZoomControlsWrapper>
     );
   }
 }
 
 ZoomControls.propTypes = {
+  classes: PropTypes.objectOf(PropTypes.string),
   displayDivider: PropTypes.bool,
   showZoomControls: PropTypes.bool,
   t: PropTypes.func,
@@ -102,6 +103,7 @@ ZoomControls.propTypes = {
 };
 
 ZoomControls.defaultProps = {
+  classes: {},
   displayDivider: true,
   showZoomControls: false,
   t: key => key,