我搜索过,无法找到问题的答案。我有一个Angular 5项目,我正在尝试运行我的单元测试,我收到了错误:
TypeError: Cannot set property 'search' of undefined
这是我的ts档案:
import { Component, OnChanges, OnInit, Input } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { CheckboxModule } from '@common-web-components';
import { ItemFilter } from '../../models/item-filter';
import { ItemBrandSearchResponse } from '../../models/item-brand-search-response';
import { ItemBrandSearchResponseService } from '../../services/item-brand-search-response.service';
@Component({
selector: 'app-item-brand-filter',
templateUrl: './item-brand-filter.component.html',
styleUrls: ['./item-brand-filter.component.css']
})
export class ItemBrandFilterComponent implements OnInit, OnChanges {
@Input()
filter: ItemFilter;
availableCount: number;
firstOpen: Boolean = true;
searching: Boolean = true;
itemBrands = new Array<ItemBrandSearchResponse>();
constructor(private itemBrandSearchResponseService: ItemBrandSearchResponseService) { }
ngOnInit() {
this.searching = true;
this.firstOpen = false;
this.getItemBrandForFilter();
}
ngOnChanges() {
if (!this.firstOpen) {
this.searching = true;
this.getItemBrandForFilter();
}
}
getItemBrandForFilter(): void {
this.itemBrandSearchResponseService.get(this.filter).subscribe(
results => {
this.itemBrands = results.data;
if (results.availableCount) {
this.availableCount = results.availableCount;
}
this.searching = false;
},
error => {
console.error('Error getting items');
}
);
}
getRouterLink(): string {
return this.filter.search === '' ? '/items' : '/items/search/' + this.filter.search;
}
}
这是我的spec文件:
import { FormsModule } from '@angular/forms';
import { async, ComponentFixture, TestBed, inject, fakeAsync, tick } from '@angular/core/testing';
import { HttpClientTestingModule } from '@angular/common/http/testing';
import { RouterTestingModule } from '@angular/router/testing';
import { CheckboxModule } from '@kehe-dev/connect-common-web-components';
import { ItemBrandFilterComponent } from './item-brand-filter.component';
import { ItemBrandSearchResponseService } from '../../services/item-brand-search-response.service';
import { ItemFilter } from '../../models/item-filter';
describe('Component: ItemBrandFilterComponent', () => {
let component: ItemBrandFilterComponent;
let fixture: ComponentFixture<ItemBrandFilterComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [
ItemBrandFilterComponent
],
imports: [
CheckboxModule,
FormsModule,
HttpClientTestingModule,
RouterTestingModule
],
providers: [
ItemBrandSearchResponseService
]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(ItemBrandFilterComponent);
component = fixture.componentInstance;
component.filter.search = 'test';
fixture.detectChanges();
});
it('should create', inject([ItemBrandSearchResponseService], (service: ItemBrandSearchResponseService) => {
expect(component).toBeTruthy();
}));
});
我原本没有这条线:
component.filter.search = 'test';
我有错误:
TypeError: Cannot read property 'search' of null
所以我搜索了那个,发现一篇文章说我需要设置它。现在我收到了这个新错误,实际上找不到适合作为解决方案的任何内容。
答案 0 :(得分:0)
我找到了解决方案。在测试环境中,我的component.filter尚未初始化。
所以我补充道:
component.filter = new ItemFilter();
这解决了我的问题。现在很明显!