Merge branch 'master' into 3-update-mirador

.eslintrc

@@ -7,7 +7,6 @@
     "page": true,
     "document": true
   },
-  "parser": "babel-eslint",
   "plugins": ["jest"],
   "rules": {
     "import/prefer-default-export": "off",
@@ -29,7 +28,16 @@
       "natural": false
     }],
     "react/jsx-props-no-spreading": "off",
+    "react/function-component-definition": "off",
+    "default-param-last": "off",
     "arrow-parens": "off",
-    "import/no-anonymous-default-export": "off"
+    "import/no-anonymous-default-export": "off",
+    "max-len": ["error", {
+      "code": 120,
+      "ignoreComments": true,
+      "ignoreStrings": true,
+      "ignoreTemplateLiterals": true,
+      "ignoreRegExpLiterals": true
+    }]
   }
 }

.github/workflows/node.js.yml

@@ -12,13 +12,16 @@ on:
 jobs:
   build:
     runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node-version: [14.x, 16.x, 17.x]
 
     steps:
     - uses: actions/checkout@v2
-    - name: Use Node.js 14.x
+    - name: Use Node.js ${{ matrix.node-version }}
       uses: actions/setup-node@v1
       with:
-        node-version: 14.x
+        node-version: ${{ matrix.node-version }}
     - run: npm install -g codecov
     - run: npm install
     - run: npm test

README.md

@@ -39,6 +39,14 @@ If you are interested in integrating Mirador with plugins into your project, we
 
 [https://github.com/ProjectMirador/mirador-integration](https://github.com/ProjectMirador/mirador-integration)
 
+If you want to simply embed Mirador in an HTML page without further customization, include the Mirador UMD build:
+
+```
+<script src="https://unpkg.com/mirador@latest/dist/mirador.min.js"></script>
+```
+
+More examples of embedding Mirador can be found at [https://github.com/ProjectMirador/mirador/wiki/M3-Embedding-in-Another-Environment#in-an-html-document-with-javascript](https://github.com/ProjectMirador/mirador/wiki/M3-Embedding-in-Another-Environment#in-an-html-document-with-javascript).
+
 ## Adding translations to Mirador
 For help with adding a translation, see [src/locales/README.md](src/locales/README.md)
 

__tests__/fixtures/version-2/related.json

+{
+  "@context": "http://iiif.io/api/presentation/2/context.json",
+  "@id": "http://example.com/iiif/manifest/related-urls.json",
+  "@type": "sc:Manifest",
+  "related": [
+    "http://example.com/related1",
+    {
+      "@id": "http://example.com/related2"
+    },
+    {
+      "@id": "http://example.com/related3",
+      "format": "text/html",
+      "label": "Something related"
+    }
+  ]
+}

__tests__/integration/mirador/companion_windows.test.js

@@ -6,7 +6,7 @@ describe('Companion Windows', () => {
     await expect(page).toFill('#manifestURL', 'http://127.0.0.1:4488/__tests__/fixtures/version-2/001.json');
     await expect(page).toClick('#fetchBtn');
     await expect(page).toClick('[data-manifestid="http://127.0.0.1:4488/__tests__/fixtures/version-2/001.json"] button');
-    await page.waitFor(300);
+    await page.waitForTimeout(300);
     await expect(page).toMatchElement('.mirador-window');
   });
 

__tests__/integration/mirador/index.html

@@ -38,7 +38,7 @@
          { manifestId: "https://iiif.biblissima.fr/chateauroux/B360446201_MS0005/manifest.json", provider: "Biblissima"},
          { manifestId: "https://iiif.durham.ac.uk/manifests/trifle/32150/t1/m4/q7/t1m4q77fr328/manifest", provider: "Durham University Library"},
          //{ manifestId: "https://iiif.vam.ac.uk/collections/O1023003/manifest.json", provider: "Ocean liners"},
-         { manifestId: "https://zavicajna.digitalna.rs/iiif/iiif/api/presentation/3/96571949-03d6-478e-ab44-a2d5ad68f935%252F00000001%252Fostalo01%252F00000071/manifest", provider: "Библиотека 'Милутин Бојић'"},
+         { manifestId: "https://zavicajna.digitalna.rs/iiif/api/presentation/3/96571949-03d6-478e-ab44-a2d5ad68f935%252F00000001%252Fostalo01%252F00000071/manifest", provider: "Библиотека 'Милутин Бојић'"},
        ]
      });
     </script>

