我正在.html&BSModalService中使用BSModalRef组件,以显示弹出模式打开和关闭。在茉莉花上测试modalRef.hide()时出现错误-> TypeError:无法读取未定义的属性“ hide”
<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>
//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;
}
it('call cancel user', () =>{
component.cancelUser();
expect(component.modalRef.hide);
expect(component.selectedUser).toBeNull;
});
测试cancelUser()方法的预期结果应该是成功,但会失败并显示错误-> TypeError:无法读取未定义的属性“ hide”
答案 0 :(得分:1)
由于您的测试与html
的关联性更高,因此最好通过click
事件进行测试,而不是在openModal()
之前调用cancelUser
。
请尝试在 html 按钮(例如
)中添加ID <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();
});
答案 1 :(得分:0)
除非您调用PIL.Image.open
方法,否则PIL.Image
将不存在。在调用modalRef
之前尝试调用此方法。