import { Component } from '@angular/core' ; import { ModalController as IonicModalController } from '@ionic/angular' ; import { createServiceFactory , SpectatorService } from '@ngneat/spectator' ; import { DesignTokenHelper } from '@kirbydesign/core' ; import { TestHelper } from '../../../testing/test-helper' ; import { WindowRef } from '../../../types/window-ref' ; import { AlertHelper } from './alert.helper' ; import { Overlay } from './modal.interfaces' ; @ Component ( { template : `
    <h2>Dummy Component</h2>
  ` , } ) class EmbeddedDummyComponent { } describe ( 'AlertHelper' , ( ) => { let spectator ; let alertHelper ; const backdropOpacity = '0.4' ; const createService = createServiceFactory ( { service : AlertHelper , imports : [ TestHelper . ionicModuleForTest ] , providers : [ { provide : WindowRef , useValue : < WindowRef > { nativeWindow : window } , } , ] , } ) ; beforeEach ( ( ) => { spectator = createService ( ) ; alertHelper = spectator . service ; } ) ; describe ( 'showAlert' , ( ) => { let overlay ; let ionModal ; let backdrop ; let ionModalController ; beforeEach ( async ( ) => { ionModalController = spectator . inject ( IonicModalController ) ; overlay = await alertHelper . showAlert ( { title : 'Alert' } ) ; ionModal = await ionModalController . getTop ( ) ; expect ( ionModal ) . toBeTruthy ( ) ; backdrop = ionModal . querySelector ( 'ion-backdrop' ) ; expect ( backdrop ) . toBeTruthy ( ) ; } ) ; afterEach ( async ( ) => { await overlay . dismiss ( ) ; } ) ; it ( 'alert should have correct backdrop style' , ( ) => { const modalShadow = ionModal . querySelector < HTMLElement > ( ':scope > .modal-shadow' ) ; expect ( modalShadow ) . toHaveComputedStyle ( { display : 'none' } ) ; expect ( backdrop ) . toHaveComputedStyle ( { opacity : backdropOpacity } ) ; } ) ; it ( 'modal wrapper should have correct max width' , ( ) => { const modalWrapper = ionModal . querySelector ( ':scope > .modal-wrapper' ) ; expect ( modalWrapper ) . toHaveComputedStyle ( { 'max-width' : DesignTokenHelper . compactModalMaxWidth ( ) , } ) ; } ) ; it ( 'alert should have correct backdrop style when opened on top of a modal' , async ( ) => { await overlay . dismiss ( ) ; const ionModalElement = await ionModalController . create ( { component : EmbeddedDummyComponent , } ) ; await ionModalElement . present ( ) ; const modalIonModal = await ionModalController . getTop ( ) ; expect ( modalIonModal ) . toBeTruthy ( ) ; overlay = await alertHelper . showAlert ( { title : 'Alert on top of modal' } ) ; ionModal = await ionModalController . getTop ( ) ; expect ( ionModal ) . toBeTruthy ( ) ; backdrop = ionModal . querySelector ( 'ion-backdrop' ) ; expect ( backdrop ) . toHaveComputedStyle ( { opacity : backdropOpacity } ) ; await ionModalElement . dismiss ( ) ; } ) ; } ) ; } ) ;