From 388fe04e09ca577d9c3ca75f704c2584d7a8c488 Mon Sep 17 00:00:00 2001 From: Mirna Silva Date: Mon, 23 Dec 2019 23:10:55 -0300 Subject: [PATCH] E2E test: Percy visua regression improvements --- .../pwa/OHIFExtensionMicroscopy.spec.js | 3 - .../integration/pwa/OHIFExtensionPDF.spec.js | 1 - .../integration/pwa/OHIFExtensionVTK.spec.js | 8 -- .../PercyCheckOHIFExtensionMicroscopy.spec.js | 23 +++++ .../PercyCheckOHIFExtensionPDF.spec.js | 21 +++++ .../PercyCheckOHIFExtensionVTK.spec.js | 94 +++++++++++++++++++ 6 files changed, 138 insertions(+), 12 deletions(-) create mode 100644 platform/viewer/cypress/integration/visual-regression/PercyCheckOHIFExtensionMicroscopy.spec.js create mode 100644 platform/viewer/cypress/integration/visual-regression/PercyCheckOHIFExtensionPDF.spec.js create mode 100644 platform/viewer/cypress/integration/visual-regression/PercyCheckOHIFExtensionVTK.spec.js 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/PercyCheckOHIFExtensionMicroscopy.spec.js b/platform/viewer/cypress/integration/visual-regression/PercyCheckOHIFExtensionMicroscopy.spec.js new file mode 100644 index 000000000..5586a5d99 --- /dev/null +++ b/platform/viewer/cypress/integration/visual-regression/PercyCheckOHIFExtensionMicroscopy.spec.js @@ -0,0 +1,23 @@ +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.screenshot('Microscopy Extension - Should display loaded canvas'); + 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..da286d9b3 --- /dev/null +++ b/platform/viewer/cypress/integration/visual-regression/PercyCheckOHIFExtensionPDF.spec.js @@ -0,0 +1,21 @@ +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.screenshot('PDF Extension - Should load PDF file'); + 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..c353c02ba --- /dev/null +++ b/platform/viewer/cypress/integration/visual-regression/PercyCheckOHIFExtensionVTK.spec.js @@ -0,0 +1,94 @@ +describe('Visual Regression - OHIF VTK Extension', () => { + before(() => { + cy.openStudy('Juno'); + cy.waitDicomImage(); + cy.expectMinimumThumbnails(7); + }); + + beforeEach(() => { + //TODO: Due to percy snapshot, the images inside the viewports are being resized + //and once the browser continues the test execution, the images are not centered in the viewport. + //To fix that, we need to reload the page before each test. + //https://github.com/OHIF/Viewers/issues/1168 + cy.reload(); + + //Waiting for the desired thumbnail content to be displayed + cy.get('[data-cy="thumbnail-list"]').should($list => { + expect($list).to.contain('CT WB 5.0 B35f'); + }); + + // TODO: We shouldn't have to drag the thumbnail + // This is a known bug; 2D MPR button does not show until viewport + // has data from a drag-n-drop + // Drag and drop third thumbnail into first viewport + cy.get('[data-cy="thumbnail-list"]') + .contains('CT WB 5.0 B35f') + .drag('.viewport-drop-target'); + + //Select 2D MPR button + cy.get('[data-cy="2d mpr"]').click(); + + //Wait Reformatting Images + cy.waitVTKReformatting(); + + cy.initVTKToolsAliases(); + }); + + it('checks if VTK buttons are displayed on the toolbar', () => { + // Visual comparison + cy.screenshot('VTK initial state - Should display toolbar and 3 viewports'); + cy.percyCanvasSnapshot( + 'VTK initial state - Should display toolbar and 3 viewports' + ); + }); + + it('checks Crosshairs tool', () => { + cy.get('@crosshairsBtn').click(); + + // Click and Move the mouse inside the viewport + cy.get('[data-cy="viewport-container-0"]') + .trigger('mousedown', 'center', { which: 1 }) + .trigger('mousemove', 'top', { which: 1 }) + .trigger('mouseup'); + + // Visual comparison + cy.screenshot( + "VTK Crosshairs tool - Should display crosshairs' green lines" + ); + cy.percyCanvasSnapshot( + "VTK Crosshairs tool - Should display crosshairs' green lines" + ); + }); + + it('checks WWWC tool', () => { + cy.get('@wwwcBtn').click(); + + // Click and Move the mouse inside the viewport + cy.get('[data-cy="viewport-container-0"]') + .trigger('mousedown', 'center', { which: 1 }) + .trigger('mousemove', 'top', { which: 1 }) + .trigger('mousedown', 'center', { which: 1 }) + .trigger('mousemove', 'top', { which: 1 }) + .trigger('mouseup', { which: 1 }); + + // Visual comparison + cy.screenshot('VTK WWWC tool - Canvas should be bright'); + cy.percyCanvasSnapshot('VTK WWWC tool - Canvas should be bright'); + }); + + it('checks Rotate tool', () => { + cy.get('@rotateBtn').click(); + + // Click and Move the mouse inside the viewport + cy.get('[data-cy="viewport-container-0"]') + .trigger('mousedown', 'center', { which: 1 }) + .trigger('mousemove', 'top', { which: 1 }) + .trigger('mousedown', 'center', { which: 1 }) + .trigger('mousemove', 'top', { which: 1 }) + .trigger('mouseup', { which: 1 }); + + // Visual comparison + cy.screenshot('VTK Rotate tool - Should rotate image'); + cy.percyCanvasSnapshot('VTK Rotate tool - Should rotate image'); + }); +});