diff --git a/platform/ui/src/components/studyBrowser/StudyBrowser.js b/platform/ui/src/components/studyBrowser/StudyBrowser.js index 8b72f359f..3dad6d438 100644 --- a/platform/ui/src/components/studyBrowser/StudyBrowser.js +++ b/platform/ui/src/components/studyBrowser/StudyBrowser.js @@ -35,7 +35,7 @@ class StudyBrowser extends Component { ); } else { return ( -
+
+
, diff --git a/platform/viewer/cypress/integration/common/OHIFStudyViewer.spec.js b/platform/viewer/cypress/integration/common/OHIFStudyViewer.spec.js index ae5c45758..f5fc1c2ec 100644 --- a/platform/viewer/cypress/integration/common/OHIFStudyViewer.spec.js +++ b/platform/viewer/cypress/integration/common/OHIFStudyViewer.spec.js @@ -1,47 +1,48 @@ - describe('OHIF Study Viewer Page', () => { - before(() => { - cy.openStudy("MISTER^MR"); - }); - - it('checks if series thumbnails are being displayed', ()=> { - cy.get('.ThumbnailEntryContainer') + cy.openStudy('MISTER^MR'); + cy.waitDicomImage(); + }); + + it('checks if series thumbnails are being displayed', () => { + cy.get('[data-cy="thumbnail-list"]') .its('length') .should('be.gt', 1); - }); - - it('drags and drop a series thumbnail into viewport', () => { - cy.get('.ThumbnailEntryContainer:nth-child(2)') //element to be dragged - .drag('.cornerstone-canvas'); //dropzone element - - const overlaySeriesInformation = 'div.ViewportOverlay > div.bottom-left.overlay-element > div'; - const expectedText = 'Ser: 2Img: 1 1/13512 x 512Loc: -17.60 mm Thick: 3.00 mm'; - - cy.get(overlaySeriesInformation) - .should('have.text', expectedText); - }); - - it('checks if Series left panel can be hidden/displayed', ()=> { - const seriesButton = '.pull-left > .RoundedButtonGroup > .roundedButtonWrapper > .roundedButton'; - const leftPanel = 'section.sidepanel.from-left'; - - cy.get(seriesButton).click(); - cy.get(leftPanel).should('not.be.enabled') - - cy.get(seriesButton).click(); - cy.get(leftPanel).should('be.visible'); - }); - - it('checks if Measurements right panel can be hidden/displayed', ()=> { - const measurementsButton = '.pull-right > .RoundedButtonGroup > .roundedButtonWrapper > .roundedButton'; - const rightPanel = 'section.sidepanel.from-right'; - - cy.get(measurementsButton).click(); - cy.get(rightPanel).should('be.visible'); - - cy.get(measurementsButton).click(); - cy.get(rightPanel).should('not.be.enabled'); - }); - }); + + it('drags and drop a series thumbnail into viewport', () => { + cy.get('[data-cy="thumbnail-list"]:nth-child(2)') //element to be dragged + .drag('.cornerstone-canvas'); //dropzone element + + const overlaySeriesInformation = + 'div.ViewportOverlay > div.bottom-left.overlay-element > div'; + const expectedText = + 'Ser: 2Img: 1 1/13512 x 512Loc: -17.60 mm Thick: 3.00 mm'; + + cy.get(overlaySeriesInformation).should('have.text', expectedText); + }); + + it('checks if Series left panel can be hidden/displayed', () => { + const seriesButton = + '.pull-left > .RoundedButtonGroup > .roundedButtonWrapper > .roundedButton'; + const leftPanel = 'section.sidepanel.from-left'; + + cy.get(seriesButton).click(); + cy.get(leftPanel).should('not.be.enabled'); + + cy.get(seriesButton).click(); + cy.get(leftPanel).should('be.visible'); + }); + + it('checks if Measurements right panel can be hidden/displayed', () => { + const measurementsButton = + '.pull-right > .RoundedButtonGroup > .roundedButtonWrapper > .roundedButton'; + const rightPanel = 'section.sidepanel.from-right'; + + cy.get(measurementsButton).click(); + cy.get(rightPanel).should('be.visible'); + + cy.get(measurementsButton).click(); + cy.get(rightPanel).should('not.be.enabled'); + }); +}); diff --git a/platform/viewer/cypress/support/commands.js b/platform/viewer/cypress/support/commands.js index 30ab1b60b..c9064aa28 100644 --- a/platform/viewer/cypress/support/commands.js +++ b/platform/viewer/cypress/support/commands.js @@ -1,6 +1,6 @@ -import { DragSimulator } from "../helpers/DragSimulator.js"; -import { doesNotReject } from "assert"; -import { disconnect } from "cluster"; +import { DragSimulator } from '../helpers/DragSimulator.js'; +import { doesNotReject } from 'assert'; +import { disconnect } from 'cluster'; // *********************************************** // This example commands.js shows you how to @@ -28,21 +28,19 @@ import { disconnect } from "cluster"; // -- This is will overwrite an existing command -- // Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... }) -Cypress.Commands.add('openStudy', (patientName) => { - cy.visit('/'); - cy.get('#patientName') - .type(patientName); +Cypress.Commands.add('openStudy', patientName => { + cy.visit('/'); + cy.get('#patientName').type(patientName); - cy.get('.studylistStudy > .patientName').as('patientResult') - .then({ timeout: 5000 }, ($patientResult) => { - cy.contains(patientName) - .click(); - }) - } -); + cy.get('.studylistStudy > .patientName') + .as('patientResult') + .then({ timeout: 5000 }, $patientResult => { + cy.contains(patientName).click(); + }); +}); -Cypress.Commands.add('drag', {prevSubject: 'element',}, - (...args) => DragSimulator.simulate(...args) +Cypress.Commands.add('drag', { prevSubject: 'element' }, (...args) => + DragSimulator.simulate(...args) ); /** @@ -53,20 +51,18 @@ Cypress.Commands.add('drag', {prevSubject: 'element',}, * @param {number[]} firstClick - Click position [x, y] * @param {number[]} secondClick - Click position [x, y] */ -Cypress.Commands.add('addLine', (viewport, firstClick, secondClick) => { - - cy.get(viewport).then(($viewport) => { - const [ x1, y1 ] = firstClick; - const [ x2, y2 ] = secondClick; +Cypress.Commands.add('addLine', (viewport, firstClick, secondClick) => { + cy.get(viewport).then($viewport => { + const [x1, y1] = firstClick; + const [x2, y2] = secondClick; cy.wrap($viewport) - .click(x1, y1, {force: true}) - .trigger('mousemove', {clientX:x2, clientY:y2}) - .click(x2, y2, {force: true}) + .click(x1, y1, { force: true }) + .trigger('mousemove', { clientX: x2, clientY: y2 }) + .click(x2, y2, { force: true }); }); }); - /** * Command to perform three clicks into three different positions. Each position must be [x, y]. * The positions are considering the element as reference, therefore, top-left of the element will be (0, 0). @@ -76,62 +72,66 @@ Cypress.Commands.add('addLine', (viewport, firstClick, secondClick) => { * @param {number[]} secondClick - Click position [x, y] * @param {number[]} thirdClick - Click position [x, y] */ -Cypress.Commands.add('addAngle', (viewport, firstClick, secondClick, thirdClick) => { - - cy.get(viewport).then(($viewport) => { - const [ x1, y1 ] = firstClick; - const [ x2, y2 ] = secondClick; - const [ x3, y3 ] = thirdClick; - - cy.wrap($viewport) - .click(x1, y1, {force: true}) - .trigger('mousemove', {clientX:x2, clientY:y2}) - .click(x2, y2, {force: true}) - .trigger('mousemove', {clientX:x3, clientY:y3}) - .click(x3, y3, {force: true}) - }); -}); +Cypress.Commands.add( + 'addAngle', + (viewport, firstClick, secondClick, thirdClick) => { + cy.get(viewport).then($viewport => { + const [x1, y1] = firstClick; + const [x2, y2] = secondClick; + const [x3, y3] = thirdClick; + cy.wrap($viewport) + .click(x1, y1, { force: true }) + .trigger('mousemove', { clientX: x2, clientY: y2 }) + .click(x2, y2, { force: true }) + .trigger('mousemove', { clientX: x3, clientY: y3 }) + .click(x3, y3, { force: true }); + }); + } +); //Command to wait DICOM image to load into the viewport -Cypress.Commands.add('waitDicomImage', (timeout = 10000) => { +Cypress.Commands.add('waitDicomImage', (timeout = 20000) => { cy.window() .its('cornerstone') - .then($cornerstone => { + .then({ timeout }, $cornerstone => { return new Cypress.Promise(resolve => { - const onEvent = (renderedEvt) => { - const element = renderedEvt.detail.element; + const onEvent = renderedEvt => { + const element = renderedEvt.detail.element; - element.removeEventListener('cornerstoneimagerendered', onEvent); - $cornerstone.events.removeEventListener('cornerstoneimagerendered', onEvent); - resolve(); - } - const onEnabled = (enabledEvt) => { - const element = enabledEvt.detail.element; - - element.addEventListener('cornerstoneimagerendered', onEvent); - } - $cornerstone.events.addEventListener('cornerstoneelementenabled', onEnabled); + element.removeEventListener('cornerstoneimagerendered', onEvent); + $cornerstone.events.removeEventListener( + 'cornerstoneimagerendered', + onEvent + ); + resolve(); + }; + const onEnabled = enabledEvt => { + const element = enabledEvt.detail.element; + + element.addEventListener('cornerstoneimagerendered', onEvent); + }; + $cornerstone.events.addEventListener( + 'cornerstoneelementenabled', + onEnabled + ); + }); }); - }); - }); - //Command to reset the viewport changes throught the cornerstone method Cypress.Commands.add('resetViewport', () => { - cy.get('@resetBtn').click() + cy.get('@resetBtn').click(); }); - Cypress.Commands.add('imageZoomIn', () => { cy.get('@zoomBtn').click(); //drags the mouse inside the viewport to be able to interact with series cy.get('@viewport') - .trigger('mousedown', 'top', { which: 1 }) - .trigger('mousemove', 'center', { which: 1 }) - .trigger('mouseup'); + .trigger('mousedown', 'top', { which: 1 }) + .trigger('mousemove', 'center', { which: 1 }) + .trigger('mouseup'); }); Cypress.Commands.add('imageContrast', () => { @@ -139,7 +139,7 @@ Cypress.Commands.add('imageContrast', () => { //drags the mouse inside the viewport to be able to interact with series cy.get('@viewport') - .trigger('mousedown', 'center', { which: 1 }) - .trigger('mousemove', 'top', { which: 1 }) - .trigger('mouseup'); -}); \ No newline at end of file + .trigger('mousedown', 'center', { which: 1 }) + .trigger('mousemove', 'top', { which: 1 }) + .trigger('mouseup'); +});