Merge

__tests__/src/components/SidebarIndexThumbnail.test.js

-import React from 'react';
 import { shallow } from 'enzyme';
 import Typography from '@material-ui/core/Typography';
 import { Utils } from 'manifesto.js';

__tests__/src/components/ThumbnailCanvasGrouping.test.js

-import React from 'react';
 import { shallow } from 'enzyme';
 import { Utils } from 'manifesto.js';
 import { ThumbnailCanvasGrouping } from '../../../src/components/ThumbnailCanvasGrouping';

__tests__/src/components/ThumbnailNavigation.test.js

-import React from 'react';
 import { shallow } from 'enzyme';
 import { Utils } from 'manifesto.js';
 import { ThumbnailNavigation } from '../../../src/components/ThumbnailNavigation';

__tests__/src/components/VideoViewer.test.js

-import React from 'react';
 import { shallow } from 'enzyme';
 import { Utils } from 'manifesto.js';
+import AnnotationFactory from '../../../src/lib/AnnotationFactory';
 import { VideoViewer } from '../../../src/components/VideoViewer';
 import videoSimple from '../../fixtures/version-3/video.json';
+import videoCaptions from '../../fixtures/version-3/video_captions.json';
+import videoMultiCaptions from '../../fixtures/version-3/video_multiples_captions.json';
+import videoMultiCaptionsMultiAnno from '../../fixtures/version-3/video_captions_other.json';
 
 /** create wrapper */
 function createWrapper(props, suspenseFallback) {
@@ -18,17 +21,47 @@ function createWrapper(props, suspenseFallback) {
 describe('VideoViewer', () => {
   let wrapper;
   describe('render', () => {
-    const canvasSimple = Utils.parseManifest(videoSimple).getSequences()[0].getCanvases()[0];
-    it('videoResources', () => {
+    it('video', () => {
       wrapper = createWrapper({
-        canvas: canvasSimple,
+        canvas: Utils.parseManifest(videoSimple).getSequences()[0].getCanvases()[0],
       }, true);
+      expect(wrapper.exists('video[crossOrigin="anonymous"]')).toBe(true); // eslint-disable-line jsx-a11y/media-has-caption
       expect(wrapper.contains(<source src="https://fixtures.iiif.io/video/indiana/30-minute-clock/medium/30-minute-clock.mp4" type="video/mp4" />)).toBe(true);
     });
-    it('passes through configurable options', () => {
+    it('one caption', () => {
+      const canvas = Utils.parseManifest(videoCaptions).getSequences()[0].getCanvases()[0];
+      /* cf selectors/annotations/getPresentAnnotationsCanvas */
+      const annotations = canvas.__jsonld.annotations.flatMap((a) => AnnotationFactory.determineAnnotation(a));
+      wrapper = createWrapper({
+        annotations,
+        canvas,
+      }, true);
+      expect(wrapper.contains(<track src="https://fixtures.iiif.io/video/indiana/lunchroom_manners/lunchroom_manners.vtt" srcLang="en" />)).toBe(true);
+      expect(wrapper.exists('video[crossOrigin="anonymous"]')).toBe(true); // eslint-disable-line jsx-a11y/media-has-caption
+    });
+    it('multiples captions', () => {
+      const canvas = Utils.parseManifest(videoMultiCaptions).getSequences()[0].getCanvases()[0];
+      /* cf selectors/annotations/getPresentAnnotationsCanvas */
+      const annotations = canvas.__jsonld.annotations.flatMap((a) => AnnotationFactory.determineAnnotation(a));
+      wrapper = createWrapper({
+        annotations,
+        canvas,
+      }, true);
+      expect(wrapper.contains(<track src="https://fixtures.iiif.io/video/indiana/lunchroom_manners/lunchroom_manners.vtt#en" srcLang="en" />)).toBe(true);
+      expect(wrapper.contains(<track src="https://fixtures.iiif.io/video/indiana/lunchroom_manners/lunchroom_manners.vtt#fr" srcLang="fr" />)).toBe(true);
+      expect(wrapper.exists('video[crossOrigin="anonymous"]')).toBe(true); // eslint-disable-line jsx-a11y/media-has-caption
+    });
+    it('multiples captions in multiples annotations', () => {
+      const canvas = Utils.parseManifest(videoMultiCaptionsMultiAnno).getSequences()[0].getCanvases()[0];
+      /* cf selectors/annotations/getPresentAnnotationsCanvas */
+      const annotations = canvas.__jsonld.annotations.flatMap((a) => AnnotationFactory.determineAnnotation(a));
       wrapper = createWrapper({
-        canvas: canvasSimple,
+        annotations,
+        canvas,
       }, true);
+      expect(wrapper.contains(<track src="https://fixtures.iiif.io/video/indiana/lunchroom_manners/lunchroom_manners.vtt#en" srcLang="en" />)).toBe(true);
+      expect(wrapper.contains(<track src="https://fixtures.iiif.io/video/indiana/lunchroom_manners/lunchroom_manners.vtt#fr" srcLang="fr" />)).toBe(true);
+      expect(wrapper.contains(<track src="https://fixtures.iiif.io/video/indiana/lunchroom_manners/lunchroom_manners.vtt#ru" srcLang="ru" />)).toBe(true);
       expect(wrapper.exists('video[crossOrigin="anonymous"]')).toBe(true); // eslint-disable-line jsx-a11y/media-has-caption
     });
   });

__tests__/src/components/ViewerInfo.test.js

-import React from 'react';
 import { shallow } from 'enzyme';
 import { Typography } from '@material-ui/core';
 import { ViewerInfo } from '../../../src/components/ViewerInfo';

__tests__/src/components/ViewerNavigation.test.js

-import React from 'react';
 import { shallow } from 'enzyme';
 import NavigationIcon from '@material-ui/icons/PlayCircleOutlineSharp';
 import MiradorMenuButton from '../../../src/containers/MiradorMenuButton';

__tests__/src/components/Window.test.js

-import React from 'react';
 import { shallow } from 'enzyme';
 import { Window } from '../../../src/components/Window';
 import WindowTopBar from '../../../src/containers/WindowTopBar';

__tests__/src/components/WindowAuthenticationBar.test.js

-import React from 'react';
 import { shallow } from 'enzyme';
 import Button from '@material-ui/core/Button';
 import Collapse from '@material-ui/core/Collapse';

__tests__/src/components/WindowCanvasNavigationControls.test.js

-import React from 'react';
 import { shallow } from 'enzyme';
 import Paper from '@material-ui/core/Paper';
 import Typography from '@material-ui/core/Typography';

__tests__/src/components/WindowList.test.js

-import React from 'react';
 import { shallow } from 'enzyme';
 import Menu from '@material-ui/core/Menu';
 import MenuItem from '@material-ui/core/MenuItem';

__tests__/src/components/WindowListButton.test.js

-import React from 'react';
 import { shallow } from 'enzyme';
 import MiradorMenuButton from '../../../src/containers/MiradorMenuButton';
 import WindowList from '../../../src/containers/WindowList';

__tests__/src/components/WindowSideBar.test.js

-import React from 'react';
 import { shallow } from 'enzyme';
 import Drawer from '@material-ui/core/Drawer';
 import { WindowSideBar } from '../../../src/components/WindowSideBar';

__tests__/src/components/WindowSideBarAnnotationsPanel.test.js

-import React from 'react';
 import { shallow } from 'enzyme';
 import Typography from '@material-ui/core/Typography';
 import CanvasAnnotations from '../../../src/containers/CanvasAnnotations';

__tests__/src/components/WindowSideBarButtons.test.js

-import React from 'react';
 import { mount } from 'enzyme';
 import Badge from '@material-ui/core/Badge';
 import Tabs from '@material-ui/core/Tabs';

__tests__/src/components/WindowSideBarCanvasPanel.test.js

-import React from 'react';
 import { shallow } from 'enzyme';
 import { Utils } from 'manifesto.js';
 import compact from 'lodash/compact';

__tests__/src/components/WindowSideBarInfoPanel.test.js

-import React from 'react';
 import { shallow } from 'enzyme';
 import { WindowSideBarInfoPanel } from '../../../src/components/WindowSideBarInfoPanel';
 import CanvasInfo from '../../../src/containers/CanvasInfo';

__tests__/src/components/WindowThumbnailSettings.test.js

-import React from 'react';
 import { shallow } from 'enzyme';
 import FormControlLabel from '@material-ui/core/FormControlLabel';
 import ListSubheader from '@material-ui/core/ListSubheader';

__tests__/src/components/WindowTopBar.test.js

-import React from 'react';
 import { shallow } from 'enzyme';
 
 import Toolbar from '@material-ui/core/Toolbar';

__tests__/src/components/WindowTopBarPluginArea.test.js

-import React from 'react';
 import { shallow } from 'enzyme';
 import { WindowTopBarPluginArea } from '../../../src/components/WindowTopBarPluginArea';
 import { PluginHook } from '../../../src/components/PluginHook';

__tests__/src/components/WindowTopBarPluginMenu.test.js

-import React from 'react';
 import { shallow } from 'enzyme';
 import Menu from '@material-ui/core/Menu';
 import MiradorMenuButton from '../../../src/containers/MiradorMenuButton';