refactor(tests): update viewport page object usage to async and update all effected tests (#5927)

tests/pages/DataOverlayPageObject.ts

@@ -2,17 +2,19 @@ import { Page } from '@playwright/test';
 
 export class DataOverlayPageObject {
   readonly page: Page;
+  readonly viewportId: string;
 
-  constructor(page: Page) {
+  constructor(page: Page, viewportId: string) {
     this.page = page;
+    this.viewportId = viewportId;
   }
 
-  async toggle(viewportId: string = 'default') {
-    await this.page.getByTestId(`dataOverlayMenu-${viewportId}-btn`).click();
+  async toggle() {
+    await this.page.getByTestId(`dataOverlayMenu-${this.viewportId}-btn`).click();
   }
 
-  async addSegmentation(segmentation: string, viewportId: string = 'default') {
-    await this.page.getByTestId(`AddSegmentationDataOverlay-${viewportId}`).click();
+  async addSegmentation(segmentation: string) {
+    await this.page.getByTestId(`AddSegmentationDataOverlay-${this.viewportId}`).click();
     await this.page.getByText('SELECT A SEGMENTATION').click();
     await this.page.getByTestId(segmentation).click();
   }

tests/pages/ViewportPageObject.ts

@@ -21,7 +21,6 @@ export interface IOverlayText {
   get windowLevel(): Locator;
   get instanceNumber(): Locator;
 }
-
 function overlayTextFactory(viewport: Locator, id: string): IOverlayText {
   const locator = viewport.getByTestId(id);
   return {
@@ -96,11 +95,9 @@ export interface IViewportPageObject {
 
 export class ViewportPageObject {
   readonly page: Page;
-  private readonly dataOverlayPageObject: DataOverlayPageObject;
 
   constructor(page: Page) {
     this.page = page;
-    this.dataOverlayPageObject = new DataOverlayPageObject(page);
   }
 
   private getAnnotation(viewport: Locator, nth: number) {
@@ -128,6 +125,14 @@ export class ViewportPageObject {
     };
   }
 
+  private async getViewportId(viewport: Locator): Promise<string> {
+    const id = await viewport.locator('[data-viewportid]').getAttribute('data-viewportid');
+    if (id === null) {
+      throw new Error('Could not resolve data-viewportid from viewport locator');
+    }
+    return id;
+  }
+
   private getOrientationMarkers(viewport: Locator) {
     return {
       topMid: viewport.locator('.top-mid.orientation-marker'),
@@ -146,9 +151,9 @@ export class ViewportPageObject {
     };
   }
 
-  private getOverlayMenu(viewport: Locator) {
+  private async getOverlayMenu(viewport: Locator) {
     return {
-      dataOverlay: this.dataOverlayPageObject,
+      dataOverlay: new DataOverlayPageObject(this.page, await this.getViewportId(viewport)),
       get orientation() {
         const button = viewport.locator('[data-cy^="orientationMenu"]');
         return {
@@ -195,7 +200,7 @@ export class ViewportPageObject {
     };
   }
 
-  private viewportPageObjectFactory(viewport: Locator): IViewportPageObject {
+  private async viewportPageObjectFactory(viewport: Locator): Promise<IViewportPageObject> {
     return {
       nthAnnotation: (nth: number) => this.getAnnotation(viewport, nth),
       doubleClickAt: async (point: { x: number; y: number }) => {
@@ -233,7 +238,7 @@ export class ViewportPageObject {
       },
       orientationMarkers: this.getOrientationMarkers(viewport),
       overlayText: this.getOverlayText(viewport),
-      overlayMenu: this.getOverlayMenu(viewport),
+      overlayMenu: await this.getOverlayMenu(viewport),
       pane: viewport,
       svg: (innerElement?: SvgInnerElement) => {
         return this.getSvg(viewport, innerElement);
@@ -242,7 +247,7 @@ export class ViewportPageObject {
     };
   }
 
-  get active(): IViewportPageObject {
+  get active(): Promise<IViewportPageObject> {
     const viewport = this.page.locator('[data-cy="viewport-pane"][data-is-active="true"]');
     return this.viewportPageObjectFactory(viewport);
   }
@@ -313,15 +318,19 @@ export class ViewportPageObject {
 
   async getAll(): Promise<IViewportPageObject[]> {
     const viewports = await this.page.getByTestId('viewport-pane').all();
-    return viewports.map(viewport => this.viewportPageObjectFactory(viewport));
+    return await Promise.all(viewports.map(viewport => this.viewportPageObjectFactory(viewport)));
   }
 
-  getNth(index: number): IViewportPageObject {
-    const viewport = this.page.getByTestId('viewport-pane').nth(index);
+  getNth(index: number): Promise<IViewportPageObject> {
+    const viewport = this.getNthLocator(index);
     return this.viewportPageObjectFactory(viewport);
   }
 
-  getById(viewportId: string): IViewportPageObject {
+  getNthLocator(index: number): Locator {
+    return this.page.getByTestId('viewport-pane').nth(index);
+  }
+
+  getById(viewportId: string): Promise<IViewportPageObject> {
     const viewport = this.page.locator(
       `[data-cy="viewport-pane"]:has(div[data-viewportid="${viewportId}"])`
     );