Fix VideoViewer component tests

- use Manifesto Utils.parseManifest to feed data to component
- add integrations tests for captions
- remove component captions tests (cf #13)
- extend expect-puppeteer timeout to 2s

__tests__/fixtures/version-3/video.json

+{
+  "@context": "http://iiif.io/api/presentation/3/context.json",
+  "id": "https://preview.iiif.io/cookbook/master/recipe/0003-mvm-video/manifest.json",
+  "type": "Manifest",
+  "label": {
+    "en": [
+      "Video Example 3"
+    ]
+  },
+  "items": [
+    {
+      "id": "https://preview.iiif.io/cookbook/master/recipe/0003-mvm-video/canvas",
+      "type": "Canvas",
+      "height": 360,
+      "width": 640,
+      "duration": 1801.055,
+      "items": [
+        {
+          "id": "https://preview.iiif.io/cookbook/master/recipe/0003-mvm-video/canvas/page",
+          "type": "AnnotationPage",
+          "items": [
+            {
+              "id": "https://preview.iiif.io/cookbook/master/recipe/0003-mvm-video/canvas/page/annotation",
+              "type": "Annotation",
+              "motivation": "painting",
+              "body": {
+                "id": "https://fixtures.iiif.io/video/indiana/30-minute-clock/medium/30-minute-clock.mp4",
+                "type": "Video",
+                "height": 360,
+                "width": 640,
+                "duration": 1801.055,
+                "format": "video/mp4"
+              },
+              "target": "https://preview.iiif.io/cookbook/master/recipe/0003-mvm-video/canvas"
+            }
+          ]
+        }
+      ]
+    }
+  ]
+}
\ No newline at end of file

__tests__/integration/mirador/video.test.js

+describe('Basic end to end Mirador with video content', () => {
+  beforeAll(async () => {
+    await page.goto('http://localhost:4488/__tests__/integration/mirador/blank.html');
+  });
+  it('loads a manifest and displays it', async () => {
+    await page.waitForSelector('#addBtn');
+    await expect(page).toClick('#addBtn');
+    await expect(page).toClick('.mirador-add-resource-button');
+    await expect(page).toFill('#manifestURL', 'http://localhost:4488/__tests__/fixtures/version-3/video.json');
+    await expect(page).toClick('#fetchBtn');
+    await expect(page).toMatchElement('[data-manifestid="http://localhost:4488/__tests__/fixtures/version-3/video.json"] button');
+    await expect(page).toClick('[data-manifestid="http://localhost:4488/__tests__/fixtures/version-3/video.json"] button');
+    await expect(page).toMatchElement(
+      'h2',
+      { text: /Video Example 3/ },
+    );
+  });
+  it('render subtitles', async () => {
+    await page.waitForSelector('#addBtn');
+    await expect(page).toClick('#addBtn');
+    await expect(page).toClick('.mirador-add-resource-button');
+    await expect(page).toFill('#manifestURL', 'https://preview.iiif.io/cookbook/0219-using-caption-file/recipe/0219-using-caption-file/manifest.json');
+
+    await expect(page).toClick('#fetchBtn');
+    await expect(page).toMatchElement('[data-manifestid="https://preview.iiif.io/cookbook/0219-using-caption-file/recipe/0219-using-caption-file/manifest.json"] button');
+    await expect(page).toClick('[data-manifestid="https://preview.iiif.io/cookbook/0219-using-caption-file/recipe/0219-using-caption-file/manifest.json"] button');
+    await expect(page).toMatchElement('track[src="https://fixtures.iiif.io/video/indiana/lunchroom_manners/lunchroom_manners.vtt"]');
+  });
+});

__tests__/integration/mirador/video_preloaded.test.js

+describe('Basic end to end Mirador with preloaded video content', () => {
+  beforeAll(async () => {
+    await page.goto('http://localhost:4488/__tests__/integration/mirador/video.html');
+  });
+  it('load multiples audio/video manifests', async () => {
+    await page.waitForSelector('h2');
+    await page.waitForSelector('audio');
+    await page.waitForSelector('video');
+    await expect(page).toMatchElement('h2', { text: /Video Example 3/ });
+    await expect(page).toMatchElement('h2', { text: /Partial audio recording of Gustav Mahler's _Symphony No. 3_/ });
+    await expect(page).toMatchElement('h2', { text: /L'Elisir D'Amore/ });
+    await expect(page).toMatchElement('h2', { text: /Lunchroom Manners/ });
+  });
+  it('can add an image manifest', async () => {
+    await page.waitForSelector('#addBtn');
+    await expect(page).toClick('#addBtn');
+    await expect(page).toClick('.mirador-add-resource-button');
+    await expect(page).toFill('#manifestURL', 'https://iiif.harvardartmuseums.org/manifests/object/299843');
+
+    await expect(page).toClick('#fetchBtn');
+
+    await page.waitForSelector('[data-manifestid="https://iiif.harvardartmuseums.org/manifests/object/299843"] button');
+    await expect(page).toMatchElement('[data-manifestid="https://iiif.harvardartmuseums.org/manifests/object/299843"] button');
+    await expect(page).toClick('[data-manifestid="https://iiif.harvardartmuseums.org/manifests/object/299843"] button');
+
+    await page.waitForSelector('.mirador-osd-container');
+    await expect(page).toMatchElement('.mirador-osd-container');
+  });
+});

__tests__/src/components/VideoViewer.test.js

 import React from 'react';
 import { shallow } from 'enzyme';
+import { Utils } from 'manifesto.js';
 import { VideoViewer } from '../../../src/components/VideoViewer';
+import videoSimple from '../../fixtures/version-3/video.json';
 
 /** create wrapper */
 function createWrapper(props, suspenseFallback) {
@@ -16,36 +18,18 @@ function createWrapper(props, suspenseFallback) {
 describe('VideoViewer', () => {
   let wrapper;
   describe('render', () => {
+    const canvasSimple = Utils.parseManifest(videoSimple).getSequences()[0].getCanvases()[0];
     it('videoResources', () => {
       wrapper = createWrapper({
-        videoResources: [
-          { getFormat: () => 'video/mp4', id: 1 },
-          { getFormat: () => 'video/mp4', id: 2 },
-        ],
+        canvas: canvasSimple,
       }, true);
-      expect(wrapper.contains(<source src={1} type="video/mp4" />)).toBe(true);
-      expect(wrapper.contains(<source src={2} type="video/mp4" />)).toBe(true);
+      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', () => {
       wrapper = createWrapper({
-        videoResources: [
-          { getFormat: () => 'video/mp4', id: 1 },
-        ],
+        canvas: canvasSimple,
       }, true);
       expect(wrapper.exists('video[crossOrigin="anonymous"]')).toBe(true); // eslint-disable-line jsx-a11y/media-has-caption
     });
-    it('captions', () => {
-      wrapper = createWrapper({
-        captions: [
-          { getDefaultLabel: () => 'English', getProperty: () => 'en', id: 1 },
-          { getDefaultLabel: () => 'French', getProperty: () => 'fr', id: 2 },
-        ],
-        videoResources: [
-          { getFormat: () => 'video/mp4', id: 1 },
-        ],
-      }, true);
-      expect(wrapper.contains(<track src={1} label="English" srcLang="en" />)).toBe(true);
-      expect(wrapper.contains(<track src={2} label="French" srcLang="fr" />)).toBe(true);
-    });
   });
 });

jest.json

@@ -13,6 +13,9 @@
   "setupFiles": [
     "<rootDir>/setupJest.js"
   ],
+  "setupFilesAfterEnv": [
+    "<rootDir>/setup-expect-timeout.js"
+  ],
   "testMatch": [
     "<rootDir>/**/__tests__/**/*.{js,jsx}",
     "<rootDir>/src/**/?(*.)(spec|test|unit).{js,jsx}"

package.json

@@ -111,6 +111,7 @@
     "eslint-plugin-jsx-a11y": "^6.4.1",
     "eslint-plugin-react": "^7.29.4",
     "eslint-plugin-react-hooks": "^4.2.0",
+    "expect-puppeteer": "^6.1.1",
     "glob": "^7.1.4",
     "http-server": "^14.1.0",
     "jest": "^27.5.1",

setup-expect-timeout.js

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