From 4ee2b135a7257e4ebf4dc42ada0a59432f30c27e Mon Sep 17 00:00:00 2001 From: Mirna Silva Date: Tue, 24 Dec 2019 01:17:02 -0300 Subject: [PATCH] Added more tests and updated CI config.yml --- .circleci/config.yml | 2 + .../common/OHIFCornerstoneHotkeys.spec.js | 2 - .../common/OHIFCornerstoneToolbar.spec.js | 5 - .../common/OHIFDownloadSnapshotFile.spec.js | 3 - .../integration/common/OHIFRoutes.spec.js | 7 +- .../common/OHIFStandaloneViewer.spec.js | 3 - .../integration/common/OHIFStudyList.spec.js | 38 ++-- .../common/OHIFStudyViewer.spec.js | 2 - .../common/OHIFUserPreferences.spec.js | 65 ++---- .../PercyCheckOHIFCornerstoneHotkeys.spec.js | 33 +++ .../PercyCheckOHIFCornerstoneToolbar.spec.js | 89 ++++++++ ...PercyCheckOHIFDownloadSnapshotFile.spec.js | 53 +++++ .../PercyCheckOHIFRoutes.spec.js | 24 ++ .../PercyCheckOHIFStudyViewer.spec.js | 37 +++ .../PercyCheckOHIFUserPreferences.spec.js | 210 ++++++++++++++++++ 15 files changed, 488 insertions(+), 85 deletions(-) create mode 100644 platform/viewer/cypress/integration/visual-regression/PercyCheckOHIFCornerstoneHotkeys.spec.js create mode 100644 platform/viewer/cypress/integration/visual-regression/PercyCheckOHIFCornerstoneToolbar.spec.js create mode 100644 platform/viewer/cypress/integration/visual-regression/PercyCheckOHIFDownloadSnapshotFile.spec.js create mode 100644 platform/viewer/cypress/integration/visual-regression/PercyCheckOHIFRoutes.spec.js create mode 100644 platform/viewer/cypress/integration/visual-regression/PercyCheckOHIFStudyViewer.spec.js create mode 100644 platform/viewer/cypress/integration/visual-regression/PercyCheckOHIFUserPreferences.spec.js diff --git a/.circleci/config.yml b/.circleci/config.yml index 0b58d997c..258b6fdc8 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -382,6 +382,7 @@ workflows: build: npx cross-env QUICK_BUILD=true yarn run build # start server --> verify running --> percy + chrome + cypress command: yarn run test:e2e:dist + spec: 'cypress/integration/visual-regression/**/*' cache-key: 'yarn-packages-{{ checksum "yarn.lock" }}' no-workspace: true # Don't persist workspace post-steps: @@ -459,6 +460,7 @@ workflows: build: npx cross-env QUICK_BUILD=true yarn run build # start server --> verify running --> percy + chrome + cypress command: yarn run test:e2e:dist + spec: 'cypress/integration/visual-regression/**/*' cache-key: 'yarn-packages-{{ checksum "yarn.lock" }}' no-workspace: true # Don't persist workspace post-steps: diff --git a/platform/viewer/cypress/integration/common/OHIFCornerstoneHotkeys.spec.js b/platform/viewer/cypress/integration/common/OHIFCornerstoneHotkeys.spec.js index fc67063e7..a6ecc2725 100644 --- a/platform/viewer/cypress/integration/common/OHIFCornerstoneHotkeys.spec.js +++ b/platform/viewer/cypress/integration/common/OHIFCornerstoneHotkeys.spec.js @@ -47,7 +47,6 @@ describe('OHIF Cornerstone Hotkeys', () => { cy.get('body').type('I'); // Visual comparison 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', () => { @@ -77,7 +76,6 @@ describe('OHIF Cornerstone Hotkeys', () => { // Visual comparison to make sure the 'inverted' image was reset 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 95ffd5d43..b4c624a08 100644 --- a/platform/viewer/cypress/integration/common/OHIFCornerstoneToolbar.spec.js +++ b/platform/viewer/cypress/integration/common/OHIFCornerstoneToolbar.spec.js @@ -119,7 +119,6 @@ describe('OHIF Cornerstone Toolbar', () => { // 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', () => { @@ -471,7 +470,6 @@ describe('OHIF Cornerstone Toolbar', () => { // 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', () => { @@ -487,7 +485,6 @@ describe('OHIF Cornerstone Toolbar', () => { // 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', () => { @@ -501,7 +498,6 @@ describe('OHIF Cornerstone Toolbar', () => { // 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', () => { @@ -515,6 +511,5 @@ describe('OHIF Cornerstone Toolbar', () => { // 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/OHIFDownloadSnapshotFile.spec.js b/platform/viewer/cypress/integration/common/OHIFDownloadSnapshotFile.spec.js index af5d4b6f1..aeda93764 100644 --- a/platform/viewer/cypress/integration/common/OHIFDownloadSnapshotFile.spec.js +++ b/platform/viewer/cypress/integration/common/OHIFDownloadSnapshotFile.spec.js @@ -21,7 +21,6 @@ describe('OHIF Download Snapshot File', () => { cy.viewport(1000, 660); // Visual comparison cy.screenshot('Download Image Modal - Tablet experience'); - cy.percyCanvasSnapshot('Download Image Modal - Tablet experience'); }); it('checks displayed information for Desktop experience', function() { @@ -29,7 +28,6 @@ describe('OHIF Download Snapshot File', () => { cy.viewport(1750, 720); // Visual comparison cy.screenshot('Download Image Modal - Desktop experience'); - cy.percyCanvasSnapshot('Download Image Modal - Desktop experience'); //Check if all elements are displayed cy.get('[data-cy=modal-header]') .as('downloadImageModal') @@ -109,7 +107,6 @@ describe('OHIF Download Snapshot File', () => { cy.get('[data-cy="image-preview"]').scrollIntoView(); // Visual comparison cy.screenshot('Download Image Modal - Show Annotations checked'); - cy.percyCanvasSnapshot('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') diff --git a/platform/viewer/cypress/integration/common/OHIFRoutes.spec.js b/platform/viewer/cypress/integration/common/OHIFRoutes.spec.js index fd411f917..e51f48cc8 100644 --- a/platform/viewer/cypress/integration/common/OHIFRoutes.spec.js +++ b/platform/viewer/cypress/integration/common/OHIFRoutes.spec.js @@ -6,7 +6,9 @@ describe('OHIF Routes', function() { }); it('checks PT/CT json url study route', function() { - cy.visit('/viewer?url=https://s3.eu-central-1.amazonaws.com/ohif-viewer/JSON/PTCTStudy.json'); + cy.visit( + '/viewer?url=https://s3.eu-central-1.amazonaws.com/ohif-viewer/JSON/PTCTStudy.json' + ); cy.server(); cy.route('GET', '**/PTCTStudy/**').as('getPTCTStudy'); @@ -15,8 +17,5 @@ describe('OHIF Routes', function() { cy.get('@getPTCTStudy').should($route => { expect($route.status).to.be.eq(200); }); - - cy.screenshot(); - cy.percyCanvasSnapshot('PT/CT json study route'); }); }); diff --git a/platform/viewer/cypress/integration/common/OHIFStandaloneViewer.spec.js b/platform/viewer/cypress/integration/common/OHIFStandaloneViewer.spec.js index 32d2e2c83..d5677275e 100644 --- a/platform/viewer/cypress/integration/common/OHIFStandaloneViewer.spec.js +++ b/platform/viewer/cypress/integration/common/OHIFStandaloneViewer.spec.js @@ -4,9 +4,6 @@ describe('OHIFStandaloneViewer', () => { }); it('loads route with at least 2 rows', () => { - cy.screenshot('Study List'); - cy.percyCanvasSnapshot('Study List'); - cy.get('[data-cy="study-list-results"] tr') .its('length') .should('be.gt', 2); diff --git a/platform/viewer/cypress/integration/common/OHIFStudyList.spec.js b/platform/viewer/cypress/integration/common/OHIFStudyList.spec.js index ac80c6e20..c5ce2944f 100644 --- a/platform/viewer/cypress/integration/common/OHIFStudyList.spec.js +++ b/platform/viewer/cypress/integration/common/OHIFStudyList.spec.js @@ -1,14 +1,14 @@ //We are keeping the hardcoded results values for the study list tests //this is intended to be running in a controled docker environment with test data. -describe('OHIF Study List', function () { - context('Desktop resolution', function () { - beforeEach(function () { +describe('OHIF Study List', function() { + context('Desktop resolution', function() { + beforeEach(function() { cy.viewport(1750, 720); cy.openStudyList(); cy.initStudyListAliasesOnDesktop(); }); - it('searches Patient Name with exact string', function () { + it('searches Patient Name with exact string', function() { cy.get('@patientName').type('Juno'); //Wait result list to be displayed cy.waitStudyList(); @@ -18,7 +18,7 @@ describe('OHIF Study List', function () { }); }); - it('searches MRN with exact string', function () { + it('searches MRN with exact string', function() { cy.get('@MRN').type('ProstateX-0000'); //Wait result list to be displayed cy.waitStudyList(); @@ -28,7 +28,7 @@ describe('OHIF Study List', function () { }); }); - it('searches Accession with exact string', function () { + it('searches Accession with exact string', function() { cy.get('@accessionNumber').type('fpcben98890'); //Wait result list to be displayed cy.waitStudyList(); @@ -38,17 +38,17 @@ describe('OHIF Study List', function () { }); }); - it('searches Modality with camel case', function () { + it('searches Modality with camel case', function() { cy.get('@modalities').type('Mr'); //Wait result list to be displayed cy.waitStudyList(); cy.get('@searchResult').should($list => { - expect($list.length).to.be.eq(18); + expect($list.length).to.be.eq(17); expect($list).to.contain('MR'); }); }); - it('searches Description with exact string', function () { + it('searches Description with exact string', function() { cy.get('@studyDescription').type('CHEST'); //Wait result list to be displayed cy.waitStudyList(); @@ -58,7 +58,7 @@ describe('OHIF Study List', function () { }); }); - it('changes rows per page and checks the study count', function () { + it('changes rows per page and checks the study count', function() { //Show rows per page options const pageRows = [25, 50, 100]; @@ -100,14 +100,14 @@ describe('OHIF Study List', function () { // }); }); - context('Tablet resolution', function () { - beforeEach(function () { + context('Tablet resolution', function() { + beforeEach(function() { cy.viewport(1000, 660); cy.openStudyList(); cy.initStudyListAliasesOnTablet(); }); - it('searches Patient Name with exact string', function () { + it('searches Patient Name with exact string', function() { cy.get('@patientNameOrMRN').type('Juno'); //Wait result list to be displayed cy.waitStudyList(); @@ -117,7 +117,7 @@ describe('OHIF Study List', function () { }); }); - it('searches MRN with with exact string', function () { + it('searches MRN with with exact string', function() { cy.get('@patientNameOrMRN').type('ProstateX-0000'); //Wait result list to be displayed cy.waitStudyList(); @@ -127,17 +127,17 @@ describe('OHIF Study List', function () { }); }); - it('searches Modality with exact string', function () { + it('searches Modality with exact string', function() { cy.get('@accessionModalityDescription').type('MR'); //Wait result list to be displayed cy.waitStudyList(); cy.get('@searchResult').should($list => { - expect($list.length).to.be.eq(18); + expect($list.length).to.be.eq(17); expect($list).to.contain('MR'); }); }); - it('searches Accession with exact string', function () { + it('searches Accession with exact string', function() { cy.get('@accessionModalityDescription').type('fpcben98890'); //Wait result list to be displayed cy.waitStudyList(); @@ -147,7 +147,7 @@ describe('OHIF Study List', function () { }); }); - it('searches Description with exact string', function () { + it('searches Description with exact string', function() { cy.get('@accessionModalityDescription').type('CHEST'); //Wait result list to be displayed cy.waitStudyList(); @@ -157,7 +157,7 @@ describe('OHIF Study List', function () { }); }); - it('changes rows per page and checks the study count', function () { + it('changes rows per page and checks the study count', function() { //Show rows per page options const pageRows = [25, 50, 100]; diff --git a/platform/viewer/cypress/integration/common/OHIFStudyViewer.spec.js b/platform/viewer/cypress/integration/common/OHIFStudyViewer.spec.js index d13313afd..65f3b192b 100644 --- a/platform/viewer/cypress/integration/common/OHIFStudyViewer.spec.js +++ b/platform/viewer/cypress/integration/common/OHIFStudyViewer.spec.js @@ -12,7 +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.percyCanvasSnapshot('Series Thumbnails - Should Display Thumbnails'); cy.get('[data-cy="thumbnail-list"]') .its('length') @@ -293,7 +292,6 @@ 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('[data-cy="close-button"]').click(); diff --git a/platform/viewer/cypress/integration/common/OHIFUserPreferences.spec.js b/platform/viewer/cypress/integration/common/OHIFUserPreferences.spec.js index 413714f52..a77216e1e 100644 --- a/platform/viewer/cypress/integration/common/OHIFUserPreferences.spec.js +++ b/platform/viewer/cypress/integration/common/OHIFUserPreferences.spec.js @@ -24,10 +24,7 @@ describe('OHIF User Preferences', () => { // Visual comparison cy.screenshot( - 'User Preferences Modal - Hotkeys tab initial state in Study Viewer page' - ); - cy.percyCanvasSnapshot( - 'User Preferences Modal - Hotkeys tab initial state in Study Viewer page' + 'User Preferences Modal - Hotkeys tab initial state in Study List page' ); cy.get('[data-cy="close-button"]').click(); }); @@ -42,16 +39,10 @@ describe('OHIF User Preferences', () => { // Visual comparison cy.screenshot( - 'User Preferences Modal - General tab initial state in Study Viewer page' + 'User Preferences Modal - General tab initial state in Study List page' ); - cy.percyCanvasSnapshot( - 'User Preferences Modal - General tab initial state in Study Viewer page' - ); - // Select Spanish and Save - cy.get('#language-select').select('Spanish'); - cy.get('@saveBtn') - .scrollIntoView() - .click(); + // Set language to Spanish and save + cy.setLanguage('Spanish'); // Header should be translated to Spanish cy.get('.research-use') @@ -161,11 +152,8 @@ describe('OHIF User Preferences', () => { // Go to General tab cy.get('@userPreferencesGeneralTab').click(); - // Select Spanish and Save - cy.get('#language-select').select('Spanish'); - cy.get('@saveBtn') - .scrollIntoView() - .click(); + // Set language to Spanish + cy.setLanguage('Spanish'); // Go to Study Viewer page cy.openStudy('MISTER^MR'); @@ -191,7 +179,9 @@ describe('OHIF User Preferences', () => { .should('contain.text', 'Preferencias'); // Check if new hotkey is working on viewport - cy.get('body').type('{shift}Q', { release: false }); + cy.get('body').type('{shift}Q', { + release: false, + }); cy.get('@viewportInfoMidTop').should('contains.text', 'R'); }); }); @@ -225,10 +215,7 @@ describe('OHIF User Preferences', () => { // Visual comparison cy.screenshot( - 'User Preferences Modal - Hotkeys tab initial state in Study List page' - ); - cy.percyCanvasSnapshot( - 'User Preferences Modal - Hotkeys tab initial state in Study List page' + 'User Preferences Modal - Hotkeys tab initial state in Study Viewer page' ); cy.get('[data-cy="close-button"]').click(); //close User Preferences modal }); @@ -243,16 +230,10 @@ describe('OHIF User Preferences', () => { // Visual comparison cy.screenshot( - 'User Preferences Modal - General tab initial state in Study List page' + 'User Preferences Modal - General tab initial state in Study Viewer page' ); - cy.percyCanvasSnapshot( - 'User Preferences Modal - General tab initial state in Study List page' - ); - // Select Spanish and Save - cy.get('#language-select').select('Spanish'); - cy.get('@saveBtn') - .scrollIntoView() - .click(); + // Set language to Spanish + cy.setLanguage('Spanish'); // Header should be translated to Spanish cy.get('.research-use') @@ -310,19 +291,11 @@ describe('OHIF User Preferences', () => { // Language dropdown should be displayed cy.get('#language-select').should('be.visible'); - // Select Spanish and Save - cy.get('#language-select').select('Spanish'); - cy.get('@saveBtn') - .scrollIntoView() - .click(); + // Set language to Spanish + cy.setLanguage('Spanish'); - //Open Preferences again - cy.get('[data-cy="options-menu"]') - .scrollIntoView() - .click(); - cy.get('[data-cy="dd-item-menu"]') - .last() - .click(); + // Open User Preferences modal + cy.openPreferences(); // Go to general tab cy.get('@userPreferencesGeneralTab').click(); @@ -437,9 +410,7 @@ describe('OHIF User Preferences', () => { // Visual comparison cy.screenshot('Viewport Navigation - 2nd viewport inverted and rotated'); - cy.percyCanvasSnapshot( - 'Viewport Navigation - 2nd viewport inverted and rotated' - ); + // Set 1 viewport layout cy.setLayout(1, 1); }); diff --git a/platform/viewer/cypress/integration/visual-regression/PercyCheckOHIFCornerstoneHotkeys.spec.js b/platform/viewer/cypress/integration/visual-regression/PercyCheckOHIFCornerstoneHotkeys.spec.js new file mode 100644 index 000000000..4f6a74c3c --- /dev/null +++ b/platform/viewer/cypress/integration/visual-regression/PercyCheckOHIFCornerstoneHotkeys.spec.js @@ -0,0 +1,33 @@ +describe('Visual Regression - OHIF Cornerstone Hotkeys', () => { + before(() => { + cy.openStudy('MISTER^MR'); + cy.waitDicomImage(); + cy.expectMinimumThumbnails(3); + }); + + beforeEach(() => { + cy.initCornerstoneToolsAliases(); + cy.initCommonElementsAliases(); + cy.resetViewport(); + }); + + 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'); + cy.percyCanvasSnapshot('Hotkey I - Should Invert Image'); + }); + + it('checks if hotkey "SPACEBAR" can reset the image', () => { + // Press multiples hotkeys + cy.get('body').type('V+++I'); + + // Hotkey SPACEBAR + cy.get('body').type(' '); + + // Visual comparison to make sure the 'inverted' image was reset + cy.screenshot('Hotkey SPACEBAR - Should Reset Image'); + cy.percyCanvasSnapshot('Hotkey SPACEBAR - Should Reset Image'); + }); +}); diff --git a/platform/viewer/cypress/integration/visual-regression/PercyCheckOHIFCornerstoneToolbar.spec.js b/platform/viewer/cypress/integration/visual-regression/PercyCheckOHIFCornerstoneToolbar.spec.js new file mode 100644 index 000000000..a9f0211fa --- /dev/null +++ b/platform/viewer/cypress/integration/visual-regression/PercyCheckOHIFCornerstoneToolbar.spec.js @@ -0,0 +1,89 @@ +describe('Visual Regression - OHIF Cornerstone Toolbar', () => { + before(() => { + cy.openStudy('MISTER^MR'); + cy.waitDicomImage(); + cy.expectMinimumThumbnails(5); + }); + + beforeEach(() => { + cy.initCornerstoneToolsAliases(); + cy.initCommonElementsAliases(); + cy.resetViewport(); + }); + + it('checks if Pan tool will move the image inside the viewport', () => { + //Click on button and vefiry if icon is active on toolbar + cy.get('@panBtn') + .click() + .then($panBtn => { + cy.wrap($panBtn).should('have.class', 'active'); + }); + + cy.get('@viewport') + .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'); + cy.percyCanvasSnapshot('Pan tool moved the image inside the viewport'); + }); + + 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'); + 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('[data-cy="rotate right"]').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('[data-cy="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('[data-cy="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/visual-regression/PercyCheckOHIFDownloadSnapshotFile.spec.js b/platform/viewer/cypress/integration/visual-regression/PercyCheckOHIFDownloadSnapshotFile.spec.js new file mode 100644 index 000000000..dee9cc566 --- /dev/null +++ b/platform/viewer/cypress/integration/visual-regression/PercyCheckOHIFDownloadSnapshotFile.spec.js @@ -0,0 +1,53 @@ +describe('Visual Regression - OHIF Download Snapshot File', () => { + before(() => { + cy.openStudy('MISTER^MR'); + cy.waitDicomImage(); + cy.expectMinimumThumbnails(5); + }); + + beforeEach(() => { + cy.openDownloadImageModal(); + }); + + afterEach(() => { + // Close modal + cy.get('[data-cy="close-button"]') + .scrollIntoView() + .click(); + }); + + it('checks displayed information for Tablet experience', function() { + // Set Tablet resolution + cy.viewport(1000, 660); + // Visual comparison + cy.screenshot('Download Image Modal - Tablet experience'); + cy.percyCanvasSnapshot('Download Image Modal - Tablet experience'); + }); + + it('checks displayed information for Desktop experience', function() { + // Set Desktop resolution + cy.viewport(1750, 720); + // Visual comparison + cy.screenshot('Download Image Modal - Desktop experience'); + cy.percyCanvasSnapshot('Download Image Modal - Desktop experience'); + }); + + it('checks if "Show Annotations" checkbox will display annotations', function() { + // Close modal that is initially opened + cy.get('[data-cy="close-button"]').click(); + + // Add measurements in the viewport + cy.addLengthMeasurement(); + cy.addAngleMeasurement(); + + // Open Modal + cy.openDownloadImageModal(); + // Select "Show Annotations" option + 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'); + cy.percyCanvasSnapshot('Download Image Modal - Show Annotations checked'); + }); +}); diff --git a/platform/viewer/cypress/integration/visual-regression/PercyCheckOHIFRoutes.spec.js b/platform/viewer/cypress/integration/visual-regression/PercyCheckOHIFRoutes.spec.js new file mode 100644 index 000000000..14f901bdd --- /dev/null +++ b/platform/viewer/cypress/integration/visual-regression/PercyCheckOHIFRoutes.spec.js @@ -0,0 +1,24 @@ +//We excluded the tests for '**/studies/**' because the bulk/all of our other study/viewer tests use this route + +describe('Visual Regression - OHIF Routes', function() { + beforeEach(function() { + cy.openStudyList(); + }); + + it('checks PT/CT json url study route', function() { + cy.visit( + '/viewer?url=https://s3.eu-central-1.amazonaws.com/ohif-viewer/JSON/PTCTStudy.json' + ); + + cy.server(); + cy.route('GET', '**/PTCTStudy/**').as('getPTCTStudy'); + + cy.wait('@getPTCTStudy.all'); + cy.get('@getPTCTStudy').should($route => { + expect($route.status).to.be.eq(200); + }); + + cy.screenshot('PTCT json study route'); + cy.percyCanvasSnapshot('PT/CT json study route'); + }); +}); diff --git a/platform/viewer/cypress/integration/visual-regression/PercyCheckOHIFStudyViewer.spec.js b/platform/viewer/cypress/integration/visual-regression/PercyCheckOHIFStudyViewer.spec.js new file mode 100644 index 000000000..c1e4b5b1d --- /dev/null +++ b/platform/viewer/cypress/integration/visual-regression/PercyCheckOHIFStudyViewer.spec.js @@ -0,0 +1,37 @@ +describe('Visual Regression - OHIF Study Viewer Page', function() { + before(function() { + cy.openStudy('MISTER^MR'); + cy.waitDicomImage(); + cy.expectMinimumThumbnails(6); + }); + + beforeEach(function() { + cy.initCommonElementsAliases(); + cy.resetViewport(); + }); + + it('checks if series thumbnails are being displayed', function() { + cy.screenshot('Series Thumbnails - Should Display Thumbnails'); + cy.percyCanvasSnapshot('Series Thumbnails - Should Display Thumbnails'); + }); + + it('opens About modal and verify the displayed information', function() { + cy.get('[data-cy="options-menu"]') + .first() + .click(); + cy.get('[data-cy="dd-item-menu"]') + .first() + .click(); + cy.get('[data-cy="about-modal"]') + .as('aboutOverlay') + .should('be.visible'); + + // Visual comparison + cy.screenshot('About modal - Should display modal'); + cy.percyCanvasSnapshot('About modal - Should display modal'); + + //close modal + cy.get('[data-cy="close-button"]').click(); + cy.get('@aboutOverlay').should('not.be.enabled'); + }); +}); diff --git a/platform/viewer/cypress/integration/visual-regression/PercyCheckOHIFUserPreferences.spec.js b/platform/viewer/cypress/integration/visual-regression/PercyCheckOHIFUserPreferences.spec.js new file mode 100644 index 000000000..68e43228d --- /dev/null +++ b/platform/viewer/cypress/integration/visual-regression/PercyCheckOHIFUserPreferences.spec.js @@ -0,0 +1,210 @@ +describe('Visual Regression - OHIF User Preferences', () => { + context('Study List Page', function() { + before(() => { + cy.visit('/'); + }); + + beforeEach(() => { + // Open User Preferences modal + cy.openPreferences(); + cy.initPreferencesModalAliases(); + }); + + it('checks displayed information on User Preferences modal', function() { + cy.get('@restoreBtn').scrollIntoView(); + + // Visual comparison + cy.screenshot( + 'User Preferences Modal - Hotkeys tab initial state in StudyList page' + ); + cy.percyCanvasSnapshot( + 'User Preferences Modal - Hotkeys tab initial state in StudyList page' + ); + cy.get('[data-cy="close-button"]').click(); + }); + + it('checks translation by selecting Spanish language', function() { + cy.get('@userPreferencesGeneralTab') + .click() + .should('have.class', 'active'); + + // Language dropdown should be displayed + cy.get('#language-select').should('be.visible'); + + // Visual comparison + cy.screenshot( + 'User Preferences Modal - General tab initial state in StudyList page' + ); + cy.percyCanvasSnapshot( + 'User Preferences Modal - General tab initial state in StudyList page' + ); + // Set language to Spanish and save + cy.setLanguage('Spanish'); + + // Options menu should be translated + cy.get('[data-cy="options-menu"]') + .should('have.text', 'Opciones') + .click(); + + // Visual comparison + cy.screenshot( + 'User Preferences Modal - Spanish selected in StudyList page' + ); + cy.percyCanvasSnapshot( + 'User Preferences Modal - Spanish selected in StudyList page' + ); + + // Close Options menu + cy.get('[data-cy="options-menu"]').click(); + }); + }); + + context('Study Viewer Page', function() { + before(() => { + cy.openStudy('MISTER^MR'); + cy.expectMinimumThumbnails(5); + }); + + beforeEach(() => { + cy.initCommonElementsAliases(); + cy.resetViewport(); + + cy.resetUserHoktkeyPreferences(); + // Open User Preferences modal + cy.openPreferences(); + }); + + it('checks displayed information on User Preferences modal', function() { + cy.get('@restoreBtn').scrollIntoView(); + + // Visual comparison + cy.screenshot( + 'User Preferences Modal - Hotkeys tab initial state in StudyViewer page' + ); + cy.percyCanvasSnapshot( + 'User Preferences Modal - Hotkeys tab initial state in StudyViewer page' + ); + cy.get('[data-cy="close-button"]').click(); //close User Preferences modal + }); + + it('checks translation by selecting Spanish language', function() { + cy.get('@userPreferencesGeneralTab') + .click() + .should('have.class', 'active'); + + // Visual comparison + cy.screenshot( + 'User Preferences Modal - General tab initial state in StudyViewer page' + ); + cy.percyCanvasSnapshot( + 'User Preferences Modal - General tab initial state in StudyViewer page' + ); + // Set language to Spanish + cy.setLanguage('Spanish'); + + // Options menu should be translated + cy.get('[data-cy="options-menu"]') + .should('have.text', 'Opciones') + .click(); + + // Visual comparison + cy.screenshot( + 'User Preferences Modal - Spanish selected in StudyViewer page' + ); + cy.percyCanvasSnapshot( + 'User Preferences Modal - Spanish selected in StudyViewer page' + ); + + // Close Options menu + cy.get('[data-cy="options-menu"]').click(); + }); + + it('checks if user can restore to default the language selection and application will be in English', function() { + cy.get('@userPreferencesGeneralTab') + .click() + .should('have.class', 'active'); + + // Set language to Spanish + cy.setLanguage('Spanish'); + + // Open User Preferences modal + cy.openPreferences(); + + // Go to general tab + cy.get('@userPreferencesGeneralTab').click(); + + cy.get('@restoreBtn') + .scrollIntoView() + .click(); + + cy.get('@saveBtn') + .scrollIntoView() + .click(); + + // Options menu should be in English + cy.get('[data-cy="options-menu"]') + .should('have.text', 'Options') + .click(); + + // Visual comparison + cy.screenshot( + 'User Preferences Modal - English selected in StudyViewer page' + ); + cy.percyCanvasSnapshot( + 'User Preferences Modal - English selected in StudyViewer page' + ); + + // Close Options menu + cy.get('[data-cy="options-menu"]').click(); + }); + + it('checks new hotkeys for "Next" and "Previous" Image on Viewport', function() { + // Go go hotkeys tab + cy.get('@userPreferencesHotkeysTab') + .click() + .should('have.class', 'active'); + + // Set new hotkey for 'Next Image Viewport' function + cy.setNewHotkeyShortcutOnUserPreferencesModal( + 'Next Image Viewport', + '{shift}{rightarrow}' + ); + + // Set new hotkey for 'Previous Image Viewport' function + cy.setNewHotkeyShortcutOnUserPreferencesModal( + 'Previous Image Viewport', + '{shift}{leftarrow}' + ); + + // Save new hotkeys + cy.get('@saveBtn') + .scrollIntoView() + .click(); + + // Set 3 viewports layout + cy.setLayout(3, 1); + cy.waitViewportImageLoading(); + + // Rotate Right and Invert colors on Viewport #1 + cy.get('body').type('RI'); + + //Move to Next Viewport + cy.get('body').type('{shift}{rightarrow}'); + // Rotate Left and Invert colors on Viewport #2 + cy.get('body').type('LI'); + + //Move to Previous Viewport + cy.get('body').type('{shift}{leftarrow}'); + // Reset viewport #1 with spacebar hotkey + cy.get('body').type(' '); + + // Visual comparison + cy.screenshot('Viewport Navigation - 2nd viewport inverted and rotated'); + cy.percyCanvasSnapshot( + 'Viewport Navigation - 2nd viewport inverted and rotated' + ); + // Set 1 viewport layout + cy.setLayout(1, 1); + }); + }); +});