Merge pull request #4062 from ProjectMirador/flaky-viewer-test-debug

Fix CI testing flakiness

__tests__/integration/mirador/mirador-configs/initial-viewer-config.js

@@ -1,8 +1,5 @@
 export default {
   id: 'mirador',
-  theme: {
-    transitions: window.location.port === '4488' ? { create: () => 'none' } : {},
-  },
   windows: [{
     canvasId: 'https://iiif.harvardartmuseums.org/manifests/object/299843/canvas/canvas-47174892',
     initialViewerConfig: {

__tests__/integration/mirador/tests/viewer-config.test.js

@@ -1,19 +1,25 @@
 import { expect, it } from 'vitest';
-import { screen } from '@testing-library/react';
+import { screen, waitFor } from '@testing-library/react';
 import { setupIntegrationTestViewer } from '@tests/utils/test-utils';
 import config from '../mirador-configs/initial-viewer-config';
 
 describe('initialViewerConfig', () => {
   setupIntegrationTestViewer(config);
 
-  it('allows initialViewerConfig to be passed', async (context) => {
-    expect(await screen.findByRole('region', { name: /Window: Self-Portrait Dedicated to Paul Gauguin/i })).toBeInTheDocument();
+  describe('initialViewerConfig', () => {
+    it('allows initialViewerConfig to be passed', async (context) => {
+      expect(await screen.findByRole('region', { name: /Window: Self-Portrait Dedicated to Paul Gauguin/i })).toBeInTheDocument();
 
-    const { viewers } = context.miradorInstance.store.getState();
-    const viewerObject = viewers[Object.keys(viewers)[0]];
-    // You can see these values passed in initial-viewer-config.js
-    expect(viewerObject.x).toBe(934);
-    expect(viewerObject.y).toBe(782);
-    expect(viewerObject.zoom).toBe(0.0007);
+      let viewerObject;
+      await waitFor(() => {
+        const { viewers = {} } = context.miradorInstance.store.getState();
+        viewerObject = viewers[Object.keys(viewers)[0]];
+        expect(viewerObject?.x).toBe(934);
+      }, { timeout: 3000 });
+
+      expect(viewerObject.x).toBe(934);
+      expect(viewerObject.y).toBe(782);
+      expect(viewerObject.zoom).toBe(0.0007);
+    });
   });
 });

src/components/OpenSeadragonComponent.js

@@ -27,6 +27,8 @@ function OpenSeadragonComponent({
   const onViewportChange = useCallback((event) => {
     const { viewport } = event.eventSource;
 
+    if (!initialViewportSet.current) return;
+
     onUpdateViewport({
       bounds: viewport.getBounds(),
       flip: viewport.getFlip(),
@@ -35,7 +37,7 @@ function OpenSeadragonComponent({
       y: Math.round(viewport.centerSpringY.target.value),
       zoom: viewport.zoomSpring.target.value,
     });
-  }, [onUpdateViewport]);
+  }, [onUpdateViewport, initialViewportSet]);
 
   const setInitialBounds = useCallback(({ viewport }) => {
     if (initialViewportSet.current) return;