tests(increase-coverage): weekly tests PR (#4202)

tests/Angle.spec.ts

@@ -0,0 +1,33 @@
+import { test } from '@playwright/test';
+import { visitStudy, checkForScreenshot, screenShotPaths, simulateClicksOnElement } from './utils';
+
+test.beforeEach(async ({ page }) => {
+  const studyInstanceUID = '1.3.6.1.4.1.25403.345050719074.3824.20170125095438.5';
+  const mode = 'Basic Viewer';
+  await visitStudy(page, studyInstanceUID, mode, 2000);
+});
+
+test('should display the angle tool', async ({ page }) => {
+  await page.getByTestId('MoreTools-split-button-secondary').click();
+  await page.getByTestId('Angle').click();
+  const locator = page.getByTestId('viewport-pane').locator('canvas');
+  await simulateClicksOnElement({
+    locator,
+    points: [
+      {
+        x: 550,
+        y: 200,
+      },
+      {
+        x: 450,
+        y: 250,
+      },
+      {
+        x: 550,
+        y: 300,
+      },
+    ],
+  });
+  await page.getByTestId('prompt-begin-tracking-yes-btn').click();
+  await checkForScreenshot(page, page, screenShotPaths.angle.angleDisplayedCorrectly);
+});

tests/Bidirectional.spec.ts

@@ -0,0 +1,34 @@
+import { test } from '@playwright/test';
+import { visitStudy, checkForScreenshot, screenShotPaths, simulateClicksOnElement } from './utils';
+
+test.beforeEach(async ({ page }) => {
+  const studyInstanceUID = '1.3.6.1.4.1.25403.345050719074.3824.20170125095438.5';
+  const mode = 'Basic Viewer';
+  await visitStudy(page, studyInstanceUID, mode, 2000);
+});
+
+test('should display the bidirectional tool', async ({ page }) => {
+  await page.getByTestId('MeasurementTools-split-button-secondary').click();
+  await page.getByTestId('Bidirectional').click();
+  const locator = page.getByTestId('viewport-pane').locator('canvas');
+
+  await simulateClicksOnElement({
+    locator,
+    points: [
+      {
+        x: 405,
+        y: 277,
+      },
+      {
+        x: 515,
+        y: 339,
+      },
+    ],
+  });
+  await page.getByTestId('prompt-begin-tracking-yes-btn').click();
+  await checkForScreenshot(
+    page,
+    page,
+    screenShotPaths.bidirectional.bidirectionalDisplayedCorrectly
+  );
+});

tests/Circle.spec.ts

@@ -0,0 +1,29 @@
+import { test } from '@playwright/test';
+import { visitStudy, checkForScreenshot, screenShotPaths, simulateClicksOnElement } from './utils';
+
+test.beforeEach(async ({ page }) => {
+  const studyInstanceUID = '1.3.6.1.4.1.25403.345050719074.3824.20170125095438.5';
+  const mode = 'Basic Viewer';
+  await visitStudy(page, studyInstanceUID, mode, 2000);
+});
+
+test('should display the circle tool', async ({ page }) => {
+  await page.getByTestId('MeasurementTools-split-button-secondary').click();
+  await page.getByTestId('CircleROI').click();
+  const locator = page.getByTestId('viewport-pane').locator('canvas');
+  await simulateClicksOnElement({
+    locator,
+    points: [
+      {
+        x: 480,
+        y: 205,
+      },
+      {
+        x: 488,
+        y: 247,
+      },
+    ],
+  });
+  await page.getByTestId('prompt-begin-tracking-yes-btn').click();
+  await checkForScreenshot(page, page, screenShotPaths.circle.circleDisplayedCorrectly);
+});

tests/CobbAngle.spec.ts

@@ -0,0 +1,37 @@
+import { test } from '@playwright/test';
+import { visitStudy, checkForScreenshot, screenShotPaths, simulateClicksOnElement } from './utils';
+
+test.beforeEach(async ({ page }) => {
+  const studyInstanceUID = '1.3.6.1.4.1.25403.345050719074.3824.20170125095438.5';
+  const mode = 'Basic Viewer';
+  await visitStudy(page, studyInstanceUID, mode, 2000);
+});
+
+test('should display the cobb angle tool', async ({ page }) => {
+  await page.getByTestId('MoreTools-split-button-secondary').click();
+  await page.getByTestId('CobbAngle').click();
+  const locator = page.getByTestId('viewport-pane').locator('canvas');
+  await simulateClicksOnElement({
+    locator,
+    points: [
+      {
+        x: 515,
+        y: 212,
+      },
+      {
+        x: 616,
+        y: 207,
+      },
+      {
+        x: 527,
+        y: 293,
+      },
+      {
+        x: 625,
+        y: 291,
+      },
+    ],
+  });
+  await page.getByTestId('prompt-begin-tracking-yes-btn').click();
+  await checkForScreenshot(page, page, screenShotPaths.cobbangle.cobbangleDisplayedCorrectly);
+});

tests/Ellipse.spec.ts

@@ -0,0 +1,29 @@
+import { test } from '@playwright/test';
+import { visitStudy, checkForScreenshot, screenShotPaths, simulateClicksOnElement } from './utils';
+
+test.beforeEach(async ({ page }) => {
+  const studyInstanceUID = '1.3.6.1.4.1.25403.345050719074.3824.20170125095438.5';
+  const mode = 'Basic Viewer';
+  await visitStudy(page, studyInstanceUID, mode, 2000);
+});
+
+test('should display the ellipse tool', async ({ page }) => {
+  await page.getByTestId('MeasurementTools-split-button-secondary').click();
+  await page.getByTestId('EllipticalROI').click();
+  const locator = page.getByTestId('viewport-pane').locator('canvas');
+  await simulateClicksOnElement({
+    locator,
+    points: [
+      {
+        x: 446,
+        y: 245,
+      },
+      {
+        x: 508,
+        y: 281,
+      },
+    ],
+  });
+  await page.getByTestId('prompt-begin-tracking-yes-btn').click();
+  await checkForScreenshot(page, page, screenShotPaths.ellipse.ellipseDisplayedCorrectly);
+});

tests/Length.spec.ts

@@ -1,15 +1,28 @@
 import { test } from '@playwright/test';
-import { visitStudy, checkForScreenshot, screenShotPaths, simulateDrag } from './utils';
+import { visitStudy, checkForScreenshot, screenShotPaths, simulateClicksOnElement } from './utils';
 
 test.beforeEach(async ({ page }) => {
   const studyInstanceUID = '1.3.6.1.4.1.25403.345050719074.3824.20170125095438.5';
   const mode = 'Basic Viewer';
-  await visitStudy(page, studyInstanceUID, mode);
+  await visitStudy(page, studyInstanceUID, mode, 2000);
 });
 
 test('should display the length tool', async ({ page }) => {
   await page.getByTestId('MeasurementTools-split-button-primary').click();
-  const locator = page.locator('.cornerstone-canvas');
-  await simulateDrag(page, locator);
+  const locator = page.getByTestId('viewport-pane').locator('canvas');
+  await simulateClicksOnElement({
+    locator,
+    points: [
+      {
+        x: 364,
+        y: 234,
+      },
+      {
+        x: 544,
+        y: 232,
+      },
+    ],
+  });
+  await page.getByTestId('prompt-begin-tracking-yes-btn').click();
   await checkForScreenshot(page, page, screenShotPaths.length.lengthDisplayedCorrectly);
 });

tests/Livewire.spec.ts

@@ -0,0 +1,45 @@
+import { test } from '@playwright/test';
+import { visitStudy, checkForScreenshot, screenShotPaths, simulateClicksOnElement } from './utils';
+
+test.beforeEach(async ({ page }) => {
+  const studyInstanceUID = '1.3.6.1.4.1.25403.345050719074.3824.20170125095438.5';
+  const mode = 'Basic Viewer';
+  await visitStudy(page, studyInstanceUID, mode, 2000);
+});
+
+test('should display the livewire tool', async ({ page }) => {
+  await page.getByTestId('MeasurementTools-split-button-secondary').click();
+  await page.getByTestId('LivewireContour').click();
+  const locator = page.getByTestId('viewport-pane').locator('canvas');
+  await simulateClicksOnElement({
+    locator,
+    points: [
+      {
+        x: 380,
+        y: 459,
+      },
+      {
+        x: 420,
+        y: 396,
+      },
+      {
+        x: 523,
+        y: 392,
+      },
+      {
+        x: 581,
+        y: 447,
+      },
+      {
+        x: 482,
+        y: 493,
+      },
+      {
+        x: 383,
+        y: 461,
+      },
+    ],
+  });
+  await page.getByTestId('prompt-begin-tracking-yes-btn').click();
+  await checkForScreenshot(page, page, screenShotPaths.livewire.livewireDisplayedCorrectly);
+});

tests/MPR.spec.ts

@@ -4,7 +4,7 @@ import { visitStudy, checkForScreenshot, screenShotPaths } from './utils/index';
 test.beforeEach(async ({ page }) => {
   const studyInstanceUID = '2.16.840.1.114362.1.11972228.22789312658.616067305.306.2';
   const mode = 'Basic Viewer';
-  await visitStudy(page, studyInstanceUID, mode);
+  await visitStudy(page, studyInstanceUID, mode, 2000);
 });
 
 test.describe('MPR Test', async () => {

tests/Probe.spec.ts

@@ -0,0 +1,25 @@
+import { test } from '@playwright/test';
+import { visitStudy, checkForScreenshot, screenShotPaths, simulateClicksOnElement } from './utils';
+
+test.beforeEach(async ({ page }) => {
+  const studyInstanceUID = '1.3.6.1.4.1.25403.345050719074.3824.20170125095438.5';
+  const mode = 'Basic Viewer';
+  await visitStudy(page, studyInstanceUID, mode, 2000);
+});
+
+test('should display the probe tool', async ({ page }) => {
+  await page.getByTestId('MoreTools-split-button-secondary').click();
+  await page.getByTestId('Probe').click();
+  const locator = page.getByTestId('viewport-pane').locator('canvas');
+  await simulateClicksOnElement({
+    locator,
+    points: [
+      {
+        x: 550,
+        y: 200,
+      },
+    ],
+  });
+  await page.getByTestId('prompt-begin-tracking-yes-btn').click();
+  await checkForScreenshot(page, page, screenShotPaths.probe.probeDisplayedCorrectly);
+});

tests/Rectangle.spec.ts

@@ -0,0 +1,29 @@
+import { test } from '@playwright/test';
+import { visitStudy, checkForScreenshot, screenShotPaths, simulateClicksOnElement } from './utils';
+
+test.beforeEach(async ({ page }) => {
+  const studyInstanceUID = '1.3.6.1.4.1.25403.345050719074.3824.20170125095438.5';
+  const mode = 'Basic Viewer';
+  await visitStudy(page, studyInstanceUID, mode, 2000);
+});
+
+test('should display the rectangle tool', async ({ page }) => {
+  await page.getByTestId('MeasurementTools-split-button-secondary').click();
+  await page.getByTestId('RectangleROI').click();
+  const locator = page.getByTestId('viewport-pane').locator('canvas');
+  await simulateClicksOnElement({
+    locator,
+    points: [
+      {
+        x: 476,
+        y: 159,
+      },
+      {
+        x: 591,
+        y: 217,
+      },
+    ],
+  });
+  await page.getByTestId('prompt-begin-tracking-yes-btn').click();
+  await checkForScreenshot(page, page, screenShotPaths.rectangle.rectangleDisplayedCorrectly);
+});

tests/Spline.spec.ts

@@ -0,0 +1,45 @@
+import { test } from '@playwright/test';
+import { visitStudy, checkForScreenshot, screenShotPaths, simulateClicksOnElement } from './utils';
+
+test.beforeEach(async ({ page }) => {
+  const studyInstanceUID = '1.3.6.1.4.1.25403.345050719074.3824.20170125095438.5';
+  const mode = 'Basic Viewer';
+  await visitStudy(page, studyInstanceUID, mode, 2000);
+});
+
+test('should display the spline tool', async ({ page }) => {
+  await page.getByTestId('MeasurementTools-split-button-secondary').click();
+  await page.getByTestId('SplineROI').click();
+  const locator = page.getByTestId('viewport-pane').locator('canvas');
+  await simulateClicksOnElement({
+    locator,
+    points: [
+      {
+        x: 380,
+        y: 459,
+      },
+      {
+        x: 420,
+        y: 396,
+      },
+      {
+        x: 523,
+        y: 392,
+      },
+      {
+        x: 581,
+        y: 447,
+      },
+      {
+        x: 482,
+        y: 493,
+      },
+      {
+        x: 383,
+        y: 461,
+      },
+    ],
+  });
+  await page.getByTestId('prompt-begin-tracking-yes-btn').click();
+  await checkForScreenshot(page, page, screenShotPaths.spline.splineDisplayedCorrectly);
+});

tests/utils/index.ts

@@ -1,6 +1,6 @@
 import { visitStudy } from './visitStudy';
 import { checkForScreenshot } from './checkForScreenshot';
 import { screenShotPaths } from './screenShotPaths';
-import { simulateDrag } from './simulateDrag';
+import { simulateClicksOnElement } from './simulateClicksOnElement';
 
-export { visitStudy, checkForScreenshot, screenShotPaths, simulateDrag };
+export { visitStudy, checkForScreenshot, screenShotPaths, simulateClicksOnElement };

tests/utils/screenShotPaths.ts

@@ -2,12 +2,39 @@
  * Paths to the screenshots of the tests.
  */
 const screenShotPaths = {
-  mpr: {
-    mprDisplayedCorrectly: 'mprDisplayedCorrectly.png',
+  angle: {
+    angleDisplayedCorrectly: 'angleDisplayedCorrectly.png',
+  },
+  bidirectional: {
+    bidirectionalDisplayedCorrectly: 'bidirectionalDisplayedCorrectly.png',
+  },
+  circle: {
+    circleDisplayedCorrectly: 'circleDisplayedCorrectly.png',
+  },
+  cobbangle: {
+    cobbangleDisplayedCorrectly: 'cobbangleDisplayedCorrectly.png',
+  },
+  ellipse: {
+    ellipseDisplayedCorrectly: 'ellipseDisplayedCorrectly.png',
   },
   length: {
     lengthDisplayedCorrectly: 'lengthDisplayedCorrectly.png',
   },
+  livewire: {
+    livewireDisplayedCorrectly: 'livewireDisplayedCorrectly.png',
+  },
+  mpr: {
+    mprDisplayedCorrectly: 'mprDisplayedCorrectly.png',
+  },
+  probe: {
+    probeDisplayedCorrectly: 'probeDisplayedCorrectly.png',
+  },
+  rectangle: {
+    rectangleDisplayedCorrectly: 'rectangleDisplayedCorrectly.png',
+  },
+  spline: {
+    splineDisplayedCorrectly: 'splineDisplayedCorrectly.png',
+  },
 };
 
 export { screenShotPaths };

tests/utils/simulateClicksOnElement.ts

@@ -0,0 +1,19 @@
+import { Locator } from 'playwright';
+
+/**
+ *
+ * @parm locator - The locator to click on
+ * @param points - The points to click on
+ * @returns Promise<void>
+ */
+export async function simulateClicksOnElement({
+  locator,
+  points,
+}: {
+  locator: Locator;
+  points: { x: number; y: number }[];
+}) {
+  for (const { x, y } of points) {
+    await locator.click({ delay: 100, position: { x, y } });
+  }
+}

tests/utils/simulateDrag.ts

@@ -1,29 +0,0 @@
-import { Locator, Page } from 'playwright';
-
-/**
- *
- * @param page - The page to simulate the drag on
- * @param locator - The locator of the element to perform the drag on
- */
-
-export async function simulateDrag(page: Page, locator: Locator) {
-  const box = await locator.boundingBox();
-  if (!box) {
-    throw new Error('Element is not visible');
-  }
-  const { x, y, width, height } = box;
-  const centerX = x + width / 2;
-  const centerY = y + height / 2;
-
-  // Calculate the maximum possible movement distances within the element's bounds
-  const maxMoveX = Math.min(100, x + width - centerX);
-  const maxMoveY = Math.min(100, y + height - centerY);
-
-  const newX = centerX + maxMoveX;
-  const newY = centerY + maxMoveY;
-
-  await page.mouse.move(centerX, centerY);
-  await page.mouse.down();
-  await page.mouse.move(newX, newY);
-  await page.mouse.up();
-}

tests/utils/visitStudy.ts

@@ -5,12 +5,19 @@ import { Page } from '@playwright/test';
  * @param page - The page to interact with
  * @param title - The study instance UID of the study to visit
  * @param mode - The mode to visit the study in
+ * @param delay - The delay to wait after visiting the study
  */
-export async function visitStudy(page: Page, studyInstanceUID: string, mode: string) {
+export async function visitStudy(
+  page: Page,
+  studyInstanceUID: string,
+  mode: string,
+  delay: number = 0
+) {
   await page.goto('/?resultsPerPage=100');
   await page.getByTestId('confirm-and-hide-button').click();
   await page.getByTestId(studyInstanceUID).click();
   await page.getByRole('button', { name: mode }).click();
   await page.waitForLoadState('domcontentloaded');
   await page.waitForLoadState('networkidle');
+  await page.waitForTimeout(delay);
 }