我在 .html 和 BSModalService、组件中使用 BSModalRef 来显示弹出模式的打开和关闭。在 Jasmine 中测试 modalRef.hide() 时出现错误 --> TypeError: Cannot read property 'hide' of undefined
组件.html
<div class="col col-md-2">
<button type="button" class="btn border btn-basic" (click)="openModal(userModal,1)"
style="border-radius: 50%">Search</button>
</div>
<ng-template #userModal>
<div class="modal-header">
<h4 class="modal-title pull-left">Search User</h4>
<button type="button" class="close pull-right" aria-label="Close" (click)="modalRef.hide()">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="row" style="margin-bottom:15px">
<div class="col-sm-12">
<input type="text" class="form-control" placeholder="Search" [(ngModel)]="searchText"
[ngModelOptions]="{standalone: true}" (ngModelChange)="searchUser($event.target.value)">
</div>
</div>
<div class="list-group scrollbar">
<a class="list-group-item" *ngFor="let usr of users" [class.active]="usr===selectedUsr"
(click)="setIndexUser(usr)">{{usr.First_Name + ' ' + usr.Last_Name}}</a>
</div>
</div>
<div class="modal-footer text-right">
<button class="col col-md-2 btn-basic" (click)="selectUser()">Ok</button>
<button class="col col-md-2 btn-basic" (click)="cancelUser()">Cancel</button>
</div>
</ng-template>
组件.ts
//open the User Pop-Up to select User.
openModal(template: TemplateRef<any>, type: number) {
if (type === 1) {
this.userService.getUserList().subscribe((res) => {
this.users = res.Data as User[];
this.modalRef = this.modelService.show(template);
},
(error) => {
this.toastr.error(error);
});
}
}
//cancel pop-up of selecting user.
cancelUser(){
this.modalRef.hide();
this.selectedUsr=null;
}
组件.spec.ts
it('call cancel user', () =>{
component.cancelUser();
expect(component.modalRef.hide);
expect(component.selectedUser).toBeNull;
});
Expected results on testing the cancelUser() method, should be success, but failing with error --> TypeError: Cannot read property 'hide' of undefined
最佳答案
由于您的测试与 html
相关性更强,因此如果您通过 click
事件进行测试,而不是之前调用 openModal()
,效果会更好取消用户
。
尝试将 id 放入 html 按钮中,例如
<div class="col col-md-2">
<button type="button"
class="btn border btn-basic"
id="open-btn"
(click)="openModal(userModal,1)"
style="border-radius: 50%">Search</button>
</div>
....
.....
<div class="modal-footer text-right">
<button class="col col-md-2 btn-basic" (click)="selectUser()">Ok</button>
<button id="cancel-btn" class="col col-md-2 btn-basic" (click)="cancelUser()">Cancel</button>
</div>
</ng-template>
并且在规范中,
it('call cancel user and set "selectedUser" as null', () =>{
spyOn(component.modalRef,'hide').and.callThrough();
spyOn(component,'cancelUser').and.callThrough();
const openBtn = fixture.nativeElement.querySelector('#open-btn');
openBtn.click();
fixture.detectChanges();
const cancelBtn = fixture.nativeElement.querySelector('#cancel-btn');
cancelBtn.click();
expect(component.modalRef.hide).toHaveBeenCalled();
expect(component.cancelUser).toHaveBeenCalled();
expect(component.selectedUser).toBeNull();
});
关于node.js - Jasmine 测试错误 - TypeError : Cannot read property 'hide' of undefined,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57548336/