Merge remote-tracking branch 'upstream/master'

# Conflicts:
#	babel.config.js
#	src/containers/CompanionWindow.js

.eslintrc

@@ -44,6 +44,7 @@
     }],
     "react/jsx-uses-react": "off",
     "react/react-in-jsx-scope": "off",
+    "react/require-default-props": "off",
     "react-hooks/exhaustive-deps": "error",
     "testing-library/render-result-naming-convention": "off",
     "testing-library/no-render-in-lifecycle": [

.github/workflows/node.js.yml

@@ -7,22 +7,24 @@ on:
   push:
     branches: [ master ]
   pull_request:
-    branches: [ master, mui5 ]
+    branches: [ master ]
 
 jobs:
   build:
-    runs-on: ubuntu-latest
+    # Pin to ubuntu-22 until a solution is found for this issue:
+    # https://chromium.googlesource.com/chromium/src/+/main/docs/security/apparmor-userns-restrictions.md
+    runs-on: ubuntu-22.04
     strategy:
       matrix:
         node-version: [18.x, 20.x]
 
     steps:
-    - uses: actions/checkout@v3
+    - uses: actions/checkout@v4
     - name: Use Node.js ${{ matrix.node-version }}
-      uses: actions/setup-node@v3
+      uses: actions/setup-node@v4
       with:
         node-version: ${{ matrix.node-version }}
     - run: npm install
     - run: npm test
     - name: Upload coverage to Codecov
-      uses: codecov/codecov-action@v3
+      uses: codecov/codecov-action@v4

__tests__/integration/mirador/companion_windows.test.js

@@ -6,7 +6,6 @@ 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.waitForTimeout(300);
     await expect(page).toMatchElement('.mirador-window');
   });
 

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

@@ -9,7 +9,6 @@ describe('Mirador Invalid API Response Handler Test', () => {
     await page.evaluate(() => {
       document.querySelector('.mirador-add-resource-button').click();
     });
-    await page.waitForTimeout(50);
     await expect(page).toFill('#manifestURL', uri);
 
     await expect(page).toClick('#fetchBtn');

__tests__/integration/mirador/language_switching.test.js

@@ -16,7 +16,6 @@ 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.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,6 @@ 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.waitForTimeout(1000);
   });
 
   it('all add plugins will be added to <WorkspaceControlPanelButtons>', async () => {

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

@@ -2,17 +2,15 @@ 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.waitForTimeout(1000);
   });
 
-  it('added a plugin to the window sidebar and companion window', async () => {
+  it.skip('added a plugin to the window sidebar and companion window', async () => {
     await expect(page).toClick('button[aria-label="Toggle sidebar"]');
 
-    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');
 
     await expect(page).toClick('#add-plugin-companion-window-button');
-    await expect(page).toMatchElement('#add-plugin-companion-window');
-  });
+    await expect(page).toMatchElement('#add-plugin-companion-window', { timeout: 20000 });
+  }, 20000);
 });

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

@@ -2,7 +2,6 @@ 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.waitForTimeout(1000);
   });
 
   it('only apply the first wrap plugin', async () => {

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

@@ -4,7 +4,6 @@ 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.waitForTimeout(1000);
   });
 
   it('plugin can read from state', async () => {

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

@@ -2,7 +2,6 @@ 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.waitForTimeout(1000);
   });
 
   it('valid plugins will be applied <WorkspaceControlPanelButtons>', async () => {

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

@@ -2,7 +2,6 @@ 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.waitForTimeout(1000);
   });
 
   it('wraps <WorkspaceControlPanelButtons>', async () => {

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

@@ -13,7 +13,6 @@ 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.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,10 @@ 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.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.waitForTimeout(1000);
     await expect(numWindows).toBe(0);
   });
 });

__tests__/src/actions/canvas.test.js

@@ -9,6 +9,10 @@ const mockStore = configureMockStore(middlewares);
 
 jest.mock('../../../src/state/selectors', () => ({
   getCanvasGrouping: (state, { canvasId }) => [{ id: canvasId }],
+  getConfig: jest.fn((state) => {
+    const osdConfig = { osdConfig: { preserveViewport: true } };
+    return osdConfig;
+  }),
   getNextCanvasGrouping: () => [{ id: 'canvasIndex-2' }],
   getPreviousCanvasGrouping: () => [{ id: 'canvasIndex-0' }],
 }));
