fix: only call renderImage once (#2514)

europeana · Dec 12, 2024 · a26ee04 · a26ee04
1 parent 7d7fb24
commit a26ee04
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 7 deletions.
diff --git a/packages/portal/src/components/media/MediaImageViewer.vue b/packages/portal/src/components/media/MediaImageViewer.vue
@@ -151,7 +151,6 @@
         }
 
         if (process.client) {
-          // FIXME: this is called twice, also in mounted
           this.renderImage();
         }
       } catch (error) {
@@ -186,12 +185,6 @@
       url: '$fetch'
     },
 
-    mounted() {
-      if (!this.$fetchState.pending) {
-        this.renderImage();
-      }
-    },
-
     methods: {
       initOlAnnotationLayer() {
         const layerCount = this.olMap.getLayers().getLength();

diff --git a/packages/portal/tests/unit/components/media/MediaImageViewer.spec.js b/packages/portal/tests/unit/components/media/MediaImageViewer.spec.js
@@ -143,6 +143,7 @@ describe('components/media/MediaImageViewer', () => {
         };
         stubItemMediaPresentationComposable({ activeAnnotation: annotation, hasAnnotations: true });
         const wrapper = factory({ propsData: { url, width, height } });
+        await wrapper.vm.fetch();
 
         await new Promise(process.nextTick);
         wrapper.vm.highlightAnnotations();
@@ -163,6 +164,7 @@ describe('components/media/MediaImageViewer', () => {
         it('adds a feature for the annotation at the full image size', async() => {
           stubItemMediaPresentationComposable({ activeAnnotation: annotation, hasAnnotations: true });
           const wrapper = factory({ propsData: { url, width, height } });
+          await wrapper.vm.fetch();
 
           await new Promise(process.nextTick);
           wrapper.vm.highlightAnnotations();
@@ -185,6 +187,7 @@ describe('components/media/MediaImageViewer', () => {
         it('adds a feature for the annotation at its xywh co-ordinates', async() => {
           stubItemMediaPresentationComposable({ activeAnnotation: annotation, hasAnnotations: true });
           const wrapper = factory({ propsData: { url, width, height } });
+          await wrapper.vm.fetch();
 
           await new Promise(process.nextTick);
           wrapper.vm.highlightAnnotations();
@@ -240,8 +243,11 @@ describe('components/media/MediaImageViewer', () => {
             hash: '#annotations'
           };
           const wrapper = factory({ propsData: { url, width, height }, mocks: { $route: { query: {}, hash: '#search' } } });
+          await wrapper.vm.fetch();
+
           await new Promise(process.nextTick);
           wrapper.vm.handleMapClick([200, 600]);
+
           expect(routerReplaceSpy.calledWith(sinon.match(expectedRouteArgs))).toBe(true);
         });
       });
@@ -254,6 +260,7 @@ describe('components/media/MediaImageViewer', () => {
           min: minZoom
         } = useZoom();
         const wrapper = factory({ propsData: { url, width, height } });
+        await wrapper.vm.fetch();
 
         await new Promise(process.nextTick);
         wrapper.vm.configureZoomLevels();
@@ -271,6 +278,7 @@ describe('components/media/MediaImageViewer', () => {
           setCurrent: setCurrentZoom
         } = useZoom();
         const wrapper = factory({ propsData: { url, width, height } });
+        await wrapper.vm.fetch();
 
         await new Promise(process.nextTick);
         wrapper.vm.olMap.getView = sinon.stub().returns({