From 8370a3de662b8edafd1b684ad94f8e9557584d0f Mon Sep 17 00:00:00 2001 From: Mykyta Maliarchuk <84377976+nikita-web-ua@users.noreply.github.com> Date: Tue, 26 Sep 2023 14:44:29 +0200 Subject: [PATCH] [MNT-23560] TIFF PDF Renderer Error (#8921) * [MNT-23560] added horizontal scroll * [MNT-23560] fixed user interaction tests * [MNT-23560] unit tests * [MNT-23560] fixed pdf-viewer unit tests * [MNT-23560] linter * [MNT-23560] added to do comment --- .../components/pdf-viewer.component.html | 2 +- .../components/pdf-viewer.component.scss | 3 +- .../components/pdf-viewer.component.spec.ts | 67 ++++++++++--------- .../viewer/components/pdf-viewer.component.ts | 9 +++ 4 files changed, 47 insertions(+), 34 deletions(-) diff --git a/lib/core/src/lib/viewer/components/pdf-viewer.component.html b/lib/core/src/lib/viewer/components/pdf-viewer.component.html index 6b1538d5b9..cf83f4e135 100644 --- a/lib/core/src/lib/viewer/components/pdf-viewer.component.html +++ b/lib/core/src/lib/viewer/components/pdf-viewer.component.html @@ -37,7 +37,7 @@ -
+
diff --git a/lib/core/src/lib/viewer/components/pdf-viewer.component.scss b/lib/core/src/lib/viewer/components/pdf-viewer.component.scss index 07ca3293a6..bb0412c754 100644 --- a/lib/core/src/lib/viewer/components/pdf-viewer.component.scss +++ b/lib/core/src/lib/viewer/components/pdf-viewer.component.scss @@ -63,7 +63,8 @@ &__container { display: flex; - height: 100vh; + height: 100%; + min-height: 1px; } &__content { diff --git a/lib/core/src/lib/viewer/components/pdf-viewer.component.spec.ts b/lib/core/src/lib/viewer/components/pdf-viewer.component.spec.ts index 5f482b4d29..a3361d0837 100644 --- a/lib/core/src/lib/viewer/components/pdf-viewer.component.spec.ts +++ b/lib/core/src/lib/viewer/components/pdf-viewer.component.spec.ts @@ -115,8 +115,8 @@ class BlobTestComponent { } } -// eslint-disable-next-line -xdescribe('Test PdfViewer component', () => { + +describe('Test PdfViewer component', () => { let component: PdfViewerComponent; let fixture: ComponentFixture; @@ -154,7 +154,6 @@ xdescribe('Test PdfViewer component', () => { component.showToolbar = true; component.inputPage('1'); - component.pdfViewer.currentScale = 1; fixture.detectChanges(); fixture.whenStable().then(() => { @@ -279,10 +278,10 @@ xdescribe('Test PdfViewer component', () => { tick(250); - const zoomBefore = componentUrlTestComponent.pdfViewerComponent.pdfViewer.currentScale; + const zoomBefore = componentUrlTestComponent.pdfViewerComponent.pdfViewer.currentScaleValue; zoomInButton.click(); expect(componentUrlTestComponent.pdfViewerComponent.currentScaleMode).toBe('auto'); - const currentZoom = componentUrlTestComponent.pdfViewerComponent.pdfViewer.currentScale; + const currentZoom = componentUrlTestComponent.pdfViewerComponent.pdfViewer.currentScaleValue; expect(zoomBefore < currentZoom).toBe(true); }), 55000); @@ -293,10 +292,10 @@ xdescribe('Test PdfViewer component', () => { tick(250); - const zoomBefore = componentUrlTestComponent.pdfViewerComponent.pdfViewer.currentScale; + const zoomBefore = componentUrlTestComponent.pdfViewerComponent.pdfViewer.currentScaleValue; zoomOutButton.click(); expect(componentUrlTestComponent.pdfViewerComponent.currentScaleMode).toBe('auto'); - const currentZoom = componentUrlTestComponent.pdfViewerComponent.pdfViewer.currentScale; + const currentZoom = componentUrlTestComponent.pdfViewerComponent.pdfViewer.currentScaleValue; expect(zoomBefore > currentZoom).toBe(true); }), 55000); @@ -414,6 +413,17 @@ xdescribe('Test PdfViewer component', () => { done(); }); }); + + it('should check if document has overflow', (done) => { + spyOn(componentUrlTestComponent.pdfViewerComponent, 'setScaleUpdatePages'); + componentUrlTestComponent.pdfViewerComponent.scalePage('auto'); + + fixtureUrlTestComponent.detectChanges(); + fixtureUrlTestComponent.whenStable().then(() => { + expect(componentUrlTestComponent.pdfViewerComponent.setScaleUpdatePages).toHaveBeenCalled(); + done(); + }); + }); }); }); @@ -496,14 +506,15 @@ xdescribe('Test PdfViewer component', () => { fixtureUrlTestComponent.detectChanges(); fixtureUrlTestComponent.whenStable().then(() => { - expect(componentUrlTestComponent.pdfViewerComponent.pdfViewer.currentScale).toBe(0.25); + expect(componentUrlTestComponent.pdfViewerComponent.pdfViewer.currentScaleValue).toBe('0.25'); done(); }); }); }); - - describe('greater than the maximum allowed value', () => { + // TODO: https://alfresco.atlassian.net/browse/ACS-6061 + // eslint-disable-next-line + xdescribe('greater than the maximum allowed value', () => { let fixtureUrlTestComponent: ComponentFixture; let componentUrlTestComponent: UrlTestComponent; @@ -538,9 +549,7 @@ xdescribe('Test PdfViewer component', () => { fixtureUrlTestComponent.whenStable().then(() => { expect(componentUrlTestComponent.pdfViewerComponent.pdfViewer.currentScale).toBe(10); done(); - }); - }); }); }); @@ -623,21 +632,17 @@ xdescribe('Test PdfViewer component', () => { describe('View with blob file', () => { let fixtureBlobTestComponent: ComponentFixture; - let componentBlobTestComponent: BlobTestComponent; let elementBlobTestComponent: HTMLElement; beforeEach((done) => { fixtureBlobTestComponent = TestBed.createComponent(BlobTestComponent); - componentBlobTestComponent = fixtureBlobTestComponent.componentInstance; elementBlobTestComponent = fixtureBlobTestComponent.nativeElement; fixtureBlobTestComponent.detectChanges(); - componentBlobTestComponent.pdfViewerComponent.rendered - .pipe(take(1)) - .subscribe(() => { - done(); - }); + fixtureBlobTestComponent.whenStable().then(() => { + done(); + }); }); afterEach(() => { @@ -679,7 +684,7 @@ xdescribe('Test PdfViewer component', () => { }, 55000); it('should Toolbar be hide if showToolbar is false', (done) => { - componentBlobTestComponent.pdfViewerComponent.showToolbar = false; + fixtureBlobTestComponent.componentInstance.pdfViewerComponent.showToolbar = false; fixtureBlobTestComponent.detectChanges(); @@ -697,7 +702,7 @@ xdescribe('Test PdfViewer component', () => { let componentUrlTestPasswordComponent: UrlTestPasswordComponent; describe('Open password dialog', () => { - beforeEach((done) => { + beforeEach( async () => { fixtureUrlTestPasswordComponent = TestBed.createComponent(UrlTestPasswordComponent); componentUrlTestPasswordComponent = fixtureUrlTestPasswordComponent.componentInstance; @@ -718,10 +723,7 @@ xdescribe('Test PdfViewer component', () => { }); fixtureUrlTestPasswordComponent.detectChanges(); - - componentUrlTestPasswordComponent.pdfViewerComponent.rendered.subscribe(() => { - done(); - }); + await fixtureUrlTestPasswordComponent.whenStable(); }); afterEach(() => { @@ -729,16 +731,18 @@ xdescribe('Test PdfViewer component', () => { }); it('should try to access protected pdf', (done) => { + componentUrlTestPasswordComponent.pdfViewerComponent.onPdfPassword(() => {}, pdfjsLib.PasswordResponses.NEED_PASSWORD); fixture.detectChanges(); fixture.whenStable().then(() => { fixture.detectChanges(); - expect(dialog.open).toHaveBeenCalledTimes(2); + expect(dialog.open).toHaveBeenCalledTimes(1); done(); }); }); it('should raise dialog asking for password', (done) => { + componentUrlTestPasswordComponent.pdfViewerComponent.onPdfPassword(() => {}, pdfjsLib.PasswordResponses.NEED_PASSWORD); fixture.detectChanges(); fixture.whenStable().then(() => { fixture.detectChanges(); @@ -750,10 +754,11 @@ xdescribe('Test PdfViewer component', () => { }); it('it should raise dialog with incorrect password', (done) => { + componentUrlTestPasswordComponent.pdfViewerComponent.onPdfPassword(() => {}, pdfjsLib.PasswordResponses.INCORRECT_PASSWORD); fixture.detectChanges(); fixture.whenStable().then(() => { fixture.detectChanges(); - expect(dialog.open['calls'].all()[1].args[1].data).toEqual({ + expect(dialog.open['calls'].all()[0].args[1].data).toEqual({ reason: pdfjsLib.PasswordResponses.INCORRECT_PASSWORD }); done(); @@ -767,17 +772,14 @@ xdescribe('Test PdfViewer component', () => { componentUrlTestPasswordComponent = fixtureUrlTestPasswordComponent.componentInstance; spyOn(dialog, 'open').and.callFake(() => ({ - afterClosed: () => { - done(); - return of(''); - } + afterClosed: () => of('') } as any)); spyOn(componentUrlTestPasswordComponent.pdfViewerComponent.close, 'emit'); fixtureUrlTestPasswordComponent.detectChanges(); - componentUrlTestPasswordComponent.pdfViewerComponent.rendered.subscribe(() => { + fixtureUrlTestPasswordComponent.whenStable().then(() => { done(); }); }); @@ -787,6 +789,7 @@ xdescribe('Test PdfViewer component', () => { }); it('should try to access protected pdf', (done) => { + componentUrlTestPasswordComponent.pdfViewerComponent.onPdfPassword(() => {}, pdfjsLib.PasswordResponses.NEED_PASSWORD); fixture.detectChanges(); fixture.whenStable().then(() => { fixture.detectChanges(); diff --git a/lib/core/src/lib/viewer/components/pdf-viewer.component.ts b/lib/core/src/lib/viewer/components/pdf-viewer.component.ts index 5e6d00e860..6b38882ed8 100644 --- a/lib/core/src/lib/viewer/components/pdf-viewer.component.ts +++ b/lib/core/src/lib/viewer/components/pdf-viewer.component.ts @@ -99,6 +99,7 @@ export class PdfViewerComponent implements OnChanges, OnDestroy { showThumbnails: boolean = false; pdfThumbnailsContext: { viewer: any } = { viewer: null }; randomPdfId: string; + documentOverflow = false; get currentScaleText(): string { return this.pdfViewer?.currentScaleValue ? Math.round(this.pdfViewer.currentScaleValue * 100) + '%' : ''; @@ -369,6 +370,13 @@ export class PdfViewerComponent implements OnChanges, OnDestroy { return scale; } + setDocumentOverflow() { + const documentContainerSize = this.getDocumentContainer(); + const page = this.pdfViewer._pages[this.pdfViewer._currentPageNumber - 1]; + + this.documentOverflow = page.width > documentContainerSize.clientWidth; + } + /** * Update all the pages with the newScale scale * @@ -382,6 +390,7 @@ export class PdfViewerComponent implements OnChanges, OnDestroy { this.pdfViewer.update(); } + this.setDocumentOverflow(); } /**