__tests__/integration/mirador/invalid-api-response.test.js

@@ -8,7 +8,7 @@ describe('Mirador Invalid API Response Handler Test', () => {
     await page.evaluate(() => {
       document.querySelector('.mirador-add-resource-button').click();
     });
-    await page.waitFor(50);
+    await page.waitForTimeout(50);
     await expect(page).toFill('#manifestURL', uri);
 
     await expect(page).toClick('#fetchBtn');
@@ -25,16 +25,12 @@ describe('Mirador Invalid API Response Handler Test', () => {
   it('renders an error message when a manifest cannot be loaded (and allows it to be dismissed)', async () => {
     await fetchManifest('http://127.0.0.1:4488/__tests__/fixtures/version-2/broken');
 
-    await expect(page).toMatchElement(
-      'p', { text: 'The resource cannot be added:', timeout: 2000 },
-    );
-    await expect(page).toMatchElement(
-      'p', { text: 'http://127.0.0.1:4488/__tests__/fixtures/version-2/broken' },
-    );
+    await expect(page).toMatchElement('p', { text: 'The resource cannot be added:', timeout: 2000 });
+    await expect(page).toMatchElement('p', { text: 'http://127.0.0.1:4488/__tests__/fixtures/version-2/broken' });
 
     await expect(page).toClick('button', { text: 'Dismiss' });
 
-    await page.waitFor(() => !document.querySelector('li[data-manifestid="http://127.0.0.1:4488/__tests__/fixtures/version-2/broken"]'));
+    await page.waitForFunction(() => !document.querySelector('li[data-manifestid="http://127.0.0.1:4488/__tests__/fixtures/version-2/broken"]'));
 
     await expect(page).not.toMatchElement(
       'p',

__tests__/integration/mirador/language_switching.test.js

@@ -16,7 +16,7 @@ describe('Language Switching', () => {
       await expect(page).toMatchElement('[aria-label="Start Here"]');
       await expect(page).not.toMatchElement('[aria-label="Hier starten"]');
       await expect(page).toClick('li', { text: 'Deutsch' });
-      await page.waitFor(1000);
+      await page.waitForTimeout(1000);
       await expect(page).not.toMatchElement('[aria-label="Start Here"]');
       await expect(page).toMatchElement('[aria-label="Hier starten"]');
     });

__tests__/integration/mirador/plugins/add.test.js

@@ -2,7 +2,7 @@ describe('add two plugins to <WorkspaceControlPanelButtons>', () => {
   beforeAll(async () => {
     await page.goto('http://127.0.0.1:4488/__tests__/integration/mirador/plugins/add.html');
     await expect(page).toMatchElement('.mirador-viewer');
-    await page.waitFor(1000);
+    await page.waitForTimeout(1000);
   });
 
   it('all add plugins will be added to <WorkspaceControlPanelButtons>', async () => {

__tests__/integration/mirador/plugins/companionWindow.test.js

@@ -2,13 +2,13 @@ describe('add plugins for companion windows', () => {
   beforeAll(async () => {
     await page.goto('http://127.0.0.1:4488/__tests__/integration/mirador/plugins/companionWindow.html');
     await expect(page).toMatchElement('.mirador-viewer');
-    await page.waitFor(1000);
+    await page.waitForTimeout(1000);
   });
 
   it('added a plugin to the window sidebar and companion window', async () => {
     await expect(page).toClick('button[aria-label="Toggle sidebar"]');
 
-    await page.waitFor(1000);
+    await page.waitForTimeout(1000);
     await expect(page).toMatchElement('.mirador-companion-window-left.mirador-window-sidebar-info-panel');
     await expect(page).toMatchElement('#add-plugin-companion-window-button');
 

__tests__/integration/mirador/plugins/priority.test.js

@@ -2,7 +2,7 @@ describe('try to apply 2 add plugins and 2 wrap plugins to <WorkspaceControlPane
   beforeAll(async () => {
     await page.goto('http://127.0.0.1:4488/__tests__/integration/mirador/plugins/priority.html');
     await expect(page).toMatchElement('.mirador-viewer');
-    await page.waitFor(1000);
+    await page.waitForTimeout(1000);
   });
 
   it('only apply the first wrap plugin', async () => {

__tests__/integration/mirador/plugins/state.test.js

@@ -4,7 +4,7 @@ describe('how plugins relate to state', () => {
   beforeAll(async () => {
     await page.goto('http://127.0.0.1:4488/__tests__/integration/mirador/plugins/state.html');
     await expect(page).toMatchElement('.mirador-viewer');
-    await page.waitFor(1000);
+    await page.waitForTimeout(1000);
   });
 
   it('plugin can read from state', async () => {

__tests__/integration/mirador/plugins/validate.test.js

@@ -2,7 +2,7 @@ describe('pass valid and invalid plugins to <WorkspaceControlPanelButtons>', ()
   beforeAll(async () => {
     await page.goto('http://127.0.0.1:4488/__tests__/integration/mirador/plugins/validate.html');
     await expect(page).toMatchElement('.mirador-viewer');
-    await page.waitFor(1000);
+    await page.waitForTimeout(1000);
   });
 
   it('valid plugins will be applied <WorkspaceControlPanelButtons>', async () => {

__tests__/integration/mirador/plugins/wrap.test.js

@@ -2,7 +2,7 @@ describe('wrap <WorkspaceControlPanelButtons> by a plugin', () => {
   beforeAll(async () => {
     await page.goto('http://127.0.0.1:4488/__tests__/integration/mirador/plugins/wrap.html');
     await expect(page).toMatchElement('.mirador-viewer');
-    await page.waitFor(1000);
+    await page.waitForTimeout(1000);
   });
 
   it('wraps <WorkspaceControlPanelButtons>', async () => {

__tests__/integration/mirador/thumbnail-navigation.test.js

@@ -12,7 +12,7 @@ describe('Thumbnail navigation', () => {
       miradorInstance.store.getState().windows
     ));
     expect(Object.values(windows)[0].canvasId).toBe('https://iiif.harvardartmuseums.org/manifests/object/299843/canvas/canvas-47174892'); // test harness in index.html starts at 2
-    await page.waitFor(1000);
+    await page.waitForTimeout(1000);
     await expect(page).toClick('.mirador-thumbnail-nav-canvas-1 img');
     await expect(page).toMatchElement('.mirador-thumbnail-nav-canvas-1.mirador-current-canvas-grouping', { timeout: 1500 });
     windows = await page.evaluate(() => (

__tests__/integration/mirador/window_actions.test.js

@@ -12,12 +12,12 @@ describe('Window actions', () => {
     await expect(page).toClick('[data-manifestid="http://127.0.0.1:4488/__tests__/fixtures/version-2/sn904cj3429.json"] button');
 
     await expect(page).toMatchElement('.mirador-window');
-    await page.waitFor(1000);
+    await page.waitForTimeout(1000);
     await expect(page).toClick('.mirador-window-close');
     const numWindows = await page.evaluate(page => (
       document.querySelectorAll('.mirador-window').length
     )); // only default configed windows found
-    await page.waitFor(1000);
+    await page.waitForTimeout(1000);
     await expect(numWindows).toBe(0);
   });
 });

__tests__/src/components/AccessTokenSender.test.js

@@ -20,7 +20,7 @@ describe('AccessTokenSender', () => {
 
   it('renders nothing if there is no url', () => {
     wrapper = createWrapper({});
-    expect(wrapper.matchesElement(<></>)).toBe(true);
+    expect(wrapper.isEmptyRender()).toBe(true);
   });
 
   it('renders properly', () => {

__tests__/src/components/LabelValueMetadata.test.js

@@ -59,7 +59,7 @@ describe('LabelValueMetadata', () => {
 
     it('renders an empty fragment instead of an empty dl', () => {
       expect(wrapper.find('dl').length).toEqual(0);
-      expect(wrapper.matchesElement(<></>)).toBe(true);
+      expect(wrapper.isEmptyRender()).toBe(true);
     });
   });
 

__tests__/src/components/ManifestRelatedLinks.test.js

@@ -21,6 +21,16 @@ describe('ManifestRelatedLinks', () => {
             },
           ]}
           manifestUrl="http://example.com/"
+          related={[
+            {
+              value: 'http://example.com/related',
+            },
+            {
+              format: 'video/ogg',
+              label: 'Video',
+              value: 'http://example.com/video',
+            },
+          ]}
           renderings={[
             {
               label: 'PDF Version',
@@ -81,16 +91,42 @@ describe('ManifestRelatedLinks', () => {
       ).toBe(true);
     });
 
-    it('renders manifest seeAlso information', () => {
+    it('renders related information', () => {
       expect(
         wrapper.find(Typography).at(5)
           .matchesElement(
-            <Typography component="dt">iiif_seeAlso</Typography>,
+            <Typography component="dt">iiif_related</Typography>,
           ),
       ).toBe(true);
 
       expect(
         wrapper.find(Typography).at(6)
+          .matchesElement(
+            <Typography component="dd"><Link href="http://example.com/related">http://example.com/related</Link></Typography>,
+          ),
+      ).toBe(true);
+
+      expect(
+        wrapper.find(Typography).at(7)
+          .matchesElement(
+            <Typography component="dd">
+              <Link href="http://example.com/video">Video</Link>
+              <Typography>(video/ogg)</Typography>
+            </Typography>,
+          ),
+      ).toBe(true);
+    });
+
+    it('renders manifest seeAlso information', () => {
+      expect(
+        wrapper.find(Typography).at(9)
+          .matchesElement(
+            <Typography component="dt">iiif_seeAlso</Typography>,
+          ),
+      ).toBe(true);
+
+      expect(
+        wrapper.find(Typography).at(10)
           .matchesElement(
             <Typography component="dd">
               <Link href="http://example.com/a">A</Link>
@@ -100,7 +136,7 @@ describe('ManifestRelatedLinks', () => {
       ).toBe(true);
 
       expect(
-        wrapper.find(Typography).at(8)
+        wrapper.find(Typography).at(12)
           .matchesElement(
             <Typography component="dd"><Link href="http://example.com/b">http://example.com/b</Link></Typography>,
           ),
@@ -109,14 +145,14 @@ describe('ManifestRelatedLinks', () => {
 
     it('renders manifest links', () => {
       expect(
-        wrapper.find(Typography).at(9)
+        wrapper.find(Typography).at(13)
           .matchesElement(
             <Typography component="dt">iiif_manifest</Typography>,
           ),
       ).toBe(true);
 
       expect(
-        wrapper.find(Typography).at(10)
+        wrapper.find(Typography).at(14)
           .matchesElement(
             <Typography component="dd"><Link href="http://example.com/">http://example.com/</Link></Typography>,
           ),

__tests__/src/components/MiradorMenuButton.test.js

@@ -11,7 +11,7 @@ import { MiradorMenuButton } from '../../../src/components/MiradorMenuButton';
 function createWrapper(props) {
   return shallow(
     <MiradorMenuButton aria-label="The Label" containerId="mirador" {...props}>
-      <>icon</>
+      icon
     </MiradorMenuButton>,
   );
 }