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

test: E2E Tests - Thumbnail loading (#1017)

Browse Source 
* fix: E2E Tests - Thumbnail loading

* rename data-cy attr
This commit is contained in:
Rodrigo Antinarelli 2019-10-09 13:57:24 -03:00 committed by Danny Brown
parent ff9f199850
commit 95e5e11d09
4 changed files with 111 additions and 110 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
platform/ui/src/components/studyBrowser/StudyBrowser.js
View File

@ -35,7 +35,7 @@ class StudyBrowser extends Component {
);
} else {
return (
<div className="ThumbnailEntryContainer">
<div className="ThumbnailEntryContainer" data-cy="thumbnail-list">
<ThumbnailEntry
key={thumb.displaySetInstanceUid}
{...study}

2
platform/ui/src/components/studyBrowser/ThumbnailEntryDragSource.js
View File

@ -45,7 +45,7 @@ class ThumbnailEntryDragSource extends Component {
const dropEffect = 'copy';
return connectDragSource(
<div className="ThumbnailEntryContainer">
<div className="ThumbnailEntryContainer" data-cy="thumbnail-list">
<DragPreview {...this.props} />
<ThumbnailEntry {...this.props} />
</div>,

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

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

132
platform/viewer/cypress/support/commands.js
View File

@ -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');
});
.trigger('mousedown', 'center', { which: 1 })
.trigger('mousemove', 'top', { which: 1 })
.trigger('mouseup');
});