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 { } else {
return ( return (
<div className="ThumbnailEntryContainer"> <div className="ThumbnailEntryContainer" data-cy="thumbnail-list">
<ThumbnailEntry <ThumbnailEntry
key={thumb.displaySetInstanceUid} key={thumb.displaySetInstanceUid}
{...study} {...study}

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

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

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

@ -1,40 +1,42 @@
describe('OHIF Study Viewer Page', () => { describe('OHIF Study Viewer Page', () => {
before(() => { before(() => {
cy.openStudy("MISTER^MR"); cy.openStudy('MISTER^MR');
cy.waitDicomImage();
}); });
it('checks if series thumbnails are being displayed', ()=> { it('checks if series thumbnails are being displayed', () => {
cy.get('.ThumbnailEntryContainer') cy.get('[data-cy="thumbnail-list"]')
.its('length') .its('length')
.should('be.gt', 1); .should('be.gt', 1);
}); });
it('drags and drop a series thumbnail into viewport', () => { it('drags and drop a series thumbnail into viewport', () => {
cy.get('.ThumbnailEntryContainer:nth-child(2)') //element to be dragged cy.get('[data-cy="thumbnail-list"]:nth-child(2)') //element to be dragged
.drag('.cornerstone-canvas'); //dropzone element .drag('.cornerstone-canvas'); //dropzone element
const overlaySeriesInformation = 'div.ViewportOverlay > div.bottom-left.overlay-element > div'; const overlaySeriesInformation =
const expectedText = 'Ser: 2Img: 1 1/13512 x 512Loc: -17.60 mm Thick: 3.00 mm'; '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) cy.get(overlaySeriesInformation).should('have.text', expectedText);
.should('have.text', expectedText);
}); });
it('checks if Series left panel can be hidden/displayed', ()=> { it('checks if Series left panel can be hidden/displayed', () => {
const seriesButton = '.pull-left > .RoundedButtonGroup > .roundedButtonWrapper > .roundedButton'; const seriesButton =
'.pull-left > .RoundedButtonGroup > .roundedButtonWrapper > .roundedButton';
const leftPanel = 'section.sidepanel.from-left'; const leftPanel = 'section.sidepanel.from-left';
cy.get(seriesButton).click(); cy.get(seriesButton).click();
cy.get(leftPanel).should('not.be.enabled') cy.get(leftPanel).should('not.be.enabled');
cy.get(seriesButton).click(); cy.get(seriesButton).click();
cy.get(leftPanel).should('be.visible'); cy.get(leftPanel).should('be.visible');
}); });
it('checks if Measurements right panel can be hidden/displayed', ()=> { it('checks if Measurements right panel can be hidden/displayed', () => {
const measurementsButton = '.pull-right > .RoundedButtonGroup > .roundedButtonWrapper > .roundedButton'; const measurementsButton =
'.pull-right > .RoundedButtonGroup > .roundedButtonWrapper > .roundedButton';
const rightPanel = 'section.sidepanel.from-right'; const rightPanel = 'section.sidepanel.from-right';
cy.get(measurementsButton).click(); cy.get(measurementsButton).click();
@ -43,5 +45,4 @@ describe('OHIF Study Viewer Page', () => {
cy.get(measurementsButton).click(); cy.get(measurementsButton).click();
cy.get(rightPanel).should('not.be.enabled'); cy.get(rightPanel).should('not.be.enabled');
}); });
});
});

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

@ -1,6 +1,6 @@
import { DragSimulator } from "../helpers/DragSimulator.js"; import { DragSimulator } from '../helpers/DragSimulator.js';
import { doesNotReject } from "assert"; import { doesNotReject } from 'assert';
import { disconnect } from "cluster"; import { disconnect } from 'cluster';
// *********************************************** // ***********************************************
// This example commands.js shows you how to // This example commands.js shows you how to
@ -28,21 +28,19 @@ import { disconnect } from "cluster";
// -- This is will overwrite an existing command -- // -- This is will overwrite an existing command --
// Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... }) // Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... })
Cypress.Commands.add('openStudy', (patientName) => { Cypress.Commands.add('openStudy', patientName => {
cy.visit('/'); cy.visit('/');
cy.get('#patientName') cy.get('#patientName').type(patientName);
.type(patientName);
cy.get('.studylistStudy > .patientName').as('patientResult') cy.get('.studylistStudy > .patientName')
.then({ timeout: 5000 }, ($patientResult) => { .as('patientResult')
cy.contains(patientName) .then({ timeout: 5000 }, $patientResult => {
.click(); cy.contains(patientName).click();
}) });
} });
);
Cypress.Commands.add('drag', {prevSubject: 'element',}, Cypress.Commands.add('drag', { prevSubject: 'element' }, (...args) =>
(...args) => DragSimulator.simulate(...args) DragSimulator.simulate(...args)
); );
/** /**
@ -54,19 +52,17 @@ Cypress.Commands.add('drag', {prevSubject: 'element',},
* @param {number[]} secondClick - Click position [x, y] * @param {number[]} secondClick - Click position [x, y]
*/ */
Cypress.Commands.add('addLine', (viewport, firstClick, secondClick) => { Cypress.Commands.add('addLine', (viewport, firstClick, secondClick) => {
cy.get(viewport).then($viewport => {
cy.get(viewport).then(($viewport) => { const [x1, y1] = firstClick;
const [ x1, y1 ] = firstClick; const [x2, y2] = secondClick;
const [ x2, y2 ] = secondClick;
cy.wrap($viewport) cy.wrap($viewport)
.click(x1, y1, {force: true}) .click(x1, y1, { force: true })
.trigger('mousemove', {clientX:x2, clientY:y2}) .trigger('mousemove', { clientX: x2, clientY: y2 })
.click(x2, y2, {force: true}) .click(x2, y2, { force: true });
}); });
}); });
/** /**
* Command to perform three clicks into three different positions. Each position must be [x, y]. * 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). * The positions are considering the element as reference, therefore, top-left of the element will be (0, 0).
@ -76,54 +72,58 @@ Cypress.Commands.add('addLine', (viewport, firstClick, secondClick) => {
* @param {number[]} secondClick - Click position [x, y] * @param {number[]} secondClick - Click position [x, y]
* @param {number[]} thirdClick - Click position [x, y] * @param {number[]} thirdClick - Click position [x, y]
*/ */
Cypress.Commands.add('addAngle', (viewport, firstClick, secondClick, thirdClick) => { Cypress.Commands.add(
'addAngle',
cy.get(viewport).then(($viewport) => { (viewport, firstClick, secondClick, thirdClick) => {
const [ x1, y1 ] = firstClick; cy.get(viewport).then($viewport => {
const [ x2, y2 ] = secondClick; const [x1, y1] = firstClick;
const [ x3, y3 ] = thirdClick; const [x2, y2] = secondClick;
const [x3, y3] = thirdClick;
cy.wrap($viewport) cy.wrap($viewport)
.click(x1, y1, {force: true}) .click(x1, y1, { force: true })
.trigger('mousemove', {clientX:x2, clientY:y2}) .trigger('mousemove', { clientX: x2, clientY: y2 })
.click(x2, y2, {force: true}) .click(x2, y2, { force: true })
.trigger('mousemove', {clientX:x3, clientY:y3}) .trigger('mousemove', { clientX: x3, clientY: y3 })
.click(x3, y3, {force: true}) .click(x3, y3, { force: true });
}); });
}); }
);
//Command to wait DICOM image to load into the viewport //Command to wait DICOM image to load into the viewport
Cypress.Commands.add('waitDicomImage', (timeout = 10000) => { Cypress.Commands.add('waitDicomImage', (timeout = 20000) => {
cy.window() cy.window()
.its('cornerstone') .its('cornerstone')
.then($cornerstone => { .then({ timeout }, $cornerstone => {
return new Cypress.Promise(resolve => { return new Cypress.Promise(resolve => {
const onEvent = (renderedEvt) => { const onEvent = renderedEvt => {
const element = renderedEvt.detail.element; const element = renderedEvt.detail.element;
element.removeEventListener('cornerstoneimagerendered', onEvent); element.removeEventListener('cornerstoneimagerendered', onEvent);
$cornerstone.events.removeEventListener('cornerstoneimagerendered', onEvent); $cornerstone.events.removeEventListener(
'cornerstoneimagerendered',
onEvent
);
resolve(); resolve();
} };
const onEnabled = (enabledEvt) => { const onEnabled = enabledEvt => {
const element = enabledEvt.detail.element; const element = enabledEvt.detail.element;
element.addEventListener('cornerstoneimagerendered', onEvent); element.addEventListener('cornerstoneimagerendered', onEvent);
} };
$cornerstone.events.addEventListener('cornerstoneelementenabled', onEnabled); $cornerstone.events.addEventListener(
'cornerstoneelementenabled',
onEnabled
);
}); });
}); });
}); });
//Command to reset the viewport changes throught the cornerstone method //Command to reset the viewport changes throught the cornerstone method
Cypress.Commands.add('resetViewport', () => { Cypress.Commands.add('resetViewport', () => {
cy.get('@resetBtn').click() cy.get('@resetBtn').click();
}); });
Cypress.Commands.add('imageZoomIn', () => { Cypress.Commands.add('imageZoomIn', () => {
cy.get('@zoomBtn').click(); cy.get('@zoomBtn').click();