fix(ui-next): Add validation for opacity and border inputs in the segmentation panel - OHIF-2332 (#5819)

tests/SegmentationPanel.spec.ts

@@ -1,5 +1,7 @@
 import { expect, test, visitStudy } from './utils';
 
+const nonNumericError = 'Cannot type text into input[type=number]';
+
 test.beforeEach(async ({ page }) => {
   // Using same one as JumpToMeasurementMPR.spec.ts
   const studyInstanceUID = '1.3.6.1.4.1.14519.5.2.1.256467663913010332776401703474716742458';
@@ -76,3 +78,128 @@ test('checks saved segmentations loads and jumps to slices', async ({
   await rightPanelPageObject.labelMapSegmentationPanel.panel.segmentByText('Pancreas').click();
   await expect(viewportInfoBottomRight).toContainText('22/');
 });
+
+test.describe('Segmentation panel config input validation for labelmap', () => {
+  test.beforeEach(async ({ rightPanelPageObject }) => {
+    await rightPanelPageObject.labelMapSegmentationPanel.addSegmentationButton.click();
+
+    await rightPanelPageObject.labelMapSegmentationPanel.config.toggle.click();
+  });
+
+  test.describe('opacity', () => {
+    test('should accept valid values', async ({ rightPanelPageObject }) => {
+      const { opacity } = rightPanelPageObject.labelMapSegmentationPanel.config;
+
+      await opacity.fill('0');
+      await expect(opacity.input).toHaveValue('0');
+
+      await opacity.fill('0.5');
+      await expect(opacity.input).toHaveValue('0.5');
+
+      await opacity.fill('1');
+      await expect(opacity.input).toHaveValue('1');
+    });
+
+    test('should clamp opacity to max (1) when a value above the maximum is entered', async ({
+      rightPanelPageObject,
+    }) => {
+      const { opacity } = rightPanelPageObject.labelMapSegmentationPanel.config;
+
+      await opacity.fill('500');
+      await expect(opacity.input).toHaveValue('1');
+    });
+
+    test('should clamp opacity to min (0) when a value below the minimum is entered', async ({
+      rightPanelPageObject,
+    }) => {
+      const { opacity } = rightPanelPageObject.labelMapSegmentationPanel.config;
+
+      await opacity.fill('-1');
+      await expect(opacity.input).toHaveValue('0');
+    });
+
+    test('should reject non-numeric opacity input', async ({ rightPanelPageObject }) => {
+      const { opacity } = rightPanelPageObject.labelMapSegmentationPanel.config;
+
+      await expect(opacity.fill('abc')).rejects.toThrow(nonNumericError);
+    });
+  });
+
+  test.describe('border', () => {
+    test('should accept valid values', async ({ rightPanelPageObject }) => {
+      const { border } = rightPanelPageObject.labelMapSegmentationPanel.config;
+
+      await border.fill('0');
+      await expect(border.input).toHaveValue('0');
+
+      await border.fill('5');
+      await expect(border.input).toHaveValue('5');
+
+      await border.fill('10');
+      await expect(border.input).toHaveValue('10');
+    });
+
+    test('should clamp border to max (10) when a value above the maximum is entered', async ({
+      rightPanelPageObject,
+    }) => {
+      const { border } = rightPanelPageObject.labelMapSegmentationPanel.config;
+
+      await border.fill('500');
+      await expect(border.input).toHaveValue('10');
+    });
+
+    test('should clamp border to min (0) when a value below the minimum is entered', async ({
+      rightPanelPageObject,
+    }) => {
+      const { border } = rightPanelPageObject.labelMapSegmentationPanel.config;
+
+      await border.fill('-1');
+      await expect(border.input).toHaveValue('0');
+    });
+
+    test('should reject non-numeric border input', async ({ rightPanelPageObject }) => {
+      const { border } = rightPanelPageObject.labelMapSegmentationPanel.config;
+
+      await expect(border.fill('abc')).rejects.toThrow(nonNumericError);
+    });
+  });
+
+  test.describe('opacity inactive', () => {
+    test('should accept valid values', async ({ rightPanelPageObject }) => {
+      const { opacityInactive } = rightPanelPageObject.labelMapSegmentationPanel.config;
+
+      await opacityInactive.fill('0');
+      await expect(opacityInactive.input).toHaveValue('0');
+
+      await opacityInactive.fill('0.5');
+      await expect(opacityInactive.input).toHaveValue('0.5');
+
+      await opacityInactive.fill('1');
+      await expect(opacityInactive.input).toHaveValue('1');
+    });
+
+    test('should clamp opacity inactive to max (1) when a value above the maximum is entered', async ({
+      rightPanelPageObject,
+    }) => {
+      const { opacityInactive } = rightPanelPageObject.labelMapSegmentationPanel.config;
+
+      await opacityInactive.fill('500');
+      await expect(opacityInactive.input).toHaveValue('1');
+    });
+
+    test('should clamp opacity inactive to min (0) when a value below the minimum is entered', async ({
+      rightPanelPageObject,
+    }) => {
+      const { opacityInactive } = rightPanelPageObject.labelMapSegmentationPanel.config;
+
+      await opacityInactive.fill('-1');
+      await expect(opacityInactive.input).toHaveValue('0');
+    });
+
+    test('should reject non-numeric opacity inactive input', async ({ rightPanelPageObject }) => {
+      const { opacityInactive } = rightPanelPageObject.labelMapSegmentationPanel.config;
+
+      await expect(opacityInactive.fill('abc')).rejects.toThrow(nonNumericError);
+    });
+  });
+});

tests/pages/RightPanelPageObject.ts

@@ -201,6 +201,51 @@ export class RightPanelPageObject {
           };
         },
       },
+
+      get config() {
+        const configToggle = page.getByTestId('segmentation-config-toggle-Labelmap');
+        return {
+          toggle: {
+            locator: configToggle,
+            click: async () => {
+              await configToggle.click();
+            },
+          },
+
+          get opacity() {
+            const container = page.getByTestId('segmentation-config-opacity-Labelmap');
+            return {
+              input: container.locator('input'),
+              slider: container.getByRole('slider'),
+              fill: async (value: string) => {
+                await container.locator('input').fill(value);
+              },
+            };
+          },
+
+          get border() {
+            const container = page.getByTestId('segmentation-config-border-Labelmap');
+            return {
+              input: container.locator('input'),
+              slider: container.getByRole('slider'),
+              fill: async (value: string) => {
+                await container.locator('input').fill(value);
+              },
+            };
+          },
+
+          get opacityInactive() {
+            const container = page.getByTestId('segmentation-config-opacity-inactive-Labelmap');
+            return {
+              input: container.locator('input'),
+              slider: container.getByRole('slider'),
+              fill: async (value: string) => {
+                await container.locator('input').fill(value);
+              },
+            };
+          },
+        };
+      },
     };
   }