ジャスミンテストでng-boostrap modalとやりとりする方法

Question

私は角度@ ng-bootstrapライブラリhttps://ng-bootstrap.github.io/#/components/modalでブートストラップ4を使用しています。次のように私は、簡単な確認のポップアップモーダルメッセージを書いた：

<div id='modalContainer' ngbModalContainer class="modal-content" aria-labelledby='ModalConfirmPopup' aria-describedby='message'> 
    <div class="modal-header"> 
    <h4 id='title' class="modal-title">Confirm</h4> 
    <button id='dismissButton' type="button" class="close" aria-label="Close" (click)="activeModal.dismiss(false)"> 
     <span aria-hidden="true">&times;</span> 
    </button> 
    </div> 
    <div class="modal-body"> 
    <p id='message'>{{ message }}</p> 
    </div> 
    <div class="modal-footer"> 
    <button id='okButton' type='button' class='btn btn-primary' (click)='activeModal.close(true)'>OK</button> 
    <button id='cancelButton' type='button' class='btn btn-warning' (click)='activeModal.close(false)'>Cancel</button> 
    </div> 
</div> 

はtypescriptです：

import { Component, Input } from '@angular/core'; 
import { NgbModal, NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'; 
// 
@Component({ 
    selector: 'app-confirm4', 
    templateUrl: './confirm4.component.html' 
}) 
export class Confirm4Component { 
    // 
    @Input() message; 
    constructor(public activeModal: NgbActiveModal) {} 
    // 
} 

は興味深いことに、1は動的にコンポーネントをインスタンス化します。 ダイナミックコンポーネントのため、ジャスミンテストでも@NgModule entryComponentsにコンポーネントを追加する必要があります。

私の問題は、ジャスミンでコンポーネントをテストすることです。私の 'should test'の最初の10行には、アクションを確認したいホスティングコンポーネントで使用される基本コードが含まれています。コンポーネントをインスタンス化し、応答と解釈の両方を処理します。

it('should response with true when click the ok button...', async(() => { 
    let response: boolean; 
    const modalRef = modalService.open(Confirm4Component); 
    modalRef.componentInstance.message = 'click ok button'; 
    modalRef.result.then((userResponse) => { 
    console.log(`User's choice: ${userResponse}`) 
    response = userResponse; 
    }, (reason) => { 
    console.log(`User's dismissed: ${reason}`) 
    response = reason; 
    }); 
    // now what? 
    expect(response).toEqual(true); 
})); 

通常、1になります。

fixture = TestBed.createComponent(Confirm4Component); 

が、それは新しいインスタンスを作成します。では、[OK]ボタンをクリックするにはどうすればいいですか？

Answer 1

私はSEMJS会議でローカルにNgbModal Jasmine testsを見るよう促されました。私の解決策は以下の通りです：

it('should response with true when click the ok button...', async(() => { 
    console.log('Click ok button'); 
    let response: boolean; 
    modalRef.componentInstance.message = 'Click Ok button'; 
    modalRef.result.then((userResponse) => { 
    this.response = userResponse; 
    console.log(`Button clicked: ${userResponse}`) 
    }, (reason) => { 
    this.response = reason; 
    console.log(`X clicked: ${reason}`) 
    }); 
    let ok = (<HTMLElement>document.querySelector('#okButton')); 
    ok.click(); 
    setTimeout(() => { 
     expect(this.response).toEqual(true); 
    }, 10); 
}));