Skip to content

Commit 093c671

Browse files
authored
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: #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. -->
1 parent ed80b7f commit 093c671

File tree

4 files changed

+17
-15
lines changed

4 files changed

+17
-15
lines changed

packages/angular/test/base/cypress/support/commands.js

Lines changed: 14 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -41,11 +41,21 @@ Cypress.Commands.add('ionSwipeToGoBack', (complete = false, selector = 'ion-rout
4141
cy.wait(150);
4242
});
4343

44+
/**
45+
* getStack is a query because it has automatic
46+
* retries built in which will let us account for
47+
* async routing without having to use
48+
* arbitrary cy.wait calls.
49+
*/
50+
Cypress.Commands.addQuery('getStack', (selector) => {
51+
return () => {
52+
const el = cy.$$(selector);
53+
return Array.from(el.children()).map((el) => el.tagName.toLowerCase());
54+
}
55+
});
56+
4457
Cypress.Commands.add('testStack', (selector, expected) => {
45-
cy.document().then((doc) => {
46-
const children = Array.from(doc.querySelector(selector).children).map((el) => el.tagName.toLowerCase());
47-
expect(children).to.deep.equal(expected);
48-
});
58+
cy.getStack(selector).should('deep.equal', expected);
4959
});
5060

5161
Cypress.Commands.add('testLifeCycle', (selector, expected) => {

packages/angular/test/base/e2e/src/lazy/navigation.spec.ts

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,9 @@
11
describe('Navigation', () => {
22
beforeEach(() => {
3-
cy.visit('/lazy/navigation');
3+
cy.visit('/lazy/navigation/page1?ionic:_testing=true');
44
})
55

66
it('should navigate correctly', () => {
7-
cy.visit('/lazy/navigation/page1');
8-
cy.wait(2000);
97
cy.testStack('ion-router-outlet', ['app-navigation-page2', 'app-navigation-page1']);
108

119
cy.get('app-navigation-page2').should('have.attr', 'aria-hidden').and('equal', 'true');

packages/angular/test/base/e2e/src/lazy/nested-outlet.spec.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
describe('Nested Outlet', () => {
22
beforeEach(() => {
3-
cy.visit('/lazy/nested-outlet/page');
3+
cy.visit('/lazy/nested-outlet/page?ionic:_testing=true');
44
})
55

66
it('should navigate correctly', () => {

packages/angular/test/base/e2e/src/lazy/router-link.spec.ts

Lines changed: 1 addition & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
describe('Router Link', () => {
22
beforeEach(() => {
3-
cy.visit('/lazy/router-link');
3+
cy.visit('/lazy/router-link?ionic:_testing=true');
44
});
55

66
describe('router-link params and fragments', () => {
@@ -9,7 +9,6 @@ describe('Router Link', () => {
99
const id = 'MyPageID==';
1010

1111
it('should go to a page with properly encoded values', () => {
12-
cy.visit('/lazy/router-link?ionic:_testing=true');
1312
cy.get('#queryParamsFragment').click();
1413

1514
const expectedPath = `${encodeURIComponent(id)}`;
@@ -24,7 +23,6 @@ describe('Router Link', () => {
2423
});
2524

2625
it('should return to a page with preserved query param and fragment', () => {
27-
cy.visit('/lazy/router-link?ionic:_testing=true');
2826
cy.get('#queryParamsFragment').click();
2927
cy.get('#goToPage3').click();
3028

@@ -148,7 +146,6 @@ function testForward() {
148146
}
149147

150148
function testRoot() {
151-
cy.wait(200);
152149
cy.testStack('ion-router-outlet', ['app-router-link-page']);
153150
cy.testLifeCycle('app-router-link-page', {
154151
ionViewWillEnter: 1,
@@ -159,7 +156,6 @@ function testRoot() {
159156
cy.get('app-router-link-page #canGoBack').should('have.text', 'false');
160157

161158
cy.go('back');
162-
cy.wait(100);
163159
cy.testStack('ion-router-outlet', ['app-router-link']);
164160
cy.testLifeCycle('app-router-link', {
165161
ionViewWillEnter: 1,
@@ -170,7 +166,6 @@ function testRoot() {
170166
}
171167

172168
function testBack() {
173-
cy.wait(500);
174169
cy.testStack('ion-router-outlet', ['app-router-link-page']);
175170
cy.testLifeCycle('app-router-link-page', {
176171
ionViewWillEnter: 1,
@@ -181,7 +176,6 @@ function testBack() {
181176
cy.get('app-router-link-page #canGoBack').should('have.text', 'false');
182177

183178
cy.go('back');
184-
cy.wait(100);
185179
cy.testStack('ion-router-outlet', ['app-router-link']);
186180
cy.testLifeCycle('app-router-link', {
187181
ionViewWillEnter: 1,

0 commit comments

Comments
 (0)