test: Test Cases for User Preferences (#1195)

* Test Cases for User Preferences

* CI fix

* Fix for CI

* Fix based on PR review comments

* Fix for script-tag issue on CI

* Fix for new selectors on Preferences Modal and CI failure

platform/ui/src/components/userPreferencesForm/UserPreferencesForm.js

@@ -67,15 +67,24 @@ class UserPreferencesForm extends Component {
         <div className="footer">
           <button
             className="btn btn-danger pull-left"
+            data-cy="reset-default-btn"
             onClick={this.props.onResetToDefaults}
           >
             {this.props.t('Reset to Defaults')}
           </button>
           <div>
-            <div onClick={this.props.onClose} className="btn btn-default">
+            <div
+              onClick={this.props.onClose}
+              className="btn btn-default"
+              data-cy="cancel-btn"
+            >
               {this.props.t('Cancel')}
             </div>
-            <button className="btn btn-primary" onClick={this.save}>
+            <button
+              className="btn btn-primary"
+              data-cy="save-btn"
+              onClick={this.save}
+            >
               {this.props.t('Save')}
             </button>
           </div>

platform/viewer/cypress/integration/common/OHIFCornerstoneHotkeys.spec.js

@@ -85,6 +85,7 @@ describe('OHIF Cornerstone Hotkeys', () => {
     cy.get('@layoutBtn').click();
     //Select 3 viewports
     cy.get('tbody > :nth-child(1) > :nth-child(3)').click();
+    cy.waitViewportImageLoading();
 
     // Press multiples hotkeys on viewport #1
     cy.get('body').type('VL+++I');

platform/viewer/cypress/integration/common/OHIFUserPreferences.spec.js

@@ -0,0 +1,601 @@
+describe('OHIF User Preferences', () => {
+  context('Study List Page', function() {
+    before(() => {
+      cy.visit('/');
+    });
+
+    beforeEach(() => {
+      // Open User Preferences modal
+      cy.openPreferences();
+      cy.initPreferencesModalAliases();
+    });
+
+    it('checks displayed information on User Preferences modal', function() {
+      cy.get('@preferencesModal').should('contain.text', 'User Preferences');
+      cy.get('@userPreferencesHotkeysTab')
+        .should('have.text', 'Hotkeys')
+        .and('have.class', 'active');
+      cy.get('@userPreferencesGeneralTab').should('have.text', 'General');
+      cy.get('@restoreBtn')
+        .scrollIntoView()
+        .should('have.text', 'Reset to Defaults');
+      cy.get('@cancelBtn').should('have.text', 'Cancel');
+      cy.get('@saveBtn').should('have.text', 'Save');
+
+      // Visual comparison
+      cy.screenshot(
+        'User Preferences Modal - Hotkeys tab initial state in Study Viewer page'
+      );
+      cy.percyCanvasSnapshot(
+        'User Preferences Modal - Hotkeys tab initial state in Study Viewer page'
+      );
+      cy.get('[data-cy="close-button"]').click();
+    });
+
+    it('checks translation by selecting Spanish language', function() {
+      cy.get('@userPreferencesGeneralTab')
+        .click()
+        .should('have.class', 'active');
+
+      // Language dropdown should be displayed
+      cy.get('#language-select').should('be.visible');
+
+      // Visual comparison
+      cy.screenshot(
+        'User Preferences Modal - General tab initial state in Study Viewer page'
+      );
+      cy.percyCanvasSnapshot(
+        'User Preferences Modal - General tab initial state in Study Viewer page'
+      );
+      // Select Spanish and Save
+      cy.get('#language-select').select('Spanish');
+      cy.get('@saveBtn')
+        .scrollIntoView()
+        .click();
+
+      // Header should be translated to Spanish
+      cy.get('.research-use')
+        .scrollIntoView()
+        .should('have.text', 'SOLO USO PARA INVESTIGACIÓN');
+
+      // Options menu should be translated
+      cy.get('[data-cy="options-menu"]').should('have.text', 'Opciones');
+
+      //TODO: the following code is blocked by issue 1193: https://github.com/OHIF/Viewers/issues/1193
+      //Once the issue is fixed, the following code should be uncommented
+      // cy.get('[data-cy="about-item-menu"]')
+      //   .first()
+      //   .should('have.text', 'Acerca de');
+      // cy.get('[data-cy="about-item-menu"]')
+      //   .last()
+      //   .should('have.text', 'Preferencias');
+    });
+
+    it('checks if user can cancel the language selection and application will be in English', function() {
+      cy.get('@userPreferencesGeneralTab')
+        .click()
+        .should('have.class', 'active');
+
+      // Language dropdown should be displayed
+      cy.get('#language-select').should('be.visible');
+
+      // Select Spanish and Cancel
+      cy.get('#language-select').select('Spanish');
+      cy.get('@cancelBtn')
+        .scrollIntoView()
+        .click();
+
+      // TODO: the following code is blocked by issue 1193: https://github.com/OHIF/Viewers/issues/1193
+      // Once the issue is fixed, the following code should be uncommented
+      // // Header should be kept in English
+      // cy.get('.research-use')
+      //   .scrollIntoView()
+      //   .should('have.text', 'INVESTIGATIONAL USE ONLY');
+      //
+      // // Options menu should be translated
+      // cy.get('[data-cy="options-menu"]').should('have.text', 'Options');
+      //
+      // cy.get('[data-cy="about-item-menu"]')
+      //   .first()
+      //   .should('have.text', 'About');
+      // cy.get('[data-cy="about-item-menu"]')
+      //   .last()
+      //   .should('have.text', 'Preferences');
+    });
+
+    // TODO: the following code is blocked by issue 1193: https://github.com/OHIF/Viewers/issues/1193
+    // Once the issue is fixed, the following code should be uncommented
+    // it('checks if user can restore to default the language selection and application will be in English', function() {
+    //   cy.get('@userPreferencesGeneralTab')
+    //     .click()
+    //     .should('have.class', 'active');
+
+    //   // Language dropdown should be displayed
+    //   cy.get('#language-select').should('be.visible');
+
+    //   // Select Spanish and Save
+    //   cy.get('#language-select').select('Spanish');
+    //   cy.get('@saveBtn')
+    //     .scrollIntoView()
+    //     .click();
+
+    //   //Open Preferences again
+    //   cy.openPreferences();
+
+    //   // Go to general tab
+    //   cy.get('@userPreferencesGeneralTab').click();
+
+    //   cy.get('@restoreBtn')
+    //     .scrollIntoView()
+    //     .click();
+
+    // Header should be in English
+    // cy.get('.research-use')
+    //   .scrollIntoView()
+    //   .should('have.text', 'INVESTIGATIONAL USE ONLY');
+    //
+    // Options menu should be in English
+    //   cy.get('[data-cy="options-menu"]').should('have.text', 'Options');
+    //   cy.get('[data-cy="about-item-menu"]')
+    //     .first()
+    //     .should('have.text', 'About');
+    //   cy.get('[data-cy="about-item-menu"]')
+    //     .last()
+    //     .should('have.text', 'Preferences');
+    //  });
+
+    it('checks if Preferences set in Study List Page will be consistent on Viewer Page', function() {
+      // Go go hotkeys tab
+      cy.get('@userPreferencesHotkeysTab')
+        .click()
+        .should('have.class', 'active');
+
+      // Set new hotkey for 'Rotate Right' function
+      cy.setNewHotkeyShortcutOnUserPreferencesModal('Rotate Right', '{shift}Q');
+      // Save new hotkey
+      cy.get('@saveBtn')
+        .scrollIntoView()
+        .click();
+
+      // Open User Preferences modal again
+      cy.openPreferences();
+
+      // Go to General tab
+      cy.get('@userPreferencesGeneralTab').click();
+
+      // Select Spanish and Save
+      cy.get('#language-select').select('Spanish');
+      cy.get('@saveBtn')
+        .scrollIntoView()
+        .click();
+
+      // Go to Study Viewer page
+      cy.openStudy('MISTER^MR');
+      cy.waitDicomImage();
+      cy.expectMinimumThumbnails(5);
+      cy.initCommonElementsAliases();
+
+      // Check if application is in Spanish
+      // Header should be translated to Spanish
+      cy.get('.research-use')
+        .scrollIntoView()
+        .should('have.text', 'SOLO USO PARA INVESTIGACIÓN');
+
+      // Options menu should be translated
+      cy.get('[data-cy="options-menu"]')
+        .should('have.text', 'Opciones')
+        .click();
+      cy.get('[data-cy="about-item-menu"]')
+        .first()
+        .should('contain.text', 'Acerca de');
+      cy.get('[data-cy="options-menu"]').click(); //Close Options overlay
+
+      //TODO: the following code is blocked by issue 1193: https://github.com/OHIF/Viewers/issues/1193
+      //Once the issue is fixed, the following code should be uncommented
+      // cy.get('[data-cy="about-item-menu"]')
+      //   .last()
+      //   .should('have.text', 'Preferencias');
+
+      // Check if new hotkey is working on viewport
+      cy.get('body').type('{shift}Q', { release: false });
+      cy.get('@viewportInfoMidTop').should('contains.text', 'R');
+    });
+  });
+
+  context('Study Viewer Page', function() {
+    before(() => {
+      cy.openStudy('MISTER^MR');
+      cy.expectMinimumThumbnails(5);
+    });
+
+    beforeEach(() => {
+      cy.initCommonElementsAliases();
+      cy.resetViewport();
+
+      cy.resetUserHoktkeyPreferences();
+      // Open User Preferences modal
+      cy.openPreferences();
+    });
+
+    it('checks displayed information on User Preferences modal', function() {
+      cy.get('@preferencesModal').should('contain.text', 'User Preferences');
+      cy.get('@userPreferencesHotkeysTab')
+        .should('have.text', 'Hotkeys')
+        .and('have.class', 'active');
+      cy.get('@userPreferencesGeneralTab').should('have.text', 'General');
+      cy.get('@restoreBtn')
+        .scrollIntoView()
+        .should('have.text', 'Reset to Defaults');
+      cy.get('@cancelBtn').should('have.text', 'Cancel');
+      cy.get('@saveBtn').should('have.text', 'Save');
+
+      // Visual comparison
+      cy.screenshot(
+        'User Preferences Modal - Hotkeys tab initial state in Study List page'
+      );
+      cy.percyCanvasSnapshot(
+        'User Preferences Modal - Hotkeys tab initial state in Study List page'
+      );
+      cy.get('[data-cy="close-button"]').click(); //close User Preferences modal
+    });
+
+    it('checks translation by selecting Spanish language', function() {
+      cy.get('@userPreferencesGeneralTab')
+        .click()
+        .should('have.class', 'active');
+
+      // Language dropdown should be displayed
+      cy.get('#language-select').should('be.visible');
+
+      // Visual comparison
+      cy.screenshot(
+        'User Preferences Modal - General tab initial state in Study List page'
+      );
+      cy.percyCanvasSnapshot(
+        'User Preferences Modal - General tab initial state in Study List page'
+      );
+      // Select Spanish and Save
+      cy.get('#language-select').select('Spanish');
+      cy.get('@saveBtn')
+        .scrollIntoView()
+        .click();
+
+      // Header should be translated to Spanish
+      cy.get('.research-use')
+        .scrollIntoView()
+        .should('have.text', 'SOLO USO PARA INVESTIGACIÓN');
+
+      // Options menu should be translated
+      cy.get('[data-cy="options-menu"]').should('have.text', 'Opciones');
+
+      //TODO: the following code is blocked by issue 1193: https://github.com/OHIF/Viewers/issues/1193
+      //Once the issue is fixed, the following code should be uncommented
+      // cy.get('[data-cy="about-item-menu"]')
+      //   .first()
+      //   .should('have.text', 'Acerca de');
+      // cy.get('[data-cy="about-item-menu"]')
+      //   .last()
+      //   .should('have.text', 'Preferencias');
+    });
+
+    it('checks if user can cancel the language selection and application will be in English', function() {
+      cy.get('@userPreferencesGeneralTab')
+        .click()
+        .should('have.class', 'active');
+
+      // Language dropdown should be displayed
+      cy.get('#language-select').should('be.visible');
+
+      // Select Spanish and Cancel
+      cy.get('#language-select').select('Spanish');
+      cy.get('@cancelBtn')
+        .scrollIntoView()
+        .click();
+
+      // TODO: the following code is blocked by issue 1193: https://github.com/OHIF/Viewers/issues/1193
+      // Once the issue is fixed, the following code should be uncommented
+      // // Header should be kept in English
+      // cy.get('.research-use')
+      //   .scrollIntoView()
+      //   .should('have.text', 'INVESTIGATIONAL USE ONLY');
+      //
+      // // Options menu should be translated
+      // cy.get('[data-cy="options-menu"]').should('have.text', 'Options');
+      //
+      // cy.get('[data-cy="about-item-menu"]')
+      //   .first()
+      //   .should('have.text', 'About');
+      // cy.get('[data-cy="about-item-menu"]')
+      //   .last()
+      //   .should('have.text', 'Preferences');
+    });
+
+    // TODO: the following code is blocked by issue 1193: https://github.com/OHIF/Viewers/issues/1193
+    // Once the issue is fixed, the following code should be uncommented
+    // it('checks if user can restore to default the language selection and application will be in English', function() {
+    //   cy.get('@userPreferencesGeneralTab')
+    //     .click()
+    //     .should('have.class', 'active');
+
+    //   // Language dropdown should be displayed
+    //   cy.get('#language-select').should('be.visible');
+
+    //   // Select Spanish and Save
+    //   cy.get('#language-select').select('Spanish');
+    //   cy.get('@saveBtn')
+    //     .scrollIntoView()
+    //     .click();
+
+    //   //Open Preferences again
+    //   cy.get('[data-cy="options-menu"]')
+    //     .scrollIntoView()
+    //     .click();
+    //   cy.get('[data-cy="about-item-menu"]')
+    //     .last()
+    //     .click();
+
+    //   // Go to general tab
+    //   cy.get('@userPreferencesGeneralTab').click();
+
+    //   cy.get('@restoreBtn')
+    //     .scrollIntoView()
+    //     .click();
+
+    // Header should be in English
+    // cy.get('.research-use')
+    //   .scrollIntoView()
+    //   .should('have.text', 'INVESTIGATIONAL USE ONLY');
+    //
+    // Options menu should be in English
+    //   cy.get('[data-cy="options-menu"]').should('have.text', 'Options');
+    //   cy.get('[data-cy="about-item-menu"]')
+    //     .first()
+    //     .should('have.text', 'About');
+    //   cy.get('[data-cy="about-item-menu"]')
+    //     .last()
+    //     .should('have.text', 'Preferences');
+    //});
+
+    it('checks new hotkeys for "Rotate Right" and "Rotate Left"', function() {
+      // Go go hotkeys tab
+      cy.get('@userPreferencesHotkeysTab')
+        .click()
+        .should('have.class', 'active');
+
+      // Set new hotkey for 'Rotate Right' function
+      cy.setNewHotkeyShortcutOnUserPreferencesModal(
+        'Rotate Right',
+        '{shift}{rightarrow}'
+      );
+      // Set new hotkey for 'Rotate Left' function
+      cy.setNewHotkeyShortcutOnUserPreferencesModal(
+        'Rotate Left',
+        '{shift}{leftarrow}'
+      );
+
+      //Save new hotkeys
+      cy.get('@saveBtn')
+        .scrollIntoView()
+        .click();
+
+      //Rotate Right with new Hotkey
+      cy.get('body').type('{shift}{rightarrow}');
+      cy.get('@viewportInfoMidTop').should('contains.text', 'R');
+
+      //Rotate Left with new Hotkey
+      cy.get('body').type('{shift}{leftarrow}');
+      cy.get('@viewportInfoMidTop').should('contains.text', 'A');
+    });
+
+    it('checks new hotkeys for "Next" and "Previous" Image on Viewport', function() {
+      // Go go hotkeys tab
+      cy.get('@userPreferencesHotkeysTab')
+        .click()
+        .should('have.class', 'active');
+
+      // Set new hotkey for 'Next Image Viewport' function
+      cy.setNewHotkeyShortcutOnUserPreferencesModal(
+        'Next Image Viewport',
+        '{shift}{rightarrow}'
+      );
+
+      // Set new hotkey for 'Previous Image Viewport' function
+      cy.setNewHotkeyShortcutOnUserPreferencesModal(
+        'Previous Image Viewport',
+        '{shift}{leftarrow}'
+      );
+
+      // Save new hotkeys
+      cy.get('@saveBtn')
+        .scrollIntoView()
+        .click();
+
+      // Set 3 viewports layout
+      cy.setLayout(3, 1);
+      cy.waitViewportImageLoading();
+
+      // Rotate Right and Invert colors on Viewport #1
+      cy.get('body').type('RI');
+      // Check that image was rotated
+      cy.get('@viewportInfoMidTop').should('contains.text', 'R');
+
+      //Move to Next Viewport
+      cy.get('body').type('{shift}{rightarrow}');
+      // Rotate Left and Invert colors on Viewport #2
+      cy.get('body').type('LI');
+      // Get overlay information from viewport #2
+      cy.get(
+        ':nth-child(2) > .viewport-wrapper > .viewport-element > .ViewportOrientationMarkers.noselect > .top-mid.orientation-marker'
+      ).as('viewport2InfoMidTop');
+      // Check that image was rotated
+      cy.get('@viewport2InfoMidTop').should('contains.text', 'P');
+
+      //Move to Previous Viewport
+      cy.get('body').type('{shift}{leftarrow}');
+      // Reset viewport #1 with spacebar hotkey
+      cy.get('body').type(' ');
+      cy.get('@viewportInfoMidTop').should('contains.text', 'A');
+
+      // Visual comparison
+      cy.screenshot('Viewport Navigation - 2nd viewport inverted and rotated');
+      cy.percyCanvasSnapshot(
+        'Viewport Navigation - 2nd viewport inverted and rotated'
+      );
+      // Set 1 viewport layout
+      cy.setLayout(1, 1);
+    });
+
+    it('checks error message when duplicated hotkeys are inserted', function() {
+      // Go go hotkeys tab
+      cy.get('@userPreferencesHotkeysTab').click();
+
+      // Set duplicated hotkey for 'Rotate Right' function
+      cy.setNewHotkeyShortcutOnUserPreferencesModal(
+        'Rotate Right',
+        '{rightarrow}'
+      );
+
+      // Check error message
+      cy.get('.HotKeysPreferences').within(() => {
+        cy.contains('Rotate Right') // label we're looking for
+          .parent()
+          .find('.errorMessage')
+          .as('errorMsg')
+          .should(
+            'have.text',
+            '"Next Image Viewport" is already using the "right" shortcut.'
+          );
+      });
+      //Cancel hotkeys
+      cy.get('@cancelBtn')
+        .scrollIntoView()
+        .click();
+    });
+
+    it('checks error message when invalid hotkey is inserted', function() {
+      // Go go hotkeys tab
+      cy.get('@userPreferencesHotkeysTab').click();
+
+      // Set invalid hotkey for 'Rotate Right' function
+      cy.setNewHotkeyShortcutOnUserPreferencesModal('Rotate Right', '{ctrl}Z');
+
+      // Check error message
+      cy.get('.HotKeysPreferences').within(() => {
+        cy.contains('Rotate Right') // label we're looking for
+          .parent()
+          .find('.errorMessage')
+          .as('errorMsg')
+          .should('have.text', '"ctrl+z" shortcut combination is not allowed');
+      });
+
+      //Cancel hotkeys
+      cy.get('@cancelBtn')
+        .scrollIntoView()
+        .click();
+    });
+
+    it('checks error message when only modifier keys are inserted', function() {
+      // Go go hotkeys tab
+      cy.get('@userPreferencesHotkeysTab').click();
+
+      // Set invalid modifier key: ctrl
+      cy.setNewHotkeyShortcutOnUserPreferencesModal('Zoom Out', '{ctrl}');
+      // Check error message
+      cy.get('.HotKeysPreferences').within(() => {
+        cy.contains('Zoom Out') // label we're looking for
+          .parent()
+          .find('.errorMessage')
+          .as('errorMsg')
+          .should(
+            'have.text',
+            "It's not possible to define only modifier keys (ctrl, alt and shift) as a shortcut"
+          );
+      });
+
+      // Set invalid modifier key: shift
+      cy.setNewHotkeyShortcutOnUserPreferencesModal('Zoom Out', '{shift}');
+      // Check error message
+      cy.get('@errorMsg').should(
+        'have.text',
+        "It's not possible to define only modifier keys (ctrl, alt and shift) as a shortcut"
+      );
+
+      // Set invalid modifier key: alt
+      cy.setNewHotkeyShortcutOnUserPreferencesModal('Zoom Out', '{alt}');
+      // Check error message
+      cy.get('@errorMsg').should(
+        'have.text',
+        "It's not possible to define only modifier keys (ctrl, alt and shift) as a shortcut"
+      );
+
+      //Cancel hotkeys
+      cy.get('@cancelBtn')
+        .scrollIntoView()
+        .click();
+    });
+
+    it('checks if user can cancel changes made on User Preferences Hotkeys tab', function() {
+      // Go go hotkeys tab
+      cy.get('@userPreferencesHotkeysTab').click();
+
+      // Set new hotkey for 'Rotate Right' function
+      cy.setNewHotkeyShortcutOnUserPreferencesModal(
+        'Rotate Right',
+        '{ctrl}{shift}S'
+      );
+
+      //Cancel hotkeys
+      cy.get('@cancelBtn')
+        .scrollIntoView()
+        .click();
+
+      // Open User Preferences modal again
+      cy.openPreferences();
+
+      //Check that hotkey for 'Rotate Right' function was not changed
+      cy.get('.HotKeysPreferences').within(() => {
+        cy.contains('Rotate Right') // label we're looking for
+          .parent()
+          .find('input')
+          .should('have.value', 'r');
+      });
+      cy.get('[data-cy="close-button"]').click();
+    });
+
+    it('checks if user can reset to default values on User Preferences Hotkeys tab', function() {
+      // Go go hotkeys tab
+      cy.get('@userPreferencesHotkeysTab').click();
+
+      // Set new hotkey for 'Rotate Right' function
+      cy.setNewHotkeyShortcutOnUserPreferencesModal(
+        'Rotate Right',
+        '{ctrl}{shift}S'
+      );
+
+      //Save hotkeys
+      cy.get('@saveBtn')
+        .scrollIntoView()
+        .click();
+
+      // Open User Preferences modal again
+      cy.openPreferences();
+
+      //Restore Default hotkeys
+      cy.get('@restoreBtn')
+        .scrollIntoView()
+        .click();
+
+      // Open User Preferences modal again
+      cy.openPreferences();
+
+      //Check that hotkey for 'Rotate Right' function was not changed
+      cy.get('.HotKeysPreferences').within(() => {
+        cy.contains('Rotate Right') // label we're looking for
+          .parent()
+          .find('input')
+          .should('have.value', 'r');
+      });
+      cy.get('[data-cy="close-button"]').click();
+    });
+  });
+});

platform/viewer/cypress/support/aliases.js

@@ -77,3 +77,17 @@ export function initStudyListAliasesOnTablet() {
   cy.get('#end-date').as('studyListEndDate');
   cy.get('[data-cy="study-list-results"] > tr').as('searchResult');
 }
+
+//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="reset-default-btn"]').as('restoreBtn');
+  cy.get('[data-cy="cancel-btn"]').as('cancelBtn');
+  cy.get('[data-cy="save-btn"]').as('saveBtn');
+}

platform/viewer/cypress/support/commands.js

@@ -7,6 +7,7 @@ import {
   initVTKToolsAliases,
   initStudyListAliasesOnDesktop,
   initStudyListAliasesOnTablet,
+  initPreferencesModalAliases,
 } from './aliases.js';
 
 // ***********************************************
@@ -102,6 +103,13 @@ Cypress.Commands.add('waitVTKReformatting', () => {
   });
 });
 
+Cypress.Commands.add('waitViewportImageLoading', () => {
+  // Wait for finish loading
+  cy.get('[data-cy="viewprt-grid"]', { timeout: 20000 }).should($grid => {
+    expect($grid).not.to.contain.text('Load');
+  });
+});
+
 /**
  * Command to perform a drag and drop action. Before using this command, we must get the element that should be dragged first.
  * Example of usage: cy.get(element-to-be-dragged).drag(dropzone-element)
@@ -200,10 +208,10 @@ Cypress.Commands.add('waitDicomImage', (timeout = 20000) => {
 
 //Command to reset and clear all the changes made to the viewport
 Cypress.Commands.add('resetViewport', () => {
-  cy.initCornerstoneToolsAliases();
-
   //Click on More button
-  cy.get('@moreBtn').click();
+  cy.get('.expandableToolMenu')
+    .as('moreBtn')
+    .click();
   //Verify if overlay is displayed
   cy.get('body').then(body => {
     if (body.find('.tooltip-toolbar-overlay').length == 0) {
@@ -215,7 +223,9 @@ Cypress.Commands.add('resetViewport', () => {
     .as('clearBtn')
     .click();
   //Click on Reset button
-  cy.get('@resetBtn').click();
+  cy.get('.ToolbarRow > :nth-child(9)')
+    .as('resetBtn')
+    .click();
 });
 
 Cypress.Commands.add('imageZoomIn', () => {
@@ -359,9 +369,7 @@ Cypress.Commands.add('percyCanvasSnapshot', (name, options = {}) => {
 });
 
 Cypress.Commands.add('setLayout', (columns = 1, rows = 1) => {
-  cy.get('.toolbar-button-label')
+  cy.get('.btn-group > .toolbar-button').click();
-    .contains('Layout')
-    .click();
 
   cy.get('.layoutChooser')
     .find('tr')
@@ -410,3 +418,50 @@ function canvasToImage(selectorOrEl) {
   canvas.parentElement.appendChild(image);
   canvas.style = 'display: none';
 }
+
+//Initialize aliases for User Preferences modal
+Cypress.Commands.add('initPreferencesModalAliases', () => {
+  initPreferencesModalAliases();
+});
+
+Cypress.Commands.add('openPreferences', () => {
+  cy.log('Open User Preferences Modal');
+  // Open User Preferences modal
+  cy.get('[data-cy="options-menu"]')
+    .scrollIntoView()
+    .click()
+    .then(() => {
+      cy.get('[data-cy="about-item-menu"]')
+        .last()
+        .click()
+        .wait(200);
+    });
+});
+
+Cypress.Commands.add('resetUserHoktkeyPreferences', () => {
+  // Open User Preferences modal
+  cy.openPreferences();
+
+  cy.initPreferencesModalAliases();
+
+  cy.log('Reset to Default Preferences');
+  cy.get('@restoreBtn').click();
+
+  //TODO: the following code is blocked by issue 1193: https://github.com/OHIF/Viewers/issues/1193
+  //Once the issue is fixed, the following code should be uncommented
+  //cy.get('@saveBtn').click();
+});
+
+Cypress.Commands.add(
+  'setNewHotkeyShortcutOnUserPreferencesModal',
+  (function_label, shortcut) => {
+    // Within scopes all `.get` and `.contains` to within the matched elements
+    // dom instead of checking from document
+    cy.get('.HotKeysPreferences').within(() => {
+      cy.contains(function_label) // label we're looking for
+        .parent()
+        .find('input') // closest input to that label
+        .type(shortcut, { force: true }); // Set new shortcut for that function
+    });
+  }
+);