feat(slice scrollbar): Integrate ViewportSliceProgressScrollbar with customizations and docs (#5960)

Co-authored-by: Dan Rukas <dan.rukas@gmail.com>

tests/utils/OHIFConfiguration.ts

@@ -1,6 +1,31 @@
-import { Page } from 'playwright-test-coverage';
+import type { Page } from '@playwright/test';
+
+// Global per-test configuration skeleton.
+// Keep this empty by default and add top-level window.config overrides here when needed.
+export const DEFAULT_E2E_OHIF_CONFIGURATION: Record<string, unknown> = {};
+
+// Global per-test customization baseline.
+export const DEFAULT_E2E_OHIF_CUSTOMIZATIONS: Record<string, unknown> = {
+  'viewportScrollbar.showViewedFill': false,
+  'viewportScrollbar.showLoadingPattern': false,
+  'viewportScrollbar.showLoadedFill': false,
+  'viewportScrollbar.showLoadedEndpoints': false,
+};
 
 export async function addOHIFConfiguration(page: Page, configToAdd: Record<string, unknown>) {
+  const customizationSetters = Object.fromEntries(
+    Object.entries(DEFAULT_E2E_OHIF_CUSTOMIZATIONS || {}).map(([key, value]) => [
+      key,
+      { $set: value },
+    ])
+  );
+
+  const baselinePlusConfigToAdd = {
+    ...DEFAULT_E2E_OHIF_CONFIGURATION,
+    customizationService: [customizationSetters],
+    ...configToAdd,
+  };
+
   await page.addInitScript(config => {
     let _config;
     Object.defineProperty(window, 'config', {
@@ -15,5 +40,21 @@ export async function addOHIFConfiguration(page: Page, configToAdd: Record<strin
       },
       configurable: true,
     });
-  }, configToAdd);
+  }, baselinePlusConfigToAdd);
+}
+
+export async function addOHIFGlobalCustomizations(
+  page: Page,
+  customizationsToAdd: Record<string, unknown>
+) {
+  await page.evaluate(customizations => {
+    const customizationService = (window as any).services?.customizationService;
+    if (!customizationService?.setGlobalCustomization) {
+      return;
+    }
+
+    Object.entries(customizations || {}).forEach(([key, value]) => {
+      customizationService.setGlobalCustomization(key, value);
+    });
+  }, customizationsToAdd);
 }

tests/utils/fixture.ts

@@ -1,4 +1,5 @@
 import { test as base } from 'playwright-test-coverage';
+import { addOHIFConfiguration } from './OHIFConfiguration';
 import {
   DOMOverlayPageObject,
   MainToolbarPageObject,
@@ -17,7 +18,18 @@ type PageObjects = {
   notFoundStudyPageObject: NotFoundStudyPageObject;
 };
 
-export const test = base.extend<PageObjects>({
+type TestFixtures = PageObjects & {
+  _applyGlobalE2EOHIFBaseline: void;
+};
+
+export const test = base.extend<TestFixtures>({
+  _applyGlobalE2EOHIFBaseline: [
+    async ({ page }, use) => {
+      await addOHIFConfiguration(page, {});
+      await use();
+    },
+    { auto: true },
+  ],
   DOMOverlayPageObject: async ({ page }, use) => {
     await use(new DOMOverlayPageObject(page));
   },

tests/utils/index.ts

@@ -1,5 +1,8 @@
 import { visitStudy } from './visitStudy';
-import { addOHIFConfiguration } from './OHIFConfiguration';
+import {
+  addOHIFConfiguration,
+  addOHIFGlobalCustomizations,
+} from './OHIFConfiguration';
 import { checkForScreenshot } from './checkForScreenshot';
 import { screenShotPaths } from './screenShotPaths';
 import {
@@ -25,6 +28,7 @@ import { subscribeToMeasurementAdded } from './subscribeToMeasurement';
 export {
   visitStudy,
   addOHIFConfiguration,
+  addOHIFGlobalCustomizations,
   checkForScreenshot,
   screenShotPaths,
   simulateClicksOnElement,