[ACS-8845] viewer file types fixes pr (#4159)

* [ACS-8845] [E2E] Added e2e tests for verifying file types in viewer * [ACS-8845] [E2E] Viewer tests fixes * [ACS-8845] eslint fix
Alfresco · Oct 2, 2024 · b72009f · b72009f
1 parent 8099ca9
commit b72009f
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 13 deletions.
diff --git a/e2e/playwright/viewer/src/tests/viewer-file-types.e2e.ts b/e2e/playwright/viewer/src/tests/viewer-file-types.e2e.ts
@@ -25,18 +25,19 @@
 import { expect } from '@playwright/test';
 import { ApiClientFactory, FileActionsApi, NodesApi, test, TEST_FILES, Utils, TrashcanApi, PersonalFilesPage } from '@alfresco/aca-playwright-shared';
 
+test.use({ channel: 'chrome' });
 test.describe('viewer file types', () => {
   const randomString = Utils.random();
   const username = `user-${randomString}`;
-  const randomDocxName = `${TEST_FILES.DOCX.name}-${randomString}`;
-  const randomJpgName = `${TEST_FILES.JPG_FILE.name}-${randomString}`;
-  const randomPngName = `${TEST_FILES.PNG_FILE.name}-${randomString}`;
-  const randomGifName = `${TEST_FILES.GIF_FILE.name}-${randomString}`;
-  const randomPdfName = `${TEST_FILES.PDF.name}-${randomString}`;
-  const randomPptxName = `${TEST_FILES.PPTX_FILE.name}-${randomString}`;
-  const randomMp3Name = `${TEST_FILES.MP3_FILE.name}-${randomString}`;
-  const randomMp4Name = `${TEST_FILES.MP4_FILE.name}-${randomString}`;
-  const randomWebmName = `${TEST_FILES.WEBM_FILE.name}-${randomString}`;
+  const randomDocxName = `${TEST_FILES.DOCX.name}-${randomString}.docx`;
+  const randomJpgName = `${TEST_FILES.JPG_FILE.name}-${randomString}.jpg`;
+  const randomPngName = `${TEST_FILES.PNG_FILE.name}-${randomString}.png`;
+  const randomGifName = `${TEST_FILES.GIF_FILE.name}-${randomString}.gif`;
+  const randomPdfName = `${TEST_FILES.PDF.name}-${randomString}.pdf`;
+  const randomPptxName = `${TEST_FILES.PPTX_FILE.name}-${randomString}.pptx`;
+  const randomMp3Name = `${TEST_FILES.MP3_FILE.name}-${randomString}.mp3`;
+  const randomMp4Name = `${TEST_FILES.MP4_FILE.name}-${randomString}.mp4`;
+  const randomWebmName = `${TEST_FILES.WEBM_FILE.name}-${randomString}.webm`;
   let nodesApi: NodesApi;
   let trashcanApi: TrashcanApi;
   let fileActionApi: FileActionsApi;
@@ -83,7 +84,7 @@ test.describe('viewer file types', () => {
   ) {
     await page.dataTable.performClickFolderOrFileToOpen(fileName);
     expect(await page.viewer.isViewerOpened(), 'Viewer is not opened').toBe(true);
-    await expect(page.viewer.unknownFormat).toBeHidden();
+    await page.viewer.waitForViewerLoaderToFinish();
 
     const viewerElements = {
       viewerImage: page.viewer.viewerImage,
@@ -140,9 +141,9 @@ test.describe('viewer file types', () => {
     expect(await personalFiles.viewer.isViewerOpened(), 'Viewer is not opened').toBe(true);
     await personalFiles.viewer.documentThumbnailButton.click();
     await expect(personalFiles.viewer.thumbnailsPages.first()).toBeVisible();
-    await expect(personalFiles.viewer.viewerPage).toHaveValue('1');
-    await personalFiles.viewer.thumbnailsPages.nth(1).click();
-    await expect(personalFiles.viewer.viewerPage).toHaveValue('2');
+    await personalFiles.viewer.checkViewerActivePage(1);
+    await personalFiles.viewer.clickViewerThumbnailPage(2);
+    await personalFiles.viewer.checkViewerActivePage(2);
   });
 
   test('[XAT-5486] User can close the thumbnail pane', async ({ personalFiles }) => {

diff --git a/projects/aca-playwright-shared/src/page-objects/components/viewer.component.ts b/projects/aca-playwright-shared/src/page-objects/components/viewer.component.ts
@@ -45,6 +45,7 @@ export class ViewerComponent extends BaseComponent {
   public thumbnailsCloseButton = this.getChild('[data-automation-id="adf-thumbnails-close"]');
   public viewerPage = this.getChild('[data-automation-id="adf-page-selector"]');
   public viewerMedia = this.getChild('adf-media-player');
+  public viewerSpinner = this.getChild('.adf-viewer-render__loading-screen');
 
   toolbar = new AcaHeader(this.page);
 
@@ -69,6 +70,18 @@ export class ViewerComponent extends BaseComponent {
     return this.viewerLocator.isVisible();
   }
 
+  async waitForViewerLoaderToFinish(): Promise<void> {
+    await this.viewerSpinner.waitFor({ state: 'hidden', timeout: timeouts.extraLarge });
+  }
+
+  async checkViewerActivePage(pageNumber: number): Promise<void> {
+    await expect(this.viewerPage).toHaveValue(pageNumber.toString());
+  }
+
+  async clickViewerThumbnailPage(pageNumber: number): Promise<void> {
+    await this.thumbnailsPages.nth(pageNumber - 1).click();
+  }
+
   async isCloseButtonDisplayed(): Promise<boolean> {
     await this.closeButtonLocator.waitFor({ state: 'visible', timeout: timeouts.normal });
     return this.closeButtonLocator.isEnabled({ timeout: timeouts.normal });