@@ -24,6 +28,7 @@ describe('canvas actions', () => {
       const id = 'abc123';
       const expectedAction = {
         canvasId: 'a',
+        preserveViewport: true,
         type: ActionTypes.SET_CANVAS,
         visibleCanvases: ['a'],
         windowId: id,
@@ -42,6 +47,7 @@ describe('canvas actions', () => {
       const id = 'abc123';
       const expectedAction = {
         canvasId: 'canvasIndex-0',
+        preserveViewport: true,
         type: ActionTypes.SET_CANVAS,
         visibleCanvases: ['canvasIndex-0'],
         windowId: id,
@@ -60,6 +66,7 @@ describe('canvas actions', () => {
       const id = 'abc123';
       const expectedAction = {
         canvasId: 'canvasIndex-2',
+        preserveViewport: true,
         type: ActionTypes.SET_CANVAS,
         visibleCanvases: ['canvasIndex-2'],
         windowId: id,

__tests__/src/components/CanvasAnnotations.test.js

@@ -1,6 +1,6 @@
 import { render, screen } from 'test-utils';
 import userEvent from '@testing-library/user-event';
-import i18next from 'i18next';
+import { t } from 'i18next';
 
 import { CanvasAnnotations } from '../../../src/components/CanvasAnnotations';
 import { ScrollTo } from '../../../src/components/ScrollTo';
@@ -15,7 +15,7 @@ function createWrapper(props) {
       index={0}
       label="A Canvas Label"
       selectAnnotation={() => {}}
-      t={i18next.t}
+      t={t}
       totalSize={1}
       windowId="abc"
       {...props}

__tests__/src/components/ErrorContent.test.js

@@ -1,4 +1,4 @@
-import i18next from 'i18next';
+import { t } from 'i18next';
 import { render, screen } from 'test-utils';
 
 import { ErrorContent } from '../../../src/components/ErrorContent';
@@ -11,7 +11,7 @@ describe('ErrorContent', () => {
         windowId="xyz"
         manifestId="foo"
         classes={{}}
-        t={i18next.t}
+        t={t}
       />,
       {
         preloadedState: {
@@ -42,7 +42,7 @@ describe('ErrorContent', () => {
         manifestId="foo"
         showJsError={false}
         classes={{}}
-        t={i18next.t}
+        t={t}
       />,
       {
         preloadedState: {

__tests__/src/components/OpenSeadragonViewer.test.js

@@ -172,9 +172,9 @@ describe('OpenSeadragonViewer', () => {
     });
 
     it('calls addNonTileSource for every nonTiledImage and then zoomsToWorld', async () => {
-      const { component, rerender, viewer } = createWrapper({ nonTiledImages: [] });
+      const { component, rerender, viewer } = createWrapper({ infoResponses: [], nonTiledImages: [] });
 
-      const mockAddNonTiledImage = jest.spyOn(viewer, 'addSimpleImage');
+      const mockAddNonTiledImage = jest.spyOn(viewer, 'addSimpleImage').mockImplementation(() => true);
       const mockFitBounds = jest.spyOn(viewer.viewport, 'fitBounds');
 
       rerender(cloneElement(component, {

__tests__/src/components/SearchPanel.test.js

@@ -1,6 +1,6 @@
 import { render, screen } from 'test-utils';
 import userEvent from '@testing-library/user-event';
-import i18next from 'i18next';
+import { t } from 'i18next';
 
 import { SearchPanel } from '../../../src/components/SearchPanel';
 
@@ -68,7 +68,7 @@ describe('SearchPanel', () => {
     const user = userEvent.setup();
     const fetchSearch = jest.fn();
     createWrapper({
-      fetchSearch, query: '', suggestedSearches: ['abc'], t: i18next.t,
+      fetchSearch, query: '', suggestedSearches: ['abc'], t,
     });
 
     expect(screen.getByRole('button', { name: 'Search this document for "abc"' })).toBeInTheDocument();

__tests__/src/components/WindowSideBarAnnotationsPanel.test.js

@@ -1,5 +1,5 @@
 import { render, screen } from 'test-utils';
-import i18next from 'i18next';
+import { t } from 'i18next';
 
 import CanvasAnnotations from '../../../src/containers/CanvasAnnotations';
 import WindowSideBarAnnotationsPanel from '../../../src/components/WindowSideBarAnnotationsPanel';
@@ -11,7 +11,7 @@ function createWrapper(props, state) {
       annotationCount={4}
       classes={{}}
       id="xyz"
-      t={i18next.t}
+      t={t}
       windowId="abc"
       {...props}
     />,

__tests__/src/components/WindowSideBarButtons.test.js

@@ -1,14 +1,14 @@
 import { render, screen } from 'test-utils';
 import userEvent from '@testing-library/user-event';
-import i18next from 'i18next';
+import { t } from 'i18next';
 import { WindowSideBarButtons } from '../../../src/components/WindowSideBarButtons';
 
 /** create wrapper */
 function createWrapper(props) {
   return render(
     <WindowSideBarButtons
       addCompanionWindow={() => {}}
-      t={i18next.t}
+      t={t}
       {...props}
       panels={{
         annotations: true,

__tests__/src/extend/withSize.test.js

@@ -0,0 +1,50 @@
+import { render, screen } from '@testing-library/react';
+import PropTypes from 'prop-types';
+import { withSize } from '../../../src/extend/withSize';
+
+/** Mock ResizeObserver */
+class ResizeObserver {
+  /** */
+  constructor(callback) {
+    this.callback = callback;
+  }
+
+  /** */
+  observe(element) {
+    // Fake a resize event
+    setTimeout(() => {
+      this.callback([{ contentRect: { height: 300, width: 400 } }]);
+    }, 0);
+  }
+
+  /** */
+  disconnect() { jest.fn(); } // eslint-disable-line
+}
+
+// Replace the global ResizeObserver with the mock
+global.ResizeObserver = ResizeObserver;
+
+/** */
+const TestComponent = ({ size }) => (
+  <div>
+    {size.width}
+    {size.height}
+  </div>
+);
+
+TestComponent.propTypes = {
+  size: PropTypes.shape({
+    height: PropTypes.number,
+    width: PropTypes.number,
+  }).isRequired,
+};
+
+const WrappedTestComponent = withSize()(TestComponent);
+
+test('it should render with size', async () => {
+  render(<WrappedTestComponent />);
+
+  // Assert that the updated size is reflected
+  expect(await screen.findByText(/400/)).toBeInTheDocument();
+  expect(await screen.findByText(/300/)).toBeInTheDocument();
+});