Skip to content

Commit

Permalink
test(angular): remove routing waits in tests (#28532)
Browse files Browse the repository at this point in the history
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. -->
  • Loading branch information
liamdebeasi authored Nov 14, 2023
1 parent ed80b7f commit 093c671
Show file tree
Hide file tree
Showing 4 changed files with 17 additions and 15 deletions.
18 changes: 14 additions & 4 deletions packages/angular/test/base/cypress/support/commands.js
Original file line number Diff line number Diff line change
Expand Up @@ -41,11 +41,21 @@ Cypress.Commands.add('ionSwipeToGoBack', (complete = false, selector = 'ion-rout
cy.wait(150);
});

/**
* getStack is a query because it has automatic
* retries built in which will let us account for
* async routing without having to use
* arbitrary cy.wait calls.
*/
Cypress.Commands.addQuery('getStack', (selector) => {
return () => {
const el = cy.$$(selector);
return Array.from(el.children()).map((el) => el.tagName.toLowerCase());
}
});

Cypress.Commands.add('testStack', (selector, expected) => {
cy.document().then((doc) => {
const children = Array.from(doc.querySelector(selector).children).map((el) => el.tagName.toLowerCase());
expect(children).to.deep.equal(expected);
});
cy.getStack(selector).should('deep.equal', expected);
});

Cypress.Commands.add('testLifeCycle', (selector, expected) => {
Expand Down
4 changes: 1 addition & 3 deletions packages/angular/test/base/e2e/src/lazy/navigation.spec.ts
Original file line number Diff line number Diff line change
@@ -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');
Expand Down
Original file line number Diff line number Diff line change
@@ -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', () => {
Expand Down
8 changes: 1 addition & 7 deletions packages/angular/test/base/e2e/src/lazy/router-link.spec.ts
Original file line number Diff line number Diff line change
@@ -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', () => {
Expand All @@ -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)}`;
Expand All @@ -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();

Expand Down Expand Up @@ -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,
Expand All @@ -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,
Expand All @@ -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,
Expand All @@ -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,
Expand Down

0 comments on commit 093c671

Please sign in to comment.