javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
ShaneK
2026-03-12 10:34:59 -07:00
parent 7fbc59b51d
commit 88d0e70a29
2 changed files with 70 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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>
);

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

@@ -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');
})
});