mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-18 11:17:19 +08:00
123 lines
4.5 KiB
JavaScript
123 lines
4.5 KiB
JavaScript
const port = 3000;
|
|
|
|
describe('Nested Outlets', () => {
|
|
/*
|
|
This spec tests nested router outlets working properly
|
|
and to be able to transition to/from one nested outlet.
|
|
Utilizes `ionPage` prop on `IonRouterOutlet` to make the router outlet
|
|
a target of the transition.
|
|
Fixes bug https://github.com/ionic-team/ionic/issues/20597
|
|
*/
|
|
|
|
it('/nested-outlet > First Page should be visible', () => {
|
|
cy.visit(`http://localhost:${port}/nested-outlet`)
|
|
cy.ionPageVisible('firstpage')
|
|
})
|
|
|
|
it('/nested-outlet > Go to second page Button click, Second Page should be visible', () => {
|
|
cy.visit(`http://localhost:${port}/nested-outlet`)
|
|
cy.ionPageVisible('firstpage')
|
|
cy.ionNav('ion-button', 'Go to second page');
|
|
cy.ionPageVisible('secondpage')
|
|
})
|
|
|
|
it('/nested-outlet > Go to second page Button click, Back with direction "back" Button click, FirstPage should be visible', () => {
|
|
cy.visit(`http://localhost:${port}/nested-outlet`)
|
|
cy.ionPageVisible('firstpage')
|
|
cy.ionNav('ion-button', 'Go to second page');
|
|
cy.ionPageVisible('secondpage')
|
|
cy.ionNav('ion-button', 'Back with direction "back"')
|
|
cy.ionPageVisible('firstpage')
|
|
})
|
|
|
|
it('/nested-outlet > Go to second page Button click, Back with direction "root" Button click, FirstPage should be visible', () => {
|
|
cy.visit(`http://localhost:${port}/nested-outlet`)
|
|
cy.ionPageVisible('firstpage')
|
|
cy.ionNav('ion-button', 'Go to second page');
|
|
cy.ionPageVisible('secondpage')
|
|
cy.ionNav('ion-button', 'Back with direction "root"')
|
|
cy.ionPageVisible('firstpage')
|
|
})
|
|
|
|
it('/nested-outlet/secondpage > Back with direction "root" Button click, FirstPage should be visible', () => {
|
|
cy.visit(`http://localhost:${port}/nested-outlet/secondpage`)
|
|
cy.ionPageVisible('secondpage')
|
|
cy.ionNav('ion-button', 'Back with direction "root"')
|
|
cy.ionPageVisible('firstpage')
|
|
})
|
|
|
|
})
|
|
|
|
describe('Nested Outlets 2', () => {
|
|
/*
|
|
This spec tests another nested router outlets working properly
|
|
and to be able to transition to/from one nested outlet.
|
|
Utilizes `ionPage` prop on `IonRouterOutlet` to make the router outlet
|
|
a target of the transition.
|
|
This one uses a few more nested outlets.
|
|
Note: There is a limitation when going back to the Home page from Welcome in
|
|
that the transition doesn't do a backwards animation. This is because the top level
|
|
outlet is transition from and to itself, therefore it can't animate.
|
|
I think the same issue exists when going from a item page back to the list page.
|
|
This should be fixable through configuring a less complicated route structure in the app.
|
|
Fixes bug https://github.com/ionic-team/ionic/issues/20219
|
|
*/
|
|
|
|
it('/nested-outlet2 > First Page should be visible', () => {
|
|
cy.visit(`http://localhost:${port}/nested-outlet2`)
|
|
cy.ionPageVisible('home')
|
|
})
|
|
|
|
it('/nested-outlet2 > Go to Welcome IonItem click > Welcome page should be visible', () => {
|
|
cy.visit(`http://localhost:${port}/nested-outlet2`)
|
|
cy.ionPageVisible('home')
|
|
cy.ionNav('ion-item', 'Go to Welcome');
|
|
cy.ionPageVisible('welcome')
|
|
})
|
|
|
|
it('/nested-outlet2 > Go to Welcome IonItem click > Go to list from Welcome IonItem click > List page should be visible', () => {
|
|
cy.visit(`http://localhost:${port}/nested-outlet2`)
|
|
cy.ionPageVisible('home')
|
|
cy.ionNav('ion-item', 'Go to Welcome');
|
|
cy.ionPageVisible('welcome')
|
|
cy.ionNav('ion-item', 'Go to list from Welcome');
|
|
cy.ionPageVisible('list')
|
|
})
|
|
|
|
it(`/nested-outlet2 >
|
|
Go to Welcome IonItem click >
|
|
Go to list from Welcome IonItem click >
|
|
Item#1 IonItem Click >
|
|
Item page should be visible
|
|
`, () => {
|
|
cy.visit(`http://localhost:${port}/nested-outlet2`)
|
|
cy.ionPageVisible('home')
|
|
cy.ionNav('ion-item', 'Go to Welcome');
|
|
cy.ionPageVisible('welcome')
|
|
cy.ionNav('ion-item', 'Go to list from Welcome');
|
|
cy.ionPageVisible('list')
|
|
cy.ionNav('ion-item', 'Item #1');
|
|
cy.ionPageVisible('item')
|
|
})
|
|
|
|
it(`/nested-outlet2 >
|
|
Go to list from Home IonItem click >
|
|
Item#1 IonItem Click >
|
|
Item page should be visible >
|
|
Back >
|
|
Home page should be visible
|
|
`, () => {
|
|
cy.visit(`http://localhost:${port}/nested-outlet2`)
|
|
cy.ionPageVisible('home')
|
|
cy.ionNav('ion-item', 'Go to list from Home')
|
|
cy.ionPageVisible('list')
|
|
cy.ionNav('ion-item', 'Item #1')
|
|
cy.ionPageVisible('item')
|
|
cy.ionBackClick('item');
|
|
cy.ionPageVisible('list')
|
|
cy.ionBackClick('list');
|
|
cy.ionPageVisible('home')
|
|
})
|
|
|
|
})
|