Angular 在角度单元测试（Karma）中使用NBAutoCompletedDirective会导致错误

我有一个问题要让星云NBAutoCompletedDirective在角度单元测试（Karma）中完全工作。 不知何故，NBAutoCompletedDirective似乎无法获得对其宿主本机元素的有效引用。设置输入字段值时，会发生错误，自动完成功能不起作用

控制台中的错误是：

context.js:255 ERROR TypeError: Cannot read property 'handleDisplayFn' of undefined
at NbAutocompleteDirective.getDisplayValue (VM2394 vendor.js:124996)
at NbAutocompleteDirective.handleInput (VM2394 vendor.js:124907)
at listenerFn (VM2394 vendor.js:125227)
at executeListenerWithErrorHandling (core.js:14317)
at wrapListenerIn_markDirtyAndPreventDefault (core.js:14352)
at HTMLInputElement.apply (dom_renderer.ts:66)
at ZoneDelegate.invokeTask (zone.js:421)
at ProxyZoneSpec.onInvokeTask (zone-testing.js:323)
at ZoneDelegate.invokeTask (zone.js:420)
at Object.onInvokeTask (zone.js:295)

我怎样才能让它正常工作？提前谢谢

重现场景：
文件：自动完成showcase.component.ts

import { ChangeDetectionStrategy, Component, ViewChild, OnInit } from '@angular/core';
import { Observable, of } from 'rxjs';
import { map } from 'rxjs/operators';

@Component({
  selector: 'nb-autocomplete-showcase',
  changeDetection: ChangeDetectionStrategy.OnPush,
  templateUrl: './autocomplete-showcase.component.html',
})
export class AutocompleteShowcaseComponent implements OnInit {

  options: string[];
  filteredOptions$: Observable<string[]>;
  selectedValue: string;

  @ViewChild('autoInput') input;

  ngOnInit() {
    this.options = ['Option 1', 'Option 2', 'Option 3'];
    this.filteredOptions$ = of(this.options);
  }

  private filter(value: string): string[] {
    const filterValue = value.toLowerCase();
    return this.options.filter(optionValue => optionValue.toLowerCase().includes(filterValue));
  }

  getFilteredOptions(value: string): Observable<string[]> {
    return of(value).pipe(
      map(filterString => this.filter(filterString)),
    );
  }

  onChange() {
    this.filteredOptions$ = this.getFilteredOptions(this.input.nativeElement.value);
  }

  onSelectionChange($event) {
    this.selectedValue = $event;
    this.filteredOptions$ = this.getFilteredOptions($event);
  }

}

import {ComponentFixture, fakeAsync, flush, TestBed, tick, waitForAsync} from '@angular/core/testing';
import {NbAutocompleteModule, NbThemeModule} from '@nebular/theme';
import {By} from '@angular/platform-browser';
import {AutocompleteShowcaseComponent} from './autocomplete-showcase.component';

describe('Component: AutocompleteShowcaseComponent', () => {

  let fixture: ComponentFixture<AutocompleteShowcaseComponent>;
  let component: AutocompleteShowcaseComponent;
  let element: HTMLElement;

  beforeEach(waitForAsync(() => {
    TestBed.configureTestingModule({
      declarations: [AutocompleteShowcaseComponent],
      imports: [
        NbAutocompleteModule,
        NbThemeModule.forRoot()
      ],
    });

    TestBed.compileComponents()
      .then(() => {
        fixture = TestBed.createComponent(AutocompleteShowcaseComponent);
        component = fixture.debugElement.componentInstance;
        element = fixture.debugElement.nativeElement;
      });
  }));

  describe('test field autocomplete works', () => {
    it('should show options', fakeAsync(() => {
      const nativeElement = fixture.debugElement.query(By.css('input')).nativeElement;
      nativeElement.value = 'te';
      nativeElement.dispatchEvent(new Event('input'));
      tick();
      fixture.detectChanges();
      expect(component.selectedValue).not.toBeNull();
      flush();
    }));
  });
});

从'@angular/core'导入{ChangeDetectionStrategy，Component，ViewChild，OnInit}；
从'rxjs'导入{可观察的}；
从“rxjs/operators”导入{map}；
@组成部分({
选择器：“nb自动完成展示”，
changeDetection:ChangeDetectionStrategy.OnPush，
templateUrl:“./autocomplete showcase.component.html”，
})
导出类AutocompleteShowcaseComponent实现OnInit{
选项：字符串[]；
filteredOptions$：可观察；
selectedValue:字符串；
@ViewChild（“自动输入”）输入；
恩戈尼尼特（）{
this.options=['Option 1'，'Option 2'，'Option 3']；
this.filteredOptions$=of（this.options）；
}
专用筛选器（值：字符串）：字符串[]{
常量filterValue=value.toLowerCase（）；
返回this.options.filter（optionValue=>optionValue.toLowerCase（）.includes（filterValue））；
}
getFilteredOptions（值：字符串）：可观察{
返回（值）。管道(
映射（filterString=>this.filter（filterString）），
);
}
onChange（）{
this.filteredOptions$=this.getFilteredOptions（this.input.nativeElement.value）；
}
onSelectionChange（$event）{
this.selectedValue=$event；
this.filteredOptions$=this.getFilteredOptions（$event）；
}
}

