WIP try to fix test in mirador

__tests__/src/components/VideoViewer.test.js

-import { render, screen } from 'test-utils';
-import { shallow } from 'enzyme';
+import { render } from 'test-utils';
 import { Utils } from 'manifesto.js';
 import AnnotationFactory from '../../../src/lib/AnnotationFactory';
 import { VideoViewer } from '../../../src/components/VideoViewer';

jest-puppeteer.config.js

 module.exports = {
   launch: {
-    headless: process.env.HEADLESS !== 'false' ? 'new' : false,
     args: ['--no-sandbox', '--disable-setuid-sandbox'],
+    headless: process.env.HEADLESS !== 'false' ? 'new' : false,
   },
   server: [{
     command: 'npm run server -- -p 4488',

package.json

@@ -49,6 +49,7 @@
     "classnames": "^2.2.6",
     "deepmerge": "^4.2.2",
     "dompurify": "^3.0.0",
+    "expect-puppeteer": "^9.0.2",
     "i18next": "^21.0.0 || ^22.0.0 || ^23.0.0",
     "lodash": "^4.17.11",
     "manifesto.js": "^4.2.0",

setup-expect-timeout.js

 const { setDefaultOptions } = require('expect-puppeteer');
+
 setDefaultOptions({ timeout: 2000 });

src/components/AnnotationManifestsAccordion.js

-import React, { Component } from 'react';
+import { Component } from 'react';
 import Accordion from '@mui/material/Accordion';
 import AccordionSummary from '@mui/material/AccordionSummary';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
@@ -27,15 +27,15 @@ export class AnnotationManifestsAccordion extends Component {
       return match ? match[0].split('#').slice(-1) : null;
     }
 
-    const { annotation } = this.props;
+    // eslint-disable-next-line react/prop-types
+    const { annotation } = props;
 
+    // eslint-disable-next-line react/prop-types
     annotation.manifestsOpen = false;
+    // eslint-disable-next-line react/prop-types
     annotation.manifests = searchManifestInID(annotation.id);
-    if (annotation.manifests) {
-      annotation.manifests = annotation.manifests.map(id => ({ id }));
-    } else {
-      annotation.manifests = [];
-    }
+    // eslint-disable-next-line react/prop-types
+    annotation.manifests = annotation.manifests?.map(id => ({ id })) ?? [];
 
     this.state = { annotation };
   }
@@ -52,7 +52,8 @@ export class AnnotationManifestsAccordion extends Component {
   /** */
   render() {
     const {
-      classes, t, i18n,
+      // eslint-disable-next-line react/prop-types
+      t,
     } = this.props;
 
     const { annotation } = this.state;
@@ -68,7 +69,7 @@ export class AnnotationManifestsAccordion extends Component {
             expandIcon={<ExpandMoreIcon />}
             onClick={(e) => this.handleOpenAccordion(e)}
           >
-            <Typography className={classes.heading}>{t('manifestFound')}</Typography>
+            <Typography>{t('manifestFound')}</Typography>
           </AccordionSummary>
           {
             annotation.manifestsOpen && (
@@ -82,7 +83,6 @@ export class AnnotationManifestsAccordion extends Component {
               {annotation.manifests.map(manifest => (
                 <AnnotationManifestsItem
                   manifestId={manifest.id}
-                  language={i18n.language}
                   key={manifest}
                   t={t}
                 />
@@ -97,22 +97,18 @@ export class AnnotationManifestsAccordion extends Component {
 }
 
 AnnotationManifestsAccordion.propsTypes = {
-  annotation: PropTypes.shape(
-    {
+  annotation: PropTypes.shape({
     content: PropTypes.string,
     id: PropTypes.string,
     manifests: PropTypes.arrayOf(PropTypes.string),
-      manifestsOpen: PropTypes.boolean,
-    },
-  ),
-  classes: PropTypes.objectOf(PropTypes.string),
-  fetchManifest: PropTypes.func.isRequired,
+    manifestsOpen: PropTypes.bool,
+  }),
+  htmlSanitizationRuleSet: PropTypes.string,
   t: PropTypes.func.isRequired,
 };
 
 AnnotationManifestsAccordion.defaultProps = {
-  annotation: {},
-  classes: {},
+  annotation: undefined,
   htmlSanitizationRuleSet: 'iiif',
-  listContainerComponent: 'li',
+  t: key => key,
 };

src/components/AnnotationManifestsItem.js

@@ -2,7 +2,7 @@ import { Component } from 'react';
 import Typography from '@mui/material/Typography';
 import PropTypes from 'prop-types';
 import {
-  Card, CardActionArea, CardActions, CardContent, CardMedia, Fab,
+  Card, CardActionArea, CardActions, CardContent, CardMedia,
 } from '@mui/material';
 import Button from '@mui/material/Button';
 import Tooltip from '@mui/material/Tooltip';
@@ -22,6 +22,7 @@ export class AnnotationManifestsItem extends Component {
   /** */
   componentDidMount() {
     const {
+      // eslint-disable-next-line react/prop-types
       fetchManifest, manifestId, ready, isFetching, error, provider,
     } = this.props;
 
@@ -32,6 +33,7 @@ export class AnnotationManifestsItem extends Component {
 
   /** */
   handleOpenManifestSideToSide(e, manifestId) {
+    // eslint-disable-next-line react/prop-types
     const { addResource, addWindow } = this.props;
     addResource(manifestId);
     addWindow({ manifestId });
@@ -40,12 +42,13 @@ export class AnnotationManifestsItem extends Component {
   /** */
   render() {
     const {
-      classes, t, manifestId, thumbnail, title, description, error, ready
+      // eslint-disable-next-line react/prop-types
+      t, manifestId, thumbnail, title, description, error, ready,
     } = this.props;
 
     if (error) {
       return (
-        <Typography className={classes.errorMessage}>{t('resourceError', { manifestId })}</Typography>
+        <Typography sx={theme => ({ color: theme.palette.error.main })}>{t('resourceError', { manifestId })}</Typography>
       );
     }
 
@@ -58,12 +61,15 @@ export class AnnotationManifestsItem extends Component {
     }
 
     return (
-      <Card className={classes.root}>
+      <Card>
         <CardActionArea>
           {
             thumbnail && (
               <CardMedia
-                className={classes.thumbnail}
+                sx={{
+                  maxWidth: '100%',
+                  objectFit: 'contain',
+                }}
                 component="img"
                 height="140"
                 image={thumbnail}

src/components/AnnotationsOverlayVideo.js

@@ -656,7 +656,7 @@ AnnotationsOverlayVideo.defaultProps = {
 };
 
 AnnotationsOverlayVideo.propTypes = {
-  annotations: PropTypes.arrayOf(PropTypes.object),
+  annotations: PropTypes.arrayOf(PropTypes.object), // eslint-disable-line react/forbid-prop-types
   canvas: PropTypes.object, // eslint-disable-line react/forbid-prop-types
   canvasWorld: PropTypes.instanceOf(CanvasWorld).isRequired,
   currentTime: PropTypes.number,
@@ -668,7 +668,7 @@ AnnotationsOverlayVideo.propTypes = {
   hoveredAnnotationIds: PropTypes.arrayOf(PropTypes.string),
   palette: PropTypes.object, // eslint-disable-line react/forbid-prop-types
   paused: PropTypes.bool,
-  searchAnnotations: PropTypes.arrayOf(PropTypes.object),
+  searchAnnotations: PropTypes.arrayOf(PropTypes.object), // eslint-disable-line react/forbid-prop-types
   seekToTime: PropTypes.number,
   selectAnnotation: PropTypes.func,
   selectedAnnotationId: PropTypes.string,

src/components/CanvasAnnotations.js

@@ -102,12 +102,14 @@ export class CanvasAnnotations extends Component {
 
     const { inputSearch } = this.state;
 
-    if (inputSearch != undefined && inputSearch !== '') {
+    if (inputSearch !== undefined && inputSearch !== '') {
       annotationsFiltered = filterAnnotation(annotations, inputSearch);
     }
 
     const annotationCount = annotations.length;
 
+    console.log('CanvasAnnotations containerRef : ', containerRef);
+
     return (
       <>
         <Typography sx={{ paddingLeft: 2, paddingRight: 1, paddingTop: 2 }} variant="overline">
@@ -144,6 +146,7 @@ export class CanvasAnnotations extends Component {
                 key={`${annotation.id}-scroll`}
                 offsetTop={96} // offset for the height of the form above
                 scrollTo={autoScroll ? (selectedAnnotationId === annotation.id) : false}
+                selected={selectedAnnotationId === annotation.id}
               >
                 <MenuItem
                   component={listContainerComponent}
@@ -196,7 +199,7 @@ export class CanvasAnnotations extends Component {
               </ScrollTo>
             ))
           }
-          {annotationsFiltered.length == 0
+          {annotationsFiltered.length === 0
             && (
               <MenuItem>
                 <Typography>
@@ -241,7 +244,7 @@ CanvasAnnotations.propTypes = {
 CanvasAnnotations.defaultProps = {
   annotations: [],
   autoScroll: true,
-  containerRef: undefined,
+  containerRef: null,
   hoveredAnnotationIds: [],
   htmlSanitizationRuleSet: 'iiif',
   listContainerComponent: 'li',

src/components/MiradorMenuButton.js

-import React from 'react';
 import PropTypes from 'prop-types';
 import { styled } from '@mui/material/styles';
 import Badge from '@mui/material/Badge';

src/components/ScrollTo.js

@@ -15,9 +15,11 @@ export class ScrollTo extends Component {
 
   /** */
   componentDidMount() {
-    const { scrollTo } = this.props;
+    const { scrollTo, containerRef } = this.props;
     if (!scrollTo) return;
 
+    console.log('Did mount Scroll to containerRef : ', containerRef);
+
     this.scrollToElement();
   }
 
@@ -36,6 +38,7 @@ export class ScrollTo extends Component {
   */
   containerBoundingRect() {
     const { containerRef } = this.props;
+    console.log('DcontainerBoundingRect Scroll to containerRef : ', containerRef);
 
     if (!containerRef || !containerRef.current) return {};
 
@@ -65,7 +68,7 @@ export class ScrollTo extends Component {
   */
   scrollableContainer() {
     const { containerRef } = this.props;
-
+    console.log('scrollableContainer Scroll to containerRef : ', containerRef);
     if (!containerRef || !containerRef.current) return null;
     return containerRef.current.getElementsByClassName('mirador-scrollto-scrollable')[0];
   }

src/components/VideoViewer.js

@@ -179,6 +179,7 @@ export class VideoViewer extends Component {
 
 VideoViewer.propTypes = {
   annotations: PropTypes.arrayOf(PropTypes.object), // eslint-disable-line react/forbid-prop-types
+  // eslint-disable-next-line react/forbid-prop-types
   canvas: PropTypes.object,
   captions: PropTypes.arrayOf(PropTypes.object), // eslint-disable-line react/forbid-prop-types
   currentTime: PropTypes.number,
@@ -195,6 +196,7 @@ VideoViewer.propTypes = {
 VideoViewer.defaultProps = {
   annotations: [],
   canvas: {},
+  captions: [],
   currentTime: 0,
   muted: false,
   paused: true,

src/components/WindowCanvasNavigationControlsVideo.js

@@ -44,7 +44,6 @@ export class WindowCanvasNavigationControlsVideo extends Component {
         elevation={0}
         sx={theme => ({
           backgroundColor: theme.palette.background.paper,
-          //backgroundColor: fade(theme.palette.background.paper, 0.5),
           bottom: 0,
           display: 'flex',
           flexDirection: 'row',

src/containers/AnnotationManifestsItem.js

@@ -39,23 +39,6 @@ const mapDispatchToProps = {
   fetchManifest: actions.fetchManifest,
 };
 
-/** For withStyles */
-const styles = theme => ({
-  errorMessage: {
-    color: theme.palette.error.main,
-  },
-  logo: {
-    height: '2.5rem',
-    maxWidth: '100%',
-    objectFit: 'contain',
-    paddingRight: 8,
-  },
-  thumbnail: {
-    maxWidth: '100%',
-    objectFit: 'contain',
-  },
-});
-
 const enhance = compose(
   withTranslation(),
   connect(mapStateToProps, mapDispatchToProps),

src/containers/CanvasAnnotations.js

@@ -11,6 +11,7 @@ import {
   getWindow,
 } from '../state/selectors';
 import { CanvasAnnotations } from '../components/CanvasAnnotations';
+import { withRef } from '../extend/withRef';
 
 /**
  * @param {Array} resources
@@ -51,8 +52,9 @@ const mapDispatchToProps = {
 };
 
 const enhance = compose(
+  withRef(),
   withTranslation(),
-  connect(mapStateToProps, mapDispatchToProps),
+  connect(mapStateToProps, mapDispatchToProps, null, { forwardRef: true }),
   withPlugins('CanvasAnnotations'),
 );