mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-15 17:42:15 +08:00
093c671e3e
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. -->
90 lines
3.3 KiB
JavaScript
90 lines
3.3 KiB
JavaScript
// ***********************************************
|
|
// This example commands.js shows you how to
|
|
// create various custom commands and overwrite
|
|
// existing commands.
|
|
//
|
|
// For more comprehensive examples of custom
|
|
// commands please read more here:
|
|
// https://on.cypress.io/custom-commands
|
|
// ***********************************************
|
|
//
|
|
//
|
|
// -- This is a parent command --
|
|
// Cypress.Commands.add('login', (email, password) => { ... })
|
|
//
|
|
//
|
|
// -- This is a child command --
|
|
// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
|
|
//
|
|
//
|
|
// -- This is a dual command --
|
|
// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
|
|
//
|
|
//
|
|
// -- This will overwrite an existing command --
|
|
// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
|
|
|
|
Cypress.Commands.add('ionSwipeToGoBack', (complete = false, selector = 'ion-router-outlet') => {
|
|
const increment = complete ? 60 : 25;
|
|
cy.get(selector)
|
|
.first()
|
|
.trigger('mousedown', 0, 275, { which: 1, force: true })
|
|
.trigger('mousemove', increment * 1, 275, { which: 1, force: true })
|
|
.wait(50)
|
|
.trigger('mousemove', increment * 2, 275, { which: 1, force: true })
|
|
.wait(50)
|
|
.trigger('mousemove', increment * 3, 275, { which: 1, force: true })
|
|
.wait(50)
|
|
.trigger('mousemove', increment * 4, 275, { which: 1, force: true })
|
|
.wait(50)
|
|
.trigger('mouseup', increment * 4, 275, { which: 1, force: true });
|
|
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.getStack(selector).should('deep.equal', expected);
|
|
});
|
|
|
|
Cypress.Commands.add('testLifeCycle', (selector, expected) => {
|
|
cy.get(`${selector} #ngOnInit`).invoke('text').should('equal', '1');
|
|
cy.get(`${selector} #ionViewWillEnter`).invoke('text').should('equal', expected.ionViewWillEnter.toString());
|
|
cy.get(`${selector} #ionViewDidEnter`).invoke('text').should('equal', expected.ionViewDidEnter.toString());
|
|
cy.get(`${selector} #ionViewWillLeave`).invoke('text').should('equal', expected.ionViewWillLeave.toString());
|
|
cy.get(`${selector} #ionViewDidLeave`).invoke('text').should('equal', expected.ionViewDidLeave.toString());
|
|
});
|
|
|
|
Cypress.Commands.add('ionPageVisible', (selector) => {
|
|
cy.get(selector)
|
|
.should('have.class', 'ion-page')
|
|
.should('not.have.class', 'ion-page-hidden')
|
|
.should('not.have.class', 'ion-page-invisible')
|
|
.should('have.length', 1);
|
|
});
|
|
|
|
Cypress.Commands.add('ionPageHidden', (selector) => {
|
|
cy.get(selector).should('have.class', 'ion-page').should('have.class', 'ion-page-hidden').should('have.length', 1);
|
|
});
|
|
|
|
Cypress.Commands.add('ionPageDoesNotExist', (selector) => {
|
|
cy.get(selector).should('not.exist');
|
|
});
|
|
|
|
Cypress.Commands.add('ionTabClick', (tabText) => {
|
|
// TODO FW-2790: Figure out how to get rid of wait. It's a workaround for flakiness in CI.
|
|
cy.wait(250);
|
|
cy.contains('ion-tab-button', tabText).click({ force: true });
|
|
});
|