javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-16 18:17:31 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(vue): switching between tabs and going back resolves to correct route (#25206)

Browse Source 
resolves #24303
This commit is contained in:
Liam DeBeasi
2022-04-29 10:11:55 -04:00
committed by GitHub
parent 2fbd6218ce
commit b4ba70ea14
7 changed files with 296 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/vue/test-app/src/main.ts
View File

@ -38,7 +38,7 @@ window.addEventListener('unhandledrejection', (err) => {
});
const app = createApp(App)
.use(IonicVue)
.use(IonicVue, { hardwareBackButton: true })
.use(router);
router.isReady().then(() => {

96
packages/vue/test-app/tests/e2e/specs/hbb.js Normal file
View File

@ -0,0 +1,96 @@
describe('Hardware Back Button', () => {
it('should correctly go back to Tab 1', () => {
cy.visit('http://localhost:8080/tabs');
cy.get('ion-tab-button#tab-button-tab2').click();
cy.ionPageHidden('tab1');
cy.ionPageVisible('tab2');
cy.get('#add-tab').click();
cy.get('ion-tab-button#tab-button-tab4').click();
cy.ionPageHidden('tab2');
cy.ionPageVisible('tab4');
cy.get('ion-tab-button#tab-button-tab1').click();
cy.ionPageHidden('tab4');
cy.ionPageVisible('tab1');
cy.hardwareBackButton();
cy.ionPageHidden('tab1');
cy.ionPageVisible('tab4');
cy.hardwareBackButton();
cy.ionPageHidden('tab4');
cy.ionPageVisible('tab2');
cy.hardwareBackButton();
cy.ionPageHidden('tab2');
cy.ionPageVisible('tab1');
});
it('should correctly go back to the root tab from child pages', () => {
cy.visit('http://localhost:8080');
cy.routerPush('/tabs');
cy.ionPageHidden('home');
cy.ionPageVisible('tab1');
cy.routerPush('/tabs/tab1/childone');
cy.ionPageHidden('tab1');
cy.ionPageVisible('tab1childone');
cy.routerPush('/tabs/tab1/childtwo');
cy.ionPageHidden('tab1childone');
cy.ionPageVisible('tab1childtwo');
cy.hardwareBackButton();
cy.ionPageDoesNotExist('tab1childtwo');
cy.ionPageVisible('tab1childone');
cy.hardwareBackButton();
cy.ionPageDoesNotExist('tab1childone');
cy.ionPageVisible('tab1');
cy.hardwareBackButton();
cy.ionPageDoesNotExist('tab1');
cy.ionPageVisible('home');
});
// TODO FW-1389
it.skip('should correctly go back to the root tab after switching pages', () => {
cy.visit('http://localhost:8080');
cy.routerPush('/tabs');
cy.ionPageHidden('home');
cy.ionPageVisible('tab1');
cy.routerPush('/tabs/tab1/childone');
cy.ionPageHidden('tab1');
cy.ionPageVisible('tab1childone');
cy.routerPush('/tabs/tab1/childtwo');
cy.ionPageHidden('tab1childone');
cy.ionPageVisible('tab1childtwo');
cy.get('ion-tab-button#tab-button-tab2').click();
cy.ionPageHidden('tab1childtwo');
cy.ionPageVisible('tab2');
cy.get('ion-tab-button#tab-button-tab1').click();
cy.ionPageHidden('tab2');
cy.ionPageVisible('tab1childtwo');
cy.hardwareBackButton();
cy.ionPageDoesNotExist('tab1childtwo');
cy.ionPageVisible('tab1childone');
cy.hardwareBackButton();
cy.ionPageDoesNotExist('tab1childone');
cy.ionPageVisible('tab1');
cy.hardwareBackButton();
cy.ionPageDoesNotExist('tab1');
cy.ionPageVisible('home');
});
})

58
packages/vue/test-app/tests/e2e/specs/tabs.js
View File

@ -476,6 +476,64 @@ describe('Tabs', () => {
cy.ionPageVisible('home');
cy.ionPageDoesNotExist('tabs');
});
// Verifies fix for https://github.com/ionic-team/ionic-framework/issues/24936
it('should correctly go back after changing tabs', () => {
cy.visit('http://localhost:8080/tabs/tab1');
cy.routerPush('/tabs/tab1/childone');
cy.ionPageVisible('tab1childone');
cy.ionPageHidden('tab1');
cy.routerPush('/tabs/tab1/childtwo');
cy.ionPageVisible('tab1childtwo');
cy.ionPageHidden('tab1childone');
cy.get('ion-tab-button#tab-button-tab2').click();
cy.ionPageHidden('tab1childtwo');
cy.ionPageVisible('tab2');
cy.get('ion-tab-button#tab-button-tab1').click();
cy.ionPageHidden('tab2');
cy.ionPageVisible('tab1childtwo');
cy.ionBackClick('tab1childtwo');
cy.ionPageVisible('tab1childone');
cy.ionPageDoesNotExist('tab1childtwo');
cy.ionBackClick('tab1childone');
cy.ionPageVisible('tab1');
cy.ionPageDoesNotExist('tab1childone');
});
// Verifies fix for https://github.com/ionic-team/ionic-framework/issues/24303
it('should correctly perform router.go without errors after navigating into tabs', () => {
cy.visit('http://localhost:8080/');
cy.routerPush('/inputs');
cy.ionPageVisible('inputs');
cy.ionPageHidden('home');
cy.routerPush('/routing');
cy.ionPageVisible('routing');
cy.ionPageHidden('inputs');
cy.routerPush('/tabs/tab1');
cy.ionPageVisible('tab1');
cy.ionPageHidden('routing');
cy.get('ion-tab-button#tab-button-tab2').click();
cy.ionPageHidden('tab1');
cy.ionPageVisible('tab2');
cy.get('ion-tab-button#tab-button-tab1').click();
cy.ionPageHidden('tab2');
cy.ionPageVisible('tab1');
cy.routerGo(-1);
cy.ionPageVisible('tab2');
cy.ionPageHidden('tab1');
});
})
describe('Tabs - Swipe to Go Back', () => {

12
packages/vue/test-app/tests/e2e/support/commands.js
View File

@ -106,3 +106,15 @@ Cypress.Commands.add('ionBackButtonHidden', (pageId) => {
.find('ion-back-button')
.should('not.be.visible')
});
/**
* If running in a browser, hardwareBackButton: true
* must be set in Ionic config for this to work.
*/
Cypress.Commands.add('hardwareBackButton', () => {
cy.document().then(doc => {
const ev = new CustomEvent('backbutton');
doc.dispatchEvent(ev);
})
})