From f5560c11b079fed32aa9215cb4b06f3efcc4651a Mon Sep 17 00:00:00 2001 From: Mirna Silva Date: Fri, 25 Oct 2019 23:14:57 -0300 Subject: [PATCH] test: Stack Scroll, Right-click to zoom, Middle-click to Pan (#1073) * E2E tests: Stack Scroll, Right-click to zoom, Middle-click to Pan * About modal tests and added some cypress selectors * Checking app version number * Removed accidental import * Review fixes --- .../userPreferencesModal/AboutModal.js | 2 +- platform/ui/src/elements/form/DropdownMenu.js | 7 +- .../common/OHIFStudyViewer.spec.js | 111 ++++++++++++++++-- platform/viewer/cypress/support/commands.js | 4 +- .../viewer/src/components/Header/Header.js | 1 + 5 files changed, 112 insertions(+), 13 deletions(-) diff --git a/platform/ui/src/components/userPreferencesModal/AboutModal.js b/platform/ui/src/components/userPreferencesModal/AboutModal.js index de22089e4..d71ab918f 100644 --- a/platform/ui/src/components/userPreferencesModal/AboutModal.js +++ b/platform/ui/src/components/userPreferencesModal/AboutModal.js @@ -92,7 +92,7 @@ class AboutModal extends Component { {t('OHIF Viewer - About')} - +
this.handleOnClick(onClick)} > {icon && } @@ -119,7 +120,11 @@ class DropdownMenu extends Component { render() { return ( -
(this.node = node)}> +
(this.node = node)} + >
{this.renderTitleElement()}
diff --git a/platform/viewer/cypress/integration/common/OHIFStudyViewer.spec.js b/platform/viewer/cypress/integration/common/OHIFStudyViewer.spec.js index 7cf18806a..daeb6c057 100644 --- a/platform/viewer/cypress/integration/common/OHIFStudyViewer.spec.js +++ b/platform/viewer/cypress/integration/common/OHIFStudyViewer.spec.js @@ -1,16 +1,16 @@ -describe('OHIF Study Viewer Page', () => { - before(() => { +describe('OHIF Study Viewer Page', function() { + before(function() { cy.openStudy('MISTER^MR'); cy.waitDicomImage(); cy.expectMinimumThumbnails(6); }); - beforeEach(() => { + beforeEach(function() { cy.initCommonElementsAliases(); cy.resetViewport(); }); - it('checks if series thumbnails are being displayed', () => { + it('checks if series thumbnails are being displayed', function() { cy.screenshot(); cy.percyCanvasSnapshot('Series Thumbnails'); @@ -19,7 +19,7 @@ describe('OHIF Study Viewer Page', () => { .should('be.gt', 1); }); - it('drags and drop a series thumbnail into viewport', () => { + it('drags and drop a series thumbnail into viewport', function() { cy.get('[data-cy="thumbnail-list"]:nth-child(2)') //element to be dragged .drag('.cornerstone-canvas'); //dropzone element @@ -28,7 +28,7 @@ describe('OHIF Study Viewer Page', () => { cy.get('@viewportInfoBottomLeft').should('contain.text', expectedText); }); - it('checks if Series left panel can be hidden/displayed', () => { + it('checks if Series left panel can be hidden/displayed', function() { cy.get('@seriesBtn').click(); cy.get('@seriesPanel').should('not.be.enabled'); @@ -36,7 +36,7 @@ describe('OHIF Study Viewer Page', () => { cy.get('@seriesPanel').should('be.visible'); }); - it('checks if Measurements right panel can be hidden/displayed', () => { + it('checks if Measurements right panel can be hidden/displayed', function() { cy.get('@measurementsBtn').click(); cy.get('@measurementsPanel').should('be.visible'); @@ -44,7 +44,7 @@ describe('OHIF Study Viewer Page', () => { cy.get('@measurementsPanel').should('not.be.enabled'); }); - it('checks if measurement item can be Relabeled under Measurements panel', () => { + it('checks if measurement item can be Relabeled under Measurements panel', function() { cy.addLengthMeasurement(); //Adding measurement in the viewport cy.get('@measurementsBtn').click(); cy.get('.measurementItem').click(); @@ -97,7 +97,7 @@ describe('OHIF Study Viewer Page', () => { // .should('contain.text', descriptionText); // }); - it('checks if measurement item can be deleted through the context menu on the viewport', () => { + it('checks if measurement item can be deleted through the context menu on the viewport', function() { cy.addLengthMeasurement([100, 100], [200, 100]); //Adding measurement in the viewport //Right click on measurement annotation @@ -131,7 +131,7 @@ describe('OHIF Study Viewer Page', () => { cy.get('@measurementsPanel').should('not.be.enabled'); }); - it('adds relabel and description to measurement item through the context menu on the viewport', () => { + it('adds relabel and description to measurement item through the context menu on the viewport', function() { cy.addLengthMeasurement([100, 100], [200, 100]); //Adding measurement in the viewport // Relabel @@ -206,4 +206,95 @@ describe('OHIF Study Viewer Page', () => { cy.get('@measurementsBtn').click(); cy.get('@measurementsPanel').should('not.be.enabled'); }); + + it('scrolls series stack using scrollbar', function() { + // Workaround implemented based on Cypress issue: + // https://github.com/cypress-io/cypress/issues/1570#issuecomment-450966053 + const nativeInputValueSetter = Object.getOwnPropertyDescriptor( + window.HTMLInputElement.prototype, + 'value' + ).set; + + cy.get('input.imageSlider[type=range]').then($range => { + // get the DOM node + const range = $range[0]; + // set the value manually + nativeInputValueSetter.call(range, 13); + // now dispatch the event + range.dispatchEvent(new Event('change', { value: 13, bubbles: true })); + }); + + const expectedText = 'Img: 13 13/13'; + cy.get('@viewportInfoBottomLeft').should('contains.text', expectedText); + }); + + //TO-DO: this test is blocked due to issue #1072: https://github.com/OHIF/Viewers/issues/1072 + // Uncomment this once #1072 is fixed. + // it('performs single-click to load thumbnail in active viewport', () => { + // cy.get('[data-cy="thumbnail-list"]:nth-child(3)').click(); + + // const expectedText = 'Ser 3'; + // cy.get('@viewportInfoBottomLeft').should('contains.text', expectedText); + // }); + + it('performs right click to zoom', function() { + //Right click on viewport + cy.get('@viewport') + .trigger('mousedown', 'top', { which: 3 }) + .trigger('mousemove', 'center', { which: 3 }) + .trigger('mouseup'); + + const expectedText = 'Zoom: 442%'; + cy.get('@viewportInfoBottomRight').should('contains.text', expectedText); + }); + + it('performs middle click to pan', function() { + //Get image position from cornerstone and check if y axis was modified + let cornerstone; + let currentPan; + + // TO DO: Replace the cornerstone pan check by Percy snapshop comparison + cy.window() + .its('cornerstone') + .then(c => { + cornerstone = c; + currentPan = () => + cornerstone.getEnabledElements()[0].viewport.translation; + }); + + //pan image with middle click + cy.get('@viewport') + .trigger('mousedown', 'center', { which: 2 }) + .trigger('mousemove', 'bottom', { which: 2 }) + .trigger('mouseup', 'bottom') + .then(() => { + expect(currentPan().y > 0).to.eq(true); + }); + }); + + it('opens About modal and verify the displayed information', function() { + cy.get('[data-cy="options-menu"]').click(); + cy.get('[data-cy="about-item-menu"]').click(); + cy.get('.modal-content') + .as('aboutOverlay') + .should('be.visible'); + + //check buttons and links + cy.get('[data-cy="about-modal"]') + .should('contains.text', 'Visit the forum') + .and('contains.text', 'Report an issue') + .and('contains.text', 'https://github.com/OHIF/Viewers/'); + + //check version number + cy.get('[data-cy="about-modal"]').then($modal => { + cy.get('[data-cy="header-version-info"]').should($headerVersionNumber => { + $headerVersionNumber = $headerVersionNumber.text().substring(1); + expect($modal).to.contain($headerVersionNumber); + }); + }); + + //close modal + cy.get('.close').click(); + cy.get('@aboutOverlay').should('not.be.enabled'); + }); }); diff --git a/platform/viewer/cypress/support/commands.js b/platform/viewer/cypress/support/commands.js index fe4d95276..8a0b769e7 100644 --- a/platform/viewer/cypress/support/commands.js +++ b/platform/viewer/cypress/support/commands.js @@ -180,7 +180,7 @@ Cypress.Commands.add('waitDicomImage', (timeout = 20000) => { //Command to reset and clear all the changes made to the viewport Cypress.Commands.add('resetViewport', () => { cy.initCornerstoneToolsAliases(); - cy.get('@resetBtn').click(); + //Click on More button cy.get('@moreBtn').click(); //Verify if overlay is displayed @@ -193,6 +193,8 @@ Cypress.Commands.add('resetViewport', () => { cy.get('.tooltip-inner > :nth-child(10)') .as('clearBtn') .click(); + //Click on Reset button + cy.get('@resetBtn').click(); }); Cypress.Commands.add('imageZoomIn', () => { diff --git a/platform/viewer/src/components/Header/Header.js b/platform/viewer/src/components/Header/Header.js index 15ce39bb0..9f0d11068 100644 --- a/platform/viewer/src/components/Header/Header.js +++ b/platform/viewer/src/components/Header/Header.js @@ -105,6 +105,7 @@ class Header extends Component { className={`${ this.props.home ? 'header-versionInfoHome' : 'header-versionInfo' }`} + data-cy="header-version-info" > v{process.env.VERSION_NUMBER}