fix: Set SR viewport as active by interaction (#1118)

* fix: Set SR viewport as active by interaction

* quick fix

* (eslint) add "before" as global variables

* add data-cy

* add data-cy

* create E2E test

* (E2E) create custom command to set layout size

* remove .only e2e

* remove throttle for onScroll

platform/viewer/cypress/integration/pwa/OHIFExtensionHTML.spec.js

@@ -22,4 +22,23 @@ describe('OHIF HTML Extension', () => {
       'Imaging Measurement Report'
     );
   });
+
+  it('checks if the HTML viewport has been set to active by interaction', () => {
+    cy.setLayout('3', '3');
+
+    // check if viewport has been set as active by CLICKING
+    cy.get('[data-cy=viewprt-grid] > :nth-child(4)')
+      .click()
+      .then($viewport => {
+        cy.wrap($viewport).should('have.class', 'active');
+      });
+
+    // check if viewport has been set as active by SCROLLING
+    cy.get('[data-cy=viewprt-grid] > :nth-child(7)').then($viewport => {
+      cy.wrap($viewport)
+        .find('[data-cy=dicom-html-viewport]')
+        .scrollTo('bottom');
+      cy.wrap($viewport).should('have.class', 'active');
+    });
+  });
 });

platform/viewer/cypress/support/commands.js

@@ -328,6 +328,21 @@ Cypress.Commands.add('percyCanvasSnapshot', (name, options = {}) => {
   });
 });
 
+Cypress.Commands.add('setLayout', (columns = 1, rows = 1) => {
+  cy.get('.toolbar-button-label')
+    .contains('Layout')
+    .click();
+
+  cy.get('.layoutChooser')
+    .find('tr')
+    .eq(rows - 1)
+    .find('td')
+    .eq(columns - 1)
+    .click();
+
+  cy.wait(1000);
+});
+
 function convertCanvas(documentClone) {
   documentClone
     .querySelectorAll('canvas')
@@ -364,4 +379,4 @@ function canvasToImage(selectorOrEl) {
   canvas.setAttribute('data-percy-canvas', true);
   canvas.parentElement.appendChild(image);
   canvas.style = 'display: none';
-}
+}