test(react-router): add swipe-to-go-back abort coverage for multi-level navigation

Author: ShaneK

packages/react-router/test/base/src/pages/swipe-to-go-back/SwipeToGoBack.tsx

@@ -17,6 +17,7 @@ export const SwipeToGoBack: React.FC = () => {
     <IonRouterOutlet id="swipe-to-go-back">
       <Route path="/swipe-to-go-back" element={<Main />} />
       <Route path="/swipe-to-go-back/details" element={<Details />} />
+      <Route path="/swipe-to-go-back/details2" element={<Details2 />} />
     </IonRouterOutlet>
   );
 };
@@ -49,6 +50,25 @@ const Details: React.FC = () => {
       </IonHeader>
       <IonContent>
         <div>Details</div>
+        <IonItem routerLink="/swipe-to-go-back/details2" id="go-to-details2">Details 2</IonItem>
+      </IonContent>
+    </IonPage>
+  );
+};
+
+const Details2: React.FC = () => {
+  return (
+    <IonPage data-pageid="details2">
+      <IonHeader>
+        <IonToolbar>
+          <IonButtons slot="start">
+            <IonBackButton></IonBackButton>
+          </IonButtons>
+          <IonTitle>Details 2</IonTitle>
+        </IonToolbar>
+      </IonHeader>
+      <IonContent>
+        <div>Details 2</div>
       </IonContent>
     </IonPage>
   );

packages/react-router/test/base/tests/e2e/specs/swipe-to-go-back.cy.js

@@ -149,4 +149,54 @@ describe('Swipe To Go Back', () => {
 
     cy.ionPageVisible('params-1');
   })
+
+  it('should keep correct view visible after swipe-back completes then abort on previous page', () => {
+    // Navigate three levels deep: main → details → details2
+    cy.visit(`http://localhost:${port}/swipe-to-go-back?${IOS_MODE}`);
+    cy.ionPageVisible('main');
+
+    cy.ionNav('ion-item', 'Details');
+    cy.ionPageVisible('details');
+    cy.ionPageHidden('main');
+
+    cy.get('#go-to-details2').click();
+    cy.wait(250);
+    cy.ionPageVisible('details2');
+    cy.ionPageHidden('details');
+
+    // Complete swipe back from details2 → details
+    cy.ionSwipeToGoBack(true, 'ion-router-outlet#swipe-to-go-back');
+    cy.ionPageVisible('details');
+    cy.ionPageDoesNotExist('details2');
+
+    // Now on details, abort a swipe back toward main
+    // This validates that the abort doesn't hide the currently-visible page
+    cy.ionSwipeToGoBack(false, 'ion-router-outlet#swipe-to-go-back');
+    cy.ionPageVisible('details');
+    cy.ionPageHidden('main');
+  })
+
+  it('should handle multiple consecutive swipe aborts without hiding current page', () => {
+    cy.visit(`http://localhost:${port}/swipe-to-go-back?${IOS_MODE}`);
+    cy.ionPageVisible('main');
+
+    cy.ionNav('ion-item', 'Details');
+    cy.ionPageVisible('details');
+    cy.ionPageHidden('main');
+
+    // First abort
+    cy.ionSwipeToGoBack(false, 'ion-router-outlet#swipe-to-go-back');
+    cy.ionPageVisible('details');
+    cy.ionPageHidden('main');
+
+    // Second abort
+    cy.ionSwipeToGoBack(false, 'ion-router-outlet#swipe-to-go-back');
+    cy.ionPageVisible('details');
+    cy.ionPageHidden('main');
+
+    // Third abort
+    cy.ionSwipeToGoBack(false, 'ion-router-outlet#swipe-to-go-back');
+    cy.ionPageVisible('details');
+    cy.ionPageHidden('main');
+  })
 });