diff --git a/platform/viewer/cypress/integration/common/OHIFCornerstoneHotkeys.spec.js b/platform/viewer/cypress/integration/common/OHIFCornerstoneHotkeys.spec.js index f525b61a2..b2dbb9fe9 100644 --- a/platform/viewer/cypress/integration/common/OHIFCornerstoneHotkeys.spec.js +++ b/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', () => { diff --git a/platform/viewer/cypress/integration/common/OHIFCornerstoneToolbar.spec.js b/platform/viewer/cypress/integration/common/OHIFCornerstoneToolbar.spec.js index e07fc1eea..d4faaccbd 100644 --- a/platform/viewer/cypress/integration/common/OHIFCornerstoneToolbar.spec.js +++ b/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'); + }); }); diff --git a/platform/viewer/cypress/integration/common/OHIFStandaloneViewer.spec.js b/platform/viewer/cypress/integration/common/OHIFStandaloneViewer.spec.js index 628547919..32d2e2c83 100644 --- a/platform/viewer/cypress/integration/common/OHIFStandaloneViewer.spec.js +++ b/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') diff --git a/platform/viewer/cypress/integration/common/OHIFStudyViewer.spec.js b/platform/viewer/cypress/integration/common/OHIFStudyViewer.spec.js index 54f7dc0f3..d1163452e 100644 --- a/platform/viewer/cypress/integration/common/OHIFStudyViewer.spec.js +++ b/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'); diff --git a/platform/viewer/cypress/integration/pwa/OHIFExtensionMicroscopy.spec.js b/platform/viewer/cypress/integration/pwa/OHIFExtensionMicroscopy.spec.js index c36eb1320..e33064a1b 100644 --- a/platform/viewer/cypress/integration/pwa/OHIFExtensionMicroscopy.spec.js +++ b/platform/viewer/cypress/integration/pwa/OHIFExtensionMicroscopy.spec.js @@ -21,6 +21,10 @@ describe('OHIF Microscopy Extension', () => { .should('be.eq', 1); cy.wait(3000); //Waiting for image to render before taking the snapshot - cy.percyCanvasSnapshot('Microscopy Extension'); + // Visual comparison + cy.screenshot('Microscopy Extension - Should display loaded canvas'); + cy.percyCanvasSnapshot( + 'Microscopy Extension - Should display loaded canvas' + ); }); }); diff --git a/platform/viewer/cypress/integration/pwa/OHIFExtensionPDF.spec.js b/platform/viewer/cypress/integration/pwa/OHIFExtensionPDF.spec.js index 761fa2c74..3a7a7b7b8 100644 --- a/platform/viewer/cypress/integration/pwa/OHIFExtensionPDF.spec.js +++ b/platform/viewer/cypress/integration/pwa/OHIFExtensionPDF.spec.js @@ -22,6 +22,7 @@ describe('OHIF PDF Extension', () => { // 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.percyCanvasSnapshot('PDF Extension'); + cy.screenshot('PDF Extension - Should load PDF file'); + cy.percyCanvasSnapshot('PDF Extension - Should load PDF file'); }); }); diff --git a/platform/viewer/cypress/integration/pwa/OHIFExtensionVTK.spec.js b/platform/viewer/cypress/integration/pwa/OHIFExtensionVTK.spec.js index bd13c293b..b0de71f0e 100644 --- a/platform/viewer/cypress/integration/pwa/OHIFExtensionVTK.spec.js +++ b/platform/viewer/cypress/integration/pwa/OHIFExtensionVTK.spec.js @@ -6,37 +6,36 @@ describe('OHIF VTK Extension', () => { }); 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 => { + expect($list).to.contain('CT WB 5.0 B35f'); + }); + // TODO: We shouldn't have to drag the thumbnail // This is a known bug; 2D MPR button does not show until viewport // has data from a drag-n-drop - // Drag and drop first thumbnail into first viewport - cy.get('[data-cy="thumbnail-list"]:nth-child(3)').drag( - '.viewport-drop-target' - ); + // Drag and drop third thumbnail into first viewport + cy.get('[data-cy="thumbnail-list"]') + .contains('CT WB 5.0 B35f') + .drag('.viewport-drop-target') + .wait(1000); // TODO: Once issue #1167 is fixed, the wait command should be removed. (https://github.com/OHIF/Viewers/issues/1167) - cy.get('.PluginSwitch > .toolbar-button') - .as('twodmprBtn') - .should('be.visible') - .then(btn => { - if (!btn.text().includes('Exit')) { - btn.click(); - } - }); + //Select 2D MPR button + cy.get('.PluginSwitch > .toolbar-button').click(); + + //Wait Reformatting Images + cy.waitVTKReformatting(); cy.initVTKToolsAliases(); }); it('checks if VTK buttons are displayed on the toolbar', () => { - // Wait for start reformatting - cy.get('[data-cy="viewprt-grid"]', { timeout: 10000 }).should($grid => { - expect($grid).to.contain.text('Reform'); - }); - - // Wait for finish reformatting - cy.get('[data-cy="viewprt-grid"]', { timeout: 30000 }).should($grid => { - expect($grid).not.to.contain.text('Reform'); - }); - cy.get('@crosshairsBtn') .should('be.visible') .contains('Crosshairs'); @@ -57,7 +56,67 @@ describe('OHIF VTK Extension', () => { .should('be.visible') .contains('Layout'); - cy.wait(3000); - cy.percyCanvasSnapshot('VTK Extension'); + // Visual comparison + cy.screenshot('VTK initial state - Should display toolbar and 3 viewports'); + cy.percyCanvasSnapshot( + 'VTK initial state - Should display toolbar and 3 viewports' + ); + }); + + it('checks Crosshairs tool', () => { + cy.get('@crosshairsBtn').click(); + + // Click and Move the mouse inside the viewport + cy.get('[data-cy="viewport-container-0"]') + .trigger('mousedown', 'center', { which: 1 }) + .trigger('mousemove', 'top', { which: 1 }) + .trigger('mouseup'); + + // Visual comparison + cy.screenshot( + "VTK Crosshairs tool - Should display crosshairs' green lines" + ); + cy.percyCanvasSnapshot( + "VTK Crosshairs tool - Should display crosshairs' green lines" + ); + }); + + it('checks WWWC tool', () => { + cy.get('@wwwcBtn').click(); + + // Click and Move the mouse inside the viewport + cy.get('[data-cy="viewport-container-0"]') + .trigger('mousedown', 'center', { which: 1 }) + .trigger('mousemove', 'top', { which: 1 }) + .trigger('mousedown', 'center', { which: 1 }) + .trigger('mousemove', 'top', { which: 1 }) + .trigger('mouseup', { which: 1 }) + .then(() => { + const expectedText = 'W: 350 L: -1044'; + cy.get('.ViewportOverlay > div.bottom-right.overlay-element').should( + 'contains.text', + expectedText + ); + }); + + // Visual comparison + cy.screenshot('VTK WWWC tool - Canvas should be bright'); + cy.percyCanvasSnapshot('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('mousemove', 'top', { which: 1 }) + .trigger('mousedown', 'center', { which: 1 }) + .trigger('mousemove', 'top', { which: 1 }) + .trigger('mouseup', { which: 1 }); + + // Visual comparison + cy.screenshot('VTK Rotate tool - Should rotate image'); + cy.percyCanvasSnapshot('VTK Rotate tool - Should rotate image'); }); }); diff --git a/platform/viewer/cypress/support/commands.js b/platform/viewer/cypress/support/commands.js index 425681599..f094caa4b 100644 --- a/platform/viewer/cypress/support/commands.js +++ b/platform/viewer/cypress/support/commands.js @@ -90,6 +90,18 @@ Cypress.Commands.add('waitStudyList', () => { }); }); +Cypress.Commands.add('waitVTKReformatting', () => { + // Wait for start reformatting + cy.get('[data-cy="viewprt-grid"]', { timeout: 10000 }).should($grid => { + expect($grid).to.contain.text('Reform'); + }); + + // Wait for finish reformatting + cy.get('[data-cy="viewprt-grid"]', { timeout: 30000 }).should($grid => { + expect($grid).not.to.contain.text('Reform'); + }); +}); + /** * Command to perform a drag and drop action. Before using this command, we must get the element that should be dragged first. * Example of usage: cy.get(element-to-be-dragged).drag(dropzone-element)