mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
9313a914b7
Issue number: Internal --------- <!-- Please refer to our contributing documentation for any questions on submitting a pull request, or let us know here if you need any help: https://ionicframework.com/docs/building/contributing --> <!-- Some docs updates need to be made in the `ionic-docs` repo, in a separate PR. See https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#modifying-documentation for details. --> <!-- 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. --> The counter for incrementing the `id` and `z-index` of an overlay is incremented whenever the `connectedCallback` is fired for an overlay. When an overlay is presented and/or conditionally rendered, the overlay `id` can increment by `n+2` instead of `n+1`. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - Increments all overlay ids consistently - Removes legacy `ion-modal-{id}` and `ion-popover-{id}` logic - Adds unit tests for the id behavior - Tests are split up into separate files so that the counter is always starting from `0` - Adds an integration test with the Angular test app to verify conditional rendering behavior ## 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. -->
124 lines
3.8 KiB
TypeScript
124 lines
3.8 KiB
TypeScript
describe('Modals', () => {
|
|
beforeEach(() => {
|
|
cy.visit('/modals');
|
|
})
|
|
|
|
it('should open standalone modal and close', () => {
|
|
cy.get('#action-button').click();
|
|
|
|
cy.get('ion-modal').should('exist').should('be.visible');
|
|
|
|
cy.get('app-modal-example h2').should('have.text', '123');
|
|
cy.get('app-modal-example h3').should('have.text', '321');
|
|
cy.get('#modalInstance').should('have.text', 'true');
|
|
|
|
cy.get('#onWillDismiss').should('have.text', 'false');
|
|
cy.get('#onDidDismiss').should('have.text', 'false');
|
|
|
|
cy.get('#close-modal').click();
|
|
|
|
cy.get('ion-modal').should('not.exist');
|
|
|
|
cy.get('#onWillDismiss').should('have.text', 'true');
|
|
cy.get('#onDidDismiss').should('have.text', 'true');
|
|
});
|
|
|
|
it('should open nav modal and close', () => {
|
|
cy.get('#action-button-2').click();
|
|
|
|
cy.get('ion-modal').should('exist').should('be.visible');
|
|
|
|
cy.get('ion-nav > *:last-child h2').should('have.text', '123');
|
|
cy.get('ion-nav > *:last-child h3').should('have.text', '321');
|
|
|
|
cy.get('ion-nav > *:last-child .push-page').click();
|
|
|
|
cy.get('ion-nav > *:last-child h2').should('have.text', 'pushed!');
|
|
cy.get('ion-nav > *:last-child h3').should('have.text', '');
|
|
|
|
cy.get('ion-nav > *:last-child .pop-page').click();
|
|
|
|
cy.get('ion-nav > *:last-child h2').should('have.text', '123');
|
|
});
|
|
|
|
});
|
|
|
|
describe('Modals: Inline', () => {
|
|
beforeEach(() => {
|
|
cy.visit('/modal-inline');
|
|
});
|
|
|
|
it('should initially have no items', () => {
|
|
cy.get('ion-list ion-item').should('not.exist');
|
|
});
|
|
|
|
it('should have items after opening', () => {
|
|
cy.get('#open-modal').click();
|
|
|
|
cy.get('ion-list ion-item:nth-child(1)').should('have.text', 'A');
|
|
cy.get('ion-list ion-item:nth-child(2)').should('have.text', 'B');
|
|
cy.get('ion-list ion-item:nth-child(3)').should('have.text', 'C');
|
|
cy.get('ion-list ion-item:nth-child(4)').should('have.text', 'D');
|
|
});
|
|
|
|
it('should have a div with .ion-page after opening', () => {
|
|
cy.get('#open-modal').click();
|
|
|
|
cy.get('ion-modal').children('.ion-page').should('exist');
|
|
});
|
|
|
|
it('should remove .ion-page when closing the modal', () => {
|
|
cy.get('#open-modal').click();
|
|
|
|
cy.get('ion-modal').children('.ion-page').should('exist');
|
|
cy.get('ion-modal').trigger('click', 20, 20);
|
|
|
|
cy.get('ion-modal').children('.ion-page').should('not.exist');
|
|
});
|
|
|
|
describe('setting the current breakpoint', () => {
|
|
|
|
it('should emit ionBreakpointDidChange', () => {
|
|
cy.get('#open-modal').click();
|
|
|
|
cy.get('ion-modal').then(modal => {
|
|
(modal.get(0) as any).setCurrentBreakpoint(1);
|
|
});
|
|
|
|
cy.get('#breakpointDidChange').should('have.text', '1');
|
|
});
|
|
|
|
});
|
|
|
|
});
|
|
|
|
describe('when in a modal', () => {
|
|
|
|
beforeEach(() => {
|
|
cy.visit('/modals');
|
|
cy.get('#action-button').click();
|
|
cy.get('#close-modal').click();
|
|
cy.get('#action-button').click();
|
|
});
|
|
|
|
it('should render ion-item item-has-value class when control value is set', () => {
|
|
cy.get('ion-select').click();
|
|
cy.get('ion-alert').should('exist').should('be.visible');
|
|
// Option 0 option
|
|
cy.get('ion-alert .alert-radio-button:nth-of-type(1)').click();
|
|
// Click confirm button
|
|
cy.get('ion-alert .alert-button:not(.alert-button-role-cancel)').click();
|
|
|
|
cy.get('#inputWithFloatingLabel').should('have.class', 'item-has-value');
|
|
});
|
|
|
|
it('should not render ion-item item-has-value class when control value is undefined', () => {
|
|
cy.get('#set-to-undefined').click();
|
|
cy.get('#inputWithFloatingLabel').should('not.have.class', 'item-has-value');
|
|
});
|
|
|
|
it('should not render ion-item item-has-value class when control value is null', () => {
|
|
cy.get('#set-to-null').click();
|
|
cy.get('#inputWithFloatingLabel').should('not.have.class', 'item-has-value');
|
|
});
|
|
}); |