TypeError: Cannot set property 'search' of undefined - jasmine

Question

I have searched and cannot find an answer to my issue. I have an Angular 5 project and I'm trying to run my unit tests and I'm getting the error:
TypeError: Cannot set property 'search' of undefined
Here is my ts file:
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;
}
}
And here is my spec file:
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();
}));
});
I originally didn't have the line:
component.filter.search = 'test';
And I had the error:
TypeError: Cannot read property 'search' of null
So I searched for that one and found an article that said I needed to set it. Now I get this new error and really just can't find anything that fits as a solution.

Answer 1

I found my solution. Within the test environment my component.filter hadn't been initialized.
So I added:
component.filter = new ItemFilter();
And that fixed my issue. Pretty obvious now!