Angular 앱에서 단위 테스트를 실행 중입니다. 드롭 다운을 클릭하면 ID 번호와 같은 프런트 엔드 데이터를 업데이트하여 응답해야합니다.
프런트 엔드 템플릿
<mat-menu #menuFilter="matMenu">
<button *ngFor="let customer of customers; let i = index"
(click)="onCustomerChange(i)" mat-menu-item class="selectCustomerData">
{{owner.id}}</button>
</mat-menu>
백엔드 유형 스크립트
onCustomerChange(i) {
console.log(this.customers[i].ownerid);
this.customerNumber = this.customers[i].ownerid;
this.customerName = this.customers[i].ownername;
}
실행할 테스트
it('should update the customer number on selecting a value from drop down',()=>{
fixture.detectChanges();
//what should I do here
})
우선 코드 개선입니다.
<mat-menu #menuFilter="matMenu">
<button *ngFor="let customer of customers"
(click)="onCustomerChange(customer)" mat-menu-item class="selectCustomerData">
{{owner.id}}</button>
</mat-menu>
그리고 TS에서 :
onCustomerChange(customerObj) {
console.log(customerObj.ownerid);
this.customerNumber = customerObj.ownerid;
this.customerName = customerObj.ownername;
}
이제 단위 테스트의 경우 :
it('should update the customer number on selecting a value from drop down', () => {
component.customers = [{ ownerid: 1, ownerName: 'Person1' }, { ownerid: 2, ownerName: 'Person2' }];
spyOn(component, 'onCustomerChange').and.callThrough();
const e = fixture.debugElement.nativeElement.querySelectorAll('.selectCustomerData');
e[1].click();
expect(component.onCustomerChange).toHaveBeenCalledWith({ ownerid: 2, ownerName: 'Person2' });
expect(component.customerNumber).toBe(2);
expect(component.customerName).toBe('Person2');
});
이 블로그를 참조하여 Angular Unit Testing에서 매우 정교한 예제를 얻을 수 있습니다 .
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다