javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-19 11:41:20 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(modal): .ion-page element is now correctly added (#24811)

Browse Source 
resolves #24809
This commit is contained in:
Liam DeBeasi
2022-02-24 09:28:52 -05:00
committed by GitHub
parent c35b898f1d
commit 3d0f99904f
3 changed files with 18 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
angular/src/directives/overlays/modal.ts
View File

@ -73,7 +73,7 @@ export declare interface IonModal extends Components.IonModal {
@Component({ @Component({
selector: 'ion-modal', selector: 'ion-modal',
changeDetection: ChangeDetectionStrategy.OnPush, changeDetection: ChangeDetectionStrategy.OnPush,
template: `<div class="ion-page"><ng-container [ngTemplateOutlet]="template" *ngIf="isCmpOpen"></ng-container></div>`, template: `<div class="ion-page" *ngIf="isCmpOpen"><ng-container [ngTemplateOutlet]="template"></ng-container></div>`,
inputs: [ inputs: [
'animated', 'animated',
'backdropBreakpoint', 'backdropBreakpoint',

17
angular/test/test-app/e2e/src/modal.spec.ts
View File

@ -52,8 +52,8 @@ describe('Modals: Inline', () => {
cy.get('ion-list ion-item').should('not.exist'); cy.get('ion-list ion-item').should('not.exist');
}); });
it('should have items after 1500ms', () => { it('should have items after opening', () => {
cy.wait(1500); 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(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(2)').should('have.text', 'B');
@ -61,7 +61,18 @@ describe('Modals: Inline', () => {
cy.get('ion-list ion-item:nth-child(4)').should('have.text', 'D'); cy.get('ion-list ion-item:nth-child(4)').should('have.text', 'D');
}); });
it('should have a div with .ion-page', () => { it('should have a div with .ion-page after opening', () => {
cy.get('#open-modal').click();
cy.get('ion-modal').children('.ion-page').should('exist'); 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');
})
}); });

4
angular/test/test-app/src/app/modal-inline/modal-inline.component.html
View File

@ -1,4 +1,6 @@
<ion-modal [isOpen]="true" [breakpoints]="[0.1, 0.5, 1]" [initialBreakpoint]="0.5"> <ion-button id="open-modal">Open Modal</ion-button>
<ion-modal [animated]="false" trigger="open-modal" [breakpoints]="[0.1, 0.5, 1]" [initialBreakpoint]="0.5">
<ng-template> <ng-template>
<ion-content> <ion-content>
<ion-list> <ion-list>