时间戳

首页 > 解决方案 > TypeError：无法设置未定义的属性“搜索”

jasmine - TypeError：无法设置未定义的属性“搜索”

问题描述

我已经搜索并找不到我的问题的答案。我有一个 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;
  }

}

这是我的规范文件：

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

于是我搜索了那个，发现一篇文章说我需要设置它。现在我得到了这个新错误，真的找不到任何适合作为解决方案的东西。

标签： jasmineangular5

解决方案

我找到了我的解决方案。在测试环境中，我的 component.filter 尚未初始化。

所以我补充说：

component.filter = new ItemFilter();

这解决了我的问题。现在很明显！

推荐阅读