chore(test): Integration test wait until rendered/queried instead of timed (#3540)

platform/app/cypress/support/commands.js

@@ -46,7 +46,7 @@ Cypress.Commands.add('openStudy', PatientName => {
   cy.openStudyList();
   cy.get('#filter-patientNameOrId').type(PatientName);
   // cy.get('@getStudies').then(() => {
-  cy.wait(1000);
+  cy.waitQueryList();
 
   cy.get('[data-cy="study-list-results"]', { timeout: 5000 })
     .contains(PatientName)
@@ -65,7 +65,8 @@ Cypress.Commands.add(
       ) {
         cy.openStudyInViewer(StudyInstanceUID, otherParams);
         cy.waitDicomImage();
-        cy.wait(2000);
+        // Very short wait to ensure pending updates are handled
+        cy.wait(25);
       }
     });
   }
@@ -78,6 +79,9 @@ Cypress.Commands.add(
   }
 );
 
+Cypress.Commands.add('waitQueryList', () => {
+  cy.get('[data-querying="false"]');
+});
 /**
  * Command to search for a Modality and open the study.
  *
@@ -89,7 +93,7 @@ Cypress.Commands.add('openStudyModality', Modality => {
 
   cy.get('#filter-accessionOrModalityOrDescription')
     .type(Modality)
-    .wait(2000);
+    .waitQueryList();
 
   cy.get('[data-cy="study-list-results"]')
     .contains(Modality)
@@ -113,7 +117,7 @@ Cypress.Commands.add('openStudyList', () => {
   // For some reason cypress 12.x does not like to stub the network request
   // so we just wait herer for 1 second
   // cy.wait('@getStudies');
-  cy.wait(1000);
+  cy.waitQueryList();
 });
 
 Cypress.Commands.add('waitStudyList', () => {
@@ -198,54 +202,27 @@ Cypress.Commands.add('expectMinimumThumbnails', (seriesToWait = 1) => {
 });
 
 //Command to wait DICOM image to load into the viewport
-Cypress.Commands.add('waitDicomImage', (timeout = 50000) => {
-  const loaded = cy.isPageLoaded();
-
-  if (loaded) {
-    cy.window()
-      .its('cornerstone')
-      .then({ timeout }, $cornerstone => {
-        return new Cypress.Promise(resolve => {
-          const onEvent = renderedEvt => {
-            const element = renderedEvt.detail.element;
-
-            element.removeEventListener(
-              $cornerstone.Enums.Events.IMAGE_RENDERED,
-              onEvent
-            );
-            $cornerstone.eventTarget.removeEventListener(
-              $cornerstone.Enums.Events.IMAGE_RENDERED,
-              onEvent
-            );
-            resolve();
-          };
-          const onEnabled = enabledEvt => {
-            const element = enabledEvt.detail.element;
-
-            element.addEventListener(
-              $cornerstone.Enums.Events.IMAGE_RENDERED,
-              onEvent
-            );
-
-            $cornerstone.eventTarget.removeEventListener(
-              $cornerstone.Enums.Events.ELEMENT_ENABLED,
-              onEnabled
-            );
-          };
-          const enabledElements = $cornerstone.getEnabledElements();
-          if (enabledElements && enabledElements.length) {
-            // Sometimes the page finishes rendering before this gets run,
-            // if so, just resolve immediately.
-            resolve();
-          } else {
-            $cornerstone.eventTarget.addEventListener(
-              $cornerstone.Enums.Events.ELEMENT_ENABLED,
-              onEnabled
+Cypress.Commands.add('waitDicomImage', () => {
+  cy.window()
+    .its('cornerstone')
+    .should($cornerstone => {
+      const enabled = $cornerstone.getEnabledElements();
+      if (enabled?.length) {
+        enabled.forEach((item, i) => {
+          if (
+            item.viewport.viewportStatus !==
+            $cornerstone.Enums.ViewportStatus.RENDERED
+          ) {
+            throw new Error(
+              `Viewport ${i} in state ${item.viewport.viewportStatus}`
             );
           }
         });
-      });
-  }
+      } else {
+        throw new Error('No enabled elements');
+      }
+    });
+  cy.log('DICOM image loaded');
 });
 
 //Command to reset and clear all the changes made to the viewport
@@ -401,7 +378,8 @@ Cypress.Commands.add('setLayout', (columns = 1, rows = 1) => {
     .eq(columns - 1)
     .click();
 
-  cy.wait(1000);
+  cy.wait(10);
+  cy.waitDicomImage();
 });
 
 function convertCanvas(documentClone) {

platform/app/src/routes/WorkList/WorkList.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useMemo } from 'react';
 import classnames from 'classnames';
 import PropTypes from 'prop-types';
 import { Link, useNavigate } from 'react-router-dom';
@@ -112,6 +112,9 @@ function WorkList({
   const [expandedRows, setExpandedRows] = useState([]);
   const [studiesWithSeriesData, setStudiesWithSeriesData] = useState([]);
   const numOfStudies = studiesTotal;
+  const querying = useMemo(() => {
+    return isLoadingData || expandedRows.length > 0;
+  }, [isLoadingData, expandedRows]);
 
   const setFilterValues = val => {
     if (filterValues.pageNumber === val.pageNumber) {
@@ -218,6 +221,7 @@ function WorkList({
 
       fetchSeries(studyInstanceUid);
     }
+
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [expandedRows, studies]);
 
@@ -501,6 +505,7 @@ function WorkList({
             <StudyListTable
               tableDataSource={tableDataSource.slice(offset, offsetAndTake)}
               numOfStudies={numOfStudies}
+              querying={querying}
               filtersMeta={filtersMeta}
             />
             <div className="grow">