ci: Added verification on Before hook to avoid navigating again to viewer page (#1505)

* Added verification on Before hook to avoid navigating again to viewer page

* Removed unecessary screenshots and duplicated test cases

* Navigation Fix for HTML extension and improved Flip button verification

Co-authored-by: Danny Brown <danny.ri.brown@gmail.com>

platform/viewer/cypress/integration/common/OHIFCornerstoneHotkeys.spec.js

@@ -1,8 +1,9 @@
 describe('OHIF Cornerstone Hotkeys', () => {
   before(() => {
-    cy.openStudyInViewer('1.2.840.113619.2.5.1762583153.215519.978957063.78');
+    cy.checkStudyRouteInViewer(
-    cy.waitDicomImage();
+      '1.2.840.113619.2.5.1762583153.215519.978957063.78'
-    cy.expectMinimumThumbnails(3);
+    );
+    cy.expectMinimumThumbnails(5);
   });
 
   beforeEach(() => {
@@ -42,13 +43,6 @@ describe('OHIF Cornerstone Hotkeys', () => {
     cy.get('@viewportInfoMidTop').should('contains.text', 'P');
   });
 
-  it('checks if hotkey "I" can invert the image', () => {
-    // Hotkey I
-    cy.get('body').type('I');
-    // Visual comparison
-    cy.screenshot('Hotkey I - Should Invert Image');
-  });
-
   it('checks if hotkeys "+", "-" and "=" can zoom in, out and fit to viewport', () => {
     // Hotkey +
     cy.get('body').type('+++'); // Press hotkey 3 times
@@ -73,9 +67,6 @@ describe('OHIF Cornerstone Hotkeys', () => {
     cy.get('@viewportInfoMidLeft').should('contains.text', 'R');
     cy.get('@viewportInfoMidTop').should('contains.text', 'A');
     cy.get('@viewportInfoBottomRight').should('contains.text', 'Zoom: 211%');
-
-    // Visual comparison to make sure the 'inverted' image was reset
-    cy.screenshot('Hotkey SPACEBAR - Should Reset Image');
   });
 
   it('uses hotkeys "RightArrow" and "LeftArrow" to navigate between multiple viewports', () => {
@@ -126,6 +117,9 @@ describe('OHIF Cornerstone Hotkeys', () => {
     cy.get('@viewport2InfoMidLeft').should('contains.text', 'A');
     cy.get('@viewport2InfoMidTop').should('contains.text', 'H');
     cy.get('@viewport2InfoBottomRight').should('contains.text', 'Zoom: 45%');
+
+    //Select viewport layout (1,1)
+    cy.setLayout(1, 1);
   });
 
   //TO-DO: This test is blocked by issue #1095 (https://github.com/OHIF/Viewers/issues/1095)

platform/viewer/cypress/integration/common/OHIFCornerstoneToolbar.spec.js

@@ -1,7 +1,8 @@
 describe('OHIF Cornerstone Toolbar', () => {
   before(() => {
-    cy.openStudyInViewer('1.2.840.113619.2.5.1762583153.215519.978957063.78');
+    cy.checkStudyRouteInViewer(
-    cy.waitDicomImage();
+      '1.2.840.113619.2.5.1762583153.215519.978957063.78'
+    );
     cy.expectMinimumThumbnails(5);
   });
 
@@ -116,9 +117,6 @@ describe('OHIF Cornerstone Toolbar', () => {
       .trigger('mousedown', 'center', { which: 1 })
       .trigger('mousemove', 'bottom', { which: 1 })
       .trigger('mouseup', 'bottom');
-
-    // Visual comparison
-    cy.screenshot('Pan tool moved the image inside the viewport');
   });
 
   it('checks if Length annotation can be added on viewport and on measurements panel', () => {
@@ -425,19 +423,6 @@ describe('OHIF Cornerstone Toolbar', () => {
     });
   });
 
-  it('check if Invert tool will change the colors of the image in the viewport', () => {
-    // Click on More button
-    cy.get('@moreBtn').click();
-    // Verify if overlay is displayed
-    cy.get('.tooltip-toolbar-overlay').should('be.visible');
-
-    // Click on Invert button
-    cy.get('[data-cy="invert"]').click();
-
-    // Visual comparison
-    cy.screenshot('Invert tool - Should Invert Canvas');
-  });
-
   it('check if Rotate tool will change the image orientation in the viewport', () => {
     //Click on More button
     cy.get('@moreBtn').click();
@@ -447,10 +432,9 @@ describe('OHIF Cornerstone Toolbar', () => {
       .then(() => {
         //Click on Rotate button
         cy.get('[data-cy="rotate right"]').click({ force: true });
+        cy.get('@viewportInfoMidLeft').should('contains.text', 'F');
+        cy.get('@viewportInfoMidTop').should('contains.text', 'R');
       });
-
-    // Visual comparison
-    cy.screenshot('Rotate tool - Should Rotate Image to Right');
   });
 
   it('check if Flip H tool will flip the image horizontally in the viewport', () => {
@@ -461,9 +445,8 @@ describe('OHIF Cornerstone Toolbar', () => {
 
     //Click on Flip H button
     cy.get('[data-cy="flip h"]').click();
-
+    cy.get('@viewportInfoMidLeft').should('contains.text', 'L');
-    // Visual comparison
+    cy.get('@viewportInfoMidTop').should('contains.text', 'H');
-    cy.screenshot('Flip H tool - Should Flip Image on Y axis');
   });
 
   it('check if Flip V tool will flip the image vertically in the viewport', () => {
@@ -474,8 +457,7 @@ describe('OHIF Cornerstone Toolbar', () => {
 
     //Click on Flip V button
     cy.get('[data-cy="flip v"]').click();
-
+    cy.get('@viewportInfoMidLeft').should('contains.text', 'R');
-    // Visual comparison
+    cy.get('@viewportInfoMidTop').should('contains.text', 'F');
-    cy.screenshot('Flip V tool - Should Flip Image on X axis');
   });
 });

platform/viewer/cypress/integration/common/OHIFDownloadSnapshotFile.spec.js

@@ -1,7 +1,8 @@
 describe('OHIF Download Snapshot File', () => {
   before(() => {
-    cy.openStudyInViewer('1.2.840.113619.2.5.1762583153.215519.978957063.78');
+    cy.checkStudyRouteInViewer(
-    cy.waitDicomImage();
+      '1.2.840.113619.2.5.1762583153.215519.978957063.78'
+    );
     cy.expectMinimumThumbnails(5);
   });
 
@@ -105,8 +106,6 @@ describe('OHIF Download Snapshot File', () => {
     cy.get('[data-cy="show-annotations"]').check();
     // Check image preview
     cy.get('[data-cy="image-preview"]').scrollIntoView();
-    // Visual comparison
-    cy.screenshot('Download Image Modal - Show Annotations checked');
     //Compare classes that exists on Image Preview with Annotations and Without Annotation
     cy.get('[data-cy="modal-content"]')
       .find('canvas')

platform/viewer/cypress/integration/common/OHIFStudyList.spec.js

@@ -2,10 +2,19 @@
 //this is intended to be running in a controled docker environment with test data.
 describe('OHIF Study List', function() {
   context('Desktop resolution', function() {
+    before(function() {
+      cy.openStudyList();
+    });
+
     beforeEach(function() {
       cy.viewport(1750, 720);
-      cy.openStudyList();
       cy.initStudyListAliasesOnDesktop();
+      //Clear all text fields
+      cy.get('@PatientName').clear();
+      cy.get('@MRN').clear();
+      cy.get('@AccessionNumber').clear();
+      cy.get('@StudyDescription').clear();
+      cy.get('@modalities').clear();
     });
 
     it('searches Patient Name with exact string', function() {
@@ -101,10 +110,16 @@ describe('OHIF Study List', function() {
   });
 
   context('Tablet resolution', function() {
+    before(function() {
+      cy.openStudyList();
+    });
+
     beforeEach(function() {
       cy.viewport(1000, 660);
-      cy.openStudyList();
       cy.initStudyListAliasesOnTablet();
+      //Clear all text fields
+      cy.get('@patientNameOrMRN').clear();
+      cy.get('@accessionModalityDescription').clear();
     });
 
     it('searches Patient Name with exact string', function() {

platform/viewer/cypress/integration/common/OHIFStudyViewer.spec.js

@@ -1,8 +1,9 @@
 describe('OHIF Study Viewer Page', function() {
-  before(function() {
+  before(() => {
-    cy.openStudyInViewer('1.2.840.113619.2.5.1762583153.215519.978957063.78');
+    cy.checkStudyRouteInViewer(
-    cy.waitDicomImage();
+      '1.2.840.113619.2.5.1762583153.215519.978957063.78'
-    cy.expectMinimumThumbnails(6);
+    );
+    cy.expectMinimumThumbnails(5);
   });
 
   beforeEach(function() {
@@ -11,8 +12,6 @@ describe('OHIF Study Viewer Page', function() {
   });
 
   it('checks if series thumbnails are being displayed', function() {
-    cy.screenshot('Series Thumbnails - Should Display Thumbnails');
-
     cy.get('[data-cy="thumbnail-list"]')
       .its('length')
       .should('be.gt', 1);
@@ -291,9 +290,6 @@ describe('OHIF Study Viewer Page', function() {
       });
     });
 
-    // Visual comparison
-    cy.screenshot('About modal - Should display modal');
-
     //close modal
     cy.get('[data-cy="close-button"]').click();
     cy.get('@aboutOverlay').should('not.be.enabled');

platform/viewer/cypress/integration/common/OHIFUserPreferences.spec.js

@@ -22,10 +22,6 @@ describe('OHIF User Preferences', () => {
       cy.get('@cancelBtn').should('have.text', 'Cancel');
       cy.get('@saveBtn').should('have.text', 'Save');
 
-      // Visual comparison
-      cy.screenshot(
-        'User Preferences Modal - Hotkeys tab initial state in Study List page'
-      );
       cy.get('[data-cy="close-button"]').click();
     });
 
@@ -36,10 +32,6 @@ describe('OHIF User Preferences', () => {
       // Language dropdown should be displayed
       cy.get('#language-select').should('be.visible');
 
-      // Visual comparison
-      cy.screenshot(
-        'User Preferences Modal - General tab initial state in Study List page'
-      );
       // Set language to Spanish and save
       cy.setLanguage('Spanish');
 
@@ -211,10 +203,6 @@ describe('OHIF User Preferences', () => {
       cy.get('@cancelBtn').should('have.text', 'Cancel');
       cy.get('@saveBtn').should('have.text', 'Save');
 
-      // Visual comparison
-      cy.screenshot(
-        'User Preferences Modal - Hotkeys tab initial state in Study Viewer page'
-      );
       cy.get('[data-cy="close-button"]').click(); //close User Preferences modal
     });
 
@@ -225,10 +213,6 @@ describe('OHIF User Preferences', () => {
       // Language dropdown should be displayed
       cy.get('#language-select').should('be.visible');
 
-      // Visual comparison
-      cy.screenshot(
-        'User Preferences Modal - General tab initial state in Study Viewer page'
-      );
       // Set language to Spanish
       cy.setLanguage('Spanish');
 
@@ -401,9 +385,6 @@ describe('OHIF User Preferences', () => {
       cy.get('body').type(' ');
       cy.get('@viewportInfoMidTop').should('contains.text', 'A');
 
-      // Visual comparison
-      cy.screenshot('Viewport Navigation - 2nd viewport inverted and rotated');
-
       // Set 1 viewport layout
       cy.setLayout(1, 1);
     });

platform/viewer/cypress/integration/pwa/OHIFExtensionHTMLPDF.spec.js

@@ -1,6 +1,8 @@
 describe('OHIF HTML Extension', () => {
   before(() => {
-    cy.openStudy('Dummy');
+    cy.openStudyInViewer(
+      '1.2.826.0.13854362241694438965858641723883466450351448'
+    );
     cy.expectMinimumThumbnails(5);
   });
 
@@ -40,5 +42,37 @@ describe('OHIF HTML Extension', () => {
         .scrollTo('bottom');
       cy.wrap($viewport).should('have.class', 'active');
     });
+
+    cy.setLayout('1', '1');
+  });
+});
+
+describe('OHIF PDF Extension', () => {
+  before(() => {
+    cy.checkStudyRouteInViewer(
+      '1.2.826.0.13854362241694438965858641723883466450351448'
+    );
+    cy.expectMinimumThumbnails(5);
+  });
+
+  it('checks if series thumbnails are being displayed', () => {
+    cy.get('[data-cy="thumbnail-list"]')
+      .contains('DOC')
+      .its('length')
+      .should('to.be.at.least', 1);
+  });
+
+  it('drags and drop a PDF thumbnail into viewport', () => {
+    cy.get('[data-cy="thumbnail-list"]')
+      .contains('DOC')
+      .scrollIntoView()
+      .drag('.viewport-drop-target');
+
+    cy.get('.DicomPDFViewport')
+      .its('length')
+      .should('be.eq', 1);
+
+    //Take Screenshot
+    cy.screenshot('PDF Extension - Should load PDF file');
   });
 });

platform/viewer/cypress/integration/pwa/OHIFExtensionPDF.spec.js

@@ -1,27 +0,0 @@
-describe('OHIF PDF Extension', () => {
-  before(() => {
-    cy.openStudy('Dummy');
-    cy.expectMinimumThumbnails(6);
-  });
-
-  it('checks if series thumbnails are being displayed', () => {
-    cy.get('[data-cy="thumbnail-list"]')
-      .contains('DOC')
-      .its('length')
-      .should('to.be.at.least', 1);
-  });
-
-  it('drags and drop a PDF thumbnail into viewport', () => {
-    cy.get('[data-cy="thumbnail-list"]')
-      .contains('DOC')
-      .drag('.viewport-drop-target');
-
-    cy.get('.DicomPDFViewport')
-      .its('length')
-      .should('be.eq', 1);
-
-    // This won't work unless we switch to an extension that renders using `canvas`
-    // Currently, we rely on the browser's built-in implementation
-    cy.screenshot('PDF Extension - Should load PDF file');
-  });
-});

platform/viewer/cypress/integration/pwa/OHIFExtensionVTK.spec.js

@@ -1,16 +1,9 @@
 describe('OHIF VTK Extension', () => {
   before(() => {
-    cy.openStudy('Juno');
+    cy.checkStudyRouteInViewer(
-    cy.waitDicomImage();
+      '1.3.6.1.4.1.25403.345050719074.3824.20170125113417.1'
+    );
     cy.expectMinimumThumbnails(7);
-  });
-
-  beforeEach(() => {
-    //TODO: Due to percy snapshot, the images inside the viewports are being resized
-    //and once the browser continues the test execution, the images are not centered in the viewport.
-    //To fix that, we need to reload the page before each test.
-    //https://github.com/OHIF/Viewers/issues/1168
-    cy.reload();
 
     //Waiting for the desired thumbnail content to be displayed
     cy.get('[data-cy="thumbnail-list"]').should($list => {
@@ -23,14 +16,16 @@ describe('OHIF VTK Extension', () => {
     // Drag and drop third thumbnail into first viewport
     cy.get('[data-cy="thumbnail-list"]')
       .contains('CT WB 5.0  B35f')
-      .drag('.viewport-drop-target')
+      .drag('.viewport-drop-target');
 
     //Select 2D MPR button
     cy.get('[data-cy="2d mpr"]').click();
 
     //Wait Reformatting Images
     cy.waitVTKReformatting();
+  });
 
+  beforeEach(() => {
     cy.initVTKToolsAliases();
   });
 
@@ -54,9 +49,6 @@ describe('OHIF VTK Extension', () => {
     cy.get('@layoutBtn')
       .should('be.visible')
       .contains('Layout');
-
-    // Visual comparison
-    cy.screenshot('VTK initial state - Should display toolbar and 3 viewports');
   });
 
   it('checks Crosshairs tool', () => {
@@ -64,20 +56,26 @@ describe('OHIF VTK Extension', () => {
 
     // Click and Move the mouse inside the viewport
     cy.get('[data-cy="viewport-container-0"]')
-      .trigger('mousedown', 'center', { which: 1 })
+      .trigger('mousedown', 'center', {
-      .trigger('mousemove', 'top', { which: 1 })
+        which: 1,
+      })
+      .trigger('mousemove', 'top', {
+        which: 1,
+      })
       .trigger('mouseup');
 
-    // Visual comparison
+    //Take Screenshot
     cy.screenshot(
       "VTK Crosshairs tool - Should display crosshairs' green lines"
     );
   });
 
-  /* TODO: Non-deterministic behavior (const expectedText = 'W: 350 L: -1044';)
   it('checks WWWC tool', () => {
     cy.get('@wwwcBtn').click();
 
+    //Initial label in the viewport
+    const initialLabelText = 'W: 350 L: 40';
+
     // Click and Move the mouse inside the viewport
     cy.get('[data-cy="viewport-container-0"]')
       .trigger('mousedown', 'center', { which: 1 })
@@ -86,29 +84,29 @@ describe('OHIF VTK Extension', () => {
       .trigger('mousemove', 'top', { which: 1 })
       .trigger('mouseup', { which: 1 })
       .then(() => {
-        const expectedText = 'W: 350 L: 40';
         cy.get('.ViewportOverlay > div.bottom-right.overlay-element').should(
-          'contains.text',
+          'not.have.text',
-          expectedText
+          initialLabelText
         );
       });
-
+  });
-    // Visual comparison
-    cy.screenshot('VTK WWWC tool - Canvas should be bright');
-  }); */
 
   it('checks Rotate tool', () => {
     cy.get('@rotateBtn').click();
 
     // Click and Move the mouse inside the viewport
     cy.get('[data-cy="viewport-container-0"]')
-      .trigger('mousedown', 'center', { which: 1 })
+      .trigger('mousedown', 'center', {
+        which: 1,
+      })
       .trigger('mousemove', 'top', { which: 1 })
-      .trigger('mousedown', 'center', { which: 1 })
+      .trigger('mousedown', 'center', {
+        which: 1,
+      })
       .trigger('mousemove', 'top', { which: 1 })
       .trigger('mouseup', { which: 1 });
 
-    // Visual comparison
+    //Take Screenshot
     cy.screenshot('VTK Rotate tool - Should rotate image');
   });
 });

platform/viewer/cypress/integration/pwa/OHIFSaveMeasurements.spec.js

@@ -1,7 +1,8 @@
 describe('OHIF Save Measurements', function() {
   before(() => {
-    cy.openStudyInViewer('1.2.840.113619.2.5.1762583153.215519.978957063.78');
+    cy.checkStudyRouteInViewer(
-    cy.waitDicomImage();
+      '1.2.840.113619.2.5.1762583153.215519.978957063.78'
+    );
     cy.expectMinimumThumbnails(5);
   });
 

platform/viewer/cypress/integration/visual-regression/PercyCheckOHIFCornerstoneHotkeys.spec.js

@@ -1,8 +1,9 @@
 describe('Visual Regression - OHIF Cornerstone Hotkeys', () => {
   before(() => {
-    cy.openStudyInViewer('1.2.840.113619.2.5.1762583153.215519.978957063.78');
+    cy.checkStudyRouteInViewer(
-    cy.waitDicomImage();
+      '1.2.840.113619.2.5.1762583153.215519.978957063.78'
-    cy.expectMinimumThumbnails(3);
+    );
+    cy.expectMinimumThumbnails(5);
   });
 
   beforeEach(() => {

platform/viewer/cypress/integration/visual-regression/PercyCheckOHIFCornerstoneToolbar.spec.js

@@ -1,7 +1,8 @@
 describe('Visual Regression - OHIF Cornerstone Toolbar', () => {
   before(() => {
-    cy.openStudyInViewer('1.2.840.113619.2.5.1762583153.215519.978957063.78');
+    cy.checkStudyRouteInViewer(
-    cy.waitDicomImage();
+      '1.2.840.113619.2.5.1762583153.215519.978957063.78'
+    );
     cy.expectMinimumThumbnails(5);
   });
 

platform/viewer/cypress/integration/visual-regression/PercyCheckOHIFDownloadSnapshotFile.spec.js

@@ -1,7 +1,8 @@
 describe('Visual Regression - OHIF Download Snapshot File', () => {
   before(() => {
-    cy.openStudyInViewer('1.2.840.113619.2.5.1762583153.215519.978957063.78');
+    cy.checkStudyRouteInViewer(
-    cy.waitDicomImage();
+      '1.2.840.113619.2.5.1762583153.215519.978957063.78'
+    );
     cy.expectMinimumThumbnails(5);
   });
 

platform/viewer/cypress/integration/visual-regression/PercyCheckOHIFExtensionPDF.spec.js

@@ -1,8 +1,10 @@
 describe('Visual Regression - OHIF PDF Extension', () => {
   before(() => {
-    cy.openStudy('Dummy');
+    cy.checkStudyRouteInViewer(
-    cy.expectMinimumThumbnails(6);
+      '1.2.826.0.13854362241694438965858641723883466450351448'
-  });
+    );
+    cy.expectMinimumThumbnails(5);
+  });v
 
   it('drags and drop a PDF thumbnail into viewport', () => {
     cy.get('[data-cy="thumbnail-list"]')

platform/viewer/cypress/integration/visual-regression/PercyCheckOHIFExtensionVTK.spec.js

@@ -1,8 +1,9 @@
 describe('Visual Regression - OHIF VTK Extension', () => {
   before(() => {
-    cy.openStudy('Bellona');
+    cy.checkStudyRouteInViewer(
-    cy.waitDicomImage();
+      '1.3.6.1.4.1.25403.345050719074.3824.20170125113417.1'
-    cy.expectMinimumThumbnails(5);
+    );
+    cy.expectMinimumThumbnails(7);
 
     //Waiting for the desired thumbnail content to be displayed
     cy.get('[data-cy="thumbnail-list"]').should($list => {

platform/viewer/cypress/integration/visual-regression/PercyCheckOHIFStudyViewer.spec.js

@@ -1,8 +1,9 @@
 describe('Visual Regression - OHIF Study Viewer Page', function() {
-  before(function() {
+  before(() => {
-    cy.openStudyInViewer('1.2.840.113619.2.5.1762583153.215519.978957063.78');
+    cy.checkStudyRouteInViewer(
-    cy.waitDicomImage();
+      '1.2.840.113619.2.5.1762583153.215519.978957063.78'
-    cy.expectMinimumThumbnails(6);
+    );
+    cy.expectMinimumThumbnails(5);
   });
 
   beforeEach(function() {

platform/viewer/cypress/support/commands.js

@@ -53,6 +53,16 @@ Cypress.Commands.add('openStudy', PatientName => {
     .click({ force: true });
 });
 
+Cypress.Commands.add('checkStudyRouteInViewer', StudyInstanceUID => {
+  cy.location('pathname').then($url => {
+    cy.log($url);
+    if ($url == 'blank' || !$url.includes(`/viewer/${StudyInstanceUID}`)) {
+      cy.openStudyInViewer(StudyInstanceUID);
+      cy.waitDicomImage();
+    }
+  });
+});
+
 Cypress.Commands.add('openStudyInViewer', StudyInstanceUID => {
   cy.visit(`/viewer/${StudyInstanceUID}`);
 });

platform/viewer/package.json

@@ -30,6 +30,7 @@
     "start": "yarn run dev",
     "test:e2e": "cypress open",
     "test:e2e:ci": "percy exec -- cypress run --config video=false --record --browser chrome --spec 'cypress/integration/visual-regression/**/*'",
+    "test:e2e:local": "cypress run --config video=false --browser chrome --spec 'cypress/integration/common/**/*,cypress/integration/pwa/**/*'",
     "test:e2e:dist": "start-server-and-test test:e2e:serve http://localhost:3000 test:e2e:ci",
     "test:e2e:serve": "serve -n -l 3000 -s dist",
     "test:unit": "jest --watchAll",