Fixup A/V tests and actually add captions to audio

__tests__/src/components/AudioViewer.test.js

@@ -23,8 +23,8 @@ describe('AudioViewer', () => {
           { getFormat: () => 'video/mp4', id: 2 },
         ],
       }, true);
-      expect(wrapper.contains(<source src="1" type="video/mp4" />));
-      expect(wrapper.contains(<source src="2" type="video/mp4" />));
+      expect(wrapper.contains(<source src={1} type="video/mp4" />)).toBe(true);
+      expect(wrapper.contains(<source src={2} type="video/mp4" />)).toBe(true);
     });
     it('passes through configurable options', () => {
       wrapper = createWrapper({
@@ -44,8 +44,8 @@ describe('AudioViewer', () => {
           { getLabel: () => 'French', getProperty: () => 'fr', id: 2 },
         ],
       }, true);
-      expect(wrapper.contains(<track src="1" label="English" srcLang="en" />));
-      expect(wrapper.contains(<track src="2" label="French" srcLang="fr" />));
+      expect(wrapper.contains(<track src={1} label="English" srcLang="en" />)).toBe(true);
+      expect(wrapper.contains(<track src={2} label="French" srcLang="fr" />)).toBe(true);
     });
   });
 });

__tests__/src/components/VideoViewer.test.js

@@ -23,8 +23,8 @@ describe('VideoViewer', () => {
           { getFormat: () => 'video/mp4', id: 2 },
         ],
       }, true);
-      expect(wrapper.contains(<source src="1" type="video/mp4" />));
-      expect(wrapper.contains(<source src="2" type="video/mp4" />));
+      expect(wrapper.contains(<source src={1} type="video/mp4" />)).toBe(true);
+      expect(wrapper.contains(<source src={2} type="video/mp4" />)).toBe(true);
     });
     it('passes through configurable options', () => {
       wrapper = createWrapper({
@@ -44,8 +44,8 @@ describe('VideoViewer', () => {
           { getFormat: () => 'video/mp4', id: 1 },
         ],
       }, true);
-      expect(wrapper.contains(<track src="1" label="English" srcLang="en" />));
-      expect(wrapper.contains(<track src="2" label="French" srcLang="fr" />));
+      expect(wrapper.contains(<track src={1} label="English" srcLang="en" />)).toBe(true);
+      expect(wrapper.contains(<track src={2} label="French" srcLang="fr" />)).toBe(true);
     });
   });
 });

src/components/AudioViewer.js

@@ -6,7 +6,9 @@ export class AudioViewer extends Component {
   /* eslint-disable jsx-a11y/media-has-caption */
   /** */
   render() {
-    const { classes, audioOptions, audioResources } = this.props;
+    const {
+      captions, classes, audioOptions, audioResources,
+    } = this.props;
 
     return (
       <div className={classes.container}>
@@ -16,6 +18,11 @@ export class AudioViewer extends Component {
               <source src={audio.id} type={audio.getFormat()} />
             </Fragment>
           ))}
+          {captions.map(caption => (
+            <Fragment key={caption.id}>
+              <track src={caption.id} label={caption.getLabel()} srcLang={caption.getProperty('language')} />
+            </Fragment>
+          ))}
         </audio>
       </div>
     );
@@ -26,10 +33,12 @@ export class AudioViewer extends Component {
 AudioViewer.propTypes = {
   audioOptions: PropTypes.object, // eslint-disable-line react/forbid-prop-types
   audioResources: PropTypes.arrayOf(PropTypes.object),
+  captions: PropTypes.arrayOf(PropTypes.object),
   classes: PropTypes.objectOf(PropTypes.string).isRequired,
 };
 
 AudioViewer.defaultProps = {
   audioOptions: {},
   audioResources: [],
+  captions: [],
 };

src/containers/AudioViewer.js

@@ -4,13 +4,14 @@ import { withTranslation } from 'react-i18next';
 import { withStyles } from '@material-ui/core';
 import { withPlugins } from '../extend/withPlugins';
 import { AudioViewer } from '../components/AudioViewer';
-import { getConfig, getVisibleCanvasAudioResources } from '../state/selectors';
+import { getConfig, getVisibleCanvasAudioResources, getVisibleCanvasCaptions } from '../state/selectors';
 
 /** */
 const mapStateToProps = (state, { windowId }) => (
   {
     audioOptions: getConfig(state).audioOptions,
     audioResources: getVisibleCanvasAudioResources(state, { windowId }) || [],
+    captions: getVisibleCanvasCaptions(state, { windowId }) || [],
   }
 );