@hmcts/media-viewer 4.2.1 → 4.2.4-exui-3994-f

package/projects/media-viewer/src/lib/viewers/pdf-viewer/pdf-viewer.component.html

@@ -0,0 +1,88 @@
+<mv-side-bar
+  *ngIf="toolbarEvents.sidebarOpen"
+  id="sidebarContainer"
+  [url]="url"
+  [zoom]="zoom"
+  [rotate]="rotation"
+  [outline]="documentOutline"
+  [annotationsEnabled]="enableAnnotations"
+  [currentPageNumber]="getCurrentPageNumber()"
+>
+</mv-side-bar>
+<mv-comment-set-header
+  *ngIf="enableAnnotations"
+  [ngClass]="{ 'show-comments-panel': showCommentsPanel }"
+  [isHidden]="!showCommentsPanel"
+  [showCommentSummary]="toolbarButtons.showCommentSummary"
+  (showCommentSummaryDialog)="toggleCommentsSummary()"
+>
+</mv-comment-set-header>
+<mv-participants-list></mv-participants-list>
+<div
+  class="pdfContainer"
+  [ngStyle]="{ height: height }"
+  [ngClass]="{ pdfContainer: true, hidden: errorMessage }"
+>
+  <mv-redaction-search-bar></mv-redaction-search-bar>
+  <div
+    #viewerContainer
+    mvGrabNDrag
+    [dragX]="viewerContainer"
+    [dragEnabled]="enableGrabNDrag"
+    id="viewerContainer"
+    class="viewer-container"
+    [class.annotations]="enableAnnotations"
+    [class.show-comments-panel]="
+      (showCommentsPanel || showIcpParticipantsList) &&
+      (toolbarEvents.redactionMode | async) !== true
+    "
+    [class.grabNDrag]="enableGrabNDrag"
+    (focusin)="onViewerContainerFocusIn($event)"
+  >
+    <div
+      #pdfViewer
+      class="pdfViewer"
+      mvCreateTextHighlight
+      [ngClass]="{
+        hidden: false,
+        highlightMode: highlightMode | async,
+        drawMode: drawMode | async
+      }"
+    ></div>
+    <mv-redactions
+      *ngIf="toolbarEvents.redactionMode | async; else annotationTemplate"
+      [zoom]="zoom"
+      [rotate]="rotation"
+    ></mv-redactions>
+    <ng-template #annotationTemplate>
+      <mv-metadata-layer
+        *ngIf="enableAnnotations && annotationSet"
+        [zoom]="zoom"
+        [rotate]="rotation"
+      >
+      </mv-metadata-layer>
+      <mv-bookmark-icons [zoom]="zoom" [rotate]="rotation"> </mv-bookmark-icons>
+    </ng-template>
+  </div>
+  <mv-comment-set
+    [contentScrollTop]="viewerContainer.scrollTop"
+    *ngIf="
+      enableAnnotations &&
+      annotationSet &&
+      (toolbarEvents.redactionMode | async) !== true
+    "
+    [annotationSet]="annotationSet"
+    [zoom]="zoom"
+    [rotate]="rotation"
+    [height]="pdfViewer.offsetHeight"
+    [pageHeights]="pageHeights"
+  >
+  </mv-comment-set>
+  <div class="loadingMessage" *ngIf="loadingDocument">
+    <h3 class="govuk-heading-m">
+      {{ "Loading..." | rpxTranslate}}{{
+        loadingDocumentProgress ? loadingDocumentProgress + "%" : ""
+      }}
+    </h3>
+  </div>
+</div>

package/projects/media-viewer/src/lib/viewers/pdf-viewer/pdf-viewer.component.spec.ts

