chore: Clean up unused files, imports, and work on getting end-to-end tests and unit tests running (#2272)

platform/viewer/cypress/support/DragSimulator.js

@@ -0,0 +1,78 @@
+const dataTransfer = new DataTransfer();
+
+export const DragSimulator = {
+  MAX_TRIES: 1,
+  DELAY_INTERVAL_MS: 10,
+  counter: 0,
+  rectsEqual(r1, r2) {
+    return (
+      r1.top === r2.top &&
+      r1.right === r2.right &&
+      r1.bottom === r2.bottom &&
+      r1.left === r2.left
+    );
+  },
+  get dropped() {
+    const currentSourcePosition = this.source.getBoundingClientRect();
+    return !this.rectsEqual(
+      this.initialSourcePosition,
+      currentSourcePosition
+    );
+  },
+  get hasTriesLeft() {
+    return this.counter < this.MAX_TRIES;
+  },
+  dragstart() {
+    cy.log('**DRAG START**');
+    cy.wrap(this.source)
+      .trigger('mousedown', { which: 1, button: 0 })
+      .trigger('dragstart', { dataTransfer })
+      .trigger('drag', {});
+  },
+  drop() {
+    cy.log('**DROP**');
+    return cy
+      .wrap(this.target)
+      .trigger('mousemove', 'center')
+      .trigger('dragover', { dataTransfer, force: true })
+      .trigger('drop', { dataTransfer, force: true })
+      .trigger('dragend', { dataTransfer })
+      .trigger('mouseup', { which: 1, button: 0 });
+  },
+  dragover() {
+    cy.log('**DRAGOVER**');
+    if (!this.dropped && this.hasTriesLeft) {
+      this.counter += 1;
+      return cy
+        .wrap(this.target)
+        .trigger('mousemove', 'center')
+        .trigger('dragover', {
+          dataTransfer,
+          position: this.position,
+        })
+        .wait(this.DELAY_INTERVAL_MS)
+        .then(() => this.dragover());
+    }
+    return this.drop().then(() => true);
+  },
+  init(source, target, position) {
+    this.source = source;
+    this.target = target;
+    this.position = position;
+    this.counter = 0;
+
+    this.dragstart();
+
+    return cy.wait(this.DELAY_INTERVAL_MS).then(() => {
+      this.initialSourcePosition = this.source.getBoundingClientRect();
+      return this.dragover();
+    });
+  },
+  simulate(sourceWrapper, targetSelector, position = 'center') {
+    return cy
+      .get(targetSelector)
+      .then(targetWrapper =>
+        this.init(sourceWrapper.get(0), targetWrapper.get(0), position)
+      );
+  },
+};

platform/viewer/cypress/support/aliases.js

@@ -1,36 +1,33 @@
 //Creating aliases for Cornerstone tools buttons
 export function initCornerstoneToolsAliases() {
-  cy.get('[data-cy="stack scroll"]').as('stackScrollBtn');
-  cy.get('[data-cy="zoom"]').as('zoomBtn');
-  cy.get('[data-cy="levels"]').as('levelsBtn');
-  cy.get('[data-cy="pan"]').as('panBtn');
-  cy.get('[data-cy="length"]').as('lengthBtn');
-  cy.get('[data-cy="annotate"]').as('annotateBtn');
-  cy.get('[data-cy="angle"]').as('angleBtn');
-  cy.get('[data-cy="reset"]').as('resetBtn');
-  cy.get('[data-cy="cine"]').as('cineBtn');
-  cy.get('[data-cy="more"]').as('moreBtn');
-  cy.get('[data-cy="layout"]').as('layoutBtn');
+  cy.get('[data-cy="StackScroll"]').as('stackScrollBtn');
+  cy.get('[data-cy="Zoom"]').as('zoomBtn');
+  cy.get('[data-cy="Wwwc-split-button-primary"]').as('wwwcBtnPrimary');
+  cy.get('[data-cy="Wwwc-split-button-secondary"]').as('wwwcBtnSecondary');
+  cy.get('[data-cy="Pan"]').as('panBtn');
+  cy.get('[data-cy="MeasurementTools-split-button-primary"]').as('measurementToolsBtnPrimary');
+  cy.get('[data-cy="MeasurementTools-split-button-secondary"]').as('measurementToolsBtnSecondary');
+  cy.get('[data-cy="Angle"]').as('angleBtn');
+  cy.get('[data-cy="MoreTools-split-button-primary"]').as('moreBtnPrimary');
+  cy.get('[data-cy="MoreTools-split-button-secondary"]').as('moreBtnSecondary');
+  cy.get('[data-cy="Layout"]').as('layoutBtn');
   cy.get('.viewport-element').as('viewport');
 }
 
 //Creating aliases for Common page elements
 export function initCommonElementsAliases() {
-  cy.get(
-    '.pull-right > .RoundedButtonGroup > .roundedButtonWrapper:first-of-type > .roundedButton'
-  ).as('measurementsBtn');
+  cy.get('[data-cy="trackedMeasurements-btn"]').as('measurementsBtn');
   cy.get('.viewport-element').as('viewport');
-  cy.get('section.sidepanel.from-right').as('measurementsPanel');
-  cy.get(
-    '.pull-left > .RoundedButtonGroup > .roundedButtonWrapper > .roundedButton'
-  ).as('seriesBtn');
-  cy.get('section.sidepanel.from-left').as('seriesPanel');
-  cy.get('div.ViewportOverlay > div.bottom-left.overlay-element > div').as(
-    'viewportInfoBottomLeft'
-  );
-  cy.get('div.ViewportOverlay > div.bottom-right.overlay-element > div').as(
-    'viewportInfoBottomRight'
-  );
+  cy.get('[data-cy="seriesList-btn"]').as('seriesBtn');
+
+  // TODO: Panels are not in DOM when closed, move this somewhere else
+  cy.get('[data-cy="trackedMeasurements-panel"]').as('measurementsPanel');
+  cy.get('[data-cy="studyBrowser-panel"]').as('seriesPanel');
+  cy.get('[data-cy="viewport-overlay-top-right"]').as('viewportInfoTopRight');
+  cy.get('[data-cy="viewport-overlay-top-left"]').as('viewportInfoTopLeft');
+  cy.get('[data-cy="viewport-overlay-bottom-right"]').as('viewportInfoBottomRight');
+  cy.get('[data-cy="viewport-overlay-bottom-left"]').as('viewportInfoBottomLeft');
+
   cy.get('.left-mid.orientation-marker').as('viewportInfoMidLeft');
   cy.get('.top-mid.orientation-marker').as('viewportInfoMidTop');
 }
@@ -42,41 +39,21 @@ export function initRouteAliases() {
   cy.route('GET', '**/studies**').as('getStudies');
 }
 
-//Creating aliases for VTK tools buttons
-export function initVTKToolsAliases() {
-  cy.get('[data-cy="exit 2d mpr"]').as('exit2dmprBtn');
-  cy.get('[data-cy="crosshairs"]').as('crosshairsBtn');
-  cy.get('[data-cy="wwwc"]').as('wwwcBtn');
-  cy.get('[data-cy="rotate"]').as('rotateBtn');
-  cy.get('.slab-thickness').as('slabSlider');
-  cy.get('.select-ohif').as('modeDropdown');
-  cy.get('.ohif-check-label').as('modeCheckbox');
-  cy.get('[data-cy="layout"]').as('layoutBtn');
-}
-
 //Creating aliases for Study List page elements on Desktop experience
 export function initStudyListAliasesOnDesktop() {
-  cy.get('.study-count').as('studyCount');
-  cy.get('#filter-PatientName').as('PatientName');
-  cy.get('#filter-PatientID').as('MRN');
-  cy.get('#filter-AccessionNumber').as('AccessionNumber');
-  cy.get('#start-date').as('studyListStartDate');
-  cy.get('#end-date').as('studyListEndDate');
-  cy.get('#filter-modalities').as('modalities');
-  cy.get('#filter-StudyDescription').as('StudyDescription');
-  cy.get('[data-cy="study-list-results"] > tr').as('searchResult');
-}
+  cy.get('[data-cy="num-studies"]').as('numStudies');
+  cy.get('[data-cy="input-patientName"]').as('PatientName');
+  cy.get('[data-cy="input-mrn"]').as('MRN');
+  cy.get('[data-cy="input-accession"]').as('AccessionNumber');
+  cy.get('[data-cy="input-description"]').as('StudyDescription');
+  cy.get('[data-cy="study-list-results"]').as('searchResult');
+  cy.get('[data-cy="study-list-results"] > tr').as('searchResult2');
 
-//Creating aliases for Study List page elements on Tablet experience
-export function initStudyListAliasesOnTablet() {
-  cy.get('.study-count').as('studyCount');
-  cy.get('#filter-patientNameOrId').as('patientNameOrMRN');
-  cy.get('#filter-accessionOrModalityOrDescription').as(
-    'accessionModalityDescription'
-  );
-  cy.get('#start-date').as('studyListStartDate');
-  cy.get('#end-date').as('studyListEndDate');
-  cy.get('[data-cy="study-list-results"] > tr').as('searchResult');
+  // We can't use data attributes (e.g. data--cy) for these since
+  // they are using third party libraires (i.e. react-dates, react-select)
+  cy.get('#date-range-studyDate-start-date').as('studyListStartDate');
+  cy.get('#date-range-studyDate-end-date').as('studyListEndDate');
+  cy.get('#input-modalities').as('modalities');
 }
 
 //Creating aliases for User Preferences modal

platform/viewer/cypress/support/commands.js

@@ -1,6 +1,6 @@
 import '@percy/cypress';
 import 'cypress-file-upload';
-import { DragSimulator } from '../helpers/DragSimulator.js';
+import { DragSimulator } from './DragSimulator.js';
 import {
   initCornerstoneToolsAliases,
   initCommonElementsAliases,
@@ -64,7 +64,7 @@ Cypress.Commands.add('checkStudyRouteInViewer', StudyInstanceUID => {
 });
 
 Cypress.Commands.add('openStudyInViewer', StudyInstanceUID => {
-  cy.visit(`/viewer/${StudyInstanceUID}`);
+  cy.visit(`/viewer?StudyInstanceUIDs=${StudyInstanceUID}`);
 });
 
 /**
@@ -91,7 +91,7 @@ Cypress.Commands.add('openStudyModality', Modality => {
  *
  * @param {string} url - part of the expected url. Default value is /viewer/
  */
-Cypress.Commands.add('isPageLoaded', (url = '/viewer/') => {
+Cypress.Commands.add('isPageLoaded', (url = '/viewer') => {
   return cy.location('pathname', { timeout: 60000 }).should('include', url);
 });
 
@@ -107,18 +107,6 @@ Cypress.Commands.add('waitStudyList', () => {
   });
 });
 
-Cypress.Commands.add('waitVTKLoading', () => {
-  // Wait for start loading
-  cy.get('[data-cy="viewprt-grid"]', { timeout: 10000 }).should($grid => {
-    expect($grid).to.contain.text('Loading');
-  });
-
-  // Wait for finish loading
-  cy.get('[data-cy="viewprt-grid"]', { timeout: 30000 }).should($grid => {
-    expect($grid).not.to.contain.text('Loading');
-  });
-});
-
 Cypress.Commands.add('waitViewportImageLoading', () => {
   // Wait for finish loading
   cy.get('[data-cy="viewprt-grid"]', { timeout: 30000 }).should($grid => {
@@ -149,10 +137,11 @@ Cypress.Commands.add('addLine', (viewport, firstClick, secondClick) => {
     const [x1, y1] = firstClick;
     const [x2, y2] = secondClick;
 
+    // TODO: Added a wait which appears necessary in Cornerstone Tools >4?
     cy.wrap($viewport)
-      .click(x1, y1, { force: true })
+      .click(x1, y1).wait(100)
       .trigger('mousemove', { clientX: x2, clientY: y2 })
-      .click(x2, y2, { force: true });
+      .click(x2, y2).wait(100);
   });
 });
 
@@ -184,7 +173,7 @@ Cypress.Commands.add(
 );
 
 Cypress.Commands.add('expectMinimumThumbnails', (seriesToWait = 1) => {
-  cy.get('[data-cy=thumbnail-list]', { timeout: 50000 }).should($itemList => {
+  cy.get('[data-cy="study-browser-thumbnail"]', { timeout: 50000 }).should($itemList => {
     expect($itemList.length >= seriesToWait).to.be.true;
   });
 });
@@ -225,23 +214,11 @@ Cypress.Commands.add('waitDicomImage', (timeout = 50000) => {
 //Command to reset and clear all the changes made to the viewport
 Cypress.Commands.add('resetViewport', () => {
   //Click on More button
-  cy.get('[data-cy="more"]')
+  cy.get('[data-cy="MoreTools-split-button-primary"]')
+    .should('have.attr', 'data-tool', 'Reset')
     .as('moreBtn')
-    .click();
-  //Verify if overlay is displayed
-  cy.get('body').then(body => {
-    if (body.find('.tooltip-toolbar-overlay').length == 0) {
-      cy.get('@moreBtn').click();
-    }
-  });
-  //Click on Clear button
-  cy.get('[data-cy="clear"]')
-    .as('clearBtn')
-    .click();
-  //Click on Reset button
-  cy.get('[data-cy="reset"]')
-    .as('resetBtn')
-    .click();
+    .click()
+  ;
 });
 
 Cypress.Commands.add('imageZoomIn', () => {
@@ -257,7 +234,7 @@ Cypress.Commands.add('imageZoomIn', () => {
 
 Cypress.Commands.add('imageContrast', () => {
   cy.initCornerstoneToolsAliases();
-  cy.get('@levelsBtn').click();
+  cy.get('@wwwcBtnPrimary').click();
 
   //drags the mouse inside the viewport to be able to interact with series
   cy.get('@viewport')
@@ -281,36 +258,22 @@ Cypress.Commands.add('initRouteAliases', () => {
   initRouteAliases();
 });
 
-//Initialize aliases for VTK tools
-Cypress.Commands.add('initVTKToolsAliases', () => {
-  initVTKToolsAliases();
-});
-
 //Initialize aliases for Study List page elements
 Cypress.Commands.add('initStudyListAliasesOnDesktop', () => {
   initStudyListAliasesOnDesktop();
 });
 
-//Initialize aliases for Study List page elements
-Cypress.Commands.add('initStudyListAliasesOnTablet', () => {
-  initStudyListAliasesOnTablet();
-});
-
-//Initialize aliases for Study List page elements
-Cypress.Commands.add('initStudyListAliasesOnDesktop', () => {
-  initStudyListAliasesOnDesktop();
-});
-
-//Initialize aliases for Study List page elements
-Cypress.Commands.add('initStudyListAliasesOnTablet', () => {
-  initStudyListAliasesOnTablet();
-});
-
 //Add measurements in the viewport
 Cypress.Commands.add(
   'addLengthMeasurement',
   (firstClick = [150, 100], secondClick = [130, 170]) => {
-    cy.get('[data-cy="length"]').click();
+    cy.get('@measurementToolsBtnPrimary')
+      .should('have.attr', 'data-tool', 'Length')
+      .click()
+      .then($lengthBtn => {
+        cy.wrap($lengthBtn).should('have.class', 'active');
+      });
+
     cy.addLine('.viewport-element', firstClick, secondClick);
   }
 );
@@ -319,7 +282,7 @@ Cypress.Commands.add(
 Cypress.Commands.add(
   'addAngleMeasurement',
   (initPos = [180, 390], midPos = [300, 410], finalPos = [180, 450]) => {
-    cy.get('[data-cy="angle"]').click();
+    cy.get('[data-cy="Angle"]').click();
     cy.addAngle('.viewport-element', initPos, midPos, finalPos);
   }
 );
@@ -453,11 +416,11 @@ Cypress.Commands.add('openPreferences', () => {
   // Open User Preferences modal
   cy.get('body').then(body => {
     if (body.find('.OHIFModal').length === 0) {
-      cy.get('[data-cy="options-menu"]')
+      cy.get('[data-cy="options-chevron-down-icon"]')
         .scrollIntoView()
         .click()
         .then(() => {
-          cy.get('[data-cy="dd-item-menu"]')
+          cy.get('[data-cy="options-dropdown"]')
             .last()
             .click()
             .wait(200);
@@ -466,6 +429,24 @@ Cypress.Commands.add('openPreferences', () => {
   });
 });
 
+Cypress.Commands.add('closePreferences', () => {
+  cy.log('Close User Preferences Modal');
+
+  cy.get('body').then(body => {
+    // Close notification if displayed
+    if (body.find('.sb-closeIcon').length > 0) {
+      cy.get('.sb-closeIcon')
+        .first()
+        .click({ force: true });
+    }
+
+    // Close User Preferences Modal (if displayed)
+    if (body.find('.OHIFModal__header').length > 0) {
+      cy.get('[data-cy="close-button"]').click({ force: true });
+    }
+  });
+});
+
 Cypress.Commands.add('selectPreferencesTab', tabAlias => {
   cy.initPreferencesModalAliases();
   cy.get(tabAlias)
@@ -527,8 +508,7 @@ Cypress.Commands.add(
           .parent()
           .find('input') // closest input to that label
           .type(shortcut, { force: true }); // Set new shortcut for that function
-      })
-      .blur();
+      });
   }
 );
 
@@ -565,13 +545,8 @@ Cypress.Commands.add(
 
 Cypress.Commands.add('openDownloadImageModal', () => {
   // Click on More button
-  cy.get('[data-cy="more"]')
-    .as('moreBtn')
-    .click();
-
-  // Click on Download button
-  cy.get('[data-cy="download"]')
-    .as('downloadBtn')
+  cy.get('[data-cy="Capture"]')
+    .as('captureBtn')
     .click();
 });
 

platform/viewer/cypress/support/index.js

@@ -0,0 +1,2 @@
+import './aliases.js';
+import './commands.js';