[IIIF-148] add canvasIndex event, add test

Author: FrancescoMolinaro

src/app/item-page/mirador-viewer/mirador-viewer.component.spec.ts

@@ -4,7 +4,7 @@ import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
 import { TranslateLoaderMock } from '../../shared/mocks/translate-loader.mock';
 import { BitstreamDataService } from '../../core/data/bitstream-data.service';
 import { createRelationshipsObservable } from '../simple/item-types/shared/item.component.spec';
-import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { NO_ERRORS_SCHEMA, PLATFORM_ID } from '@angular/core';
 import { MetadataMap } from '../../core/shared/metadata.models';
 import { Item } from '../../core/shared/item.model';
 import { createSuccessfulRemoteDataObject$ } from '../../shared/remote-data.utils';
@@ -207,7 +207,58 @@ describe('MiradorViewerComponent with a single image', () => {
     it('should call mirador service image count', () => {
       expect(viewerService.getImageCount).toHaveBeenCalled();
     });
+  });
+
+});
 
+describe('MiradorViewerComponent on browser in prod mode', () => {
+  let comp: MiradorViewerComponent;
+  let fixture: ComponentFixture<MiradorViewerComponent>;
+  const viewerService = jasmine.createSpyObj('MiradorViewerService', ['showEmbeddedViewer', 'getImageCount']);
+
+  beforeEach(waitForAsync(() => {
+    viewerService.showEmbeddedViewer.and.returnValue(true);
+    viewerService.getImageCount.and.returnValue(observableOf(1));
+    TestBed.configureTestingModule({
+      imports: [TranslateModule.forRoot({
+        loader: {
+          provide: TranslateLoader,
+          useClass: TranslateLoaderMock
+        }
+      })],
+      declarations: [MiradorViewerComponent],
+      providers: [
+        { provide: BitstreamDataService, useValue: {} },
+        { provide: BundleDataService, useValue: {} },
+        { provide: HostWindowService, useValue: mockHostWindowService },
+        { provide: NativeWindowService, useValue: new NativeWindowRef() },
+        { provide: Location, useValue: {} },
+        { provide: PLATFORM_ID, useValue: 'browser' },
+      ],
+      schemas: [NO_ERRORS_SCHEMA]
+    }).overrideComponent(MiradorViewerComponent, {
+      set: {
+        providers: [
+          { provide: MiradorViewerService, useValue: viewerService }
+        ]
+      }
+    }).compileComponents();
+  }));
+
+  describe('viewer init', () => {
+    beforeEach(waitForAsync(() => {
+      fixture = TestBed.createComponent(MiradorViewerComponent);
+      comp = fixture.componentInstance;
+      comp.object = getItem(noMetadata);
+      fixture.detectChanges();
+    }));
+
+    it('should set iframe listener', () => {
+      const compAsAny = comp as any;
+      spyOn(compAsAny._window.nativeWindow, 'addEventListener');
+      compAsAny.ngOnInit();
+      expect(compAsAny._window.nativeWindow.addEventListener).toHaveBeenCalled();
+    });
   });
 
 });

src/app/item-page/mirador-viewer/mirador-viewer.component.ts

@@ -14,9 +14,9 @@ import { NativeWindowRef, NativeWindowService } from '../../core/services/window
 const IFRAME_UPDATE_URL_MESSAGE = 'update-url';
 
 interface IFrameMessageData {
-  canvasId: string;
   type: string;
-  param: string;
+  canvasId: string;
+  canvasIndex: string;
 }
 
 @Component({
@@ -185,15 +185,14 @@ export class MiradorViewerComponent implements OnInit, OnDestroy {
     if (data.type === IFRAME_UPDATE_URL_MESSAGE) {
       const currentPath = this.location.path();
       const canvasId = data.canvasId;
-      const param = data.param;
+      const canvasIndex = data.canvasIndex;
       // Use URL API for easier query param manipulation
       const url = new URL(window.location.origin + currentPath);
-      console.log(url);
       // Set or update the query param
-      url.searchParams.set(param, canvasId);
+      url.searchParams.set('canvasId', canvasId);
+      url.searchParams.set('canvasIndex', canvasIndex);
       const newPathWithQuery = url.pathname + url.search;
       // Replace the current state (no reload, no new history entry)
-      console.log('newPathWithQuery', newPathWithQuery);
       this.location.replaceState(newPathWithQuery);
     }
   };

src/mirador-viewer/locationPlugin.js

@@ -1,21 +1,22 @@
-import { takeEvery } from 'redux-saga/effects';
+import { takeEvery, select } from 'redux-saga/effects';
 import ActionTypes from 'mirador/dist/es/src/state/actions/action-types';
+import {getCanvasIndex} from "mirador/dist/es/src/state/selectors";
 
-export
 
 /** This will be called every time the SET_CANVAS action is dispatched */
 const onCanvasChange = function* (action) {
-  console.log('SET_CANVAS action: ', action);
-  if(action.canvasId) {
+  const { windowId, canvasId } = action;
+  if (windowId && canvasId) {
+    const canvasIndex = yield select(getCanvasIndex, { windowId });
     // IDs are in the format of "https://dspaceglam7dev.4science.cloud/server/iiif/392363fe-015f-41e6-8cdd-b5c754605787/canvas/03c322b7-0182-44fa-8dc3-5d2efcece237"
     const id = action.canvasId.split('/').pop();
     const message = {
       type: 'update-url',
-      param: 'canvasId',
+      // index here starts from 0, whilst for setting the index it starts from 1.
+      canvasIndex: canvasIndex + 1,
       canvasId: id
     };
-    console.log('POSTING MESSAGE: ', message);
-    if (id && id !== 'undefined') {
+    if (id && id !== 'undefined' && typeof window !== 'undefined') {
       window.parent.postMessage(message, '*');
     }
   }