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

tests/pages/MagnifyGlassPageObject.ts

@@ -0,0 +1,48 @@
+import { Locator, Page } from '@playwright/test';
+import { simulateNormalizedDragOnElement } from '../utils';
+
+type MagnifyDragParams = {
+  start: { x: number; y: number };
+  end?: { x: number; y: number };
+  mouseUp?: boolean;
+  button?: 'left' | 'right' | 'middle';
+  delay?: number;
+  steps?: number;
+};
+
+export class MagnifyGlassPageObject {
+  readonly page: Page;
+  readonly viewport: Locator;
+
+  constructor(page: Page, viewport: Locator) {
+    this.page = page;
+    this.viewport = viewport;
+  }
+
+  get locator(): Locator {
+    return this.viewport.locator('.magnifyTool');
+  }
+
+  async drag({
+    start,
+    end,
+    button,
+    delay,
+    steps,
+    mouseUp = true,
+  }: MagnifyDragParams): Promise<void> {
+    await simulateNormalizedDragOnElement({
+      locator: this.viewport,
+      start,
+      end: end ?? start,
+      button,
+      delay,
+      steps,
+      mouseUp,
+    });
+  }
+
+  async stopDrag(): Promise<void> {
+    await this.page.mouse.up();
+  }
+}

tests/pages/MainToolbarPageObject.ts

@@ -326,6 +326,16 @@ export class MainToolbarPageObject {
           },
         };
       },
+      get magnify() {
+        const button = page.getByTestId('Magnify');
+        return {
+          button,
+          async click() {
+            await moreTools.click();
+            await button.click();
+          },
+        };
+      },
     };
   }
 

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),
     };
   }
 

tests/pages/index.ts

@@ -5,6 +5,7 @@ import { RightPanelPageObject } from './RightPanelPageObject';
 import { ViewportPageObject } from './ViewportPageObject';
 import { NotFoundStudyPageObject } from './NotFoundStudyPageObject';
 import { DicomTagBrowserPageObject } from './DicomTagBrowserPageObject';
+import { MagnifyGlassPageObject } from './MagnifyGlassPageObject';
 
 export {
   DOMOverlayPageObject,
@@ -14,4 +15,5 @@ export {
   ViewportPageObject,
   NotFoundStudyPageObject,
   DicomTagBrowserPageObject,
+  MagnifyGlassPageObject,
 };