mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
test(angular): remove routing waits in tests (#28532)
Issue number: N/A --------- <!-- Please do not submit updates to dependencies unless it fixes an issue. --> <!-- Please try to limit your pull request to one type (bugfix, feature, etc). Submit multiple pull requests if needed. --> ## What is the current behavior? <!-- Please describe the current behavior that you are modifying. --> Our Angular E2E tests are brittle because they rely on arbitrary `cy.wait` calls to account for asynchronous routing. This leads to flaky tests on CI and seemingly random test failures when we make adjustments to the Ionic Anguar routing integration (see: https://github.com/ionic-team/ionic-framework/pull/28188) Additionally, our test execution for the navigation tests is quite slow because transitions are enabled. As a result, we need to wait hundreds of ms per test just for the transitions to finish. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - Updated the `testStack` command to use a new `getStack` [Cypress query](https://docs.cypress.io/api/cypress-api/custom-queries). These queries come with automatic retrying built-in. By leveraging this query in the `testStack` command, we can avoid the arbitrary waits. - Added `ionic:_testing=true` query strings to the navigation tests. This causes Ionic to disable any transitions so the tests execute faster. - Removed most of the arbitrary `cy.wait` calls. I kept the swipe to go back `cy.wait` -- I wasn't quite sure how to reduce flakiness on that one. ## Does this introduce a breaking change? - [ ] Yes - [x] No <!-- If this introduces a breaking change, please describe the impact and migration path for existing applications below. --> ## Other information <!-- Any other information that is important to this PR such as screenshots of how the component looks before and after the change. -->
This commit is contained in:
@@ -1,11 +1,9 @@
|
||||
describe('Navigation', () => {
|
||||
beforeEach(() => {
|
||||
cy.visit('/lazy/navigation');
|
||||
cy.visit('/lazy/navigation/page1?ionic:_testing=true');
|
||||
})
|
||||
|
||||
it('should navigate correctly', () => {
|
||||
cy.visit('/lazy/navigation/page1');
|
||||
cy.wait(2000);
|
||||
cy.testStack('ion-router-outlet', ['app-navigation-page2', 'app-navigation-page1']);
|
||||
|
||||
cy.get('app-navigation-page2').should('have.attr', 'aria-hidden').and('equal', 'true');
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
describe('Nested Outlet', () => {
|
||||
beforeEach(() => {
|
||||
cy.visit('/lazy/nested-outlet/page');
|
||||
cy.visit('/lazy/nested-outlet/page?ionic:_testing=true');
|
||||
})
|
||||
|
||||
it('should navigate correctly', () => {
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
describe('Router Link', () => {
|
||||
beforeEach(() => {
|
||||
cy.visit('/lazy/router-link');
|
||||
cy.visit('/lazy/router-link?ionic:_testing=true');
|
||||
});
|
||||
|
||||
describe('router-link params and fragments', () => {
|
||||
@@ -9,7 +9,6 @@ describe('Router Link', () => {
|
||||
const id = 'MyPageID==';
|
||||
|
||||
it('should go to a page with properly encoded values', () => {
|
||||
cy.visit('/lazy/router-link?ionic:_testing=true');
|
||||
cy.get('#queryParamsFragment').click();
|
||||
|
||||
const expectedPath = `${encodeURIComponent(id)}`;
|
||||
@@ -24,7 +23,6 @@ describe('Router Link', () => {
|
||||
});
|
||||
|
||||
it('should return to a page with preserved query param and fragment', () => {
|
||||
cy.visit('/lazy/router-link?ionic:_testing=true');
|
||||
cy.get('#queryParamsFragment').click();
|
||||
cy.get('#goToPage3').click();
|
||||
|
||||
@@ -148,7 +146,6 @@ function testForward() {
|
||||
}
|
||||
|
||||
function testRoot() {
|
||||
cy.wait(200);
|
||||
cy.testStack('ion-router-outlet', ['app-router-link-page']);
|
||||
cy.testLifeCycle('app-router-link-page', {
|
||||
ionViewWillEnter: 1,
|
||||
@@ -159,7 +156,6 @@ function testRoot() {
|
||||
cy.get('app-router-link-page #canGoBack').should('have.text', 'false');
|
||||
|
||||
cy.go('back');
|
||||
cy.wait(100);
|
||||
cy.testStack('ion-router-outlet', ['app-router-link']);
|
||||
cy.testLifeCycle('app-router-link', {
|
||||
ionViewWillEnter: 1,
|
||||
@@ -170,7 +166,6 @@ function testRoot() {
|
||||
}
|
||||
|
||||
function testBack() {
|
||||
cy.wait(500);
|
||||
cy.testStack('ion-router-outlet', ['app-router-link-page']);
|
||||
cy.testLifeCycle('app-router-link-page', {
|
||||
ionViewWillEnter: 1,
|
||||
@@ -181,7 +176,6 @@ function testBack() {
|
||||
cy.get('app-router-link-page #canGoBack').should('have.text', 'false');
|
||||
|
||||
cy.go('back');
|
||||
cy.wait(100);
|
||||
cy.testStack('ion-router-outlet', ['app-router-link']);
|
||||
cy.testLifeCycle('app-router-link', {
|
||||
ionViewWillEnter: 1,
|
||||
|
||||
Reference in New Issue
Block a user