模拟角度ContentChild Keyup事件

Question

我正在制作一个使用ng-content和@ContentChild的预先输入组件，以便我们可以从实现预先输入的组件中传入输入，并且可以由正在执行的应用程序设置输入的样式。 / p>

我知道它正在工作，因为我一直在手动测试它，但是我也想进行一些单元测试。这是整个组件类：

export class TypeaheadInputComponent implements AfterContentInit, OnDestroy {
    private destroy$: Subject<boolean> = new Subject<boolean>();

    @Input() placeholder = 'Search';
    @Input() typeaheadDebounceTime: number = 300;
    @Output() valueChanged: EventEmitter<string> = new EventEmitter<string>();
    @ContentChild('searchInput') searchInput: ElementRef;

    constructor() {}

    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 !== 'Enter' && ev.key !== 'ArrowUp' && ev.key !== 'ArrowDown' && ev.key !== 'Escape',
                ),
                debounceTime(this.typeaheadDebounceTime),
                distinctUntilChanged(),
                tap(() => this.valueChanged.emit(this.searchInput.nativeElement.value)),
                takeUntil(this.destroy$),
            )
            .subscribe();
    }
}

我真正要测试的是，当按下字母或数字键时，该值通过@Output发出。

我愿意使用TestBed创建组件，也可以只使用new TypeaheadInputComponent()。

对于如何最好地测试此组件的任何指导或方向，将不胜感激。