Skip to content

Commit

Permalink
Merge pull request #3804 from ProjectMirador/3795-mui5-tests-rebased
Browse files Browse the repository at this point in the history
Rebased #3795
  • Loading branch information
cbeer authored Nov 21, 2023
2 parents 00b8980 + 072702b commit 0847e2a
Show file tree
Hide file tree
Showing 14 changed files with 61 additions and 18 deletions.
2 changes: 1 addition & 1 deletion .github/workflows/node.js.yml
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ on:
push:
branches: [ master ]
pull_request:
branches: [ master ]
branches: [ master, mui5 ]

jobs:
build:
Expand Down
9 changes: 7 additions & 2 deletions __tests__/src/components/ManifestListItem.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -23,12 +23,17 @@ 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('properly interprets active in the DOM', () => {
createWrapper({ active: true });
it('adds a class when the item is active', () => {
createWrapper({ active: true, classes: { active: 'active' } });

// If this is true, we can assume the proper styling classes are being applied
expect(screen.getByRole('listitem')).toHaveAttribute('data-active', 'true');

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 });
Expand Down
13 changes: 11 additions & 2 deletions src/components/CompanionArea.js
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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={{
Expand All @@ -84,7 +91,7 @@ export class CompanionArea extends Component {
width: '100%',
}),
}}
className={ns(`companion-area-${position}`)}
className={className}
>
<Slide in={companionAreaOpen} direction={this.slideDirection()}>
<StyledWrapper
Expand Down Expand Up @@ -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,
Expand All @@ -131,6 +139,7 @@ CompanionArea.propTypes = {
};

CompanionArea.defaultProps = {
classes: {},
setCompanionAreaOpen: () => {},
sideBarOpen: false,
};
8 changes: 5 additions & 3 deletions src/components/CompanionWindow.js
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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}
Expand All @@ -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
Expand Down Expand Up @@ -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,
Expand All @@ -267,6 +268,7 @@ CompanionWindow.propTypes = {
CompanionWindow.defaultProps = {
ariaLabel: undefined,
children: undefined,
classes: {},
defaultSidebarPanelHeight: 201,
defaultSidebarPanelWidth: 235,
isDisplayed: false,
Expand Down
1 change: 1 addition & 0 deletions src/components/GalleryViewThumbnail.js
Original file line number Diff line number Diff line change
Expand Up @@ -122,6 +122,7 @@ export class GalleryViewThumbnail extends Component {
<InView onChange={this.handleIntersection}>
<StyledGalleryViewItem
key={canvas.index}
className={selected ? 'selected' : ''}
sx={{
'&:focus': {
outline: 'none',
Expand Down
4 changes: 4 additions & 0 deletions src/components/ManifestListItem.js
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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,
Expand Down
9 changes: 7 additions & 2 deletions src/components/SanitizedHtml.js
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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]),
}}
Expand All @@ -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: {},
};
9 changes: 7 additions & 2 deletions src/components/ScrollIndicatedDialogContent.js
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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: '',
};
1 change: 1 addition & 0 deletions src/components/SearchHit.js
Original file line number Diff line number Diff line change
Expand Up @@ -101,6 +101,7 @@ export class SearchHit extends Component {
scrollTo={windowSelected && !focused}
>
<ListItem
className={windowSelected ? 'windowSelected' : ''}
sx={{
'&.Mui-focused': {
'&:hover': {
Expand Down
3 changes: 1 addition & 2 deletions src/components/Window.js
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -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()}
Expand Down
5 changes: 4 additions & 1 deletion src/components/WindowSideBar.js
Original file line number Diff line number Diff line change
Expand Up @@ -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%',
Expand Down Expand Up @@ -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,
};
5 changes: 4 additions & 1 deletion src/components/WindowTopMenuButton.js
Original file line number Diff line number Diff line change
Expand Up @@ -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}`;
Expand All @@ -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 && {
Expand All @@ -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,
};
4 changes: 4 additions & 0 deletions src/components/WorkspaceElasticWindow.js
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ class WorkspaceElasticWindow extends Component {
*/
render() {
const {
classes,
companionWindowDimensions,
focused,
focusWindow,
Expand All @@ -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,
Expand Down Expand Up @@ -67,6 +69,7 @@ class WorkspaceElasticWindow extends Component {
}

WorkspaceElasticWindow.propTypes = {
classes: PropTypes.objectOf(PropTypes.string),
companionWindowDimensions: PropTypes.shape({
height: PropTypes.number,
width: PropTypes.number,
Expand All @@ -86,6 +89,7 @@ WorkspaceElasticWindow.propTypes = {
};

WorkspaceElasticWindow.defaultProps = {
classes: {},
companionWindowDimensions: { height: 0, width: 0 },
focused: false,
focusWindow: () => {},
Expand Down
6 changes: 4 additions & 2 deletions src/components/ZoomControls.js
Original file line number Diff line number Diff line change
Expand Up @@ -61,10 +61,10 @@ export class ZoomControls extends Component {
* @returns {Box | null}
*/
renderDivider() {
const { displayDivider } = this.props;
const { classes, displayDivider } = this.props;

if (displayDivider) {
return <Box component="span" sx={dividerStyle} />;
return <Box component="span" sx={dividerStyle} className={classes?.divider} />;
}

return null;
Expand Down Expand Up @@ -103,6 +103,7 @@ export class ZoomControls extends Component {
}

ZoomControls.propTypes = {
classes: PropTypes.objectOf(PropTypes.string),
displayDivider: PropTypes.bool,
showZoomControls: PropTypes.bool,
t: PropTypes.func,
Expand All @@ -117,6 +118,7 @@ ZoomControls.propTypes = {
};

ZoomControls.defaultProps = {
classes: {},
displayDivider: true,
showZoomControls: false,
t: key => key,
Expand Down

0 comments on commit 0847e2a

Please sign in to comment.