fix(sr): sr hydration and load was not working, Screenshot Comparison, and Testing (#4814)

tests/RTHydration2.spec.ts

@@ -0,0 +1,42 @@
+import { test } from '@playwright/test';
+import { visitStudy, checkForScreenshot, screenShotPaths } from './utils';
+
+test.beforeEach(async ({ page }) => {
+  const studyInstanceUID = '1.3.6.1.4.1.5962.99.1.2968617883.1314880426.1493322302363.3.0';
+  const mode = 'viewer';
+  await visitStudy(page, studyInstanceUID, mode, 2000);
+});
+
+test('should hydrate RT reports correctly', async ({ page }) => {
+  await page.getByTestId('side-panel-header-right').click();
+  await page.getByTestId('study-browser-thumbnail-no-image').dblclick();
+
+  await checkForScreenshot(page, page, screenShotPaths.rtHydration2.rtPreHydration);
+  // wait for 3 seconds
+  await page.evaluate(() => {
+    // Access cornerstone directly from the window object
+    const cornerstone = window.cornerstone;
+    if (!cornerstone) {
+      return;
+    }
+
+    const enabledElements = cornerstone.getEnabledElements();
+    if (enabledElements.length === 0) {
+      return;
+    }
+
+    const viewport = enabledElements[0].viewport;
+    if (viewport) {
+      viewport.setZoom(4);
+      viewport.render();
+    }
+  });
+
+  await page.waitForTimeout(3000);
+
+  //
+
+  // should preserve zoom and pan and scroll position after hydration
+  await page.getByTestId('yes-hydrate-btn').click();
+  await checkForScreenshot(page, page, screenShotPaths.rtHydration.rtPostHydration);
+});

tests/SEGHydration.spec.ts

@@ -11,8 +11,26 @@ test('should hydrate SEG reports correctly', async ({ page }) => {
   await page.getByTestId('side-panel-header-right').click();
   await page.getByTestId('study-browser-thumbnail-no-image').dblclick();
   await checkForScreenshot(page, page, screenShotPaths.segHydration.segPreHydration);
+
+  await page.evaluate(() => {
+    // Access cornerstone directly from the window object
+    const cornerstone = window.cornerstone;
+    if (!cornerstone) {
+      return;
+    }
+
+    const enabledElements = cornerstone.getEnabledElements();
+    if (enabledElements.length === 0) {
+      return;
+    }
+
+    const viewport = enabledElements[0].viewport;
+    if (viewport) {
+      viewport.setZoom(4);
+      viewport.render();
+    }
+  });
+
   await page.getByTestId('yes-hydrate-btn').click();
   await checkForScreenshot(page, page, screenShotPaths.segHydration.segPostHydration);
-  await page.getByText('Esophagus').click();
-  await checkForScreenshot(page, page, screenShotPaths.segHydration.segJumpToSegment);
 });

tests/SEGHydrationMPR.spec.ts

@@ -0,0 +1,25 @@
+import { test } from '@playwright/test';
+import { visitStudy, checkForScreenshot, screenShotPaths } from './utils';
+
+test.beforeEach(async ({ page }) => {
+  const studyInstanceUID = '1.3.12.2.1107.5.2.32.35162.30000015050317233592200000046';
+  const mode = 'viewer';
+  await visitStudy(page, studyInstanceUID, mode, 2000);
+});
+
+test('should properly display MPR for MR', async ({ page }) => {
+  await page.getByTestId('side-panel-header-right').click();
+  await page.getByTestId('study-browser-thumbnail-no-image').dblclick();
+
+  await page.getByTestId('yes-hydrate-btn').click();
+  await checkForScreenshot(page, page, screenShotPaths.segHydrationMPR.segPostHydration);
+
+  await page.getByTestId('Layout').click();
+  await page.getByTestId('Axial Primary').click();
+
+  await checkForScreenshot(
+    page,
+    page,
+    screenShotPaths.segHydrationMPR.segPostHydrationMPRAxialPrimary
+  );
+});

tests/SRHydration.spec.ts

@@ -12,8 +12,48 @@ test('should hydrate SR reports correctly', async ({ page }) => {
   await page.getByTestId('trackedMeasurements-btn').click();
   await page.getByTestId('study-browser-thumbnail-no-image').dblclick();
   await checkForScreenshot(page, page, screenShotPaths.srHydration.srPreHydration);
+
+  await page.evaluate(() => {
+    // Access cornerstone directly from the window object
+    const cornerstone = window.cornerstone;
+    if (!cornerstone) {
+      return;
+    }
+
+    const enabledElements = cornerstone.getEnabledElements();
+    if (enabledElements.length === 0) {
+      return;
+    }
+
+    const viewport = enabledElements[0].viewport;
+    if (viewport) {
+      viewport.setZoom(4);
+      viewport.render();
+    }
+  });
+
   await page.getByTestId('yes-hydrate-btn').click();
   await checkForScreenshot(page, page, screenShotPaths.srHydration.srPostHydration);
+
+  await page.evaluate(() => {
+    // Access cornerstone directly from the window object
+    const cornerstone = window.cornerstone;
+    if (!cornerstone) {
+      return;
+    }
+
+    const enabledElements = cornerstone.getEnabledElements();
+    if (enabledElements.length === 0) {
+      return;
+    }
+
+    const viewport = enabledElements[0].viewport;
+    if (viewport) {
+      viewport.scroll(20);
+      viewport.render();
+    }
+  });
+
   await page.getByTestId('data-row').first().click();
   await checkForScreenshot(page, page, screenShotPaths.srHydration.srJumpToMeasurement);
 });

tests/mpr2.spec.ts

@@ -0,0 +1,39 @@
+import { test } from '@playwright/test';
+import { visitStudy, checkForScreenshot, screenShotPaths } from './utils';
+
+test.beforeEach(async ({ page }) => {
+  const studyInstanceUID =
+    '1.3.12.2.1107.5.2.32.35162.30000015050317233592200000046&hangingprotocolid=mpr';
+  const mode = 'viewer';
+  await visitStudy(page, studyInstanceUID, mode, 2000);
+});
+
+test('should properly display MPR for MR', async ({ page }) => {
+  await page.getByTestId('side-panel-header-right').click();
+  // await page.getByTestId('study-browser-thumbnail-no-image').dblclick();
+  await checkForScreenshot(page, page, screenShotPaths.mpr2.mprDisplayedCorrectly);
+
+  await page.evaluate(() => {
+    // Access cornerstone directly from the window object
+    const cornerstone = window.cornerstone;
+    if (!cornerstone) {
+      return;
+    }
+
+    const enabledElements = cornerstone.getEnabledElements();
+    if (enabledElements.length === 0) {
+      return;
+    }
+
+    // Apply zoom to all viewports
+    for (let i = 0; i < enabledElements.length; i++) {
+      const viewport = enabledElements[i].viewport;
+      if (viewport) {
+        viewport.setZoom(4);
+        viewport.render();
+      }
+    }
+  });
+
+  await checkForScreenshot(page, page, screenShotPaths.mpr2.mprDisplayedCorrectlyZoomed);
+});

tests/utils/checkForScreenshot.ts

@@ -17,19 +17,24 @@ const checkForScreenshot = async (
   delay = 100
 ) => {
   await page.waitForLoadState('networkidle');
-  for (let i = 1; i < attempts; i++) {
+
+  for (let i = 0; i < attempts; i++) {
     try {
       await expect(locator).toHaveScreenshot(screenshotPath, {
         maxDiffPixelRatio: 0.1,
       });
       return true;
     } catch (error) {
-      if (i === attempts) {
-        throw new Error('Screenshot does not match.');
+      if (i === attempts - 1) {
+        console.debug('Screenshot comparison failed after all attempts');
+        throw error; // Throw the original error with details instead of a generic message
       }
       await new Promise(resolve => setTimeout(resolve, delay));
     }
   }
+
+  // This is a fallback in case the loop exits unexpectedly
+  throw new Error('Screenshot comparison failed: loop exited without match or proper error');
 };
 
 export { checkForScreenshot };

tests/utils/screenShotPaths.ts

@@ -26,6 +26,10 @@ const screenShotPaths = {
   mpr: {
     mprDisplayedCorrectly: 'mprDisplayedCorrectly.png',
   },
+  mpr2: {
+    mprDisplayedCorrectly: 'mprDisplayedCorrectly.png',
+    mprDisplayedCorrectlyZoomed: 'mprDisplayedCorrectlyZoomed.png',
+  },
   threeDFourUp: {
     threeDFourUpDisplayedCorrectly: 'threeDFourUpDisplayedCorrectly.png',
   },
@@ -75,11 +79,19 @@ const screenShotPaths = {
     segPreHydration: 'segPreHydration.png',
     segJumpToSegment: 'segJumpToSegment.png',
   },
+  segHydrationMPR: {
+    segPostHydration: 'segPostHydration.png',
+    segPostHydrationMPRAxialPrimary: 'segPostHydrationMPRAxialPrimary.png',
+  },
   rtHydration: {
     rtPostHydration: 'rtPostHydration.png',
     rtPreHydration: 'rtPreHydration.png',
     rtJumpToStructure: 'rtJumpToStructure.png',
   },
+  rtHydration2: {
+    rtPostHydration: 'rtPostHydration.png',
+    rtPreHydration: 'rtPreHydration.png',
+  },
   crosshairs: {
     crosshairsRendered: 'crosshairsRendered.png',
     crosshairsRotated: 'crosshairsRotated.png',