fix(UI): Restored the scroll bar OHIF L&F (#5202)

platform/ui-next/src/components/ThemeWrapper/ThemeWrapper.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
 import '../../tailwind.css';
+import '../../assets/styles.css';
 
 export const ThemeWrapper = ({ children }) => <React.Fragment>{children}</React.Fragment>;

playwright.config.ts

@@ -24,6 +24,10 @@ export default defineConfig({
     video: 'on-first-retry',
     testIdAttribute: 'data-cy',
     actionTimeout: 10_000,
+    launchOptions: {
+      // do not hide the scrollbars so that we can assert their look-and-feel
+      ignoreDefaultArgs: ['--hide-scrollbars'],
+    },
   },
 
   projects: [

tests/DicomTagBrowser.spec.ts

@@ -1,13 +1,11 @@
 import { test } from 'playwright-test-coverage';
 import { visitStudy, checkForScreenshot, screenShotPaths } from './utils';
 
-test.beforeEach(async ({ page }) => {
+test('should display the dicom tag browser', async ({ page }) => {
   const studyInstanceUID = '1.3.6.1.4.1.25403.345050719074.3824.20170125095438.5';
   const mode = 'viewer';
   await visitStudy(page, studyInstanceUID, mode, 2000);
-});
 
-test('should display the dicom tag browser', async ({ page }) => {
   await page.getByTestId('MoreTools-split-button-secondary').click();
   await page.getByTestId('TagBrowser').click();
   await checkForScreenshot(
@@ -16,3 +14,17 @@ test('should display the dicom tag browser', async ({ page }) => {
     screenShotPaths.dicomTagBrowser.dicomTagBrowserDisplayedCorrectly
   );
 });
+
+test('should render the scroll bar with the correct look-and-feel', async ({ page }) => {
+  const studyInstanceUID = '1.3.6.1.4.1.25403.345050719074.3824.20170125095438.5';
+  const mode = 'viewer';
+  await visitStudy(page, studyInstanceUID, mode, 2000);
+
+  await page.getByTestId('MoreTools-split-button-secondary').click();
+  await page.getByTestId('TagBrowser').click();
+  await checkForScreenshot({
+    page,
+    normalizedClip: { x: 0.77, y: 0.25, width: 0.03, height: 0.75 },
+    screenshotPath: screenShotPaths.dicomTagBrowser.scrollBarRenderedProperly,
+  });
+});

tests/Worklist.spec.ts

@@ -0,0 +1,30 @@
+import { test } from 'playwright-test-coverage';
+import { checkForScreenshot, screenShotPaths } from './utils';
+
+test.beforeEach(async ({ page }) => {
+  await page.goto(`/?datasources=ohif`);
+  await page.waitForLoadState('domcontentloaded');
+  await page.waitForLoadState('networkidle');
+  await page.waitForTimeout(2000);
+});
+
+test('should render scroll bars with the correct look-and-feel', async ({ page }) => {
+  const studyRowHeader = await page.getByTestId(
+    '1.3.6.1.4.1.14519.5.2.1.5099.8010.217836670708542506360829799868'
+  );
+
+  await studyRowHeader.scrollIntoViewIfNeeded();
+  await studyRowHeader.click();
+
+  const expandedStudyRow = await page.getByTestId(
+    'studyRow-1.3.6.1.4.1.14519.5.2.1.5099.8010.217836670708542506360829799868'
+  );
+  await expandedStudyRow.scrollIntoViewIfNeeded();
+
+  await checkForScreenshot({
+    page,
+    locator: expandedStudyRow,
+    normalizedClip: { x: 0.97, y: 0.35, width: 0.03, height: 0.65 },
+    screenshotPath: screenShotPaths.workList.scrollBarRenderedProperly,
+  });
+});

tests/utils/checkForScreenshot.ts

@@ -15,20 +15,23 @@ type CheckForScreenshotProps = {
     width: number;
     height: number;
   };
+  fullPage?: boolean;
 };
 
 const _checkForScreenshot = async (props: CheckForScreenshotProps) => {
   const {
     page,
-    locator = page,
     screenshotPath,
     attempts = 10,
     delay = 500,
     maxDiffPixelRatio = 0.02,
     threshold = 0.05,
     normalizedClip,
+    fullPage = false,
   } = props;
 
+  let { locator = page } = props;
+
   await page.waitForLoadState('networkidle');
 
   for (let i = 0; i < attempts; i++) {
@@ -40,11 +43,16 @@ const _checkForScreenshot = async (props: CheckForScreenshotProps) => {
           boundingBox = { x: 0, y: 0, ...(await page.viewportSize()) };
         } else {
           boundingBox = await (locator as Locator).boundingBox();
+
+          // clip does not work for locator screen shots, so lets do some trickery
+          // set page as the locator here and below add the locator bounding box origin to the
+          // clip area
+          locator = page;
         }
 
         clip = {
-          x: normalizedClip.x * boundingBox.width,
+          x: boundingBox.x + normalizedClip.x * boundingBox.width,
-          y: normalizedClip.y * boundingBox.height,
+          y: boundingBox.y + normalizedClip.y * boundingBox.height,
           width: normalizedClip.width * boundingBox.width,
           height: normalizedClip.height * boundingBox.height,
         };
@@ -54,6 +62,7 @@ const _checkForScreenshot = async (props: CheckForScreenshotProps) => {
         maxDiffPixelRatio,
         threshold,
         clip,
+        fullPage,
       });
       return true;
     } catch (error) {

tests/utils/screenShotPaths.ts

@@ -60,6 +60,7 @@ const screenShotPaths = {
   },
   dicomTagBrowser: {
     dicomTagBrowserDisplayedCorrectly: 'dicomTagBrowserDisplayedCorrectly.png',
+    scrollBarRenderedProperly: 'scrollBarRenderedProperly.png',
   },
   rotateRight: {
     rotateRightDisplayedCorrectly: 'rotateRightDisplayedCorrectly.png',
@@ -178,6 +179,9 @@ const screenShotPaths = {
     overlaysDisplayed: 'overlaysDisplayed.png',
     overlaySEGsAndRTDisplayed: 'overlaySEGsAndRTDisplayed.png',
   },
+  workList: {
+    scrollBarRenderedProperly: 'scrollBarRenderedProperly.png',
+  },
 };
 
 export { screenShotPaths };