feat(SidePanel): new side panel tab look-and-feel (#3657)

platform/app/cypress/integration/MultiStudy.spec.js

@@ -13,8 +13,12 @@ describe('OHIF Multi Study', () => {
   it('Should display 2 comparison up', () => {
     beforeSetup();
 
-    cy.get('[data-cy="viewport-pane"]').its('length').should('be.eq', 4);
-    cy.get('[data-cy="studyDate"]').should(studyDate => {
+    cy.get('[data-cy="viewport-pane"]').as('viewportPane');
+    cy.get('@viewportPane').its('length').should('be.eq', 4);
+
+    cy.get('[data-cy="studyDate"]').as('studyDate');
+
+    cy.get('@studyDate').should(studyDate => {
       expect(studyDate.length).to.be.eq(4);
       expect(studyDate.text()).to.contain('2014').contain('2001');
       expect(studyDate.text().indexOf('2014')).to.be.lessThan(studyDate.text().indexOf('2001'));

platform/app/cypress/integration/measurement-tracking/OHIFMeasurementPanel.spec.js

@@ -23,26 +23,28 @@ describe('OHIF Measurement Panel', function () {
   it('checks if measurement item can be Relabeled under Measurements panel', function () {
     // Add length measurement
     cy.addLengthMeasurement();
-    cy.get('[data-cy="viewport-notification"]').should('exist');
-    cy.get('[data-cy="viewport-notification"]').should('be.visible');
-    cy.get('[data-cy="prompt-begin-tracking-yes-btn"]').click();
-    cy.get('[data-cy="measurement-item"]').click();
+    cy.get('[data-cy="viewport-notification"]').as('viewportNotification').should('exist');
+    cy.get('[data-cy="viewport-notification"]').as('viewportNotification').should('be.visible');
 
-    cy.get('[data-cy="measurement-item"]').find('svg').click();
+    cy.get('[data-cy="prompt-begin-tracking-yes-btn"]').as('promptBeginTrackingYesBtn').click();
+
+    cy.get('[data-cy="measurement-item"]').as('measurementItem').click();
+
+    cy.get('[data-cy="measurement-item"]').find('svg').as('measurementItemSvg').click();
 
     // enter Bone label
     cy.get('[data-cy="input-annotation"]').should('exist');
     cy.get('[data-cy="input-annotation"]').should('be.visible');
     cy.get('[data-cy="input-annotation"]').type('Bone{enter}');
 
-    // Verify if 'Bone' label was added
-    cy.get('[data-cy="measurement-item"]').should('contain.text', 'Bone');
+    cy.get('[data-cy="measurement-item"]').as('measurementItem').should('contain.text', 'Bone');
   });
 
   it('checks if image would jump when clicked on a measurement item', function () {
     // Add length measurement
     cy.addLengthMeasurement();
-    cy.get('[data-cy="prompt-begin-tracking-yes-btn"]').click();
+    cy.get('[data-cy="prompt-begin-tracking-yes-btn"]').as('promptBeginTrackingYesBtn');
+    cy.get('@promptBeginTrackingYesBtn').click();
 
     cy.scrollToIndex(13);
 

platform/app/cypress/support/commands.js

@@ -144,19 +144,22 @@ Cypress.Commands.add('drag', { prevSubject: 'element' }, (...args) =>
  * @param {number[]} secondClick - Click position [x, y]
  */
 Cypress.Commands.add('addLine', (viewport, firstClick, secondClick) => {
+  const performClick = (alias, x, y) => {
+    cy.get(alias).click(x, y, { force: true, multiple: true }).wait(250);
+  };
+
   cy.get(viewport).as('viewportAlias');
   const [x1, y1] = firstClick;
   const [x2, y2] = secondClick;
 
   // First click
-  cy.get('@viewportAlias').click(x1, y1, { force: true, multiple: true }).wait(250);
+  performClick('@viewportAlias', x1, y1);
 
-  // Move the mouse and then click again
-  cy.get('@viewportAlias')
-    .trigger('mousemove', { clientX: x2, clientY: y2 })
-    .get('@viewportAlias')
-    .click(x2, y2, { force: true, multiple: true })
-    .wait(250);
+  // Move the mouse
+  cy.get('@viewportAlias').trigger('mousemove', { clientX: x2, clientY: y2 }).wait(250);
+
+  // Second click
+  performClick('@viewportAlias', x2, y2);
 });
 
 /**