javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-15 09:34:19 +08:00
Code Issues Packages Projects Releases Wiki Activity
Files
ionic-framework/packages/react-router/test-app/cypress/integration/routing.spec.js
Liam DeBeasi 1c93b75e39 fix(react): correctly show ion-back-button when going back (#23069) 
resolves #22692
2021-03-22 16:11:45 -04:00

320 lines
13 KiB
JavaScript
Raw Blame History

const port = 3000;
describe('Routing Tests', () => {
// before(() => {
// Cypress.config('userAgent', 'Mozilla/5.0 (iPhone; CPU iPhone OS 13_2_3 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.0.3 Mobile/15E148 Safari/604.1')
// });
it('/ > Details 1, the details screen should appear', () => {
cy.visit(`http://localhost:${port}/routing`);
cy.ionPageVisible('home-page');
cy.ionNav('ion-item', 'Details 1');
cy.contains('[data-pageid=home-details-page-1] ion-label', 'Details 1');
});
it('/ > Details 1 > Back, should go back to home', () => {
cy.visit(`http://localhost:${port}/routing`);
cy.ionNav('ion-item', 'Details 1');
cy.contains('[data-pageid=home-details-page-1] ion-label', 'Details 1');
cy.ionBackClick('home-details-page-1');
cy.contains('[data-pageid=home-page] ion-title', 'Home');
});
it('/ > Details 1 > Settings Tab > Home Tab, should go back to details 1 on home tab', () => {
cy.visit(`http://localhost:${port}/routing`);
cy.ionNav('ion-item', 'Details 1');
cy.ionPageVisible('home-details-page-1');
cy.ionTabClick('Settings');
cy.ionPageVisible('settings-page');
cy.ionTabClick('Home');
cy.ionPageVisible('home-details-page-1');
});
it('/ > Details 1 > Settings Tab > Home Tab > Home Tab, should go back to home', () => {
cy.visit(`http://localhost:${port}/routing`);
cy.ionNav('ion-item', 'Details 1');
cy.contains('[data-pageid=home-details-page-1] ion-label', 'Details 1');
cy.ionTabClick('Settings');
cy.ionPageVisible('settings-page');
cy.ionTabClick('Home');
cy.ionPageVisible('home-details-page-1');
cy.ionTabClick('Home');
cy.ionPageVisible('home-page');
});
it('When going directly to /tabs, it should load home page', () => {
cy.visit(`http://localhost:${port}/routing/tabs`);
cy.ionPageVisible('home-page');
});
it('When going directly to /tabs/home, it should load home page', () => {
cy.visit(`http://localhost:${port}/routing/tabs/home`);
cy.ionPageVisible('home-page');
});
it('When going directly to /tabs/settings, it should load settings page', () => {
cy.visit(`http://localhost:${port}/routing/tabs/settings`);
cy.ionPageVisible('settings-page');
});
it('Home Details 1 > Settings Tab > Home Tab, details 1 page should still be active', () => {
cy.visit(`http://localhost:${port}/routing/tabs/home/details/1`);
cy.ionTabClick('Settings');
cy.ionPageVisible('settings-page');
cy.ionTabClick('Home');
cy.ionPageVisible('home-details-page-1');
});
it('/ > Home Details 1+2+3 > Settings Tab > Setting Details 1+2+3 > Home Tab > Back * 3 > Settings Tab > Back * 3, should be at settings page', () => {
// This was a bug when loading the root of the app and not going directly to the home tab
cy.visit(`http://localhost:${port}/routing/`);
cy.ionNav('ion-item', 'Details 1');
cy.ionNav('ion-button', 'Go to Details 2');
cy.ionNav('ion-button', 'Go to Details 3');
cy.contains('[data-pageid=home-details-page-3] ion-label', 'Details 3');
cy.ionTabClick('Settings');
cy.ionNav('ion-item', 'Settings Details 1');
cy.ionNav('ion-button', 'Go to Settings Details 2');
cy.ionNav('ion-button', 'Go to Settings Details 3');
cy.contains('[data-pageid=settings-details-page-3] ion-label', 'Details 3');
cy.ionTabClick('Home');
cy.contains('[data-pageid=home-details-page-3] ion-label', 'Details 3');
cy.ionBackClick('home-details-page-3');
cy.contains('[data-pageid=home-details-page-2] ion-label', 'Details 2');
cy.ionBackClick('home-details-page-2');
cy.contains('[data-pageid=home-details-page-1] ion-label', 'Details 1');
cy.ionBackClick('home-details-page-1');
cy.ionPageVisible('home-page');
});
it('/ > Details 1 with Query Param > Details 2 > Back, Query param should show on screen', () => {
cy.visit(`http://localhost:${port}/routing/`);
cy.ionNav('ion-item', 'Details 1 with Query Params');
cy.contains('[data-pageid=home-details-page-1] ion-label', 'Query Params: ');
cy.ionNav('ion-button', 'Go to Details 2');
cy.contains('[data-pageid=home-details-page-2] ion-label', 'Details 2');
cy.ionBackClick('home-details-page-2');
cy.contains('[data-pageid=home-details-page-1] ion-label', 'Query Params: ');
});
it('/ > Details 1 with Query Param > Settings Tab > Home Tab > Query param should show on screen', () => {
cy.visit(`http://localhost:${port}/routing/`);
cy.ionNav('ion-item', 'Details 1 with Query Params');
cy.contains('[data-pageid=home-details-page-1] ion-label', 'Query Params: ');
cy.ionTabClick('Settings');
cy.ionPageVisible('settings-page');
cy.ionTabClick('Home');
cy.contains('[data-pageid=home-details-page-1] ion-label', 'Query Params: ');
});
it('Home Details 1 > Home Tab > Details 1 > Home Tab, should be on home page', () => {
// Tests a bug when landing directly on a page thats not the originalHref and going back to home
cy.visit(`http://localhost:${port}/routing/tabs/home/details/1`);
cy.ionTabClick('Home');
cy.ionPageVisible('home-page');
cy.ionNav('ion-item', 'Details 1');
cy.ionPageVisible('home-details-page-1');
cy.ionTabClick('Home');
cy.ionPageVisible('home-page');
});
it('Home > Session Details Link > Session Details 2 > Back > Back, should be at home page', () => {
// Tests a bug when landing directly on a page thats not the originalHref and going back to home
cy.visit(`http://localhost:${port}/routing/tabs/home`);
cy.ionNav('a', 'Go to details 1 on settings');
cy.ionPageVisible('settings-details-page-1');
cy.ionNav('ion-button', 'Go to Settings Details 2');
cy.ionPageVisible('settings-details-page-2');
cy.ionBackClick('settings-details-page-2');
cy.ionPageVisible('settings-details-page-1');
cy.ionBackClick('settings-details-page-1');
cy.ionPageVisible('home-page');
});
it('Tab 3 > Other Page > Back, should be back on Tab 3', () => {
// Tests transferring from one outlet to another and back again with animation
// TODO: how to test the transition animation happens?
cy.visit(`http://localhost:${port}/routing/tabs/tab3`);
cy.ionNav('ion-button', 'Go to Other Page');
cy.ionPageVisible('other-page');
cy.ionBackClick('other-page');
cy.ionPageVisible('tab3-page');
});
it('/ > Menu > Favorites > Menu > Tabs, should be back on Home', () => {
// Tests transferring from one outlet to another and back again via menu
cy.visit(`http://localhost:${port}/routing`);
cy.ionMenuClick();
cy.ionMenuNav('Favorites');
cy.ionPageVisible('favorites-page');
cy.ionMenuClick();
cy.ionMenuNav('Tabs');
cy.ionPageVisible('home-page');
});
it('/ > Session Details > Details 2 > Details 3 > Browser Back * 3, should be back on home', () => {
// Tests browser back button
cy.visit(`http://localhost:${port}/routing/`);
cy.ionNav('ion-item', 'Details 1');
cy.ionPageVisible('home-details-page-1');
cy.ionNav('ion-button', 'Go to Details 2');
cy.ionPageVisible('home-details-page-2');
cy.ionNav('ion-button', 'Go to Details 3');
cy.ionPageVisible('home-details-page-3');
cy.go('back');
cy.ionPageVisible('home-details-page-2');
cy.go('back');
cy.ionPageVisible('home-details-page-1');
cy.go('back');
cy.ionPageVisible('home-page');
});
it('/ > Details 1 > Details 2 > Details 3 > Settings Tab > Home Tab > Browser Back, should be back on home', () => {
// Tests browser back button with a tab switch
cy.visit(`http://localhost:${port}/routing/`);
cy.ionNav('ion-item', 'Details 1');
cy.ionPageVisible('home-details-page-1');
cy.ionNav('ion-button', 'Go to Details 2');
cy.ionPageVisible('home-details-page-2');
cy.ionNav('ion-button', 'Go to Details 3');
cy.ionPageVisible('home-details-page-3');
cy.ionTabClick('Settings');
cy.ionPageVisible('settings-page');
cy.ionTabClick('Home');
cy.ionPageVisible('home-details-page-3');
cy.go('back');
cy.ionPageVisible('home-details-page-2');
cy.get('ion-tab-button.tab-selected').contains('Home');
});
it('/ > Details 1 > Details 2 > Details 3 > Browser Back > Back > Back, should be back on home', () => {
// Tests browser back button with a tab switch
cy.visit(`http://localhost:${port}/routing/`);
cy.ionNav('ion-item', 'Details 1');
cy.ionPageVisible('home-details-page-1');
cy.ionNav('ion-button', 'Go to Details 2');
cy.ionPageVisible('home-details-page-2');
cy.ionNav('ion-button', 'Go to Details 3');
cy.ionPageVisible('home-details-page-3');
cy.go('back');
cy.ionPageVisible('home-details-page-2');
cy.ionBackClick('home-details-page-2');
cy.ionPageVisible('home-details-page-1');
cy.ionBackClick('home-details-page-1');
cy.ionPageVisible('home-page');
});
it('when props get passed into a route render, the component should update', () => {
cy.visit(`http://localhost:${port}/routing/propstest`);
cy.ionPageVisible('props-test');
cy.get('div[data-testid=count-label]').contains('1');
cy.contains('Increment').click();
cy.get('div[data-testid=count-label]').contains('2');
cy.contains('Increment').click();
cy.get('div[data-testid=count-label]').contains('3');
});
it('/asdf, when accessing a route not defined from root outlet, should show not found page', () => {
cy.visit(`http://localhost:${port}/routing/asdf`, { failOnStatusCode: false });
cy.ionPageVisible('not-found');
cy.get('div').contains('Not found');
});
it('/tabs/home > Details 1 on settings > Home Tab, should be back on home page', () => {
cy.visit(`http://localhost:${port}/routing/tabs/home`);
cy.ionNav('ion-item', 'Details 1 on settings');
cy.ionPageVisible('settings-details-page-1');
cy.ionTabClick('Home');
cy.ionPageVisible('home-page');
});
it('/ > Details 1 on settings > Back > Settings Tab, should be on setting home', () => {
// For bug https://github.com/ionic-team/ionic/issues/21031
cy.visit(`http://localhost:${port}/routing/`);
cy.ionNav('ion-item', 'Details 1 on settings');
cy.ionPageVisible('settings-details-page-1');
cy.ionBackClick('settings-details-page-1');
cy.ionPageVisible('home-page');
cy.ionTabClick('Settings');
cy.ionPageVisible('settings-page');
});
it('/routing/tabs/redirect > Should be on settings page > Home Tab > Should be on home page', () => {
// tests that a redirect going to a tab other than the first tab works
// fixes bug https://github.com/ionic-team/ionic-framework/issues/21830
cy.visit(`http://localhost:${port}/routing/tabs/redirect`);
cy.ionPageVisible('settings-page');
cy.ionTabClick('Home');
cy.ionPageVisible('home-page');
});
it('/routing/ > Details 1 > Details 2 > Details 3 > Back > Settings Tab > Home Tab > Should be at details 2 page', () => {
// fixes an issue where route history was being lost after starting to go back, switching tabs
// and switching back to the same tab again
// for bug https://github.com/ionic-team/ionic-framework/issues/21834
cy.visit(`http://localhost:${port}/routing`);
cy.ionPageVisible('home-page');
cy.ionNav('ion-item', 'Details 1');
cy.ionPageVisible('home-details-page-1');
cy.ionNav('ion-button', 'Go to Details 2');
cy.ionPageVisible('home-details-page-2');
cy.ionNav('ion-button', 'Go to Details 3');
cy.ionPageVisible('home-details-page-3');
cy.ionBackClick('home-details-page-3');
cy.ionPageVisible('home-details-page-2');
cy.ionTabClick('Settings');
cy.ionPageVisible('settings-page');
cy.ionTabClick('Home');
cy.ionPageVisible('home-details-page-2');
});
it('/routing/tabs/home Menu > Favorites > Menu > Home with redirect, Home page should be visible, and Favorites should be hidden', () => {
cy.visit(`http://localhost:${port}/routing/tabs/home`);
cy.ionMenuClick();
cy.ionMenuNav('Favorites');
cy.ionPageVisible('favorites-page');
cy.ionMenuClick();
cy.ionMenuNav('Home with redirect');
cy.ionPageVisible('home-page');
cy.ionPageDoesNotExist('favorites-page');
});
it('/routing/tabs/home Menu > Favorites > Menu > Home with router, Home page should be visible, and Favorites should be hidden', () => {
cy.visit(`http://localhost:${port}/routing/tabs/home`);
cy.ionMenuClick();
cy.ionMenuNav('Favorites');
cy.ionPageVisible('favorites-page');
cy.ionMenuClick();
cy.ionMenuNav('Home with router');
cy.ionPageVisible('home-page');
cy.ionPageHidden('favorites-page');
});
it('should show back button when going back to a pushed page', () => {
cy.visit(`http://localhost:${port}/routing/tabs/home`);
cy.ionNav('ion-item', 'Details 1');
cy.ionPageHidden('home-page');
cy.ionPageVisible('home-details-page-1');
cy.get('ion-tab-button#tab-button-settings').click();
cy.ionPageHidden('home-details-page-1');
cy.ionPageVisible('settings-page');
cy.get('ion-tab-button#tab-button-home').click();
cy.ionPageHidden('settings-page');
cy.ionPageVisible('home-details-page-1');
cy.ionBackClick('home-details-page-1');
cy.ionPageDoesNotExist('home-details-page-1');
cy.ionPageVisible('home-page');
});
/*
Tests to add:
Test that lifecycle events fire
Test unmounting components by passing unmount to routerOptions
Test components mount/unmount properly
*/
});
Reference in New Issue View Git Blame Copy Permalink