[英]Angular input event unit testing
I have unit test case to test global filter function with input event in angular application.我有单元测试用例来测试全局过滤器 function 与 angular 应用程序中的输入事件。 I'm not sure if this is an angular version problem or if I'm missing anything from the test case.我不确定这是否是 angular 版本问题,或者我是否缺少测试用例中的任何内容。
Environment: Angular CLI: 12.2.6 Node: 14.17.6环境:Angular CLI:12.2.6 节点:14.17.6
Here's the error;这是错误;
TypeError: Cannot read properties of null (reading 'nativeElement')
Home.component.ts主页.component.ts
filterGlobal(dt: any, event){
dt.filterGlobal(event.target.value, 'contains')
}
Home.component.html主页.component.html
<p-table class="filterTable" #dt [columns]="cols" [value]="cars">
<ng-template pTemplate="caption">
<div style="text-align: right">
<i class="pi pi-search" style="margin:4px 4px 0 0"></i>
<input type="text" class="globalFilter" pInputText size="50" placeholder="Global Filter" (input)="dt.filterGlobal($event.target.value, 'contains')" style="width:auto">
</div>
</ng-template>
<ng-template pTemplate="header" let-columns>
<tr>
<th *ngFor="let col of columns">
{{col.header}}
</th>
</tr>
<tr>
<th *ngFor="let col of columns" [ngSwitch]="col.field">
<input *ngSwitchCase="'brand'" class="brandFilter" pInputText type="text" (input)="dt.filter($event.target.value, col.field, col.filterMatchMode)">
</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-rowData let-columns="columns">
<tr>
<td *ngFor="let col of columns">
{{rowData[col.field]}}
</td>
</tr>
</ng-template>
</p-table>
Home.component.spec.ts Home.component.spec.ts
it('should use global filter and show 1 items', fakeAsync(() => {
fixture = TestBed.createComponent(HomeComponent);
app = fixture.debugElement.componentInstance;
fixture.detectChanges();
const globalFilter = fixture.debugElement.query(By.css(".globalFilter"));
globalFilter.nativeElement.value = "dsad231ff";
globalFilter.nativeElement.dispatchEvent(new Event("input"));
tick(300);
fixture.detectChanges();
const tableEl = fixture.debugElement.query(By.css(".filterTable"));
const bodyRows = tableEl.query(By.css('.p-datatable-tbody')).queryAll(By.css('tr'));
expect(bodyRows.length).toEqual(1);
}));
I tried this as well, still it didn't work for me这个我也试过了,还是不行
it('should click Send button with fakeAsync', fakeAsync(() => {
let buttonElement = fixture.debugElement.query(By.css('.globalFilter'));
spyOn(component, 'globalFilter');
//Trigger click event after spyOn
buttonElement.triggerEventHandler('put', null);
tick();
expect(component.globalFilter).toHaveBeenCalled();
}));
ERROR:错误:
TypeError: Cannot read properties of null (reading 'triggerEventHandler')
Appreciated if any help如果有任何帮助,不胜感激
it('input event function with fakeAsync', fakeAsync(() => {
fixture = TestBed.createComponent(HomeComponent);
const component = TestBed.get(HomeComponent);
spyOn(component, 'filterGlobal');
component.filterGlobal('$event', { target: { value: 'contains' }});
fixture.detectChanges();
tick();
expect(component.filterGlobal).toHaveBeenCalled();
}));
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.