fix: filter ion-page-hidden elements before asserting hydration in JQ…

cypress/e2e/get-from-supported-selector.spec.ts

@@ -96,6 +96,50 @@ describe('Get From Supported Selector', () => {
     });
   });
 
+  describe('filters hidden-page elements BEFORE asserting hydration', () => {
+    beforeEach(() => {
+      cy.document().then((doc) => {
+        doc.body.insertAdjacentHTML(
+          'beforeend',
+          `<div class="ion-page ion-page-hidden">
+             <div class="testing-order-bug">Not Hydrated Hidden</div>
+           </div>
+           <div class="ion-page">
+             <div class="testing-order-bug hydrated">Visible Hydrated</div>
+           </div>`,
+        );
+      });
+    });
+
+    it('Chainable - does not fail when a hidden element lacks .hydrated', () => {
+      getFromSupportedSelector(cy.get('.testing-order-bug'))
+        .should('have.length', 1)
+        .should('have.text', 'Visible Hydrated');
+    });
+
+    it('JQuery - does not fail when a hidden element lacks .hydrated', () => {
+      cy.get('.testing-order-bug').then(($els) => {
+        getFromSupportedSelector($els)
+          .should('have.length', 1)
+          .should('have.text', 'Visible Hydrated');
+      });
+    });
+
+    it('Chainable - returns empty set without timing out when all matches are hidden', () => {
+      getFromSupportedSelector(
+        cy.get('.testing-order-bug').filter(':not(.hydrated)'),
+      ).should('have.length', 0);
+    });
+
+    it('JQuery - returns empty set without timing out when all matches are hidden', () => {
+      cy.get('.testing-order-bug')
+        .filter(':not(.hydrated)')
+        .then(($els) => {
+          getFromSupportedSelector($els).should('have.length', 0);
+        });
+    });
+  });
+
   describe('waiting for components hydration', () => {
     it('css selector', () => {
       getFromSupportedSelector<IonRange>('.ion-range-to-test-hydration')

src/helpers/get-from-supported-selector.ts

@@ -10,19 +10,10 @@ export function getFromSupportedSelector<T extends Element>(
   }
 
   if (isJQuery<T>(selector)) {
-    return filterOutHiddenPage(
-      cy
-        .wrap(selector)
-        .should('have.class', 'hydrated') as CypressIonicReturn<T>,
-    );
+    return filterThenAssertHydrated(cy.wrap(selector) as CypressIonicReturn<T>);
   }
 
-  return filterOutHiddenPage(
-    (selector as unknown as CypressIonicReturn<T>).should(
-      'have.class',
-      'hydrated',
-    ),
-  );
+  return filterThenAssertHydrated(selector as unknown as CypressIonicReturn<T>);
 }
 
 function filterOutHiddenPage<T extends Element>(
@@ -33,6 +24,20 @@ function filterOutHiddenPage<T extends Element>(
   ) as unknown as CypressIonicReturn<T>;
 }
 
+function filterThenAssertHydrated<T extends Element>(
+  subject: CypressIonicReturn<T>,
+): CypressIonicReturn<T> {
+  return subject.then((elements) => {
+    const $visible = elements.not(
+      '.ion-page-hidden, .ion-page-hidden *',
+    ) as unknown as JQuery<T>;
+    if ($visible.length === 0) {
+      return cy.wrap($visible);
+    }
+    return cy.wrap($visible).should('have.class', 'hydrated');
+  }) as unknown as CypressIonicReturn<T>;
+}
+
 function isJQuery<T extends Element>(
   selector: SupportedSelectors<T>,
 ): selector is JQuery<T> {