mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-11-04 03:48:13 +08:00
263 lines
7.5 KiB
JavaScript
263 lines
7.5 KiB
JavaScript
const testController = (overlay, shadow = false) => {
|
|
const selector = `.${overlay}-controller`;
|
|
cy.get(`ion-radio#${overlay}`).click();
|
|
cy.get('ion-radio#controller').click();
|
|
|
|
cy.get('ion-button#present-overlay').click();
|
|
cy.get(selector).should('exist').should('be.visible');
|
|
|
|
if (shadow) {
|
|
cy.get(selector).shadow().find('ion-backdrop').click({ force: true });
|
|
} else {
|
|
cy.get(`${selector} ion-backdrop`).click({ force: true });
|
|
}
|
|
|
|
cy.get(selector).should('not.exist');
|
|
}
|
|
|
|
const testComponent = (overlay, shadow = false) => {
|
|
cy.get(`ion-radio#${overlay}`).click();
|
|
cy.get('ion-radio#component').click();
|
|
|
|
cy.get('ion-button#present-overlay').click();
|
|
cy.get(overlay).should('exist').should('be.visible');
|
|
|
|
if (shadow) {
|
|
cy.get(overlay).shadow().find('ion-backdrop').click({ force: true });
|
|
} else {
|
|
cy.get(`${overlay} ion-backdrop`).click({ force: true });
|
|
|
|
/**
|
|
* Overlay components that are shadow can be used inline
|
|
* so they should not be removed from the DOM. This test
|
|
* might need to be revisited if other overlay components
|
|
* are converted to shadow as well.
|
|
*
|
|
* Migrate these overlays to use `testInlineOverlay` instead.
|
|
*/
|
|
cy.get(overlay).should('not.exist');
|
|
}
|
|
}
|
|
|
|
const testInlineOverlay = (overlay, shadow = false) => {
|
|
cy.get(`ion-radio#${overlay}`).click();
|
|
cy.get('ion-radio#component').click();
|
|
|
|
cy.get('ion-button#present-overlay').click();
|
|
cy.get(overlay).should('exist').should('be.visible');
|
|
|
|
if (shadow) {
|
|
cy.get(overlay).shadow().find('ion-backdrop').click({ force: true });
|
|
} else {
|
|
cy.get(`${overlay} ion-backdrop`).click({ force: true });
|
|
|
|
cy.get(overlay).should('not.be.visible');
|
|
}
|
|
}
|
|
|
|
describe('Overlays', () => {
|
|
beforeEach(() => {
|
|
cy.viewport(1000, 900);
|
|
cy.visit('/overlays');
|
|
})
|
|
|
|
it(`should open and close ion-alert via controller`, () => {
|
|
testController('ion-alert');
|
|
});
|
|
|
|
it(`should open and close ion-action-sheet via controller`, () => {
|
|
testController('ion-action-sheet');
|
|
});
|
|
|
|
it(`should open and close ion-loading via controller`, () => {
|
|
testController('ion-loading');
|
|
});
|
|
|
|
it(`should open and close ion-modal via controller`, () => {
|
|
testController('ion-modal', true);
|
|
});
|
|
|
|
it(`should open and close ion-popover via controller`, () => {
|
|
testController('ion-popover', true);
|
|
});
|
|
|
|
it(`should open and close ion-toast via controller`, () => {
|
|
cy.get(`ion-radio#ion-toast`).click();
|
|
cy.get('ion-radio#controller').click();
|
|
|
|
cy.get('ion-button#present-overlay').click();
|
|
cy.get('ion-toast.ion-toast-controller').should('exist');
|
|
|
|
cy.get('ion-toast.ion-toast-controller').shadow().find('button').click();
|
|
|
|
cy.get('ion-toast.ion-toast-controller').should('not.exist');
|
|
});
|
|
|
|
it(`should open and close ion-alert via component`, () => {
|
|
testInlineOverlay('ion-alert');
|
|
});
|
|
|
|
it(`should open and close ion-action-sheet via component`, () => {
|
|
testInlineOverlay('ion-action-sheet');
|
|
});
|
|
|
|
it(`should open and close ion-loading via component`, () => {
|
|
testInlineOverlay('ion-loading');
|
|
});
|
|
|
|
it(`should open and close ion-modal via component`, () => {
|
|
testComponent('ion-modal', true);
|
|
});
|
|
|
|
it(`should open and close ion-popover via component`, () => {
|
|
testComponent('ion-popover', true);
|
|
});
|
|
|
|
it(`should open and close ion-toast via component`, () => {
|
|
cy.get(`ion-radio#ion-toast`).click();
|
|
cy.get('ion-radio#component').click();
|
|
|
|
cy.get('ion-button#present-overlay').click();
|
|
cy.get('ion-toast').should('exist');
|
|
|
|
cy.get('ion-toast').shadow().find('button').click();
|
|
|
|
cy.get('ion-toast').should('not.be.visible');
|
|
});
|
|
|
|
it('should pass props to modal via controller', () => {
|
|
cy.get('ion-radio#ion-modal').click();
|
|
cy.get('ion-radio#controller').click();
|
|
|
|
cy.get('ion-button#present-overlay').click();
|
|
cy.get('ion-modal').should('exist');
|
|
|
|
cy.get('ion-modal ion-content #title').should('have.text', 'Custom Title');
|
|
});
|
|
|
|
it('should pass props to modal via component', () => {
|
|
cy.get('ion-radio#ion-modal').click();
|
|
cy.get('ion-radio#component').click();
|
|
|
|
cy.get('ion-button#present-overlay').click();
|
|
cy.get('ion-modal').should('exist');
|
|
|
|
cy.get('ion-modal ion-content #title').should('have.text', 'Custom Title');
|
|
});
|
|
|
|
it('should pass props to popover via controller', () => {
|
|
cy.get('ion-radio#ion-popover').click();
|
|
cy.get('ion-radio#controller').click();
|
|
|
|
cy.get('ion-button#present-overlay').click();
|
|
cy.get('ion-popover.ion-popover-controller').should('exist');
|
|
|
|
cy.get('ion-popover.ion-popover-controller ion-content #title').should('have.text', 'Custom Title');
|
|
});
|
|
|
|
it('should pass props to popover via component', () => {
|
|
cy.get('ion-radio#ion-popover').click();
|
|
cy.get('ion-radio#component').click();
|
|
|
|
cy.get('ion-button#present-overlay').click();
|
|
cy.get('ion-popover').should('exist');
|
|
|
|
cy.get('ion-popover.popover-inline ion-content #title').should('have.text', 'Custom Title');
|
|
});
|
|
|
|
it('should only open one instance at a time when props change quickly on component', () => {
|
|
cy.get('#change-loading-props').click();
|
|
|
|
cy.get('ion-loading').should('have.length', 1);
|
|
});
|
|
|
|
it('should fire lifecycle events on overlays', () => {
|
|
cy.get('ion-radio#ion-modal').click();
|
|
cy.get('ion-radio#component').click();
|
|
|
|
cy.get('ion-button#present-overlay').click();
|
|
cy.get('ion-modal').should('exist');
|
|
|
|
testLifecycle('overlays', {
|
|
willPresent: 1,
|
|
didPresent: 1,
|
|
willDismiss: 0,
|
|
didDismiss: 0
|
|
});
|
|
|
|
cy.get('ion-modal #dismiss').click();
|
|
|
|
testLifecycle('overlays', {
|
|
willPresent: 1,
|
|
didPresent: 1,
|
|
willDismiss: 1,
|
|
didDismiss: 1
|
|
});
|
|
|
|
cy.get('ion-button#present-overlay').click();
|
|
cy.get('ion-modal').should('exist');
|
|
|
|
testLifecycle('overlays', {
|
|
willPresent: 2,
|
|
didPresent: 2,
|
|
willDismiss: 1,
|
|
didDismiss: 1
|
|
});
|
|
|
|
cy.get('ion-modal #dismiss').click();
|
|
|
|
testLifecycle('overlays', {
|
|
willPresent: 2,
|
|
didPresent: 2,
|
|
willDismiss: 2,
|
|
didDismiss: 2
|
|
});
|
|
});
|
|
|
|
it('should unmount modal via component', () => {
|
|
cy.get('ion-radio#ion-modal').click();
|
|
cy.get('ion-radio#component').click();
|
|
|
|
cy.get('ion-button#present-overlay').click();
|
|
cy.get('ion-modal').should('exist');
|
|
|
|
cy.get('ion-modal ion-input').should('have.value', '');
|
|
cy.get('ion-modal ion-input').type('1');
|
|
|
|
cy.get('ion-modal #dismiss').click();
|
|
|
|
cy.get('ion-button#present-overlay').click();
|
|
cy.get('ion-modal').should('exist');
|
|
|
|
cy.get('ion-modal ion-input').should('have.value', '');
|
|
});
|
|
|
|
|
|
it('should unmount modal via controller', () => {
|
|
cy.get('ion-radio#ion-modal').click();
|
|
cy.get('ion-radio#controller').click();
|
|
|
|
cy.get('ion-button#present-overlay').click();
|
|
cy.get('ion-modal').should('exist');
|
|
|
|
cy.get('ion-modal ion-input').should('have.value', '');
|
|
cy.get('ion-modal ion-input').type('1');
|
|
|
|
cy.get('ion-modal #dismiss').click();
|
|
|
|
cy.get('ion-button#present-overlay').click();
|
|
cy.get('ion-modal').should('exist');
|
|
|
|
cy.get('ion-modal ion-input').should('have.value', '');
|
|
});
|
|
|
|
})
|
|
|
|
const testLifecycle = (selector, expected = {}) => {
|
|
cy.get(`[data-pageid=${selector}] #willPresent`).should('have.text', expected.willPresent);
|
|
cy.get(`[data-pageid=${selector}] #didPresent`).should('have.text', expected.didPresent);
|
|
cy.get(`[data-pageid=${selector}] #willDismiss`).should('have.text', expected.willDismiss);
|
|
cy.get(`[data-pageid=${selector}] #didDismiss`).should('have.text', expected.didDismiss);
|
|
}
|
|
|