在Angular单元测试Karma中使用NbAutocompleteDirective会导致错误

问题描述

我在使Nebular NbAutocompleteDirective完全在Angular单元测试（Karma）中工作时遇到问题。 NbAutocompleteDirective似乎无法以某种方式获取对其宿主本机元素的有效引用。设置输入字段值时，会发生错误并且自动完成功能不起作用。

控制台中的错误是：

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)

如何使它正常工作？预先感谢。

再现场景：
文件： autocomplete-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);
  }

}

文件： autocomplete-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>

文件： autocomplete-showcase.component.spec.ts

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();
    }));
  });
});

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）