othmane/ohif-viewer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #1327 from mirnasilva/1320_ImproveVisualRegression

Browse Source 
E2E test: Percy visual regression improvements
This commit is contained in:
Mirna Silva 2020-01-10 14:30:01 -03:00 committed by GitHub
commit 342884f83e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
22 changed files with 574 additions and 82 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
.circleci/config.yml
View File

@ -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:

3
platform/viewer/cypress.json
View File

@ -5,5 +5,6 @@
"defaultCommandTimeout": 10000,
"requestTimeout": 10000,
"responseTimeout": 10000,
"projectId": "4oe38f"
"projectId": "4oe38f",
"video": false
}

2
platform/viewer/cypress/integration/common/OHIFCornerstoneHotkeys.spec.js
View File

@ -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', () => {

5
platform/viewer/cypress/integration/common/OHIFCornerstoneToolbar.spec.js
View File

@ -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');
});
});

3
platform/viewer/cypress/integration/common/OHIFDownloadSnapshotFile.spec.js
View File

@ -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')

7
platform/viewer/cypress/integration/common/OHIFRoutes.spec.js
View File

@ -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');
});
});

3
platform/viewer/cypress/integration/common/OHIFStandaloneViewer.spec.js
View File

@ -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);

2
platform/viewer/cypress/integration/common/OHIFStudyViewer.spec.js
View File

@ -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();

65
platform/viewer/cypress/integration/common/OHIFUserPreferences.spec.js
View File

@ -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);
});

3
platform/viewer/cypress/integration/pwa/OHIFExtensionMicroscopy.spec.js
View File

@ -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'
);
});
});

1
platform/viewer/cypress/integration/pwa/OHIFExtensionPDF.spec.js
View File

@ -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');
});
});

8
platform/viewer/cypress/integration/pwa/OHIFExtensionVTK.spec.js
View File

@ -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');
});
});

33
platform/viewer/cypress/integration/visual-regression/PercyCheckOHIFCornerstoneHotkeys.spec.js Normal file
View File

@ -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');
});
});

84
platform/viewer/cypress/integration/visual-regression/PercyCheckOHIFCornerstoneToolbar.spec.js Normal file
View File

@ -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');
});
});

50
platform/viewer/cypress/integration/visual-regression/PercyCheckOHIFDownloadSnapshotFile.spec.js Normal file
View File

@ -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');
});
});

22
platform/viewer/cypress/integration/visual-regression/PercyCheckOHIFExtensionMicroscopy.spec.js Normal file
View File

@ -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'
);
});
});

20
platform/viewer/cypress/integration/visual-regression/PercyCheckOHIFExtensionPDF.spec.js Normal file
View File

@ -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');
});
});

90
platform/viewer/cypress/integration/visual-regression/PercyCheckOHIFExtensionVTK.spec.js Normal file
View File

@ -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');
});
});

23
platform/viewer/cypress/integration/visual-regression/PercyCheckOHIFRoutes.spec.js Normal file
View File

@ -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');
});
});

35
platform/viewer/cypress/integration/visual-regression/PercyCheckOHIFStudyViewer.spec.js Normal file
View File

@ -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');
});
});

188
platform/viewer/cypress/integration/visual-regression/PercyCheckOHIFUserPreferences.spec.js Normal file
View File

@ -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);
});
});
});

3
platform/viewer/package.json
View File

@ -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",