test: Visual testing for Cornerstone and VTK (#1169)

* Visual testing for Cornerstone and VTK

* Fix for CI

* Review fix: Removed cornerstone function and added snapshot description

* Added snapshot description

* Fix for CI

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

@@ -46,8 +46,8 @@ describe('OHIF Cornerstone Hotkeys', () => {
     // Hotkey I
     cy.get('body').type('I');
     // Visual comparison
-    cy.screenshot();
-    cy.percyCanvasSnapshot('Hotkey I - invert image');
+    cy.screenshot('Hotkey I - Should Invert Image');
+    cy.percyCanvasSnapshot('Hotkey I - Should Invert Image');
   });
 
   it('checks if hotkeys "+", "-" and "=" can zoom in, out and fit to viewport', () => {
@@ -76,8 +76,8 @@ describe('OHIF Cornerstone Hotkeys', () => {
     cy.get('@viewportInfoBottomRight').should('contains.text', 'Zoom: 211%');
 
     // Visual comparison to make sure the 'inverted' image was reset
-    cy.screenshot();
-    cy.percyCanvasSnapshot('Hotkey SPACEBAR - Reset Image');
+    cy.screenshot('Hotkey SPACEBAR - Should Reset Image');
+    cy.percyCanvasSnapshot('Hotkey SPACEBAR - Should Reset Image');
   });
 
   it('uses hotkeys "RightArrow" and "LeftArrow" to navigate between multiple viewports', () => {

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

@@ -2,7 +2,7 @@ describe('OHIF Cornerstone Toolbar', () => {
   before(() => {
     cy.openStudy('MISTER^MR');
     cy.waitDicomImage();
-    cy.expectMinimumThumbnails(3);
+    cy.expectMinimumThumbnails(5);
   });
 
   beforeEach(() => {
@@ -112,25 +112,14 @@ describe('OHIF Cornerstone Toolbar', () => {
         cy.wrap($panBtn).should('have.class', 'active');
       });
 
-    //Get image position from cornerstone and check if y axis was modified
-    let cornerstone;
-    let currentPan;
-
-    cy.window()
-      .its('cornerstone')
-      .then(c => {
-        cornerstone = c;
-        currentPan = () =>
-          cornerstone.getEnabledElements()[0].viewport.translation;
-      });
-
     cy.get('@viewport')
       .trigger('mousedown', 'center', { which: 1 })
       .trigger('mousemove', 'bottom', { which: 1 })
-      .trigger('mouseup', 'bottom')
-      .then(() => {
-        expect(currentPan().y > 0).to.eq(true);
-      });
+      .trigger('mouseup', 'bottom');
+
+    // Visual comparison
+    cy.screenshot('Pan tool moved the image inside the viewport');
+    cy.percyCanvasSnapshot('Pan tool moved the image inside the viewport');
   });
 
   it('checks if Length annotation can be added on viewport and on measurements panel', () => {
@@ -312,18 +301,18 @@ describe('OHIF Cornerstone Toolbar', () => {
           .find('td')
           .its('length')
           .should('be.eq', 9);
+        cy.get('@layoutBtn').click();
       });
 
     //verify if layout has changed to 2 viewports
-    cy.get('tbody > :nth-child(1) > :nth-child(2)').click();
+    cy.setLayout(1, 2);
     cy.get('.viewport-container').then($viewport => {
       cy.wrap($viewport)
         .its('length')
         .should('be.eq', 2);
     });
 
-    cy.get('@layoutBtn').click();
-    cy.get('tbody > :nth-child(2) > :nth-child(1)').click();
+    cy.setLayout(2, 1);
     cy.get('.viewport-container').then($viewport => {
       cy.wrap($viewport)
         .its('length')
@@ -331,8 +320,7 @@ describe('OHIF Cornerstone Toolbar', () => {
     });
 
     //verify if layout has changed to 3 viewports
-    cy.get('@layoutBtn').click();
-    cy.get('tbody > :nth-child(1) > :nth-child(3)').click();
+    cy.setLayout(1, 3);
     cy.get('.viewport-container').then($viewport => {
       cy.wait(1000);
       cy.wrap($viewport)
@@ -340,8 +328,7 @@ describe('OHIF Cornerstone Toolbar', () => {
         .should('be.eq', 3);
     });
 
-    cy.get('@layoutBtn').click();
-    cy.get('tbody > :nth-child(3) > :nth-child(1)').click();
+    cy.setLayout(3, 1);
     cy.get('.viewport-container').then($viewport => {
       cy.wrap($viewport)
         .its('length')
@@ -349,8 +336,7 @@ describe('OHIF Cornerstone Toolbar', () => {
     });
 
     //verify if layout has changed to 4 viewports
-    cy.get('@layoutBtn').click();
-    cy.get('tbody > :nth-child(2) > :nth-child(2)').click();
+    cy.setLayout(2, 2);
     cy.get('.viewport-container').then($viewport => {
       cy.wrap($viewport)
         .its('length')
@@ -358,16 +344,14 @@ describe('OHIF Cornerstone Toolbar', () => {
     });
 
     //verify if layout has changed to 6 viewports
-    cy.get('@layoutBtn').click();
-    cy.get('tbody > :nth-child(2) > :nth-child(3)').click();
+    cy.setLayout(2, 3);
     cy.get('.viewport-container').then($viewport => {
       cy.wrap($viewport)
         .its('length')
         .should('be.eq', 6);
     });
 
-    cy.get('@layoutBtn').click();
-    cy.get('tbody > :nth-child(3) > :nth-child(2)').click();
+    cy.setLayout(3, 2);
     cy.get('.viewport-container').then($viewport => {
       cy.wrap($viewport)
         .its('length')
@@ -375,8 +359,7 @@ describe('OHIF Cornerstone Toolbar', () => {
     });
 
     //verify if layout has changed to 9 viewports
-    cy.get('@layoutBtn').click();
-    cy.get('tbody > :nth-child(3) > :nth-child(3)').click();
+    cy.setLayout(3, 3);
     cy.get('.viewport-container').then($viewport => {
       cy.wrap($viewport)
         .its('length')
@@ -384,8 +367,7 @@ describe('OHIF Cornerstone Toolbar', () => {
     });
 
     //verify if layout has changed to 1 viewport
-    cy.get('@layoutBtn').click();
-    cy.get('tbody > :nth-child(1) > :nth-child(1)').click();
+    cy.setLayout(1, 1);
     cy.get('.viewport-container').then($viewport => {
       cy.wrap($viewport)
         .its('length')
@@ -425,7 +407,9 @@ describe('OHIF Cornerstone Toolbar', () => {
       .as('toolbarOverlay')
       .should('be.visible');
     //Click on Clear button
-    cy.get('.tooltip-inner > :nth-child(10)').click();
+    cy.get('.tooltip-inner')
+      .contains('Clear')
+      .click();
 
     //Verify if measurements were removed from the measurements panel
     cy.get('.measurementItem').should('not.exist');
@@ -457,8 +441,15 @@ describe('OHIF Cornerstone Toolbar', () => {
 
     //Click More button
     cy.get('@moreBtn').click();
-    //Click Eraser button
-    cy.get('.tooltip-inner > :nth-child(12)').click();
+    //Verify if overlay is displayed
+    cy.get('.tooltip-toolbar-overlay')
+      .should('be.visible')
+      .then(() => {
+        //Click Eraser button
+        cy.get('.tooltip-inner')
+          .contains('Eraser')
+          .click({ force: true });
+      });
 
     //Erase measurement #1 and Verify if it was removed from the measurements panel
     const [x1, y1] = [150, 100];
@@ -472,4 +463,70 @@ describe('OHIF Cornerstone Toolbar', () => {
     cy.get('@viewport').click(x2, y2, { force: true });
     cy.get('.measurementItem').should('not.exist');
   });
+
+  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('.tooltip-inner')
+      .contains('Invert')
+      .click();
+
+    // Visual comparison
+    cy.screenshot('Invert tool - Should Invert Canvas');
+    cy.percyCanvasSnapshot('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();
+    //Verify if overlay is displayed
+    cy.get('.tooltip-toolbar-overlay')
+      .should('be.visible')
+      .then(() => {
+        //Click on Rotate button
+        cy.get('.tooltip-inner')
+          .contains('Rotate')
+          .click({ force: true });
+      });
+
+    // Visual comparison
+    cy.screenshot('Rotate tool - Should Rotate Image to Right');
+    cy.percyCanvasSnapshot('Rotate tool - Should Rotate Image to Right');
+  });
+
+  it('check if Flip H tool will flip the image horizontally 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 Flip H button
+    cy.get('.tooltip-inner')
+      .contains('Flip H')
+      .click();
+
+    // Visual comparison
+    cy.screenshot('Flip H tool - Should Flip Image on Y axis');
+    cy.percyCanvasSnapshot('Flip H tool - Should Flip Image on Y axis');
+  });
+
+  it('check if Flip V tool will flip the image vertically 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 Flip V button
+    cy.get('.tooltip-inner')
+      .contains('Flip V')
+      .click();
+
+    // Visual comparison
+    cy.screenshot('Flip V tool - Should Flip Image on X axis');
+    cy.percyCanvasSnapshot('Flip V tool - Should Flip Image on X axis');
+  });
 });

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

@@ -4,7 +4,7 @@ describe('OHIFStandaloneViewer', () => {
   });
 
   it('loads route with at least 2 rows', () => {
-    cy.screenshot();
+    cy.screenshot('Study List');
     cy.percyCanvasSnapshot('Study List');
 
     cy.get('[data-cy="study-list-results"] tr')

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

@@ -11,8 +11,8 @@ describe('OHIF Study Viewer Page', function() {
   });
 
   it('checks if series thumbnails are being displayed', function() {
-    cy.screenshot();
-    cy.percyCanvasSnapshot('Series Thumbnails');
+    cy.screenshot('Series Thumbnails - Should Display Thumbnails');
+    cy.percyCanvasSnapshot('Series Thumbnails - Should Display Thumbnails');
 
     cy.get('[data-cy="thumbnail-list"]')
       .its('length')
@@ -291,6 +291,10 @@ describe('OHIF Study Viewer Page', function() {
       });
     });
 
+    // Visual comparison
+    cy.screenshot('About modal - Should display modal');
+    cy.percyCanvasSnapshot('About modal - Should display modal');
+
     //close modal
     cy.get('.close').click();
     cy.get('@aboutOverlay').should('not.be.enabled');