Испытательная угловая директива не создается

Question

Я пытаюсь провести модульное тестирование моей угловой директивы.У меня уже есть некоторые модульные тесты по другой директиве, которые работают просто отлично.Вот содержимое файла typeahead-input.directive.ts:

@Directive({
  selector: '[hsaTypeaheadInput]',
})
export class TypeaheadInputDirective implements AfterContentInit {
  private destroy$: Subject<boolean> = new Subject<boolean>();

  @Input() typeaheadDebounceTime: number = 300;
  @Output() valueChanged: EventEmitter<string> = new EventEmitter<string>();

  constructor(private searchInput: ElementRef) {}

  ngAfterContentInit() {
    this.setupTypeaheadObservable();
  }

  ngOnDestroy() {
    this.destroy$.next(true);
  }

  setupTypeaheadObservable() {
    fromEvent(this.searchInput.nativeElement, 'keyup')
      .pipe(
        map((ev: KeyboardEvent) => {
          if (ev && ev.key === 'Escape') {
            this.searchInput.nativeElement.blur();
          }
          return ev;
        }),
        filter(
          (ev: KeyboardEvent) =>
            ev.key !== TypeaheadKeys.ENTER &&
            ev.key !== TypeaheadKeys.UP &&
            ev.key !== TypeaheadKeys.DOWN &&
            ev.key !== TypeaheadKeys.ESC,
        ),
        debounceTime(this.typeaheadDebounceTime),
        distinctUntilChanged(),
        tap(() => this.valueChanged.emit(this.searchInput.nativeElement.value)),
        takeUntil(this.destroy$),
      )
      .subscribe();
  }
}

По сути, наблюдаемая создается для вывода нового значения после debounceTime.Наблюдаемое работает, когда я проверяю это в Stackblitz.Но сейчас я пытаюсь написать тесты для этого, и вот где я сталкиваюсь с проблемами.Что касается настройки теста, я создал TestHostComponent:

@Component({
  selector: 'app-test-host',
  template: `
    <input hsaTypeaheadInput type="text" />
  `,
})
class TestHostComponent implements AfterViewInit {
  @ViewChild(TypeaheadInputDirective) typeaheadInputDirective: TypeaheadInputDirective;
  public typeaheadDebounceTime: number = 300;
  valueChanged(newValue: string) {}

  ngAfterViewInit() {
    console.log(this.typeaheadInputDirective);
  }
}

Код AfterViewInit на этом тестовом компоненте просто для проверки доступности typeaheadInputDirective.Это не так, это не определено.

Вот остальные настройки теста:

describe('TypeaheadInputDirective', () => {
  let component: TestHostComponent;
  let fixture: ComponentFixture<TestHostComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [TestHostComponent, TypeaheadResultDirective],
    }).compileComponents();
  }));

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

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

Этот первый тест действительно работает;переменная component верна.Но директива никогда не создается и не запускается.Я не уверен, почему, хотя.Есть ли что-то, что я делаю неправильно, что препятствует созданию директивы?

Answer 1

При настройке тестового модуля у вас есть следующие объявления:

declarations: [TestHostComponent, TypeaheadResultDirective]

Однако ваш компонент использует TypeaheadInputDirective, который не объявлен в вашем тестовом модуле.

Вы должны обновить декларации, включив в них директиву:

declarations: [TestHostComponent, TypeaheadResultDirective, TypeaheadInputDirective]