test( zoomIn-tool): verify horizontal flip is preserved in magnified view (#5983)

tests/pages/ViewportPageObject.ts

@@ -8,6 +8,7 @@ import {
 } from '../utils';
 import { DataOverlayPageObject } from './DataOverlayPageObject';
 import { DOMOverlayPageObject } from './DOMOverlayPageObject';
+import { MagnifyGlassPageObject } from './MagnifyGlassPageObject';
 
 type SvgInnerElement = 'circle' | 'path' | 'd';
 
@@ -91,6 +92,13 @@ export interface IViewportPageObject {
       click: () => Promise<void>;
     };
   };
+  sliceNavigation: {
+    toSlice: (sliceIndex: number) => Promise<void>;
+    toFirstSlice: () => Promise<void>;
+    toLastSlice: () => Promise<void>;
+    scrollBy: (delta: number) => Promise<void>;
+  };
+  magnifyGlass: MagnifyGlassPageObject;
 }
 
 export class ViewportPageObject {
@@ -200,6 +208,59 @@ export class ViewportPageObject {
     };
   }
 
+  /**
+   * Note: awaiting the returned methods (toSlice, toFirstSlice, toLastSlice, scrollBy)
+   * does not guarantee the viewport has finished rendering. Follow up with
+   * `waitForViewportsRendered` if you need pixel-stable state.
+   */
+  private getSliceNavigation(viewport: Locator) {
+    const page = this.page;
+
+    const jumpToImage = async (imageIndex: number) => {
+      const viewportId = await this.getViewportId(viewport);
+      await page.evaluate(
+        ({ commandsManager, viewportId, imageIndex }) => {
+          return commandsManager.runCommand('jumpToImage', {
+            imageIndex,
+            viewport: { id: viewportId },
+          });
+        },
+        {
+          viewportId,
+          imageIndex,
+          commandsManager: await page.evaluateHandle('window.commandsManager'),
+        }
+      );
+    };
+
+    const scrollBy = async (delta: number) => {
+      const viewportId = await this.getViewportId(viewport);
+      await page.evaluate(
+        ({ services, viewportId, delta }) => {
+          const cornerstoneViewport = (
+            services as any
+          ).cornerstoneViewportService.getCornerstoneViewport(viewportId);
+          if (!cornerstoneViewport) {
+            return;
+          }
+          return cornerstoneViewport.scroll(delta);
+        },
+        {
+          viewportId,
+          delta,
+          services: await page.evaluateHandle('window.services'),
+        }
+      );
+    };
+
+    return {
+      toSlice: jumpToImage,
+      toFirstSlice: () => jumpToImage(0),
+      toLastSlice: () => jumpToImage(-1),
+      scrollBy,
+    };
+  }
+
   private async viewportPageObjectFactory(viewport: Locator): Promise<IViewportPageObject> {
     return {
       nthAnnotation: (nth: number) => this.getAnnotation(viewport, nth),
@@ -244,6 +305,8 @@ export class ViewportPageObject {
         return this.getSvg(viewport, innerElement);
       },
       navigationArrows: this.getNavigationArrows(viewport),
+      sliceNavigation: this.getSliceNavigation(viewport),
+      magnifyGlass: new MagnifyGlassPageObject(this.page, viewport),
     };
   }