При написании тестовых спецификаций для angular я получаю следующую ошибку: «Ошибка типа: невозможно прочитать свойство« форма »из неопределенного»

Question

test case are failing when I'm trying to access the form define in component.It is failing with error.

TypeError: Невозможно прочитать свойство 'форма' из неопределенного в at UserContext. (http://localhost: 9876 / _karma_webpack_ / src / app / modules / advanced-search / advanced-search-component.spe c .ts: 153: 22 * ​​1004 *) в ZoneDelegate.invoke ( http://localhost: 9876 / _karma_webpack_ / node_modules / zone.js / dist / zone. js: 396: 1 ) в ProxyZoneSpe c .onInvoke (http://localhost: 9876 / _karma_webpack_ / node_modules / zone.js / dist / zone-testing. js: 305: 1 ) в ZoneDelegate.invoke (http://localhost: 9876 / _karma_webpack_ / node_modules / zone.js / dist / zone. js : 395: 1 ) в Zone.run (http://localhost: 9876 / _karma_webpack_ / node_modules / zone.js / dist / zone. js: 153: 1 ) в runInTestZone (http://localhost: 9876 / _karma_webpack_ / node_modules / zone.js / dist / zone-testing. js: 554: 1 ) в UserContext. (http://localhost: 9876 / _karma_webpack_ / node_modules / zone.js / dist / zone-testing. js: 569: 1 ) в

Компонент:

export class AdvancedSearchComponent implements OnInit, OnDestroy {

  public searchClicked: boolean = false;

  public mf: ModelForm;

  public searchContext: AdvancedSearchModelForm;

  public searchSubject: Subject<void> = new Subject();

  public get searchTerm() {
    return this.searchContext.searchTerm();
  }

  public get canSearch() {
    return this.mf.form && this.mf.form.valid;
  }


  /**
   * Constructor
   */
  constructor(
    private injector: Injector
  ) {
  }

  ngOnInit(): void {
    this.mf = new ModelForm(this.injector, new AdvancedSearchModelForm());
    console.log("init",this.mf);
    this.mf.form.setValidators(this.atLeastOneValidator());
  }

  ngOnDestroy(): void {

  }

  private atLeastOneValidator = () => {
    console.log("validator");

    return (group: FormGroup) => {
      const val = group.value;
      if ((val.labelSearch.labels && val.labelSearch.labels.length !== 0)
          || (val.objectTypes && val.objectTypes.length !== 0)
          || val.searchName) {
        return null;
      } else {
        return { message: 'Please input at least one value' };
      }
    };
  }

  public onSearchClick(): void {
    this.searchContext = this.mf.toObject();
    this.searchClicked = true;
    this.searchSubject.next();
  }

}

Coming to test cases

beforeEach(() => {
fixture = TestBed.createComponent(AdvancedSearchComponent);
component = fixture.componentInstance;
 });


it("should create", () => {
expect(component).toBeTruthy();
 });

it('should set the mf property on load', () => {
component.ngOnInit();
expect(component.mf).toBeDefined();

 });

it('should disable the "Search" button when the form is invalid', () => {
spyOnProperty(component.mf.form, 'valid').and.returnValue(false);
const button = fixture.debugElement.query(By.css('button[title="Search"]'));
expect(button.nativeElement.disabled).toBe(true);
expect(component.canSearch).toBe(false);
 });

, если я включаю fixture.detectChanges () в beforEach (), он завершается с ошибкой: ExpressionChangedAfterItHasBeenCheckedError: Выражение изменилось после его проверки. Предыдущее значение: 'null:'. Текущее значение: 'null:'.