文件：自动完成showcase.component.html

<input #autoInput
       nbInput
       type="text"
       (input)="onChange()"
       placeholder="Enter value"
       [nbAutocomplete]="auto" />
<nb-autocomplete #auto (selectedChange)="onSelectionChange($event)">
  <nb-option *ngFor="let option of filteredOptions$ | async" [value]="option">
    {{ option }}
  </nb-option>
</nb-autocomplete>

{{option}}

文件：自动完成showcase.component.spec.ts

import { ChangeDetectionStrategy, Component, ViewChild, OnInit } from '@angular/core';
import { Observable, of } from 'rxjs';
import { map } from 'rxjs/operators';

@Component({
  selector: 'nb-autocomplete-showcase',
  changeDetection: ChangeDetectionStrategy.OnPush,
  templateUrl: './autocomplete-showcase.component.html',
})
export class AutocompleteShowcaseComponent implements OnInit {

  options: string[];
  filteredOptions$: Observable<string[]>;
  selectedValue: string;

  @ViewChild('autoInput') input;

  ngOnInit() {
    this.options = ['Option 1', 'Option 2', 'Option 3'];
    this.filteredOptions$ = of(this.options);
  }

  private filter(value: string): string[] {
    const filterValue = value.toLowerCase();
    return this.options.filter(optionValue => optionValue.toLowerCase().includes(filterValue));
  }

  getFilteredOptions(value: string): Observable<string[]> {
    return of(value).pipe(
      map(filterString => this.filter(filterString)),
    );
  }

  onChange() {
    this.filteredOptions$ = this.getFilteredOptions(this.input.nativeElement.value);
  }

  onSelectionChange($event) {
    this.selectedValue = $event;
    this.filteredOptions$ = this.getFilteredOptions($event);
  }

}

import {ComponentFixture, fakeAsync, flush, TestBed, tick, waitForAsync} from '@angular/core/testing';
import {NbAutocompleteModule, NbThemeModule} from '@nebular/theme';
import {By} from '@angular/platform-browser';
import {AutocompleteShowcaseComponent} from './autocomplete-showcase.component';

describe('Component: AutocompleteShowcaseComponent', () => {

  let fixture: ComponentFixture<AutocompleteShowcaseComponent>;
  let component: AutocompleteShowcaseComponent;
  let element: HTMLElement;

  beforeEach(waitForAsync(() => {
    TestBed.configureTestingModule({
      declarations: [AutocompleteShowcaseComponent],
      imports: [
        NbAutocompleteModule,
        NbThemeModule.forRoot()
      ],
    });

    TestBed.compileComponents()
      .then(() => {
        fixture = TestBed.createComponent(AutocompleteShowcaseComponent);
        component = fixture.debugElement.componentInstance;
        element = fixture.debugElement.nativeElement;
      });
  }));

  describe('test field autocomplete works', () => {
    it('should show options', fakeAsync(() => {
      const nativeElement = fixture.debugElement.query(By.css('input')).nativeElement;
      nativeElement.value = 'te';
      nativeElement.dispatchEvent(new Event('input'));
      tick();
      fixture.detectChanges();
      expect(component.selectedValue).not.toBeNull();
      flush();
    }));
  });
});

从'@angular/core/testing'导入{ComponentFixture，fakeAsync，flush，TestBed，tick，waitForAsync}；
从“@nebular/theme”导入{NbAutocompleteModule，NbThemeModule}；
从“@angular/platform browser”导入{By}”；
从“./AutocompleteShowcaseComponent”导入{AutocompleteShowcaseComponent}；
描述（'Component:AutocompleteShowcaseComponent'，（）=>{
let夹具：组件夹具；
let组件：自动完成ShowCase组件；
let元素：HTMLElement；
每次之前（waitForAsync（（）=>{
TestBed.configureTestingModule({
声明：[AutocompleteShowcaseComponent]，
进口：[
NbAutocompleteModule，
NbThemeModule.forRoot（）的
],
});
TestBed.compileComponents（）
.然后（（）=>{
fixture=TestBed.createComponent（自动完成ShowCaseComponent）；
组件=fixture.debugElement.componentInstance；
元素=fixture.debugElement.nativeElement；
});
}));
描述（'测试字段自动完成工作'，（）=>{
它（'应该显示选项'，fakeAsync（（）=>{
const nativeElement=fixture.debugElement.query（By.css（'input'））.nativeElement；
nativeElement.value='te'；
nativeElement.dispatchEvent（新事件（“输入”）；
勾选（）；
fixture.detectChanges（）；
expect（component.selectedValue）.not.toBeNull（）；
冲洗（）；
}));
});
});