diff --git a/.circleci/config.yml b/.circleci/config.yml index 0b58d997c..aa8d46a33 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -328,6 +328,7 @@ workflows: working_directory: platform/viewer build: npx cross-env QUICK_BUILD=true yarn run build start: yarn run test:e2e:serve + spec: 'cypress/integration/common/**/*,cypress/integration/pwa/**/*' wait-on: 'http://localhost:3000' cache-key: 'yarn-packages-{{ checksum "yarn.lock" }}' no-workspace: true # Don't persist workspace @@ -352,7 +353,7 @@ workflows: working_directory: platform/viewer build: npx cross-env QUICK_BUILD=true yarn run build:package start: yarn run test:e2e:serve - spec: 'cypress/integration/common/**/*' + spec: 'cypress/integration/common/**/*,cypress/integration/script-tag/**/*' wait-on: 'http://localhost:3000' cache-key: 'yarn-packages-{{ checksum "yarn.lock" }}' no-workspace: true # Don't persist workspace @@ -458,7 +459,8 @@ workflows: working_directory: platform/viewer build: npx cross-env QUICK_BUILD=true yarn run build # start server --> verify running --> percy + chrome + cypress - command: yarn run test:e2e:dist + start: 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.json b/platform/viewer/cypress.json index a6bcfd48d..1bc15965b 100644 --- a/platform/viewer/cypress.json +++ b/platform/viewer/cypress.json @@ -5,5 +5,6 @@ "defaultCommandTimeout": 10000, "requestTimeout": 10000, "responseTimeout": 10000, - "projectId": "4oe38f" + "projectId": "4oe38f", + "video": false } 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/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/pwa/OHIFExtensionMicroscopy.spec.js b/platform/viewer/cypress/integration/pwa/OHIFExtensionMicroscopy.spec.js index e33064a1b..5e0ac5386 100644 --- a/platform/viewer/cypress/integration/pwa/OHIFExtensionMicroscopy.spec.js +++ b/platform/viewer/cypress/integration/pwa/OHIFExtensionMicroscopy.spec.js @@ -23,8 +23,5 @@ describe('OHIF Microscopy Extension', () => { cy.wait(3000); //Waiting for image to render before taking the snapshot // 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 3a7a7b7b8..9c4658a9c 100644 --- a/platform/viewer/cypress/integration/pwa/OHIFExtensionPDF.spec.js +++ b/platform/viewer/cypress/integration/pwa/OHIFExtensionPDF.spec.js @@ -23,6 +23,5 @@ 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.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 595c4eb90..bf50c8837 100644 --- a/platform/viewer/cypress/integration/pwa/OHIFExtensionVTK.spec.js +++ b/platform/viewer/cypress/integration/pwa/OHIFExtensionVTK.spec.js @@ -57,9 +57,6 @@ describe('OHIF 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', () => { @@ -75,9 +72,6 @@ describe('OHIF VTK Extension', () => { cy.screenshot( "VTK Crosshairs tool - Should display crosshairs' green lines" ); - cy.percyCanvasSnapshot( - "VTK Crosshairs tool - Should display crosshairs' green lines" - ); }); /* TODO: Non-deterministic behavior (const expectedText = 'W: 350 L: -1044';) @@ -101,7 +95,6 @@ describe('OHIF VTK Extension', () => { // Visual comparison cy.screenshot('VTK WWWC tool - Canvas should be bright'); - cy.percyCanvasSnapshot('VTK WWWC tool - Canvas should be bright'); }); */ it('checks Rotate tool', () => { @@ -117,6 +110,5 @@ describe('OHIF VTK Extension', () => { // Visual comparison cy.screenshot('VTK Rotate tool - Should rotate image'); - cy.percyCanvasSnapshot('VTK Rotate tool - Should rotate image'); }); }); 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..ade703664 --- /dev/null +++ b/platform/viewer/cypress/integration/visual-regression/PercyCheckOHIFCornerstoneToolbar.spec.js @@ -0,0 +1,84 @@ +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.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.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.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.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.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..bb93e18bf --- /dev/null +++ b/platform/viewer/cypress/integration/visual-regression/PercyCheckOHIFDownloadSnapshotFile.spec.js @@ -0,0 +1,50 @@ +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.percyCanvasSnapshot('Download Image Modal - Tablet experience'); + }); + + it('checks displayed information for Desktop experience', function() { + // Set Desktop resolution + cy.viewport(1750, 720); + // Visual comparison + 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.percyCanvasSnapshot('Download Image Modal - Show Annotations checked'); + }); +}); diff --git a/platform/viewer/cypress/integration/visual-regression/PercyCheckOHIFExtensionMicroscopy.spec.js b/platform/viewer/cypress/integration/visual-regression/PercyCheckOHIFExtensionMicroscopy.spec.js new file mode 100644 index 000000000..ac9a883f8 --- /dev/null +++ b/platform/viewer/cypress/integration/visual-regression/PercyCheckOHIFExtensionMicroscopy.spec.js @@ -0,0 +1,22 @@ +describe('Visual Regression - OHIF Microscopy Extension', () => { + before(() => { + cy.openStudyModality('SM'); + cy.expectMinimumThumbnails(6); + }); + + it('drags and drop a SM thumbnail into viewport', () => { + cy.get('[data-cy="thumbnail-list"]') + .contains('SM') + .drag('.viewport-drop-target'); + + cy.get('.DicomMicroscopyViewer') + .its('length') + .should('be.eq', 1); + + cy.wait(3000); //Waiting for image to render before taking the snapshot + // Visual comparison + cy.percyCanvasSnapshot( + 'Microscopy Extension - Should display loaded canvas' + ); + }); +}); diff --git a/platform/viewer/cypress/integration/visual-regression/PercyCheckOHIFExtensionPDF.spec.js b/platform/viewer/cypress/integration/visual-regression/PercyCheckOHIFExtensionPDF.spec.js new file mode 100644 index 000000000..7dadf35d2 --- /dev/null +++ b/platform/viewer/cypress/integration/visual-regression/PercyCheckOHIFExtensionPDF.spec.js @@ -0,0 +1,20 @@ +describe('Visual Regression - OHIF PDF Extension', () => { + before(() => { + cy.openStudy('Dummy'); + cy.expectMinimumThumbnails(6); + }); + + 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.percyCanvasSnapshot('PDF Extension - Should load PDF file'); + }); +}); diff --git a/platform/viewer/cypress/integration/visual-regression/PercyCheckOHIFExtensionVTK.spec.js b/platform/viewer/cypress/integration/visual-regression/PercyCheckOHIFExtensionVTK.spec.js new file mode 100644 index 000000000..49aa81218 --- /dev/null +++ b/platform/viewer/cypress/integration/visual-regression/PercyCheckOHIFExtensionVTK.spec.js @@ -0,0 +1,90 @@ +describe('Visual Regression - OHIF VTK Extension', () => { + before(() => { + cy.openStudy('Bellona'); + cy.waitDicomImage(); + cy.expectMinimumThumbnails(5); + + //Waiting for the desired thumbnail content to be displayed + cy.get('[data-cy="thumbnail-list"]').should($list => { + expect($list).to.contain('Chest 1x10 Soft'); + }); + + // Drag and drop thumbnail into viewport + cy.get('[data-cy="thumbnail-list"]') + .contains('Chest 1x10 Soft') + .drag('.viewport-drop-target'); + + //Select 2D MPR button + cy.get('[data-cy="2d mpr"]').click(); + + //Wait Reformatting Images + cy.waitVTKReformatting(); + }); + + beforeEach(() => { + cy.initVTKToolsAliases(); + cy.wait(100); //Wait toolbar to finish loading + }); + + afterEach(() => { + //Select Exit 2D MPR button + cy.get('[data-cy="exit 2d mpr"]').should($btn => { + expect($btn).to.be.visible; + $btn.click(); + }); + //Select 2D MPR button + cy.get('[data-cy="2d mpr"]').click(); + }); + + it('checks if VTK buttons are displayed on the toolbar', () => { + // Visual comparison + 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.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 }); + + // Visual comparison + 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.percyCanvasSnapshot('VTK Rotate tool - Should rotate image'); + }); +}); 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..dd949c240 --- /dev/null +++ b/platform/viewer/cypress/integration/visual-regression/PercyCheckOHIFRoutes.spec.js @@ -0,0 +1,23 @@ +//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.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..7c1d7413e --- /dev/null +++ b/platform/viewer/cypress/integration/visual-regression/PercyCheckOHIFStudyViewer.spec.js @@ -0,0 +1,35 @@ +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.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.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..4bf066add --- /dev/null +++ b/platform/viewer/cypress/integration/visual-regression/PercyCheckOHIFUserPreferences.spec.js @@ -0,0 +1,188 @@ +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.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.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.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.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.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.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.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.percyCanvasSnapshot( + 'Viewport Navigation - 2nd viewport inverted and rotated' + ); + // Set 1 viewport layout + cy.setLayout(1, 1); + }); + }); +}); diff --git a/platform/viewer/package.json b/platform/viewer/package.json index 32f628eee..83c31b5bf 100644 --- a/platform/viewer/package.json +++ b/platform/viewer/package.json @@ -27,7 +27,7 @@ "dev:viewer": "yarn run dev", "start": "yarn run dev", "test:e2e": "cypress open", - "test:e2e:ci": "percy exec -- cypress run --record --browser chrome", + "test:e2e:ci": "percy exec -- cypress run --config video=false --record --browser chrome --spec 'cypress/integration/visual-regression/**/*'", "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", @@ -54,6 +54,7 @@ "@ohif/i18n": "^0.52.4", "@ohif/ui": "^1.1.8", "@tanem/react-nprogress": "^1.1.25", + "@ffmpeg-installer/ffmpeg": "1.0.20", "classnames": "^2.2.6", "core-js": "^3.2.1", "cornerstone-core": "^2.2.8",