Angular 如何单元测试（聚焦）元素/箭头行为？

Question

我已经实现了箭头行为来设置某些列表中的下一个/上一个选定元素。它应该只在不在 INPUT 类型的元素中时做出反应，所以我检查了

document.activeElement

使用 jasmine/spies 测试这个的正确方法是什么？

private isActiveElementAnInput(): boolean {
    let activeElement: Element | null = this.getActiveElement();
    const inputs: string[] = ['input', 'select', 'button', 'textarea'];
    return (activeElement && inputs.indexOf(activeElement.tagName.toLowerCase()) !== -1) || false;
}

private getActiveElement(): Element | null {
    return document.activeElement;
}

@HostListener('document:keydown.arrowright')
public arrowRight(): void {
    if (!this.isActiveElementAnInput()) {
        this.nextItem();
    }
}

Answer 1

好吧，这就是我最终的做法，我设置了一个真正的活动元素。

let inputElement: HTMLInputElement = combinedFixture.debugElement.query((By.css('input'))).nativeElement;
inputElement.focus();

我包装了我的组件，该组件需要测试具有

<ng-content>

.

的组件

外部组件有一个模板，其中包含一些额外的 HTML 元素（如

input

、

button

等）。