@@ -0,0 +1,461 @@
+import { getPages } from './../../store/selectors/document.selectors';
+import { Rotation } from './../rotation-persist/rotation.model';
+import { RpxTranslationModule } from 'rpx-xui-translation';
+import { CUSTOM_ELEMENTS_SCHEMA, SimpleChange } from '@angular/core';
+import { ComponentFixture, fakeAsync, inject, TestBed, tick } from '@angular/core/testing';
+import { BrowserDynamicTestingModule } from '@angular/platform-browser-dynamic/testing';
+import { Subject } from 'rxjs';
+import { Store, StoreModule } from '@ngrx/store';
+
+import { PdfViewerComponent } from './pdf-viewer.component';
+import { PdfJsWrapperFactory } from './pdf-js/pdf-js-wrapper.provider';
+import { annotationSet } from '../../../assets/annotation-set';
+import { PrintService } from '../../print.service';
+import { AnnotationSetComponent } from '../../annotations/annotation-set/annotation-set.component';
+import { ToolbarEventService } from '../../toolbar/toolbar-event.service';
+import { DocumentLoadProgress } from './pdf-js/pdf-js-wrapper';
+import { ViewerEventService } from '../viewer-event.service';
+import { CommentService } from '../../annotations/comment-set/comment/comment.service';
+import { GrabNDragDirective } from '../grab-n-drag.directive';
+import { Outline } from './side-bar/outline-item/outline.model';
+import { PdfPosition, reducers } from '../../store/reducers/reducers';
+import { PdfPositionUpdate } from '../../store/actions/document.actions';
+import { IcpService } from '../../icp/icp.service';
+import { SetCaseId } from '../../store/actions/icp.actions';
+import { IcpEventService } from '../../toolbar/icp-event.service';
+
+describe('PdfViewerComponent', () => {
+  let component: PdfViewerComponent;
+  let fixture: ComponentFixture<PdfViewerComponent>;
+  let toolbarEvents: ToolbarEventService;
+  let printService: PrintService;
+  let viewerEvents: ViewerEventService;
+  let wrapperFactory: PdfJsWrapperFactory;
+  let icpService: IcpService;
+  let mockWrapper: any;
+
+  const mockIcpService = {
+    setUp: () => {
+    }
+  } as any;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [
+        PdfViewerComponent,
+        AnnotationSetComponent,
+        GrabNDragDirective
+      ],
+      imports: [
+        StoreModule.forFeature('media-viewer', reducers),
+        StoreModule.forRoot({}),
+        RpxTranslationModule.forRoot({
+          baseUrl: '',
+          debounceTimeMs: 300,
+          validity: {
+            days: 1
+          },
+          testMode: true
+        })
+      ],
+      providers: [
+        CommentService,
+        ToolbarEventService,
+        ViewerEventService,
+        IcpEventService,
+        PrintService,
+        PdfJsWrapperFactory,
+        { provide: IcpService, useValue: mockIcpService },
+      ],
+      schemas: [
+        CUSTOM_ELEMENTS_SCHEMA,
+      ]
+    })
+      .compileComponents();
+    fixture = TestBed.createComponent(PdfViewerComponent);
+    component = fixture.componentInstance;
+  });
+
+  beforeEach(() => {
+    mockWrapper = {
+      loadDocument: () => { },
+      search: () => { },
+      clearSearch: () => { },
+      rotate: () => { },
+      setZoom: () => { },
+      stepZoom: () => { },
+      downloadFile: () => { },
+      setPageNumber: () => { },
+      changePageNumber: () => { },
+      getPageNumber: () => { },
+      getCurrentPDFTitle: () => { },
+      navigateTo: () => { },
+      documentLoadInit: new Subject<any>(),
+      documentLoadProgress: new Subject<DocumentLoadProgress>(),
+      documentLoaded: new Subject<any>(),
+      outlineLoaded: new Subject<Outline>(),
+      documentLoadFailed: new Subject(),
+      pageRendered: new Subject<{ pageNumber: number, source: { rotation: number, scale: number, div: Element } }>(),
+      positionUpdated: new Subject<{ location: PdfPosition }>()
+    };
+    component.annotationSet = JSON.parse(JSON.stringify(annotationSet));
+    component.url = 'url';
+    toolbarEvents = fixture.debugElement.injector.get(ToolbarEventService);
+    printService = fixture.debugElement.injector.get(PrintService);
+    viewerEvents = fixture.debugElement.injector.get(ViewerEventService);
+    wrapperFactory = fixture.debugElement.injector.get(PdfJsWrapperFactory);
+    icpService = TestBed.inject(IcpService);
+    spyOn(wrapperFactory, 'create').and.returnValue(mockWrapper);
+    component.ngOnChanges({
+      url: new SimpleChange(null, component.url, true)
+    });
+    fixture.detectChanges();
+  });
+
+  afterEach(() => {
+    component.ngOnDestroy();
+  });
+
+  it('should create', () => {
+    expect(component).toBeDefined();
+  });
+
+  it('should setup subscriptions', inject([Store], (store) => {
+    spyOn(printService, 'printDocumentNatively');
+    spyOn(toolbarEvents, 'toggleCommentsPanel');
+    spyOnAllFunctions(mockWrapper);
+    spyOn(store, 'dispatch');
+
+    const mockSearchOperation = {
+      searchTerm: 'searchTerm',
+      highlightAll: false,
+      matchCase: false,
+      wholeWord: false,
+      previous: false,
+      reset: true
+    };
+
+    toolbarEvents.printSubject.next();
+    toolbarEvents.downloadSubject.next();
+    toolbarEvents.zoomSubject.next(0.2);
+    toolbarEvents.stepZoomSubject.next(0.2);
+    toolbarEvents.searchSubject.next(mockSearchOperation);
+    toolbarEvents.setCurrentPageSubject.next(0);
+    toolbarEvents.changePageByDeltaSubject.next(0);
+    mockWrapper.positionUpdated.next({ location: { pageNumber: 1, top: 10, left: 10, rotation: 0, scale: 1 } });
+
+    expect(printService.printDocumentNatively).toHaveBeenCalledWith(component.url);
+    expect(mockWrapper.downloadFile).toHaveBeenCalled();
+    expect(mockWrapper.setZoom).toHaveBeenCalled();
+    expect(mockWrapper.stepZoom).toHaveBeenCalled();
+    expect(mockWrapper.search).toHaveBeenCalled();
+    expect(mockWrapper.setPageNumber).toHaveBeenCalled();
+    expect(mockWrapper.changePageNumber).toHaveBeenCalled();
+    expect(store.dispatch).toHaveBeenCalledWith(new PdfPositionUpdate({ pageNumber: 1, top: 10, left: 10, rotation: 0, scale: 1 }));
+  }));
+
+  it('on DocumentLoadProgress indicate document loading progress', () => {
+    mockWrapper.documentLoadProgress.next({ loaded: 10, total: 100 });
+    expect(component.loadingDocumentProgress).toBe(10);
+
+    mockWrapper.documentLoadProgress.next({ loaded: 90, total: 100 });
+    expect(component.loadingDocumentProgress).toBe(90);
+
+    mockWrapper.documentLoadProgress.next({ loaded: 200, total: 100 });
+    expect(component.loadingDocumentProgress).toBe(100);
+  });
+
+  it('should show error message on document load failed', () => {
+    mockWrapper.documentLoadFailed.next({ name: 'error', message: 'Could not load the document' });
+
+    expect(component.errorMessage).toContain('Could not load the document');
+    expect(component.loadingDocument).toBe(false);
+  });
+
+  it('clear the search when the search bar is closed', () => {
+    spyOn(mockWrapper, 'clearSearch');
+
+    component.searchBarHidden = true;
+
+    expect(mockWrapper.clearSearch).toHaveBeenCalled();
+  });
+
+  it('should initialize loading of document', () => {
+    mockWrapper.documentLoadInit.next();
+
+    expect(component.loadingDocument).toBe(true);
+    expect(component.loadingDocumentProgress).toBe(null);
+    expect(component.errorMessage).toBe(null);
+  });
+
+  it('should set document loading status to false after document has been loaded', () => {
+    component.loadingDocument = true;
+
+    mockWrapper.documentLoaded.next();
+
+    expect(component.loadingDocument).toBe(false);
+  });
+
+  it('should set document loading status to false after document load failed', () => {
+    component.loadingDocument = true;
+
+    mockWrapper.documentLoadFailed.next({ name: 'error', message: 'Could not load the document' });
+
+    expect(component.loadingDocument).toBe(false);
+  });
+
+  it('should load new document when URL changes', fakeAsync(() => {
+    component.enableAnnotations = true;
+    component.annotationSet = JSON.parse(JSON.stringify(annotationSet));
+    spyOn(mockWrapper, 'loadDocument');
+
+    component.ngOnChanges({
+      url: new SimpleChange('a', component.url, true)
+    });
+    tick();
+
+    expect(mockWrapper.loadDocument).toHaveBeenCalled();
+  }));
+
+  it('should emit documentTitle when document is loaded', fakeAsync(() => {
+    const documentTitleSpy = spyOn(component.documentTitle, 'emit');
+    component.url = 'b';
+
+    component.ngOnChanges({
+      url: new SimpleChange('a', component.url, true)
+    });
+    tick();
+
+    expect(documentTitleSpy).toHaveBeenCalled();
+  }));
+
+  it('should show comments panel', () => {
+    component.showCommentsPanel = false;
+    component.showIcpParticipantsList = false;
+
+    toolbarEvents.commentsPanelVisible.next(true);
+    fixture.detectChanges();
+
+    expect(component.showCommentsPanel).toBeTruthy();
+    expect(component.viewerContainer.nativeElement.classList).toContain('show-comments-panel');
+  });
+
+  it('should hide comments panel', () => {
+    component.showCommentsPanel = true;
+    component.showIcpParticipantsList = false;
+
+    toolbarEvents.commentsPanelVisible.next(false);
+    fixture.detectChanges();
+
+    expect(component.showCommentsPanel).toBeFalsy();
+    expect(component.viewerContainer.nativeElement.classList).not.toContain('show-comments-panel');
+  });
+
+  it('should show icp participants list', () => {
+    component.showIcpParticipantsList = false;
+    component.showCommentsPanel = false;
+
+    toolbarEvents.toggleParticipantsList(true);
+    fixture.detectChanges();
+
+    expect(component.showIcpParticipantsList).toBeTruthy();
+    expect(component.viewerContainer.nativeElement.classList).toContain('show-comments-panel');
+  });
+
+  it('should hide icp participants list', () => {
+    component.showIcpParticipantsList = true;
+    component.showCommentsPanel = false;
+
+    toolbarEvents.toggleParticipantsList(false);
+    fixture.detectChanges();
+
+    expect(component.showIcpParticipantsList).toBeFalsy();
+    expect(component.viewerContainer.nativeElement.classList).not.toContain('show-comments-panel');
+  });
+
+  it('should emit toggleCommentsSummary event', () => {
+    const commentSummarySpy = spyOn(component.toolbarEvents.showCommentSummary, 'next');
+    component.toggleCommentsSummary();
+    expect(commentSummarySpy).toHaveBeenCalledWith(true);
+  });
+
+  it('should call set case id action when case id is set',
+    inject([Store], fakeAsync((store) => {
+      spyOn(store, 'dispatch');
+
+      const caseId = 'caseId';
+      component.caseId = caseId;
+      component.ngOnChanges({
+        caseId: new SimpleChange(null, component.caseId, true)
+      });
+
+      expect(store.dispatch).toHaveBeenCalledWith(new SetCaseId(caseId));
+    }))
+  );
+
+  it('calls goToDestination', inject([Store], fakeAsync((store) => {
+    spyOn(mockWrapper, 'navigateTo');
+    spyOn(mockWrapper, 'getPageNumber');
+    spyOn(mockWrapper, 'setPageNumber');
+    component.rotation = 270;
+
+    viewerEvents.navigationEvent.next([{ pageNumber: 1, top: 10, left: 10, rotation: 270, scale: 1 }]);
+    tick(10);
+    expect(mockWrapper.navigateTo).toHaveBeenCalled();
+    expect(component.rotation).toEqual(270);
+    expect(mockWrapper.getPageNumber).toHaveBeenCalledTimes(2);
+    expect(mockWrapper.setPageNumber).toHaveBeenCalledTimes(2);
+  })));
+
+  it('call calculateZoomValue where the new zoom will be 5', inject([Store], (store) => {
+    var result = component.calculateZoomValue(2, 4);
+    expect(result).toEqual(5);
+  }));
+
+  it('call calculateZoomValue where the new zoom will be 0.5', inject([Store], (store) => {
+    var result = component.calculateZoomValue(0.01, 0.05);
+    expect(result).toEqual(0.1);
+  }));
+
+  describe('onViewerContainerFocusIn', () => {
+    it('should do nothing when not coming from sidebar', () => {
+      const mockEvent = <Partial<FocusEvent>>{
+        relatedTarget: document.createElement('div'),
+        target: document.createElement('div')
+      };
+
+      spyOn(component, 'getCurrentPageNumber');
+
+      component.onViewerContainerFocusIn(mockEvent as FocusEvent);
+
+      expect(component.getCurrentPageNumber).not.toHaveBeenCalled();
+    });
+
+    it('should do nothing when not going to viewer container', () => {
+      const sidebarElement = document.createElement('div');
+      sidebarElement.id = 'sidebarContainer';
+      const fromElement = document.createElement('div');
+      sidebarElement.appendChild(fromElement);
+
+      const toElement = document.createElement('div');
+
+      const mockEvent = <Partial<FocusEvent>>{
+        relatedTarget: fromElement,
+        target: toElement
+      };
+
+      spyOn(component, 'getCurrentPageNumber');
+
+      component.onViewerContainerFocusIn(mockEvent as FocusEvent);
+
+      expect(component.getCurrentPageNumber).not.toHaveBeenCalled();
+    });
+
+    it('should do nothing when target is not a text layer', () => {
+      const sidebarElement = document.createElement('div');
+      sidebarElement.id = 'sidebarContainer';
+      const fromElement = document.createElement('div');
+      sidebarElement.appendChild(fromElement);
+
+      const viewerContainer = document.createElement('div');
+      viewerContainer.id = 'viewerContainer';
+      const toElement = document.createElement('div');
+      viewerContainer.appendChild(toElement);
+
+      const mockEvent = <Partial<FocusEvent>>{
+        relatedTarget: fromElement,
+        target: toElement
+      };
+
+      spyOn(component, 'getCurrentPageNumber');
+
+      component.onViewerContainerFocusIn(mockEvent as FocusEvent);
+
+      expect(component.getCurrentPageNumber).not.toHaveBeenCalled();
+    });
+
+    it('should focus current page text layer when tabbing from sidebar to the first page', () => {
+      const sidebarElement = document.createElement('div');
+      sidebarElement.id = 'sidebarContainer';
+      const fromElement = document.createElement('div');
+      sidebarElement.appendChild(fromElement);
+      document.body.appendChild(sidebarElement);
+
+      const viewerContainer = document.createElement('div');
+      viewerContainer.id = 'viewerContainer';
+
+      const focusedPageElement = document.createElement('div');
+      focusedPageElement.setAttribute('data-page-number', '1');
+      const focusedTextLayer = document.createElement('div');
+      focusedTextLayer.classList.add('textLayer');
+      focusedPageElement.appendChild(focusedTextLayer);
+      viewerContainer.appendChild(focusedPageElement);
+
+      const currentPageElement = document.createElement('div');
+      currentPageElement.setAttribute('data-page-number', '3');
+      const currentTextLayer = document.createElement('div');
+      currentTextLayer.classList.add('textLayer');
+      currentTextLayer.setAttribute('tabindex', '0');
+      currentPageElement.appendChild(currentTextLayer);
+      viewerContainer.appendChild(currentPageElement);
+
+      document.body.appendChild(viewerContainer);
+
+      const mockEvent = <Partial<FocusEvent>>{
+        relatedTarget: fromElement,
+        target: focusedTextLayer
+      };
+
+      spyOn(component, 'getCurrentPageNumber').and.returnValue(3);
+      spyOn(currentTextLayer, 'focus');
+      spyOn(component.viewerContainer.nativeElement, 'querySelector').and.returnValue(currentPageElement);
+
+      component.onViewerContainerFocusIn(mockEvent as FocusEvent);
+
+      expect(component.getCurrentPageNumber).toHaveBeenCalled();
+      expect(currentTextLayer.focus).toHaveBeenCalled();
+
+      document.body.removeChild(sidebarElement);
+      document.body.removeChild(viewerContainer);
+    });
+
+    it('should not focus when tabbing to current page', () => {
+      const sidebarElement = document.createElement('div');
+      sidebarElement.id = 'sidebarContainer';
+      const fromElement = document.createElement('div');
+      sidebarElement.appendChild(fromElement);
+      document.body.appendChild(sidebarElement);
+
+      const viewerContainer = document.createElement('div');
+      viewerContainer.id = 'viewerContainer';
+
+      const currentPageElement = document.createElement('div');
+      currentPageElement.setAttribute('data-page-number', '3');
+      const currentTextLayer = document.createElement('div');
+      currentTextLayer.classList.add('textLayer');
+      currentTextLayer.setAttribute('tabindex', '0');
+      currentPageElement.appendChild(currentTextLayer);
+      viewerContainer.appendChild(currentPageElement);
+
+      component.viewerContainer.nativeElement.appendChild(viewerContainer);
+      document.body.appendChild(viewerContainer);
+
+      const mockEvent = <Partial<FocusEvent>>{
+        relatedTarget: fromElement,
+        target: currentTextLayer
+      };
+
+      spyOn(component, 'getCurrentPageNumber').and.returnValue(3);
+      spyOn(currentTextLayer, 'focus');
+
+      component.onViewerContainerFocusIn(mockEvent as FocusEvent);
+
+      expect(component.getCurrentPageNumber).toHaveBeenCalled();
+      expect(currentTextLayer.focus).not.toHaveBeenCalled();
+
+      document.body.removeChild(sidebarElement);
+      document.body.removeChild(viewerContainer);
+    });
+  }); 
+
+});