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

test: Refactoring toolbar data-cy selectors (#1323)

Browse Source
This commit is contained in:
Mirna Silva 2019-12-20 16:07:00 -03:00 committed by Danny Brown
parent e1142910e4
commit d6d92afbda
6 changed files with 44 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
platform/ui/src/components/userPreferencesForm/UserPreferencesTabs.js
View File

@ -43,6 +43,7 @@ const renderTabsHeader = (tabs, activeTabIndex, onHeaderChanged) => {
? tabs.map((tab, index) => {
const { name, hidden = false } = tab;
const cypressSelectorId = name.toLowerCase();
const tabClass =
index === activeTabIndex ? 'nav-link active' : 'nav-link';
return !hidden ? (
@ -52,6 +53,7 @@ const renderTabsHeader = (tabs, activeTabIndex, onHeaderChanged) => {
onHeaderChanged(index);
}}
className={tabClass}
data-cy={cypressSelectorId}
>
<button>{name}</button>
</li>

8
platform/ui/src/viewer/ToolbarButton.js
View File

@ -23,8 +23,14 @@ export function ToolbarButton(props) {
}
};
const cypressSelectorId = props.label.toLowerCase();
return (
<div className={className} onClick={handleClick}>
<div
className={className}
onClick={handleClick}
data-cy={cypressSelectorId}
>
{iconProps && <Icon {...iconProps} />}
<div className="toolbar-button-label">
{t(label)}

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

@ -266,7 +266,7 @@ describe('OHIF Cornerstone Toolbar', () => {
let iconName;
//Click on one of the secondary tools from the overlay
cy.get('.tooltip-inner > :nth-child(1)')
cy.get('[data-cy="magnify"]')
.click()
.then($magnifyBtn => {
cy.wrap($magnifyBtn)
@ -407,9 +407,7 @@ describe('OHIF Cornerstone Toolbar', () => {
.as('toolbarOverlay')
.should('be.visible');
//Click on Clear button
cy.get('.tooltip-inner')
.contains('Clear')
.click();
cy.get('[data-cy="clear"]').click();
//Verify if measurements were removed from the measurements panel
cy.get('.measurementItem').should('not.exist');
@ -446,9 +444,7 @@ describe('OHIF Cornerstone Toolbar', () => {
.should('be.visible')
.then(() => {
//Click Eraser button
cy.get('.tooltip-inner')
.contains('Eraser')
.click({ force: true });
cy.get('[data-cy="eraser"]').click({ force: true });
});
//Erase measurement #1 and Verify if it was removed from the measurements panel
@ -471,9 +467,7 @@ describe('OHIF Cornerstone Toolbar', () => {
cy.get('.tooltip-toolbar-overlay').should('be.visible');
// Click on Invert button
cy.get('.tooltip-inner')
.contains('Invert')
.click();
cy.get('[data-cy="invert"]').click();
// Visual comparison
cy.screenshot('Invert tool - Should Invert Canvas');
@ -488,9 +482,7 @@ describe('OHIF Cornerstone Toolbar', () => {
.should('be.visible')
.then(() => {
//Click on Rotate button
cy.get('.tooltip-inner')
.contains('Rotate')
.click({ force: true });
cy.get('[data-cy="rotate right"]').click({ force: true });
});
// Visual comparison
@ -505,9 +497,7 @@ describe('OHIF Cornerstone Toolbar', () => {
cy.get('.tooltip-toolbar-overlay').should('be.visible');
//Click on Flip H button
cy.get('.tooltip-inner')
.contains('Flip H')
.click();
cy.get('[data-cy="flip h"]').click();
// Visual comparison
cy.screenshot('Flip H tool - Should Flip Image on Y axis');
@ -521,9 +511,7 @@ describe('OHIF Cornerstone Toolbar', () => {
cy.get('.tooltip-toolbar-overlay').should('be.visible');
//Click on Flip V button
cy.get('.tooltip-inner')
.contains('Flip V')
.click();
cy.get('[data-cy="flip v"]').click();
// Visual comparison
cy.screenshot('Flip V tool - Should Flip Image on X axis');

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

@ -27,7 +27,7 @@ describe('OHIF VTK Extension', () => {
.wait(1000); // TODO: Once issue #1167 is fixed, the wait command should be removed. (https://github.com/OHIF/Viewers/issues/1167)
//Select 2D MPR button
cy.get('.PluginSwitch > .toolbar-button').click();
cy.get('[data-cy="2d mpr"]').click();
//Wait Reformatting Images
cy.waitVTKReformatting();

39
platform/viewer/cypress/support/aliases.js
View File

@ -1,16 +1,16 @@
//Creating aliases for Cornerstone tools buttons
export function initCornerstoneToolsAliases() {
cy.get('.ToolbarRow > :nth-child(2)').as('stackScrollBtn');
cy.get('.ToolbarRow > :nth-child(3)').as('zoomBtn');
cy.get('.ToolbarRow > :nth-child(4)').as('levelsBtn');
cy.get('.ToolbarRow > :nth-child(5)').as('panBtn');
cy.get('.ToolbarRow > :nth-child(6)').as('lengthBtn');
cy.get('.ToolbarRow > :nth-child(7)').as('annotateBtn');
cy.get('.ToolbarRow > :nth-child(8)').as('angleBtn');
cy.get('.ToolbarRow > :nth-child(9)').as('resetBtn');
cy.get('.ToolbarRow > :nth-child(10)').as('cineBtn');
cy.get('.expandableToolMenu').as('moreBtn');
cy.get('.btn-group > .toolbar-button').as('layoutBtn');
cy.get('[data-cy="stack scroll"]').as('stackScrollBtn');
cy.get('[data-cy="zoom"]').as('zoomBtn');
cy.get('[data-cy="levels"]').as('levelsBtn');
cy.get('[data-cy="pan"]').as('panBtn');
cy.get('[data-cy="length"]').as('lengthBtn');
cy.get('[data-cy="annotate"]').as('annotateBtn');
cy.get('[data-cy="angle"]').as('angleBtn');
cy.get('[data-cy="reset"]').as('resetBtn');
cy.get('[data-cy="cine"]').as('cineBtn');
cy.get('[data-cy="more"]').as('moreBtn');
cy.get('[data-cy="layout"]').as('layoutBtn');
cy.get('.viewport-element').as('viewport');
}
@ -44,14 +44,13 @@ export function initRouteAliases() {
//Creating aliases for VTK tools buttons
export function initVTKToolsAliases() {
cy.get('.PluginSwitch > .toolbar-button').as('twodmprBtn');
cy.get('.ToolbarRow > :nth-child(2)').as('crosshairsBtn');
cy.get('.ToolbarRow > :nth-child(3)').as('wwwcBtn');
cy.get('.ToolbarRow > :nth-child(4)').as('rotateBtn');
cy.get('[data-cy="crosshairs"]').as('crosshairsBtn');
cy.get('[data-cy="wwwc"]').as('wwwcBtn');
cy.get('[data-cy="rotate"]').as('rotateBtn');
cy.get('.slab-thickness').as('slabSlider');
cy.get('.select-ohif').as('modeDropdown');
cy.get('.ohif-check-label').as('modeCheckbox');
cy.get('.btn-group > .toolbar-button').as('layoutBtn');
cy.get('[data-cy="layout"]').as('layoutBtn');
}
//Creating aliases for Study List page elements on Desktop experience
@ -82,12 +81,8 @@ export function initStudyListAliasesOnTablet() {
//Creating aliases for User Preferences modal
export function initPreferencesModalAliases() {
cy.get('.OHIFModal').as('preferencesModal');
cy.get('.nav-link')
.first()
.as('userPreferencesHotkeysTab');
cy.get('.nav-link')
.last()
.as('userPreferencesGeneralTab');
cy.get('[data-cy="hotkeys"]').as('userPreferencesHotkeysTab');
cy.get('[data-cy="general"]').as('userPreferencesGeneralTab');
cy.get('[data-cy="reset-default-btn"]').as('restoreBtn');
cy.get('[data-cy="cancel-btn"]').as('cancelBtn');
cy.get('[data-cy="save-btn"]').as('saveBtn');

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

@ -209,7 +209,7 @@ Cypress.Commands.add('waitDicomImage', (timeout = 20000) => {
//Command to reset and clear all the changes made to the viewport
Cypress.Commands.add('resetViewport', () => {
//Click on More button
cy.get('.expandableToolMenu')
cy.get('[data-cy="more"]')
.as('moreBtn')
.click();
//Verify if overlay is displayed
@ -219,11 +219,11 @@ Cypress.Commands.add('resetViewport', () => {
}
});
//Click on Clear button
cy.get('.tooltip-inner > :nth-child(10)')
cy.get('[data-cy="clear"]')
.as('clearBtn')
.click();
//Click on Reset button
cy.get('.ToolbarRow > :nth-child(9)')
cy.get('[data-cy="reset"]')
.as('resetBtn')
.click();
});
@ -284,9 +284,8 @@ Cypress.Commands.add('initStudyListAliasesOnTablet', () => {
Cypress.Commands.add(
'addLengthMeasurement',
(firstClick = [150, 100], secondClick = [130, 170]) => {
cy.initCornerstoneToolsAliases();
cy.get('@lengthBtn').click();
cy.addLine('@viewport', firstClick, secondClick);
cy.get('[data-cy="length"]').click();
cy.addLine('.viewport-element', firstClick, secondClick);
}
);
@ -294,9 +293,8 @@ Cypress.Commands.add(
Cypress.Commands.add(
'addAngleMeasurement',
(initPos = [180, 390], midPos = [300, 410], finalPos = [180, 450]) => {
cy.initCornerstoneToolsAliases();
cy.get('@angleBtn').click();
cy.addAngle('@viewport', initPos, midPos, finalPos);
cy.get('[data-cy="angle"]').click();
cy.addAngle('.viewport-element', initPos, midPos, finalPos);
}
);
@ -369,7 +367,7 @@ Cypress.Commands.add('percyCanvasSnapshot', (name, options = {}) => {
});
Cypress.Commands.add('setLayout', (columns = 1, rows = 1) => {
cy.get('.btn-group > .toolbar-button').click();
cy.get('[data-cy="layout"]').click();
cy.get('.layoutChooser')
.find('tr')
@ -471,12 +469,12 @@ Cypress.Commands.add(
Cypress.Commands.add('openDownloadImageModal', () => {
// Click on More button
cy.get('.expandableToolMenu')
cy.get('[data-cy="more"]')
.as('moreBtn')
.click();
// Click on Download button
cy.get('.tooltip-inner > :nth-child(13)')
cy.get('[data-cy="download"]')
.as('downloadBtn')
.click();
});